From cdc5c535aca28249e7987322cf6a724ca20ef214 Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Tue, 3 Feb 2026 10:44:47 +0100
Subject: [PATCH 1/4] fix: add size x-large and center alignment to
 RadialProgress and StatusIcon

---
 .../src/ui/atoms/RadialProgress.tsx           | 18 ++++++++++---
 .../app-elements/src/ui/atoms/StatusIcon.tsx  | 26 ++++++++++++++++---
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/packages/app-elements/src/ui/atoms/RadialProgress.tsx b/packages/app-elements/src/ui/atoms/RadialProgress.tsx
index f0ab821fc..099fd326b 100644
--- a/packages/app-elements/src/ui/atoms/RadialProgress.tsx
+++ b/packages/app-elements/src/ui/atoms/RadialProgress.tsx
@@ -13,11 +13,16 @@ export interface RadialProgressProps extends SVGAttributes<SVGElement> {
    * When missing, default size is 42px, small is 24px
    * @default 'large'
    */
-  size?: "small" | "large"
+  size?: "small" | "large" | "x-large"
   /**
    * Optional icon to be rendered in the center of the circle
    */
   icon?: StatusIconProps["name"]
+
+  /**
+   * Optional alignment of the component
+   */
+  align?: "center"
 }
 
 /**
@@ -32,9 +37,10 @@ function RadialProgress({
   className,
   size = "large",
   icon,
+  align,
   ...rest
 }: RadialProgressProps): JSX.Element {
-  const sizePixels = size === "small" ? 24 : 42
+  const sizePixels = size === "small" ? 24 : size === "x-large" ? 56 : 42
   const viewBox = `0 0 ${sizePixels * 2} ${sizePixels * 2}`
   const circumference = sizePixels * 2 * Math.PI
   const emptyOffset =
@@ -46,7 +52,13 @@ function RadialProgress({
         data-testid="radial-progress"
         viewBox={viewBox}
         xmlns="http://www.w3.org/2000/svg"
-        className={cn("transform -rotate-90 rounded-full", className)}
+        className={cn(
+          "transform -rotate-90 rounded-full",
+          {
+            "mx-auto": align === "center",
+          },
+          className,
+        )}
         width={sizePixels}
         height={sizePixels}
         {...rest}
diff --git a/packages/app-elements/src/ui/atoms/StatusIcon.tsx b/packages/app-elements/src/ui/atoms/StatusIcon.tsx
index 6a1284125..5ebf90d53 100644
--- a/packages/app-elements/src/ui/atoms/StatusIcon.tsx
+++ b/packages/app-elements/src/ui/atoms/StatusIcon.tsx
@@ -23,7 +23,11 @@ export interface StatusIconProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * padding around the icon can bne: 'none' | 'small' | 'large'
    */
-  gap?: "none" | "small" | "medium" | "large"
+  gap?: "none" | "small" | "medium" | "large" | "x-large"
+  /**
+   * Optional alignment of the component
+   */
+  align?: "center"
 }
 
 export const StatusIcon: React.FC<StatusIconProps> = ({
@@ -31,15 +35,30 @@ export const StatusIcon: React.FC<StatusIconProps> = ({
   className,
   background = "none",
   gap = "none",
+  align,
   ...rest
 }) => {
+  const iconSize = (gap?: StatusIconProps["gap"]): string | undefined => {
+    switch (gap) {
+      case "x-large":
+        return "1.65rem"
+      case "large":
+        return "1.25rem"
+      default:
+        return undefined
+    }
+  }
+
   return (
     <div
       className={cn([
-        "inline-block",
+        // alignment
+        { "mx-auto block": align === "center" },
+        { "inline-block": align !== "center" },
         "align-middle",
         "w-fit",
         // padding
+        { "p-[14px]": gap === "x-large" },
         { "p-[10px]": gap === "large" },
         { "p-[6px]": gap === "medium" },
         { "p-[3px]": gap === "small" },
@@ -55,6 +74,7 @@ export const StatusIcon: React.FC<StatusIconProps> = ({
         { "bg-teal border-teal text-white": background === "teal" },
         { "bg-white border-gray-200": background === "white" },
         { "bg-gray-800 border-gray-800 text-white": background === "black" },
+
         // className
         className,
       ])}
@@ -62,7 +82,7 @@ export const StatusIcon: React.FC<StatusIconProps> = ({
     >
       <Icon
         name={name}
-        size={gap === "large" ? "1.25rem" : undefined}
+        size={iconSize(gap)}
         weight={background !== "none" ? "bold" : undefined}
       />
     </div>

From 7057e93a3a85e39f76d0e01d4032af07ef1bfcc9 Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Tue, 3 Feb 2026 10:46:04 +0100
Subject: [PATCH 2/4] feat: add fileArrowDown icon

---
 packages/app-elements/src/ui/atoms/Icon/icons.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/app-elements/src/ui/atoms/Icon/icons.tsx b/packages/app-elements/src/ui/atoms/Icon/icons.tsx
index 2bf7c1aba..5795249a2 100644
--- a/packages/app-elements/src/ui/atoms/Icon/icons.tsx
+++ b/packages/app-elements/src/ui/atoms/Icon/icons.tsx
@@ -53,6 +53,7 @@ export const iconMapping = {
   equals: phosphor.EqualsIcon,
   eye: phosphor.EyeIcon,
   eyeSlash: phosphor.EyeSlashIcon,
+  fileArrowDown: phosphor.FileArrowDownIcon,
   flag: phosphor.FlagIcon,
   folderOpen: phosphor.FolderOpenIcon,
   funnel: phosphor.FunnelIcon,

From 58ff235eda88be41c5c741fc8640d7fc8d238f2c Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Tue, 3 Feb 2026 14:40:19 +0100
Subject: [PATCH 3/4] fix: add x-small size to modal

---
 .../app-elements/src/ui/composite/Modal.tsx   |  5 +-
 .../src/stories/composite/Modal.stories.tsx   | 61 +++++++++++++++++++
 2 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/packages/app-elements/src/ui/composite/Modal.tsx b/packages/app-elements/src/ui/composite/Modal.tsx
index f8bb93b08..4716cf04e 100644
--- a/packages/app-elements/src/ui/composite/Modal.tsx
+++ b/packages/app-elements/src/ui/composite/Modal.tsx
@@ -27,7 +27,7 @@ export type ModalProps = {
   /** Modal content */
   children: React.ReactNode
   /** Max width preset */
-  size?: "large" | "small"
+  size?: "large" | "small" | "x-small"
 }
 
 export const Modal: React.FC<
@@ -98,6 +98,7 @@ export const Modal: React.FC<
               "fixed z-70 w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
               size === "large" && "max-w-155 md:w-155",
               size === "small" && "max-w-105 md:w-105",
+              size === "x-small" && "max-w-80 md:w-80",
             )}
             data-testid="modal"
           >
@@ -138,7 +139,7 @@ Modal.Body = ({ children }) => {
 
 Modal.Footer = ({ children }) => {
   return (
-    <div className="flex-none px-6 py-4" data-testid="modal-footer">
+    <div className="flex-none px-6 py-4 space-y-2" data-testid="modal-footer">
       {children}
     </div>
   )
diff --git a/packages/docs/src/stories/composite/Modal.stories.tsx b/packages/docs/src/stories/composite/Modal.stories.tsx
index 1981882db..383b8defb 100644
--- a/packages/docs/src/stories/composite/Modal.stories.tsx
+++ b/packages/docs/src/stories/composite/Modal.stories.tsx
@@ -8,6 +8,10 @@ import {
 import type { Meta, StoryFn } from "@storybook/react-vite"
 import { useRef, useState } from "react"
 import { Button } from "#ui/atoms/Button"
+import { Icon } from "#ui/atoms/Icon"
+import { Spacer } from "#ui/atoms/Spacer"
+import { StatusIcon } from "#ui/atoms/StatusIcon"
+import { Text } from "#ui/atoms/Text"
 import { Modal } from "#ui/composite/Modal"
 import { InputSelect } from "#ui/forms/InputSelect"
 
@@ -169,3 +173,60 @@ export const WithInput: StoryFn = () => {
     </div>
   )
 }
+
+/**
+ * Modal as dialog without header
+ */
+export const AsDialog: StoryFn = () => {
+  const [show, setShow] = useState(false)
+
+  const handleClose = () => setShow(false)
+  const handleShow = () => setShow(true)
+
+  return (
+    <div>
+      <Button onClick={handleShow}>Open modal</Button>
+      <Modal show={show} onClose={handleClose} size="x-small">
+        <Modal.Body>
+          <Spacer top="4" bottom="4">
+            <StatusIcon
+              name="check"
+              background="green"
+              gap="x-large"
+              align="center"
+            />
+          </Spacer>
+          <Text weight="semibold" align="center" tag="div">
+            Your coupons are ready.
+          </Text>
+          <Text align="center" tag="div" size="x-small" variant="info">
+            Download now or find them later in Imports.
+          </Text>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="primary"
+            onClick={() => {
+              alert("Downloaded!")
+              handleClose()
+            }}
+            fullWidth
+            alignItems="center"
+          >
+            <Icon name="fileArrowDown" />
+            Download (CSV)
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={() => {
+              handleClose()
+            }}
+            fullWidth
+          >
+            Cancel
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  )
+}

From dcedd27820f7d816e7cc5056b20127198443dfcc Mon Sep 17 00:00:00 2001
From: Giuseppe Ciotola <30926550+gciotola@users.noreply.github.com>
Date: Tue, 3 Feb 2026 18:32:11 +0100
Subject: [PATCH 4/4] fix: update modal css

---
 packages/app-elements/src/ui/composite/Modal.tsx      |  8 +++-----
 packages/docs/src/stories/composite/Modal.stories.tsx | 10 ++++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/app-elements/src/ui/composite/Modal.tsx b/packages/app-elements/src/ui/composite/Modal.tsx
index 4716cf04e..8247d45f7 100644
--- a/packages/app-elements/src/ui/composite/Modal.tsx
+++ b/packages/app-elements/src/ui/composite/Modal.tsx
@@ -56,7 +56,7 @@ export const Modal: React.FC<
     <ModalContext.Provider value={{ onClose, modalId }}>
       <div
         className={cn(
-          "bg-white rounded shadow-xl",
+          "bg-white rounded-md shadow-xl",
           "max-h-[90vh] flex flex-col",
         )}
         role="dialog"
@@ -132,14 +132,12 @@ Modal.Header = ({ children }) => {
 }
 
 Modal.Body = ({ children }) => {
-  return (
-    <div className="px-6 py-4 overflow-y-auto flex-1 min-h-0">{children}</div>
-  )
+  return <div className="p-6 overflow-y-auto flex-1 min-h-0">{children}</div>
 }
 
 Modal.Footer = ({ children }) => {
   return (
-    <div className="flex-none px-6 py-4 space-y-2" data-testid="modal-footer">
+    <div className="flex-none p-6 space-y-2" data-testid="modal-footer">
       {children}
     </div>
   )
diff --git a/packages/docs/src/stories/composite/Modal.stories.tsx b/packages/docs/src/stories/composite/Modal.stories.tsx
index 383b8defb..933a8380e 100644
--- a/packages/docs/src/stories/composite/Modal.stories.tsx
+++ b/packages/docs/src/stories/composite/Modal.stories.tsx
@@ -188,7 +188,7 @@ export const AsDialog: StoryFn = () => {
       <Button onClick={handleShow}>Open modal</Button>
       <Modal show={show} onClose={handleClose} size="x-small">
         <Modal.Body>
-          <Spacer top="4" bottom="4">
+          <Spacer bottom="4">
             <StatusIcon
               name="check"
               background="green"
@@ -199,9 +199,11 @@ export const AsDialog: StoryFn = () => {
           <Text weight="semibold" align="center" tag="div">
             Your coupons are ready.
           </Text>
-          <Text align="center" tag="div" size="x-small" variant="info">
-            Download now or find them later in Imports.
-          </Text>
+          <Spacer top="1">
+            <Text align="center" tag="div" size="small" variant="info">
+              Download now or find them later in Imports.
+            </Text>
+          </Spacer>
         </Modal.Body>
         <Modal.Footer>
           <Button