From c753696d1a9a84be11072b58035febfd1bee215e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Szymon=20Dziewo=C5=84ski?= <szymon.dziewonski@gmail.com>
Date: Fri, 6 Oct 2023 10:29:27 +0200
Subject: [PATCH] feat: add typography-hint-xs and typography-error-xs classes
 (#3006)

---
 .changeset/brave-foxes-confess.md             |  5 +++++
 .../.vuepress/components/TypographyList.vue   |  2 ++
 apps/preview/next/pages/examples/SfInput.tsx  |  9 ++++++--
 .../next/pages/examples/SfTextarea.tsx        |  8 +++----
 .../showcases/Checkbox/CheckboxLeading.tsx    |  2 +-
 .../showcases/Checkbox/CheckboxTrailing.tsx   |  2 +-
 .../Checkout/CheckoutAddressForm.tsx          | 16 ++++++++------
 .../showcases/Combobox/ComboboxBasic.tsx      |  2 +-
 .../FormFields/FormFieldsRequired.tsx         |  2 +-
 .../pages/showcases/Input/InputCharacters.tsx |  9 ++++++--
 .../pages/showcases/Input/InputDisabled.tsx   |  2 +-
 .../pages/showcases/Input/InputInvalid.tsx    |  2 +-
 .../pages/showcases/Input/InputReadonly.tsx   |  2 +-
 .../pages/showcases/Radio/RadioLeading.tsx    |  4 ++--
 .../pages/showcases/Radio/RadioTrailing.tsx   |  4 ++--
 .../pages/showcases/Switch/SwitchLeading.tsx  |  2 +-
 .../pages/showcases/Switch/SwitchTrailing.tsx |  2 +-
 .../showcases/Textarea/TextareaAutoresize.tsx |  8 ++-----
 .../showcases/Textarea/TextareaCharacters.tsx |  6 +++---
 .../showcases/Textarea/TextareaDisabled.tsx   |  8 ++-----
 .../showcases/Textarea/TextareaInvalid.tsx    |  8 +++----
 .../showcases/Textarea/TextareaReadonly.tsx   |  8 ++-----
 apps/preview/nuxt/pages/examples/SfInput.vue  |  4 ++--
 .../nuxt/pages/examples/SfTextarea.vue        |  6 +++---
 .../showcases/Checkbox/CheckboxLeading.vue    |  2 +-
 .../showcases/Checkbox/CheckboxTrailing.vue   |  2 +-
 .../Checkout/CheckoutAddressForm.vue          | 16 +++++++-------
 .../showcases/Combobox/ComboboxBasic.vue      |  2 +-
 .../FormFields/FormFieldsRequired.vue         |  2 +-
 .../pages/showcases/Input/InputCharacters.vue |  4 ++--
 .../pages/showcases/Input/InputDisabled.vue   |  2 +-
 .../pages/showcases/Input/InputInvalid.vue    |  2 +-
 .../pages/showcases/Input/InputReadonly.vue   |  2 +-
 .../pages/showcases/Radio/RadioLeading.vue    |  4 ++--
 .../pages/showcases/Radio/RadioTrailing.vue   |  4 ++--
 .../pages/showcases/Switch/SwitchLeading.vue  |  2 +-
 .../pages/showcases/Switch/SwitchTrailing.vue |  2 +-
 .../showcases/Textarea/TextareaAutoresize.vue |  9 +++-----
 .../showcases/Textarea/TextareaCharacters.vue |  6 +++---
 .../showcases/Textarea/TextareaDisabled.vue   |  9 +++-----
 .../showcases/Textarea/TextareaInvalid.vue    |  9 ++++----
 .../showcases/Textarea/TextareaReadonly.vue   |  9 +++-----
 packages/sfui/typography/index.ts             | 21 ++++++++++++-------
 43 files changed, 118 insertions(+), 114 deletions(-)
 create mode 100644 .changeset/brave-foxes-confess.md

diff --git a/.changeset/brave-foxes-confess.md b/.changeset/brave-foxes-confess.md
new file mode 100644
index 0000000000..066f484115
--- /dev/null
+++ b/.changeset/brave-foxes-confess.md
@@ -0,0 +1,5 @@
+---
+'@storefront-ui/typography': minor
+---
+
+Add typography-hint-xs and typography-error-xs classes
diff --git a/apps/docs/components/.vuepress/components/TypographyList.vue b/apps/docs/components/.vuepress/components/TypographyList.vue
index faeed80162..75d7dd264f 100644
--- a/apps/docs/components/.vuepress/components/TypographyList.vue
+++ b/apps/docs/components/.vuepress/components/TypographyList.vue
@@ -44,9 +44,11 @@ const typographyClasses = [
   ['error-lg', 'fontSize.lg', 'lineHeight.7'],
   ['error-base', 'fontSize.base', 'lineHeight.6'],
   ['error-sm', 'fontSize.sm', 'lineHeight.5'],
+  ['error-xs', 'fontSize.xs', 'lineHeight.4'],
   ['hint-lg', 'fontSize.lg', 'lineHeight.7'],
   ['hint-base', 'fontSize.base', 'lineHeight.6'],
   ['hint-sm', 'fontSize.sm', 'lineHeight.5'],
+  ['hint-xs', 'fontSize.xs', 'lineHeight.4'],
 ];
 
 export default {
diff --git a/apps/preview/next/pages/examples/SfInput.tsx b/apps/preview/next/pages/examples/SfInput.tsx
index d644ad42ce..05bd29396c 100644
--- a/apps/preview/next/pages/examples/SfInput.tsx
+++ b/apps/preview/next/pages/examples/SfInput.tsx
@@ -172,7 +172,12 @@ function Example() {
             <p className="text-sm text-negative-700 font-medium mt-0.5">{state.get.errorText}</p>
           )}
           {state.get.helpText && (
-            <p className={classNames('text-xs mt-0.5', state.get.disabled ? 'text-disabled-500' : 'text-neutral-500')}>
+            <p
+              className={classNames(
+                'typography-hint-xs mt-0.5',
+                state.get.disabled ? 'text-disabled-500' : 'text-neutral-500',
+              )}
+            >
               {state.get.helpText}
             </p>
           )}
@@ -183,7 +188,7 @@ function Example() {
         {state.get.characterLimit && !state.get.readonly ? (
           <p
             className={classNames(
-              'text-xs mt-0.5',
+              'typography-error-xs mt-0.5',
               state.get.disabled ? 'text-disabled-500' : getCharacterLimitClass(),
             )}
           >
diff --git a/apps/preview/next/pages/examples/SfTextarea.tsx b/apps/preview/next/pages/examples/SfTextarea.tsx
index e76d4cc65a..aa81fec574 100644
--- a/apps/preview/next/pages/examples/SfTextarea.tsx
+++ b/apps/preview/next/pages/examples/SfTextarea.tsx
@@ -109,7 +109,7 @@ function Example() {
           disabled={state.get.disabled}
           readOnly={state.get.readonly}
           onChange={onChange}
-          className={classNames('w-full', {
+          className={classNames('w-full block', {
             '!bg-disabled-100 !ring-disabled-300 !ring-1 !text-disabled-500': state.get.disabled,
             '!bg-disabled-100 !ring-disabled-300 !ring-1 !text-neutral-500': state.get.readonly,
           })}
@@ -118,12 +118,12 @@ function Example() {
       <div className="flex justify-between">
         <div>
           {state.get.invalid && !state.get.disabled && (
-            <p className="typography-text-sm text-negative-700 font-medium mt-0.5">{state.get.errorText}</p>
+            <p className="typography-error-sm text-negative-700 font-medium mt-0.5">{state.get.errorText}</p>
           )}
           {state.get.helpText && (
             <p
               className={classNames(
-                'typography-text-xs mt-0.5',
+                'typography-hint-xs mt-0.5',
                 state.get.disabled ? 'text-disabled-500' : 'text-neutral-500',
               )}
             >
@@ -139,7 +139,7 @@ function Example() {
         {state.get.characterLimit && !state.get.readonly ? (
           <p
             className={classNames(
-              'typography-text-xs mt-0.5',
+              'typography-error-xs mt-0.5',
               state.get.disabled ? 'text-disabled-500' : getCharacterLimitClass(),
             )}
           >
diff --git a/apps/preview/next/pages/showcases/Checkbox/CheckboxLeading.tsx b/apps/preview/next/pages/showcases/Checkbox/CheckboxLeading.tsx
index b5a12b2da6..fe8c0651f9 100644
--- a/apps/preview/next/pages/showcases/Checkbox/CheckboxLeading.tsx
+++ b/apps/preview/next/pages/showcases/Checkbox/CheckboxLeading.tsx
@@ -15,7 +15,7 @@ export default function CheckboxLeading() {
         </label>
       </div>
       <div className="flex justify-between ml-8">
-        <p className="text-xs mt-0.5 text-neutral-500">Help text</p>
+        <p className="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
       </div>
     </>
   );
diff --git a/apps/preview/next/pages/showcases/Checkbox/CheckboxTrailing.tsx b/apps/preview/next/pages/showcases/Checkbox/CheckboxTrailing.tsx
index 319db965b6..674f4fe308 100644
--- a/apps/preview/next/pages/showcases/Checkbox/CheckboxTrailing.tsx
+++ b/apps/preview/next/pages/showcases/Checkbox/CheckboxTrailing.tsx
@@ -15,7 +15,7 @@ export default function CheckboxTrailing() {
         <SfCheckbox value="value" className="peer" id="checkbox" />
       </div>
       <div className="flex justify-between ml-3">
-        <p className="text-xs mt-0.5 text-neutral-500">Help text</p>
+        <p className="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
       </div>
     </>
   );
diff --git a/apps/preview/next/pages/showcases/Checkout/CheckoutAddressForm.tsx b/apps/preview/next/pages/showcases/Checkout/CheckoutAddressForm.tsx
index b3df7c0ccb..55bdd35ed6 100644
--- a/apps/preview/next/pages/showcases/Checkout/CheckoutAddressForm.tsx
+++ b/apps/preview/next/pages/showcases/Checkout/CheckoutAddressForm.tsx
@@ -64,17 +64,19 @@ export default function AddressForm() {
             invalid={!streetIsValid}
           />
         </label>
-        {!streetIsValid && (
-          <strong className="typography-error-sm text-negative-700 font-medium">Please provide a street name</strong>
-        )}
-        <small className="typography-text-xs text-neutral-500">Street address or P.O. Box</small>
+        <div className="flex flex-colr mt-0.5">
+          {!streetIsValid && (
+            <strong className="typography-error-sm text-negative-700 font-medium">Please provide a street name</strong>
+          )}
+          <small className="typography-hint-xs text-neutral-500 mt-0.5">Street address or P.O. Box</small>
+        </div>
       </div>
       <div className="w-full flex flex-col gap-0.5 md:w-[120px]">
         <label>
           <span className="typography-text-sm font-medium">Apt#, Suite, etc</span>
           <SfInput name="aptNo" className="mt-0.5" />
         </label>
-        <small className="typography-text-xs text-neutral-500">Optional</small>
+        <small className="typography-hint-xs text-neutral-500 mt-0.5">Optional</small>
       </div>
       <label className="w-full flex flex-col gap-0.5">
         <span className="typography-text-sm font-medium">City</span>
@@ -102,7 +104,9 @@ export default function AddressForm() {
         <SfButton type="reset" variant="secondary" className="w-full md:w-auto">
           Clear all
         </SfButton>
-        <SfButton className="w-full md:w-auto">Save</SfButton>
+        <SfButton type="submit" className="w-full md:w-auto">
+          Save
+        </SfButton>
       </div>
     </form>
   );
diff --git a/apps/preview/next/pages/showcases/Combobox/ComboboxBasic.tsx b/apps/preview/next/pages/showcases/Combobox/ComboboxBasic.tsx
index 5d3df90752..6645ee94e4 100644
--- a/apps/preview/next/pages/showcases/Combobox/ComboboxBasic.tsx
+++ b/apps/preview/next/pages/showcases/Combobox/ComboboxBasic.tsx
@@ -321,7 +321,7 @@ export default function ComboboxBasic() {
       {!isDisabled && isValid === false && (
         <p className="text-negative-700 typography-text-sm font-medium mt-0.5">No option selected</p>
       )}
-      <p className="text-xs mt-0.5 text-neutral-500">Help text</p>
+      <p className="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
       <DisableSwitch
         className={classNames({ hidden: isOpen })}
         onChangeHandler={onDisabledChangeHandler}
diff --git a/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx b/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx
index 19bf0cd85b..f6a9ddc3de 100644
--- a/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx
+++ b/apps/preview/next/pages/showcases/FormFields/FormFieldsRequired.tsx
@@ -656,7 +656,7 @@ export default function FormFields() {
                 >
                   {label}
                 </span>
-                <span className={classNames('typography-text-xs block', { 'text-disabled-500': disabled })}>
+                <span className={classNames('typography-hint-xs block mt-0.5', { 'text-disabled-500': disabled })}>
                   {hint}
                 </span>
               </span>
diff --git a/apps/preview/next/pages/showcases/Input/InputCharacters.tsx b/apps/preview/next/pages/showcases/Input/InputCharacters.tsx
index f767647c25..1c955a3b8b 100644
--- a/apps/preview/next/pages/showcases/Input/InputCharacters.tsx
+++ b/apps/preview/next/pages/showcases/Input/InputCharacters.tsx
@@ -54,7 +54,7 @@ export default function InputWithLimit() {
         <div>
           {invalid && !disabled && <p className="text-sm text-negative-700 font-medium mt-0.5">{errorText}</p>}
           {helpText && (
-            <p className={classNames('text-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
+            <p className={classNames('typography-hint-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
               {helpText}
             </p>
           )}
@@ -63,7 +63,12 @@ export default function InputWithLimit() {
           ) : null}
         </div>
         {characterLimit && !readonly ? (
-          <p className={classNames('text-xs mt-0.5', disabled ? 'text-disabled-500' : getCharacterLimitClass())}>
+          <p
+            className={classNames(
+              'typography-error-xs mt-0.5',
+              disabled ? 'text-disabled-500' : getCharacterLimitClass(),
+            )}
+          >
             {charsCount}
           </p>
         ) : null}
diff --git a/apps/preview/next/pages/showcases/Input/InputDisabled.tsx b/apps/preview/next/pages/showcases/Input/InputDisabled.tsx
index 2f525666c8..ad6020e392 100644
--- a/apps/preview/next/pages/showcases/Input/InputDisabled.tsx
+++ b/apps/preview/next/pages/showcases/Input/InputDisabled.tsx
@@ -12,7 +12,7 @@ export default function DisabledInputDemo() {
       </label>
       <div className="flex justify-between">
         <div>
-          <p className="text-xs text-disabled-500 mt-0.5">Help Text</p>
+          <p className="typography-hint-xs text-disabled-500 mt-0.5">Help Text</p>
         </div>
       </div>
     </>
diff --git a/apps/preview/next/pages/showcases/Input/InputInvalid.tsx b/apps/preview/next/pages/showcases/Input/InputInvalid.tsx
index 41c88a2863..61a9d0203e 100644
--- a/apps/preview/next/pages/showcases/Input/InputInvalid.tsx
+++ b/apps/preview/next/pages/showcases/Input/InputInvalid.tsx
@@ -13,7 +13,7 @@ export default function InvalidInput() {
       <div className="flex justify-between">
         <div>
           <p className="text-sm text-negative-700 font-medium mt-0.5">Error</p>
-          <p className="text-xs text-neutral-500 mt-0.5">Help Text</p>
+          <p className="typography-hint-xs text-neutral-500 mt-0.5">Help Text</p>
         </div>
       </div>
     </>
diff --git a/apps/preview/next/pages/showcases/Input/InputReadonly.tsx b/apps/preview/next/pages/showcases/Input/InputReadonly.tsx
index 4e8d4e93af..b0e5b9cec7 100644
--- a/apps/preview/next/pages/showcases/Input/InputReadonly.tsx
+++ b/apps/preview/next/pages/showcases/Input/InputReadonly.tsx
@@ -12,7 +12,7 @@ export default function ReadonlyInput() {
       </label>
       <div className="flex justify-between">
         <div>
-          <p className="text-xs text-neutral-500 mt-0.5">Help Text</p>
+          <p className="typography-hint-xs text-neutral-500 mt-0.5">Help Text</p>
         </div>
       </div>
     </>
diff --git a/apps/preview/next/pages/showcases/Radio/RadioLeading.tsx b/apps/preview/next/pages/showcases/Radio/RadioLeading.tsx
index a80400ab7f..2e0956f5bd 100644
--- a/apps/preview/next/pages/showcases/Radio/RadioLeading.tsx
+++ b/apps/preview/next/pages/showcases/Radio/RadioLeading.tsx
@@ -36,8 +36,8 @@ export default function RadioAlignment() {
           </label>
         ))}
       </div>
-      <div className="flex justify-between mt-2">
-        <p className="text-xs text-neutral-500">Help text</p>
+      <div className="flex justify-between">
+        <p className="typography-hint-xs text-neutral-500 mt-0.5">Help text</p>
       </div>
     </>
   );
diff --git a/apps/preview/next/pages/showcases/Radio/RadioTrailing.tsx b/apps/preview/next/pages/showcases/Radio/RadioTrailing.tsx
index 5eaf13e307..2c6d17f5ce 100644
--- a/apps/preview/next/pages/showcases/Radio/RadioTrailing.tsx
+++ b/apps/preview/next/pages/showcases/Radio/RadioTrailing.tsx
@@ -34,8 +34,8 @@ export default function RadioWithLabelSmall() {
           </label>
         ))}
       </div>
-      <div className="flex justify-between mt-2 ml-2">
-        <p className="text-xs text-neutral-500">Help text</p>
+      <div className="flex justify-between">
+        <p className="typography-hint-xs text-neutral-500 mt-0.5">Help text</p>
       </div>
     </>
   );
diff --git a/apps/preview/next/pages/showcases/Switch/SwitchLeading.tsx b/apps/preview/next/pages/showcases/Switch/SwitchLeading.tsx
index fdb3f890c3..dc8009533b 100644
--- a/apps/preview/next/pages/showcases/Switch/SwitchLeading.tsx
+++ b/apps/preview/next/pages/showcases/Switch/SwitchLeading.tsx
@@ -18,7 +18,7 @@ export default function SwitchAlignment() {
         />
         <span className="text-base ml-[10px] text-gray-900 cursor-pointer font-body">Label</span>
       </label>
-      <span className="text-xs mt-0.5 ml-12 block text-gray-500">Help text</span>
+      <span className="typography-hint-xs mt-0.5 ml-12 block text-gray-500">Help text</span>
     </>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Switch/SwitchTrailing.tsx b/apps/preview/next/pages/showcases/Switch/SwitchTrailing.tsx
index ecf6cfde4f..1362ab4d25 100644
--- a/apps/preview/next/pages/showcases/Switch/SwitchTrailing.tsx
+++ b/apps/preview/next/pages/showcases/Switch/SwitchTrailing.tsx
@@ -18,7 +18,7 @@ export default function SwitchAlignment() {
           }}
         />
       </label>
-      <span className="text-xs mt-0.5 block text-gray-500">Help text</span>
+      <span className="typography-hint-xs mt-0.5 block text-gray-500">Help text</span>
     </>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaAutoresize.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaAutoresize.tsx
index 7f1b8705ca..18a99bdfc3 100644
--- a/apps/preview/next/pages/showcases/Textarea/TextareaAutoresize.tsx
+++ b/apps/preview/next/pages/showcases/Textarea/TextareaAutoresize.tsx
@@ -17,13 +17,9 @@ export default function TextareaAutoresize() {
     <>
       <label>
         <span className="typography-text-sm font-medium">Description</span>
-        <SfTextarea ref={textareaRef} className="w-full h-max-[500px]" size="sm" aria-label="Label size sm" />
+        <SfTextarea ref={textareaRef} className="w-full h-max-[500px] block" size="sm" aria-label="Label size sm" />
       </label>
-      <div className="flex justify-between mt-0.5">
-        <div>
-          <p className="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
-        </div>
-      </div>
+      <p className="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
     </>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaCharacters.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaCharacters.tsx
index 3942a01dc6..a644cb8f9a 100644
--- a/apps/preview/next/pages/showcases/Textarea/TextareaCharacters.tsx
+++ b/apps/preview/next/pages/showcases/Textarea/TextareaCharacters.tsx
@@ -33,7 +33,7 @@ export default function TextareaWithLimit() {
           invalid={invalid}
           disabled={disabled}
           onChange={onChange}
-          className="w-full mt-0.5"
+          className="w-full mt-0.5 block"
         />
       </label>
       <div className="flex justify-between mt-0.5">
@@ -42,13 +42,13 @@ export default function TextareaWithLimit() {
             <p className="typography-text-sm text-negative-700 font-medium mt-0.5">{errorText}</p>
           )}
           {helpText && (
-            <p className={classNames('typography-text-xs', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
+            <p className={classNames('typography-hint-xs', disabled ? 'text-disabled-500' : 'text-neutral-500')}>
               {helpText}
             </p>
           )}
         </div>
         {characterLimit && !readonly ? (
-          <p className={classNames('typography-text-xs', disabled ? 'text-disabled-500' : getCharacterLimitClass())}>
+          <p className={classNames('typography-error-xs', disabled ? 'text-disabled-500' : getCharacterLimitClass())}>
             {charsCount}
           </p>
         ) : null}
diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaDisabled.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaDisabled.tsx
index 22ed6a9e35..a847f01fcd 100644
--- a/apps/preview/next/pages/showcases/Textarea/TextareaDisabled.tsx
+++ b/apps/preview/next/pages/showcases/Textarea/TextareaDisabled.tsx
@@ -11,14 +11,10 @@ export default function DisabledTextareaDemo() {
         <SfTextarea
           disabled
           placeholder="Write something about yourself..."
-          className="w-full !bg-disabled-100 !ring-disabled-300 !ring-1"
+          className="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
         />
       </label>
-      <div className="flex justify-between mt-0.5">
-        <div>
-          <p className="typography-text-xs text-disabled-500">Do not include personal or financial information.</p>
-        </div>
-      </div>
+      <p className="typography-hint-xs text-disabled-500  mt-0.5">Do not include personal or financial information.</p>
     </>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaInvalid.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaInvalid.tsx
index 7b0ce5816c..4ff374a9ea 100644
--- a/apps/preview/next/pages/showcases/Textarea/TextareaInvalid.tsx
+++ b/apps/preview/next/pages/showcases/Textarea/TextareaInvalid.tsx
@@ -8,13 +8,11 @@ export default function InvalidTextarea() {
     <>
       <label>
         <span className="typography-text-sm font-medium">Description</span>
-        <SfTextarea invalid placeholder="Write something about yourself..." className="w-full" />
+        <SfTextarea invalid placeholder="Write something about yourself..." className="w-full block" />
       </label>
       <div className="flex justify-between mt-0.5">
-        <div>
-          <p className="typography-text-sm text-negative-700 font-medium mt-0.5">The field cannot be empty</p>
-          <p className="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
-        </div>
+        <p className="typography-text-sm text-negative-700 font-medium">The field cannot be empty</p>
+        <p className="typography-hint-xs text-neutral-500">Do not include personal or financial information.</p>
       </div>
     </>
   );
diff --git a/apps/preview/next/pages/showcases/Textarea/TextareaReadonly.tsx b/apps/preview/next/pages/showcases/Textarea/TextareaReadonly.tsx
index 61e8e03651..288e8815a9 100644
--- a/apps/preview/next/pages/showcases/Textarea/TextareaReadonly.tsx
+++ b/apps/preview/next/pages/showcases/Textarea/TextareaReadonly.tsx
@@ -10,15 +10,11 @@ export default function ReadonlyTextarea() {
         <span className="typography-text-sm font-medium">Description</span>
         <SfTextarea
           value="Hello! I'm a passionate shopper and a regular user of this ecommerce platform."
-          className="w-full !bg-disabled-100 !ring-disabled-300 !ring-1"
+          className="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
           readOnly
         />
       </label>
-      <div className="flex justify-between mt-0.5">
-        <div>
-          <p className="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
-        </div>
-      </div>
+      <p className="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
     </>
   );
 }
diff --git a/apps/preview/nuxt/pages/examples/SfInput.vue b/apps/preview/nuxt/pages/examples/SfInput.vue
index d4a33e87b9..445e94f114 100644
--- a/apps/preview/nuxt/pages/examples/SfInput.vue
+++ b/apps/preview/nuxt/pages/examples/SfInput.vue
@@ -22,7 +22,7 @@
     <div class="flex justify-between">
       <div>
         <p v-if="invalid && !disabled" class="text-sm text-negative-700 font-medium mt-0.5">{{ errorText }}</p>
-        <p v-if="helpText" :class="['text-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500']">
+        <p v-if="helpText" :class="['typography-hint-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500']">
           {{ helpText }}
         </p>
         <p v-if="requiredText && required" class="mt-1 text-sm font-normal text-neutral-500 before:content-['*']">
@@ -31,7 +31,7 @@
       </div>
       <p
         v-if="characterLimit && !readonly"
-        :class="['text-xs mt-0.5', disabled ? 'text-disabled-500' : getCharacterLimitClass]"
+        :class="['typography-error-xs mt-0.5', disabled ? 'text-disabled-500' : getCharacterLimitClass]"
       >
         {{ charsCount }}
       </p>
diff --git a/apps/preview/nuxt/pages/examples/SfTextarea.vue b/apps/preview/nuxt/pages/examples/SfTextarea.vue
index af5462eb87..7c81a13f23 100644
--- a/apps/preview/nuxt/pages/examples/SfTextarea.vue
+++ b/apps/preview/nuxt/pages/examples/SfTextarea.vue
@@ -15,7 +15,7 @@
         v-bind="state"
         v-model="value"
         :class="[
-          'w-full',
+          'w-full block',
           {
             '!bg-disabled-100 !ring-disabled-300 !ring-1 !text-disabled-500': disabled,
             '!bg-disabled-100 !ring-disabled-300 !ring-1 !text-neutral-500': readonly,
@@ -28,7 +28,7 @@
         <p v-if="invalid && !disabled" class="typography-text-sm text-negative-700 font-medium mt-0.5">
           {{ errorText }}
         </p>
-        <p v-if="helpText" :class="['typography-text-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500']">
+        <p v-if="helpText" :class="['typography-hint-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500']">
           {{ helpText }}
         </p>
         <p
@@ -40,7 +40,7 @@
       </div>
       <p
         v-if="characterLimit && !readonly"
-        :class="['typography-text-xs mt-0.5', disabled ? 'text-disabled-500' : getCharacterLimitClass]"
+        :class="['typography-error-xs mt-0.5', disabled ? 'text-disabled-500' : getCharacterLimitClass]"
       >
         {{ charsCount }}
       </p>
diff --git a/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue b/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue
index baf0fd145f..93445b0f9c 100644
--- a/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue
+++ b/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxLeading.vue
@@ -6,7 +6,7 @@
     </label>
   </div>
   <div class="flex justify-between ml-8">
-    <p class="text-xs mt-0.5 text-neutral-500">Help text</p>
+    <p class="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxTrailing.vue b/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxTrailing.vue
index 14e693087c..4482323ee8 100644
--- a/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxTrailing.vue
+++ b/apps/preview/nuxt/pages/showcases/Checkbox/CheckboxTrailing.vue
@@ -6,7 +6,7 @@
     <SfCheckbox id="checkbox" v-model="modelValue" value="value" class="peer" />
   </div>
   <div class="flex justify-between ml-3">
-    <p class="text-xs mt-0.5 text-neutral-500">Help text</p>
+    <p class="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/apps/preview/nuxt/pages/showcases/Checkout/CheckoutAddressForm.vue b/apps/preview/nuxt/pages/showcases/Checkout/CheckoutAddressForm.vue
index d08c5c9a51..bff2aa8a77 100644
--- a/apps/preview/nuxt/pages/showcases/Checkout/CheckoutAddressForm.vue
+++ b/apps/preview/nuxt/pages/showcases/Checkout/CheckoutAddressForm.vue
@@ -25,24 +25,26 @@
         <SfInput
           name="street"
           autocomplete="address-line1"
-          class="mt-.05"
+          class="mt-0.5"
           required
           :invalid="!streetIsValid"
           @blur="streetIsValid = !!$event.target.value"
           @update:model-value="streetIsValid = !!$event"
         />
       </label>
-      <strong v-if="!streetIsValid" class="typography-error-sm text-negative-700 font-medium">
-        Please provide a valid street name
-      </strong>
-      <small class="typography-text-xs text-neutral-500">Street address or P.O. Box</small>
+      <div class="flex flex-colr mt-0.5">
+        <strong v-if="!streetIsValid" class="typography-error-sm text-negative-700 font-medium">
+          Please provide a valid street name
+        </strong>
+        <small class="typography-hint-xs text-neutral-500">Street address or P.O. Box</small>
+      </div>
     </div>
     <div class="w-full flex flex-col gap-0.5 md:w-[120px]">
       <label>
         <span class="typography-text-sm font-medium">Apt#, Suite, etc</span>
         <SfInput name="aptNo" class="mt-0.5" />
       </label>
-      <small class="typography-text-xs text-neutral-500">Optional</small>
+      <small class="typography-hint-xs text-neutral-500 mt-0.5">Optional</small>
     </div>
     <label class="w-full flex flex-col gap-0.5">
       <span class="typography-text-sm font-medium">City</span>
@@ -66,7 +68,7 @@
 
     <div class="w-full flex gap-4 mt-4 md:mt-0 md:justify-end">
       <SfButton type="reset" variant="secondary" class="w-full md:w-auto">Clear all</SfButton>
-      <SfButton class="w-full md:w-auto">Save</SfButton>
+      <SfButton type="submit" class="w-full md:w-auto">Save</SfButton>
     </div>
   </form>
 </template>
diff --git a/apps/preview/nuxt/pages/showcases/Combobox/ComboboxBasic.vue b/apps/preview/nuxt/pages/showcases/Combobox/ComboboxBasic.vue
index 5f7c120a89..752a522dad 100644
--- a/apps/preview/nuxt/pages/showcases/Combobox/ComboboxBasic.vue
+++ b/apps/preview/nuxt/pages/showcases/Combobox/ComboboxBasic.vue
@@ -96,7 +96,7 @@
   <p v-if="!isDisabled && isValid === false" class="text-negative-700 typography-text-sm font-medium mt-0.5">
     No option selected
   </p>
-  <p class="text-xs mt-0.5 text-neutral-500">Help text</p>
+  <p class="typography-hint-xs mt-0.5 text-neutral-500">Help text</p>
   <div v-if="!isOpen" class="mt-4">
     <label class="flex items-center">
       <SfSwitch :checked="isDisabled" value="disabled" @change="isDisabled = !isDisabled" />
diff --git a/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue b/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue
index feffcf83c3..c0be1123ff 100644
--- a/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue
+++ b/apps/preview/nuxt/pages/showcases/FormFields/FormFieldsRequired.vue
@@ -253,7 +253,7 @@
             <span :class="['typography-text-base font-normal leading-6 font-body', { 'text-disabled-900': disabled }]">
               {{ label }}
             </span>
-            <span :class="['typography-text-xs block', { 'text-disabled-500': disabled }]">{{ hint }}</span>
+            <span :class="['typography-hint-xs block mt-0.5', { 'text-disabled-500': disabled }]">{{ hint }}</span>
           </span>
         </label>
       </fieldset>
diff --git a/apps/preview/nuxt/pages/showcases/Input/InputCharacters.vue b/apps/preview/nuxt/pages/showcases/Input/InputCharacters.vue
index 822d15c8d0..8c091c026e 100644
--- a/apps/preview/nuxt/pages/showcases/Input/InputCharacters.vue
+++ b/apps/preview/nuxt/pages/showcases/Input/InputCharacters.vue
@@ -13,7 +13,7 @@
   <div class="flex justify-between">
     <div>
       <p v-if="invalid && !disabled" class="text-sm text-negative-700 font-medium mt-0.5">{{ errorText }}</p>
-      <p v-if="helpText" :class="['text-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500']">
+      <p v-if="helpText" :class="['typography-hint-xs mt-0.5', disabled ? 'text-disabled-500' : 'text-neutral-500']">
         {{ helpText }}
       </p>
       <p v-if="requiredText && required" class="mt-1 text-sm font-normal text-neutral-500 before:content-['*']">
@@ -23,7 +23,7 @@
     <p
       v-if="characterLimit && !readonly"
       :class="[
-        'text-xs mt-0.5',
+        'typography-error-xs mt-0.5',
         disabled ? 'text-disabled-500' : isAboveLimit ? 'text-negative-700 font-medium' : 'text-neutral-500',
       ]"
     >
diff --git a/apps/preview/nuxt/pages/showcases/Input/InputDisabled.vue b/apps/preview/nuxt/pages/showcases/Input/InputDisabled.vue
index 3482880d07..6189eab17d 100644
--- a/apps/preview/nuxt/pages/showcases/Input/InputDisabled.vue
+++ b/apps/preview/nuxt/pages/showcases/Input/InputDisabled.vue
@@ -5,7 +5,7 @@
   </label>
   <div class="flex justify-between">
     <div>
-      <p class="text-xs text-disabled-500 mt-0.5">Help Text</p>
+      <p class="typography-hint-xs text-disabled-500 mt-0.5">Help Text</p>
     </div>
   </div>
 </template>
diff --git a/apps/preview/nuxt/pages/showcases/Input/InputInvalid.vue b/apps/preview/nuxt/pages/showcases/Input/InputInvalid.vue
index 6e48264ada..b900ab62da 100644
--- a/apps/preview/nuxt/pages/showcases/Input/InputInvalid.vue
+++ b/apps/preview/nuxt/pages/showcases/Input/InputInvalid.vue
@@ -6,7 +6,7 @@
   <div class="flex justify-between">
     <div>
       <p class="text-sm text-negative-700 font-medium mt-0.5">Error</p>
-      <p class="text-xs text-neutral-500 mt-0.5">Help Text</p>
+      <p class="typography-hint-xs text-neutral-500 mt-0.5">Help Text</p>
     </div>
   </div>
 </template>
diff --git a/apps/preview/nuxt/pages/showcases/Input/InputReadonly.vue b/apps/preview/nuxt/pages/showcases/Input/InputReadonly.vue
index 32d3ee8a10..6acd880172 100644
--- a/apps/preview/nuxt/pages/showcases/Input/InputReadonly.vue
+++ b/apps/preview/nuxt/pages/showcases/Input/InputReadonly.vue
@@ -5,7 +5,7 @@
   </label>
   <div class="flex justify-between">
     <div>
-      <p class="text-xs text-neutral-500 mt-0.5">Help Text</p>
+      <p class="typography-hint-xs text-neutral-500 mt-0.5">Help Text</p>
     </div>
   </div>
 </template>
diff --git a/apps/preview/nuxt/pages/showcases/Radio/RadioLeading.vue b/apps/preview/nuxt/pages/showcases/Radio/RadioLeading.vue
index ef4c190c21..d4a495255c 100644
--- a/apps/preview/nuxt/pages/showcases/Radio/RadioLeading.vue
+++ b/apps/preview/nuxt/pages/showcases/Radio/RadioLeading.vue
@@ -9,8 +9,8 @@
       <SfRadio v-model="radioModel" :value="value" :name="name" />
     </label>
   </div>
-  <div class="flex justify-between mt-2">
-    <p class="text-xs text-neutral-500">Help text</p>
+  <div class="flex justify-between">
+    <p class="typography-hint-xs text-neutral-500 mt-0.5">Help text</p>
   </div>
 </template>
 
diff --git a/apps/preview/nuxt/pages/showcases/Radio/RadioTrailing.vue b/apps/preview/nuxt/pages/showcases/Radio/RadioTrailing.vue
index cc63a760cf..9a19b726fe 100644
--- a/apps/preview/nuxt/pages/showcases/Radio/RadioTrailing.vue
+++ b/apps/preview/nuxt/pages/showcases/Radio/RadioTrailing.vue
@@ -9,8 +9,8 @@
       <SfRadio v-model="radioModel" :value="value" :name="name" />
     </label>
   </div>
-  <div class="flex justify-between mt-2">
-    <p class="text-xs text-neutral-500">Help text</p>
+  <div class="flex justify-between">
+    <p class="typography-hint-xs text-neutral-500 mt-0.5">Help text</p>
   </div>
 </template>
 
diff --git a/apps/preview/nuxt/pages/showcases/Switch/SwitchLeading.vue b/apps/preview/nuxt/pages/showcases/Switch/SwitchLeading.vue
index bfedefc7fb..3fc71a9dd8 100644
--- a/apps/preview/nuxt/pages/showcases/Switch/SwitchLeading.vue
+++ b/apps/preview/nuxt/pages/showcases/Switch/SwitchLeading.vue
@@ -3,7 +3,7 @@
     <SfSwitch v-model="modelCheck" value="value" />
     <span class="text-base ml-[10px] text-gray-900 cursor-pointer font-body">Label</span>
   </label>
-  <span class="text-xs mt-0.5 ml-12 block text-gray-500">Help text</span>
+  <span class="typography-hint-xs mt-0.5 ml-12 block text-gray-500">Help text</span>
 </template>
 
 <script lang="ts" setup>
diff --git a/apps/preview/nuxt/pages/showcases/Switch/SwitchTrailing.vue b/apps/preview/nuxt/pages/showcases/Switch/SwitchTrailing.vue
index 62898baa2c..daac698e26 100644
--- a/apps/preview/nuxt/pages/showcases/Switch/SwitchTrailing.vue
+++ b/apps/preview/nuxt/pages/showcases/Switch/SwitchTrailing.vue
@@ -3,7 +3,7 @@
     <span class="text-base text-gray-900 cursor-pointer font-body">Label</span>
     <SfSwitch v-model="modelCheck" value="value" />
   </label>
-  <span class="text-xs mt-0.5 block text-gray-500">Help text</span>
+  <span class="typography-hint-xs mt-0.5 block text-gray-500">Help text</span>
 </template>
 
 <script lang="ts" setup>
diff --git a/apps/preview/nuxt/pages/showcases/Textarea/TextareaAutoresize.vue b/apps/preview/nuxt/pages/showcases/Textarea/TextareaAutoresize.vue
index 665d2f5399..a5e0fecf4b 100644
--- a/apps/preview/nuxt/pages/showcases/Textarea/TextareaAutoresize.vue
+++ b/apps/preview/nuxt/pages/showcases/Textarea/TextareaAutoresize.vue
@@ -1,14 +1,11 @@
 <template>
   <label>
     <span class="typography-text-sm font-medium">Description</span>
-    <SfTextarea ref="textareaRef" class="w-full h-max-[500px]" />
+    <SfTextarea ref="textareaRef" class="w-full h-max-[500px] block" />
   </label>
-  <div class="flex justify-between mt-0.5">
-    <div>
-      <p class="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
-    </div>
-  </div>
+  <p class="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
 </template>
+
 <script setup lang="ts">
 import { SfTextarea } from '@storefront-ui/vue';
 import { attach } from '@frsource/autoresize-textarea';
diff --git a/apps/preview/nuxt/pages/showcases/Textarea/TextareaCharacters.vue b/apps/preview/nuxt/pages/showcases/Textarea/TextareaCharacters.vue
index 8d8f7dc311..d33bc6b598 100644
--- a/apps/preview/nuxt/pages/showcases/Textarea/TextareaCharacters.vue
+++ b/apps/preview/nuxt/pages/showcases/Textarea/TextareaCharacters.vue
@@ -7,20 +7,20 @@
       :disabled="disabled"
       :readonly="readonly"
       placeholder="Write something about yourself..."
-      class="w-full"
+      class="w-full block"
     />
   </label>
   <div class="flex justify-between mt-0.5">
     <div>
       <p v-if="invalid && !disabled" class="typography-text-sm text-negative-700 font-medium mt-0.5">{{ errorText }}</p>
-      <p :class="'text-xs text-neutral-500'">
+      <p :class="'typography-hint-xs text-neutral-500'">
         {{ helpText }}
       </p>
     </div>
     <p
       v-if="characterLimit && !readonly"
       :class="[
-        'typography-text-xs',
+        'typography-error-xs',
         disabled ? 'text-disabled-500' : isAboveLimit ? 'text-negative-700 font-medium' : 'text-neutral-500',
       ]"
     >
diff --git a/apps/preview/nuxt/pages/showcases/Textarea/TextareaDisabled.vue b/apps/preview/nuxt/pages/showcases/Textarea/TextareaDisabled.vue
index 2fcb0e7a2f..d9a4a6e65c 100644
--- a/apps/preview/nuxt/pages/showcases/Textarea/TextareaDisabled.vue
+++ b/apps/preview/nuxt/pages/showcases/Textarea/TextareaDisabled.vue
@@ -4,15 +4,12 @@
     <SfTextarea
       disabled
       placeholder="Write something about yourself..."
-      class="w-full !bg-disabled-100 !ring-disabled-300 !ring-1"
+      class="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
     />
   </label>
-  <div class="flex justify-between mt-0.5">
-    <div>
-      <p class="typography-text-xs text-disabled-500">Do not include personal or financial information.</p>
-    </div>
-  </div>
+  <p class="typography-hint-xs text-disabled-500 mt-0.5">Do not include personal or financial information.</p>
 </template>
+
 <script lang="ts" setup>
 import { SfTextarea } from '@storefront-ui/vue';
 </script>
diff --git a/apps/preview/nuxt/pages/showcases/Textarea/TextareaInvalid.vue b/apps/preview/nuxt/pages/showcases/Textarea/TextareaInvalid.vue
index 2e63e29efe..7e69d9f23a 100644
--- a/apps/preview/nuxt/pages/showcases/Textarea/TextareaInvalid.vue
+++ b/apps/preview/nuxt/pages/showcases/Textarea/TextareaInvalid.vue
@@ -1,15 +1,14 @@
 <template>
   <label>
     <span class="text-sm font-medium">Description</span>
-    <SfTextarea invalid placeholder="Write something about yourself..." class="w-full" />
+    <SfTextarea invalid placeholder="Write something about yourself..." class="w-full block" />
   </label>
   <div class="flex justify-between mt-0.5">
-    <div>
-      <p class="typography-text-sm text-negative-700 font-medium">The field cannot be empty</p>
-      <p class="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
-    </div>
+    <p class="typography-text-sm text-negative-700 font-medium">The field cannot be empty</p>
+    <p class="typography-hint-xs text-neutral-500">Do not include personal or financial information.</p>
   </div>
 </template>
+
 <script lang="ts" setup>
 import { SfTextarea } from '@storefront-ui/vue';
 </script>
diff --git a/apps/preview/nuxt/pages/showcases/Textarea/TextareaReadonly.vue b/apps/preview/nuxt/pages/showcases/Textarea/TextareaReadonly.vue
index 46ef5b9918..560ad47990 100644
--- a/apps/preview/nuxt/pages/showcases/Textarea/TextareaReadonly.vue
+++ b/apps/preview/nuxt/pages/showcases/Textarea/TextareaReadonly.vue
@@ -3,16 +3,13 @@
     <span class="typography-text-sm font-medium">Description</span>
     <SfTextarea
       model-value="Hello! I'm a passionate shopper and a regular user of this ecommerce platform."
-      class="w-full !bg-disabled-100 !ring-disabled-300 !ring-1"
+      class="w-full !bg-disabled-100 !ring-disabled-300 !ring-1 block"
       readonly
     />
   </label>
-  <div class="flex justify-between mt-0.5">
-    <div>
-      <p class="typography-text-xs text-neutral-500">Do not include personal or financial information.</p>
-    </div>
-  </div>
+  <p class="typography-hint-xs text-neutral-500 mt-0.5">Do not include personal or financial information.</p>
 </template>
+
 <script lang="ts" setup>
 import { SfTextarea } from '@storefront-ui/vue';
 </script>
diff --git a/packages/sfui/typography/index.ts b/packages/sfui/typography/index.ts
index d6784de3de..c6f34f7daf 100644
--- a/packages/sfui/typography/index.ts
+++ b/packages/sfui/typography/index.ts
@@ -70,17 +70,22 @@ export default plugin.withOptions(
           ['error-lg', 'fontSize.lg', 'lineHeight.7'],
           ['error-base', 'fontSize.base', 'lineHeight.6'],
           ['error-sm', 'fontSize.sm', 'lineHeight.5'],
+          ['error-xs', 'fontSize.xs', 'lineHeight.4'],
           ['hint-lg', 'fontSize.lg', 'lineHeight.7'],
           ['hint-base', 'fontSize.base', 'lineHeight.6'],
           ['hint-sm', 'fontSize.sm', 'lineHeight.5'],
-        ].reduce((p, [name, fontSize, lineHeight, fontFamily]) => {
-          p[name] = {
-            fontSize: theme(fontSize),
-            lineHeight: theme(lineHeight),
-            fontFamily: fontFamily ? theme(fontFamily) : undefined,
-          };
-          return p;
-        }, {} as Record<string, ConfigValue>),
+          ['hint-xs', 'fontSize.xs', 'lineHeight.4'],
+        ].reduce(
+          (p, [name, fontSize, lineHeight, fontFamily]) => {
+            p[name] = {
+              fontSize: theme(fontSize),
+              lineHeight: theme(lineHeight),
+              fontFamily: fontFamily ? theme(fontFamily) : undefined,
+            };
+            return p;
+          },
+          {} as Record<string, ConfigValue>,
+        ),
     } as { [PLUGIN_CONFIG_KEY]: ResolvableTo<ConfigKeyValuePair> },
   }),
 );