fix(Alert): padding and icon

.changeset/floppy-carpets-talk.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Alert`: fix padding, icons size, icons type (oultine -> filled) and close button (size and sentiment)

packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`submitErrorAlert > should display an alert when submitError is present
           >
             <svg
               aria-hidden="true"
-              class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkze uv_icons_1sbwqkz1k"
+              class="uv_1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkzf uv_icons_1sbwqkz1k"
               height="20"
               viewBox="0 0 20 20"
               width="20"
@@ -43,7 +43,7 @@ exports[`submitErrorAlert > should display an alert when submitError is present
               />
             </svg>
             <div
-              class="uv_1b838gx9 uv_toi52u0 uv_toi52ud uv_toi52u2j uv_toi52u37 uv_toi52u5p"
+              class="uv_1b838gx9 uv_toi52u0 uv_toi52ud uv_toi52u2j uv_toi52u37 uv_toi52u3p"
               style="--uv_4k0ekn3: 1 1 auto;"
             >
               <p

packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -32,7 +32,7 @@ exports[`alert > renders correctly small 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.25rem_xxsmall__toi52u5j"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <span
@@ -70,7 +70,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkze uv_icons_1sbwqkz1k"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkzf uv_icons_1sbwqkz1k"
             height="20"
             viewBox="0 0 20 20"
             width="20"
@@ -85,7 +85,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -118,21 +118,22 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzd uv_icons_1sbwqkze uv_icons_1sbwqkz1m"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzd uv_icons_1sbwqkzf uv_icons_1sbwqkz1m"
             height="20"
             viewBox="0 0 20 20"
             width="20"
           >
             <title>
-              InformationOutlineIcon
+              InformationIcon
             </title>
             <path
               clip-rule="evenodd"
-              d="M10 3.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0m7.25-3.02a.75.75 0 0 1 .75-.75h.006a.75.75 0 0 1 .75.75v.005a.75.75 0 0 1-.75.75H10a.75.75 0 0 1-.75-.75zm.244 3.16a.75.75 0 0 1-.434-1.415l.034-.017c1.035-.517 2.2.418 1.92 1.54l-.508 2.03a.75.75 0 0 1 .434 1.414l-.034.016c-1.035.518-2.2-.417-1.92-1.54z"
+              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 10ZM11 6C11 6.55228 10.5523 7 10 7C9.44771 7 9 6.55228 9 6C9 5.44772 9.44771 5 10 5C10.5523 5 11 5.44772 11 6ZM9 9C8.58579 9 8.25 9.33579 8.25 9.75C8.25 10.1642 8.58579 10.5 9 10.5H9.25338C9.41332 10.5 9.53213 10.6481 9.49743 10.8042L9.03829 12.8704C8.79542 13.9633 9.62706 15 10.7466 15H11C11.4142 15 11.75 14.6642 11.75 14.25C11.75 13.8358 11.4142 13.5 11 13.5H10.7466C10.5867 13.5 10.4679 13.3519 10.5026 13.1958L10.9617 11.1296C11.2046 10.0367 10.3729 9 9.25338 9H9Z"
+              fill-rule="evenodd"
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -165,7 +166,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz4 uv_icons_1sbwqkz9 uv_icons_1sbwqkze uv_icons_1sbwqkz1q"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz4 uv_icons_1sbwqkz9 uv_icons_1sbwqkzf uv_icons_1sbwqkz1q"
             height="20"
             viewBox="0 0 20 20"
             width="20"
@@ -182,7 +183,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -215,21 +216,22 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkza uv_icons_1sbwqkze uv_icons_1sbwqkz1j"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkza uv_icons_1sbwqkzf uv_icons_1sbwqkz1j"
             height="20"
             viewBox="0 0 20 20"
             width="20"
           >
             <title>
-              CheckCircleOutlineIcon
+              CheckCircleIcon
             </title>
             <path
               clip-rule="evenodd"
-              d="M10 3.455a6.545 6.545 0 1 0 0 13.09 6.545 6.545 0 0 0 0-13.09M2 10a8 8 0 1 1 16 0 8 8 0 0 1-16 0m10.847-2.41a.727.727 0 0 1 .169 1.015l-3.03 4.242a.727.727 0 0 1-1.106.091L7.06 11.12a.727.727 0 1 1 1.029-1.028l1.211 1.21 2.531-3.543a.727.727 0 0 1 1.015-.169"
+              d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM13.8566 8.19113C14.1002 7.85614 14.0261 7.38708 13.6911 7.14345C13.3561 6.89982 12.8871 6.97388 12.6434 7.30887L9.15969 12.099L7.28033 10.2197C6.98744 9.92678 6.51256 9.92678 6.21967 10.2197C5.92678 10.5126 5.92678 10.9874 6.21967 11.2803L8.71967 13.7803C8.87477 13.9354 9.08999 14.0149 9.30867 13.9977C9.52734 13.9805 9.72754 13.8685 9.85655 13.6911L13.8566 8.19113Z"
+              fill-rule="evenodd"
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -262,7 +264,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzc uv_icons_1sbwqkze uv_icons_1sbwqkz1l"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzc uv_icons_1sbwqkzf uv_icons_1sbwqkz1l"
             height="20"
             viewBox="0 0 20 20"
             width="20"
@@ -277,7 +279,7 @@ exports[`alert > renders correctly with all sentiments > renders correctly senti
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -310,7 +312,7 @@ exports[`alert > renders correctly with buttonText and onClickButton 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkze uv_icons_1sbwqkz1k"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkzf uv_icons_1sbwqkz1k"
             height="20"
             viewBox="0 0 20 20"
             width="20"
@@ -325,7 +327,7 @@ exports[`alert > renders correctly with buttonText and onClickButton 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -364,7 +366,7 @@ exports[`alert > renders correctly with children as component 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkze uv_icons_1sbwqkz1k"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkzf uv_icons_1sbwqkz1k"
             height="20"
             viewBox="0 0 20 20"
             width="20"
@@ -379,7 +381,7 @@ exports[`alert > renders correctly with children as component 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p>
@@ -410,7 +412,7 @@ exports[`alert > renders correctly with closable and onClose 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkze uv_icons_1sbwqkz1k"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkzf uv_icons_1sbwqkz1k"
             height="20"
             viewBox="0 0 20 20"
             width="20"
@@ -425,7 +427,7 @@ exports[`alert > renders correctly with closable and onClose 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -438,11 +440,11 @@ exports[`alert > renders correctly with closable and onClose 1`] = `
       </div>
       <button
         aria-label="close"
-        class="styles__1b838gxc styles__e1wcoe0 styles_disabled_false__e1wcoe1 styles_fullWidth_false__e1wcoe3 styles_sentiment_neutral__e1wcoe8 styles_size_small__e1wcoeg styles_variant_ghost__e1wcoej styles_undefined_compound_24__e1wcoe19"
+        class="styles__1b838gxc styles__e1wcoe0 styles_disabled_false__e1wcoe1 styles_fullWidth_false__e1wcoe3 styles_sentiment_danger__e1wcoe6 styles_size_xsmall__e1wcoeh styles_variant_ghost__e1wcoej styles_undefined_compound_20__e1wcoe15"
         type="button"
       >
         <svg
-          class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzg uv_icons_1sbwqkz1n"
+          class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkz9 uv_icons_1sbwqkzg uv_icons_1sbwqkz1i"
           height="16"
           viewBox="0 0 16 16"
           width="16"
@@ -477,7 +479,7 @@ exports[`alert > renders correctly with default values 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkze uv_icons_1sbwqkz1k"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkzf uv_icons_1sbwqkz1k"
             height="20"
             viewBox="0 0 20 20"
             width="20"
@@ -492,7 +494,7 @@ exports[`alert > renders correctly with default values 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -525,7 +527,7 @@ exports[`alert > renders correctly with disabled 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkze uv_icons_1sbwqkz1k"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkzf uv_icons_1sbwqkz1k"
             height="20"
             viewBox="0 0 20 20"
             width="20"
@@ -540,7 +542,7 @@ exports[`alert > renders correctly with disabled 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <p
@@ -580,7 +582,7 @@ exports[`alert > renders correctly with title 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkze uv_icons_1sbwqkz1k"
+            class="styles__1b838gxd uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkzb uv_icons_1sbwqkzf uv_icons_1sbwqkz1k"
             height="20"
             viewBox="0 0 20 20"
             width="20"
@@ -595,7 +597,7 @@ exports[`alert > renders correctly with title 1`] = `
             />
           </svg>
           <div
-            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.75rem_xxsmall__toi52u5p"
+            class="styles__1b838gx9 styles__toi52u0 styles_alignItems_center_xxsmall__toi52ud styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_wrap_xxsmall__toi52u37 styles_gap_0.5rem_xxsmall__toi52u3p"
             style="--_4k0ekn3: 1 1 auto;"
           >
             <span

packages/ui/src/components/Alert/index.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { AlertCircleIcon } from '@ultraviolet/icons/AlertCircleIcon'
-import { CheckCircleOutlineIcon } from '@ultraviolet/icons/CheckCircleOutlineIcon'
+import { CheckCircleIcon } from '@ultraviolet/icons/CheckCircleIcon'
 import { CloseIcon } from '@ultraviolet/icons/CloseIcon'
-import { InformationOutlineIcon } from '@ultraviolet/icons/InformationOutlineIcon'
+import { InformationIcon } from '@ultraviolet/icons/InformationIcon'
 import { LightBulbIcon } from '@ultraviolet/icons/LightBulbIcon'
 import { cn } from '@ultraviolet/utils'
 import { useState } from 'react'
@@ -19,9 +19,9 @@ import type { ComponentProps, CSSProperties, ReactNode } from 'react'
 
 const sentimentIcons = {
   danger: AlertCircleIcon,
-  info: InformationOutlineIcon,
+  info: InformationIcon,
   neutral: LightBulbIcon,
-  success: CheckCircleOutlineIcon,
+  success: CheckCircleIcon,
   warning: AlertCircleIcon,
 }
 
@@ -94,17 +94,17 @@ export const Alert = ({
         >
           <Icon
             aria-hidden="true"
-            className={size === 'small' ? alertStyle.smallIcon : ''}
+            className={alertStyle.icon}
             prominence={sentiment === 'neutral' ? 'strong' : undefined}
             sentiment={sentiment}
-            size={size === 'small' ? 'small' : 'large'}
+            size={size === 'small' ? 'small' : 'medium'}
           />
           <Stack
             alignItems="center"
             className={alertStyle.text}
             direction="row"
             flex="1 1 auto"
-            gap={1.5}
+            gap={size === 'small' ? 0.5 : 1}
             wrap
           >
             {title ? (
@@ -147,11 +147,11 @@ export const Alert = ({
             setOpened(false)
             onClose?.()
           }}
-          sentiment="neutral"
-          size="small"
+          sentiment={sentiment}
+          size="xsmall"
           variant="ghost"
         >
-          <CloseIcon />
+          <CloseIcon sentiment="neutral" />
         </Button>
       ) : null}
     </Stack>

packages/ui/src/components/Alert/styles.css.ts

@@ -69,7 +69,7 @@ const buttonClose = style({
 
 export type AlertVariants = NonNullable<RecipeVariants<typeof alert>>
 
-const smallIcon = style({
+const icon = style({
   marginTop: theme.space['0.25'],
 })
 
@@ -79,5 +79,5 @@ export const alertStyle = {
   text,
   button,
   buttonClose,
-  smallIcon,
+  icon,
 }