fix: update style password check (#5863)

Author: lisalupi

.changeset/early-phones-accept.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`PasswordCheck`: update style

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

@@ -12,15 +12,15 @@ exports[`passwordCheck > render with custom values 1`] = `
         class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
       >
         <svg
-          class="styles__vbm0wq0 styles_prominence_weak__vbm0wqj styles_disabled_false__vbm0wqf styles_sentiment_neutral__vbm0wq3 styles_size_large__vbm0wq8 styles_undefined_compound_58__vbm0wq26"
-          viewBox="0 0 20 20"
+          class="styles__vbm0wq0 styles_prominence_weak__vbm0wqj styles_disabled_false__vbm0wqf styles_sentiment_neutral__vbm0wq3 styles_size_small__vbm0wqa styles_undefined_compound_58__vbm0wq26"
+          viewBox="0 0 16 16"
         >
           <path
-            d="M10 16.67c-3.675 0-6.67-2.995-6.67-6.67S6.325 3.33 10 3.33s6.67 2.995 6.67 6.67-2.995 6.67-6.67 6.67m0-15c-4.61 0-8.33 3.72-8.33 8.33s3.72 8.33 8.33 8.33 8.33-3.72 8.33-8.33S14.61 1.67 10 1.67m2.16 5L10 8.83 7.84 6.67 6.67 7.84 8.83 10l-2.16 2.16 1.17 1.17L10 11.17l2.16 2.16 1.17-1.17L11.17 10l2.16-2.16z"
+            d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94z"
           />
         </svg>
         <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"
+          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_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
         >
           That's a beautiful custom password check we have right there
         </p>
@@ -29,16 +29,17 @@ exports[`passwordCheck > render with custom values 1`] = `
         class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
       >
         <svg
-          class="styles__vbm0wq0 styles_prominence_weak__vbm0wqj styles_disabled_false__vbm0wqf styles_sentiment_success__vbm0wq4 styles_size_large__vbm0wq8 styles_undefined_compound_59__vbm0wq27"
-          viewBox="0 0 20 20"
+          class="styles__vbm0wq0 styles_prominence_weak__vbm0wqj styles_disabled_false__vbm0wqf styles_sentiment_success__vbm0wq4 styles_size_small__vbm0wqa styles_undefined_compound_59__vbm0wq27"
+          viewBox="0 0 16 16"
         >
           <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="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 15ZM11.8435 6.20859C12.0967 5.88082 12.0363 5.40981 11.7086 5.15654C11.3808 4.90327 10.9098 4.96365 10.6565 5.29141L6.95615 10.0801L5.30747 8.24828C5.03038 7.94039 4.55616 7.91543 4.24828 8.19253C3.94039 8.46962 3.91544 8.94384 4.19253 9.25172L6.44253 11.7517C6.59132 11.917 6.80582 12.0078 7.02809 11.9995C7.25036 11.9911 7.45746 11.8846 7.59346 11.7086L11.8435 6.20859Z"
+            fill-rule="evenodd"
           />
         </svg>
         <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"
+          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_caption__m4c9ows style_disabled_false__m4c9ow1b style_undefined_compound_72__m4c9ow3c"
         >
           That's a second beautiful custom password check we have right there
         </p>

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

@@ -1,9 +1,6 @@
 'use client'
 
-import {
-  CheckCircleOutlineIcon,
-  CloseCircleOutlineIcon,
-} from '@ultraviolet/icons'
+import { CheckCircleIcon, CloseIcon } from '@ultraviolet/icons'
 import type { CSSProperties } from 'react'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
@@ -44,20 +41,12 @@ export const PasswordCheck = ({
     {rules.map(rule => (
       <Stack alignItems="center" direction="row" gap={1} key={rule.name}>
         {rule.valid ? (
-          <CheckCircleOutlineIcon
-            prominence="weak"
-            sentiment="success"
-            size="large"
-          />
+          <CheckCircleIcon prominence="weak" sentiment="success" size="small" />
         ) : (
-          <CloseCircleOutlineIcon
-            prominence="weak"
-            sentiment="neutral"
-            size="large"
-          />
+          <CloseIcon prominence="weak" sentiment="neutral" size="small" />
         )}
 
-        <Text as="p" variant="bodySmall">
+        <Text as="p" variant="caption">
           {rule.text}
         </Text>
       </Stack>