From a742e81b9adee11c6b808d98af92e46c394d8e56 Mon Sep 17 00:00:00 2001
From: lisa <llupi@scaleway.com>
Date: Tue, 18 Nov 2025 14:59:29 +0100
Subject: [PATCH 1/3] feat: small alert

---
 .changeset/dirty-parks-kick.md                |   5 +
 .../Alert/__stories__/Size.stories.tsx        |  57 +++++++++
 .../Alert/__stories__/index.stories.tsx       |   1 +
 .../__snapshots__/index.test.tsx.snap         | 119 ++++++++++++------
 .../components/Alert/__tests__/index.test.tsx |   6 +
 packages/ui/src/components/Alert/index.tsx    |  24 +++-
 .../ui/src/components/Alert/styles.css.ts     |  22 +++-
 7 files changed, 189 insertions(+), 45 deletions(-)
 create mode 100644 .changeset/dirty-parks-kick.md
 create mode 100644 packages/ui/src/components/Alert/__stories__/Size.stories.tsx

diff --git a/.changeset/dirty-parks-kick.md b/.changeset/dirty-parks-kick.md
new file mode 100644
index 0000000000..fbe48528ca
--- /dev/null
+++ b/.changeset/dirty-parks-kick.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Alert`: add "size" prop
diff --git a/packages/ui/src/components/Alert/__stories__/Size.stories.tsx b/packages/ui/src/components/Alert/__stories__/Size.stories.tsx
new file mode 100644
index 0000000000..0a3d1affe3
--- /dev/null
+++ b/packages/ui/src/components/Alert/__stories__/Size.stories.tsx
@@ -0,0 +1,57 @@
+import type { Decorator } from '@storybook/react-vite'
+import type { ComponentProps } from 'react'
+import { Stack } from '../../Stack'
+import { Alert } from '..'
+
+export const Size = (props: ComponentProps<typeof Alert>) => (
+  <>
+    <Alert
+      {...props}
+      onClickButton={() => alert('Button clicked')}
+      title="title"
+    >
+      This is an Alert.
+    </Alert>
+
+    <Alert
+      {...props}
+      onClickButton={() => alert('Button clicked')}
+      size="small"
+      title="title"
+    >
+      This is a small alert
+    </Alert>
+    <Alert
+      {...props}
+      buttonText="More info"
+      onClickButton={() => alert('Button clicked')}
+      size="small"
+      title="title"
+    >
+      Small alert with long children. Lorem ipsum dolor sit amet, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+      reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+      qui officia deserunt mollit anim id est laborum.,
+    </Alert>
+  </>
+)
+
+Size.decorators = [
+  StoryComponent => (
+    <Stack gap={2}>
+      <StoryComponent />
+    </Stack>
+  ),
+] as Decorator[]
+
+Size.parameters = {
+  docs: {
+    description: {
+      story:
+        'Using `sentiment` prop you can change the sentiment of the component. Each sentiment has a default icon set.',
+    },
+  },
+}
diff --git a/packages/ui/src/components/Alert/__stories__/index.stories.tsx b/packages/ui/src/components/Alert/__stories__/index.stories.tsx
index 373aa35200..b253b417f0 100644
--- a/packages/ui/src/components/Alert/__stories__/index.stories.tsx
+++ b/packages/ui/src/components/Alert/__stories__/index.stories.tsx
@@ -11,5 +11,6 @@ export { Title } from './Title.stories'
 export { Button } from './Button.stories'
 export { Link } from './Link.stories'
 export { Sentiments } from './Sentiments.stories'
+export { Size } from './Size.stories'
 export { Closable } from './Closable.stories'
 export { LongChildren } from './LongChildren.stories'
diff --git a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap
index ae3eb425b8..c594ae9d33 100644
--- a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,15 +1,62 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`alert > renders correctly small 1`] = `
+<DocumentFragment>
+  <div
+    data-testid="testing"
+  >
+    <div
+      class="small styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles_size_small__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+    >
+      <div
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+      >
+        <div
+          class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+          style="--_4k0ekn3: 1 1 auto;"
+        >
+          <svg
+            class="styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_sentiment_danger__vbm0wq5 styles_size_large__vbm0wq8 styles_undefined_compound_36__vbm0wq1k"
+            viewBox="0 0 20 20"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+              fill-rule="evenodd"
+            />
+          </svg>
+          <div
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            style="--_4k0ekn3: 1 1 auto;"
+          >
+            <span
+              class="style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_danger__m4c9owd style_prominence_default__m4c9owi style_variant_bodySmallStronger__m4c9owp style_disabled_false__m4c9ow1b style_undefined_compound_8__m4c9ow1k style_undefined_compound_72__m4c9ow3c"
+            >
+              title
+            </span>
+            <p
+              class="style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_prominence_default__m4c9owi style_variant_bodySmall__m4c9own style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
+            >
+              Sample Alert
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`alert > renders correctly with all sentiments > renders correctly sentiment 'danger' 1`] = `
 <DocumentFragment>
   <div
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -26,7 +73,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -48,10 +95,10 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_info__1b838gx2 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_info__1b838gx2 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -67,7 +114,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -89,10 +136,10 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_neutral__1b838gx5 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_neutral__1b838gx5 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -111,7 +158,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -133,10 +180,10 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_success__1b838gx3 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_success__1b838gx3 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -152,7 +199,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -174,10 +221,10 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_warning__1b838gx4 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_warning__1b838gx4 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -194,7 +241,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -216,10 +263,10 @@ exports[`alert > renders correctly with buttonText and onClickButton 1`] = `
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -236,7 +283,7 @@ exports[`alert > renders correctly with buttonText and onClickButton 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -247,7 +294,7 @@ exports[`alert > renders correctly with buttonText and onClickButton 1`] = `
           </div>
         </div>
         <button
-          class="styles__1b838gx8 styles__e1wcoe0 styles_size_small__e1wcoe3 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_danger__e1wcoe9 styles_undefined_compound_2__e1wcoen"
+          class="styles_medium__1b838gxa styles__e1wcoe0 styles_size_small__e1wcoe3 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_filled__e1wcoeg styles_sentiment_danger__e1wcoe9 styles_undefined_compound_2__e1wcoen"
           type="button"
         >
           Button
@@ -264,10 +311,10 @@ exports[`alert > renders correctly with children as component 1`] = `
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -284,7 +331,7 @@ exports[`alert > renders correctly with children as component 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p>
@@ -304,10 +351,10 @@ exports[`alert > renders correctly with closable and onClose 1`] = `
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -324,7 +371,7 @@ exports[`alert > renders correctly with closable and onClose 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -337,7 +384,7 @@ exports[`alert > renders correctly with closable and onClose 1`] = `
       </div>
       <button
         aria-label="close"
-        class="styles__1b838gx9 styles__e1wcoe0 styles_size_small__e1wcoe3 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_ghost__e1wcoei styles_sentiment_neutral__e1wcoed styles_undefined_compound_24__e1wcoe19"
+        class="styles__1b838gxc styles__e1wcoe0 styles_size_small__e1wcoe3 styles_fullWidth_false__e1wcoe6 styles_disabled_false__e1wcoek styles_variant_ghost__e1wcoei styles_sentiment_neutral__e1wcoed styles_undefined_compound_24__e1wcoe19"
         type="button"
       >
         <svg
@@ -360,10 +407,10 @@ exports[`alert > renders correctly with default values 1`] = `
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -380,7 +427,7 @@ exports[`alert > renders correctly with default values 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -402,10 +449,10 @@ exports[`alert > renders correctly with disabled 1`] = `
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -422,7 +469,7 @@ exports[`alert > renders correctly with disabled 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -433,7 +480,7 @@ exports[`alert > renders correctly with disabled 1`] = `
           </div>
         </div>
         <button
-          class="styles__1b838gx8 styles__e1wcoe0 styles_size_small__e1wcoe3 styles_fullWidth_false__e1wcoe6 styles_disabled_true__e1wcoej styles_variant_filled__e1wcoeg styles_sentiment_danger__e1wcoe9 styles_undefined_compound_2__e1wcoen"
+          class="styles_medium__1b838gxa styles__e1wcoe0 styles_size_small__e1wcoe3 styles_fullWidth_false__e1wcoe6 styles_disabled_true__e1wcoej styles_variant_filled__e1wcoeg styles_sentiment_danger__e1wcoe9 styles_undefined_compound_2__e1wcoen"
           disabled=""
           type="button"
         >
@@ -451,10 +498,10 @@ exports[`alert > renders correctly with title 1`] = `
     data-testid="testing"
   >
     <div
-      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
+      class="styles__1b838gx0 styles_sentiment_danger__1b838gx1 styles_size_medium__1b838gx6 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
     >
       <div
-        class="styles__1b838gx6 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
+        class="styles__1b838gx8 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_space-between_xxsmall__toi52u6p"
       >
         <div
           class="styles__toi52u0 styles_alignItems_start_xxsmall__toi52u3j styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_1rem_xxsmall__toi52ud styles_justifyContent_normal_xxsmall__toi52u5d"
@@ -471,7 +518,7 @@ exports[`alert > renders correctly with title 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx7 styles__toi52u0 styles_alignItems_normal_xxsmall__toi52u31 styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u7j styles_gap_0.75rem_xxsmall__toi52u27 styles_justifyContent_normal_xxsmall__toi52u5d"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <span
diff --git a/packages/ui/src/components/Alert/__tests__/index.test.tsx b/packages/ui/src/components/Alert/__tests__/index.test.tsx
index d6e4aa2809..e9f45e4ed0 100644
--- a/packages/ui/src/components/Alert/__tests__/index.test.tsx
+++ b/packages/ui/src/components/Alert/__tests__/index.test.tsx
@@ -75,4 +75,10 @@ describe('alert', () => {
         Sample Alert
       </Alert>,
     ))
+  test('renders correctly small', () =>
+    shouldMatchSnapshot(
+      <Alert className="small" size="small" title="title">
+        Sample Alert
+      </Alert>,
+    ))
 })
diff --git a/packages/ui/src/components/Alert/index.tsx b/packages/ui/src/components/Alert/index.tsx
index 952b13efd5..f55ee2846e 100644
--- a/packages/ui/src/components/Alert/index.tsx
+++ b/packages/ui/src/components/Alert/index.tsx
@@ -47,6 +47,7 @@ type AlertProps = {
    */
   disabled?: boolean
   style?: CSSProperties
+  size?: 'medium' | 'small'
 }
 
 /**
@@ -63,6 +64,7 @@ export const Alert = ({
   className,
   disabled,
   'data-testid': dataTestId,
+  size = 'medium',
   style,
 }: AlertProps) => {
   const [opened, setOpened] = useState(true)
@@ -74,7 +76,7 @@ export const Alert = ({
 
   return (
     <Stack
-      className={`${className ? `${className} ` : ''}${alert({ sentiment })}`}
+      className={`${className ? `${className} ` : ''}${alert({ sentiment, size })}`}
       data-testid={dataTestId}
       direction="row"
       gap={1}
@@ -88,7 +90,12 @@ export const Alert = ({
         justifyContent="space-between"
         wrap
       >
-        <Stack alignItems="start" direction="row" flex="1 1 auto" gap={2}>
+        <Stack
+          alignItems="start"
+          direction="row"
+          flex="1 1 auto"
+          gap={size === 'small' ? 1 : 2}
+        >
           <Icon
             aria-hidden="true"
             prominence={sentiment === 'neutral' ? 'strong' : undefined}
@@ -96,6 +103,7 @@ export const Alert = ({
             size="large"
           />
           <Stack
+            alignItems="center"
             className={textAlert}
             direction="row"
             flex="1 1 auto"
@@ -103,12 +111,18 @@ export const Alert = ({
             wrap
           >
             {title ? (
-              <Text as="span" sentiment={sentiment} variant="bodyStronger">
+              <Text
+                as="span"
+                sentiment={sentiment}
+                variant={
+                  size === 'small' ? 'bodySmallStronger' : 'bodyStronger'
+                }
+              >
                 {title}
               </Text>
             ) : null}
             {typeof children === 'string' ? (
-              <Text as="p" variant="body">
+              <Text as="p" variant={size === 'small' ? 'bodySmall' : 'body'}>
                 {children}
               </Text>
             ) : (
@@ -118,7 +132,7 @@ export const Alert = ({
         </Stack>
         {buttonText ? (
           <Button
-            className={buttonAlert}
+            className={buttonAlert[size]}
             disabled={disabled}
             onClick={onClickButton}
             sentiment={sentiment}
diff --git a/packages/ui/src/components/Alert/styles.css.ts b/packages/ui/src/components/Alert/styles.css.ts
index 1e36528f3f..d64cca6037 100644
--- a/packages/ui/src/components/Alert/styles.css.ts
+++ b/packages/ui/src/components/Alert/styles.css.ts
@@ -1,5 +1,5 @@
 import { theme } from '@ultraviolet/themes'
-import { style } from '@vanilla-extract/css'
+import { style, styleVariants } from '@vanilla-extract/css'
 import type { RecipeVariants } from '@vanilla-extract/recipes'
 import { recipe } from '@vanilla-extract/recipes'
 import type { AlertSentiment } from './type'
@@ -16,7 +16,6 @@ function createStyleAlert(sentiment: AlertSentiment) {
 export const alert = recipe({
   base: {
     borderRadius: theme.radii.default,
-    padding: theme.space[2],
   },
   variants: {
     sentiment: {
@@ -30,9 +29,18 @@ export const alert = recipe({
         borderLeft: `4px solid ${theme.colors.neutral.borderStronger}`,
       },
     },
+    size: {
+      medium: {
+        padding: theme.space[2],
+      },
+      small: {
+        padding: theme.space['1.5'],
+      },
+    },
   },
   defaultVariants: {
     sentiment: 'danger',
+    size: 'medium',
   },
 })
 
@@ -42,10 +50,16 @@ export const wrapAlert = style({
 
 export const textAlert = style({
   color: theme.colors.neutral.text,
+  paddingTop: theme.space['0.25'],
 })
 
-export const buttonAlert = style({
-  marginLeft: theme.space[5],
+export const buttonAlert = styleVariants({
+  medium: {
+    marginLeft: theme.space[5],
+  },
+  small: {
+    marginLeft: theme.space[3],
+  },
 })
 
 export const buttonCloseAlert = style({

From bd3225e208f81d56c85740d6f13f607b5b4e3f44 Mon Sep 17 00:00:00 2001
From: lisa <llupi@scaleway.com>
Date: Tue, 18 Nov 2025 16:33:07 +0100
Subject: [PATCH 2/3] fix: tests

---
 .../__tests__/__snapshots__/index.test.tsx.snap             | 6 +++---
 .../__tests__/__snapshots__/Regular.test.tsx.snap           | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap
index c66eed4296..360c91dd98 100644
--- a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap
@@ -17,10 +17,10 @@ exports[`submitErrorAlert > should display an alert when submitError is present
         Submit
       </button>
       <div
-        class="uv_1b838gx0 uv_1b838gx1 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
+        class="uv_1b838gx0 uv_1b838gx1 uv_1b838gx6 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
       >
         <div
-          class="uv_1b838gx6 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52ud uv_toi52u6p"
+          class="uv_1b838gx8 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52ud uv_toi52u6p"
         >
           <div
             class="uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u5d"
@@ -37,7 +37,7 @@ exports[`submitErrorAlert > should display an alert when submitError is present
               />
             </svg>
             <div
-              class="uv_1b838gx7 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7j uv_toi52u27 uv_toi52u5d"
+              class="uv_1b838gx9 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52u27 uv_toi52u5d"
               style="--uv_4k0ekn3: 1 1 auto;"
             >
               <p
diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap
index aa8b5e95cb..7800a91fe1 100644
--- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap
+++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap
@@ -3259,10 +3259,10 @@ exports[`estimateCost - Regular Item > render with alert 1`] = `
         This summary provides a cost estimation based on your configuration, the amount of time you expect to use the resource for, and the scale of your expected usage. For the purposes of this calculation, we consider that 1 month equals to 730 hours.
       </span>
       <div
-        class="uv_1b838gx0 uv_1b838gx4 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
+        class="uv_1b838gx0 uv_1b838gx4 uv_1b838gx6 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7d uv_toi52u7 uv_toi52u5d"
       >
         <div
-          class="uv_1b838gx6 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52ud uv_toi52u6p"
+          class="uv_1b838gx8 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52ud uv_toi52u6p"
         >
           <div
             class="uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52ud uv_toi52u5d"
@@ -3279,7 +3279,7 @@ exports[`estimateCost - Regular Item > render with alert 1`] = `
               />
             </svg>
             <div
-              class="uv_1b838gx7 uv_toi52u0 uv_toi52u31 uv_toi52u2j uv_toi52u7j uv_toi52u27 uv_toi52u5d"
+              class="uv_1b838gx9 uv_toi52u0 uv_toi52u3d uv_toi52u2j uv_toi52u7j uv_toi52u27 uv_toi52u5d"
               style="--uv_4k0ekn3: 1 1 auto;"
             >
               <span

From 9e9b43e98a9f937e4dd4856b7e171d55a2158423 Mon Sep 17 00:00:00 2001
From: lisa <llupi@scaleway.com>
Date: Tue, 18 Nov 2025 16:55:33 +0100
Subject: [PATCH 3/3] fix: icon size

---
 .../Alert/__tests__/__snapshots__/index.test.tsx.snap       | 6 +++---
 packages/ui/src/components/Alert/index.tsx                  | 4 +++-
 packages/ui/src/components/Alert/styles.css.ts              | 5 ++++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap
index c594ae9d33..1335d8d030 100644
--- a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap
+++ b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap
@@ -16,12 +16,12 @@ exports[`alert > renders correctly small 1`] = `
           style="--_4k0ekn3: 1 1 auto;"
         >
           <svg
-            class="styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_sentiment_danger__vbm0wq5 styles_size_large__vbm0wq8 styles_undefined_compound_36__vbm0wq1k"
-            viewBox="0 0 20 20"
+            class="styles__1b838gxd styles__vbm0wq0 styles_prominence_default__vbm0wqg styles_disabled_false__vbm0wqf styles_sentiment_danger__vbm0wq5 styles_size_small__vbm0wqa styles_undefined_compound_36__vbm0wq1k"
+            viewBox="0 0 16 16"
           >
             <path
               clip-rule="evenodd"
-              d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM10 5C10.4142 5 10.75 5.33579 10.75 5.75V10.25C10.75 10.6642 10.4142 11 10 11C9.58579 11 9.25 10.6642 9.25 10.25V5.75C9.25 5.33579 9.58579 5 10 5ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13C9.44771 13 9 13.4477 9 14C9 14.5523 9.44771 15 10 15Z"
+              d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM8 4C8.41421 4 8.75 4.33579 8.75 4.75V7.75C8.75 8.16421 8.41421 8.5 8 8.5C7.58579 8.5 7.25 8.16421 7.25 7.75V4.75C7.25 4.33579 7.58579 4 8 4ZM8 12C8.55228 12 9 11.5523 9 11C9 10.4477 8.55228 10 8 10C7.44772 10 7 10.4477 7 11C7 11.5523 7.44772 12 8 12Z"
               fill-rule="evenodd"
             />
           </svg>
diff --git a/packages/ui/src/components/Alert/index.tsx b/packages/ui/src/components/Alert/index.tsx
index f55ee2846e..2f4388f623 100644
--- a/packages/ui/src/components/Alert/index.tsx
+++ b/packages/ui/src/components/Alert/index.tsx
@@ -16,6 +16,7 @@ import {
   alert,
   buttonAlert,
   buttonCloseAlert,
+  smallIcon,
   textAlert,
   wrapAlert,
 } from './styles.css'
@@ -98,9 +99,10 @@ export const Alert = ({
         >
           <Icon
             aria-hidden="true"
+            className={size === 'small' ? smallIcon : ''}
             prominence={sentiment === 'neutral' ? 'strong' : undefined}
             sentiment={sentiment}
-            size="large"
+            size={size === 'small' ? 'small' : 'large'}
           />
           <Stack
             alignItems="center"
diff --git a/packages/ui/src/components/Alert/styles.css.ts b/packages/ui/src/components/Alert/styles.css.ts
index d64cca6037..6e893087ab 100644
--- a/packages/ui/src/components/Alert/styles.css.ts
+++ b/packages/ui/src/components/Alert/styles.css.ts
@@ -50,7 +50,6 @@ export const wrapAlert = style({
 
 export const textAlert = style({
   color: theme.colors.neutral.text,
-  paddingTop: theme.space['0.25'],
 })
 
 export const buttonAlert = styleVariants({
@@ -67,3 +66,7 @@ export const buttonCloseAlert = style({
 })
 
 export type AlertVariants = NonNullable<RecipeVariants<typeof alert>>
+
+export const smallIcon = style({
+  marginTop: theme.space['0.25'],
+})