@qasa/qds-ui 0.1.10-next.0 → 0.2.0-next.10

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import * as react from 'react';
 import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, useLayoutEffect } from 'react';
+import { Options } from '@emotion/cache';
 import { CSSObject } from '@emotion/react';
 
 declare const theme: {
@@ -61,15 +62,18 @@ declare const theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -116,6 +120,9 @@ declare const theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -130,7 +137,9 @@ declare const theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -140,7 +149,9 @@ declare const theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -209,6 +220,7 @@ declare const theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -216,6 +228,7 @@ declare const theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -361,6 +374,7 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -368,6 +382,7 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -497,15 +512,18 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -552,6 +570,9 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -566,7 +587,9 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -576,7 +599,9 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -686,8 +711,9 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
 interface QdsProviderProps {
     children: ReactNode;
     themeOverrides?: ThemeOverrides;
+    cacheOptions?: Partial<Options>;
 }
-declare function QdsProvider({ children, themeOverrides }: QdsProviderProps): JSX.Element;
+declare function QdsProvider({ children, themeOverrides, cacheOptions }: QdsProviderProps): JSX.Element;
 
 declare const SIZE_MAP: {
     sm: number;
@@ -797,15 +823,18 @@ declare const getFormFieldBaseStyles: (theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -852,6 +881,9 @@ declare const getFormFieldBaseStyles: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -866,7 +898,9 @@ declare const getFormFieldBaseStyles: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -876,7 +910,9 @@ declare const getFormFieldBaseStyles: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -945,6 +981,7 @@ declare const getFormFieldBaseStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -952,6 +989,7 @@ declare const getFormFieldBaseStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -1207,15 +1245,18 @@ declare const getSizeStyles$6: (theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -1262,6 +1303,9 @@ declare const getSizeStyles$6: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -1276,7 +1320,9 @@ declare const getSizeStyles$6: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -1286,7 +1332,9 @@ declare const getSizeStyles$6: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -1355,6 +1403,7 @@ declare const getSizeStyles$6: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -1362,6 +1411,7 @@ declare const getSizeStyles$6: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -1512,6 +1562,27 @@ declare const getSizeStyles$6: (theme: {
         paddingLeft: string;
         paddingRight: string;
     };
+    lg: {
+        fontFamily: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+        height: string;
+        minWidth: string;
+        paddingLeft: string;
+        paddingRight: string;
+    };
+    xl: {
+        fontFamily: string;
+        fontWeight: string;
+        fontSize: string;
+        lineHeight: string;
+        letterSpacing: string;
+        height: string;
+        paddingLeft: string;
+        paddingRight: string;
+    };
 };
 declare const getVariantStyles$1: (theme: {
     mediaQueries: {
@@ -1571,15 +1642,18 @@ declare const getVariantStyles$1: (theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -1626,6 +1700,9 @@ declare const getVariantStyles$1: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -1640,7 +1717,9 @@ declare const getVariantStyles$1: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -1650,7 +1729,9 @@ declare const getVariantStyles$1: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -1719,6 +1800,7 @@ declare const getVariantStyles$1: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -1726,6 +1808,7 @@ declare const getVariantStyles$1: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -1874,8 +1957,6 @@ declare const getVariantStyles$1: (theme: {
     tertiary: {
         background: string;
         color: string;
-        border: string;
-        borderColor: string;
         ":not([disabled])": {
             '@media(hover: hover)': {
                 ':hover': {
@@ -1887,22 +1968,6 @@ declare const getVariantStyles$1: (theme: {
             };
         };
     };
-    ghost: {
-        background: string;
-        color: string;
-        textDecoration: string;
-        textUnderlineOffset: number;
-        ":not([disabled])": {
-            '@media(hover: hover)': {
-                ':hover': {
-                    background: string;
-                };
-                ':active': {
-                    background: string;
-                };
-            };
-        };
-    };
 };
 
 declare type ButtonVariant = VariantProps<typeof getVariantStyles$1>;
@@ -2013,15 +2078,18 @@ declare const getSizeStyles$5: (theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -2065,9 +2133,16 @@ declare const getSizeStyles$5: (theme: {
             brandPrimary: string;
             brandPrimaryHover: string;
             brandPrimaryActive: string;
+            /**
+             * Alignment of the heading
+             * @default 'left'
+             */
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -2082,7 +2157,9 @@ declare const getSizeStyles$5: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -2092,7 +2169,9 @@ declare const getSizeStyles$5: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -2161,6 +2240,7 @@ declare const getSizeStyles$5: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -2168,6 +2248,7 @@ declare const getSizeStyles$5: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -2196,15 +2277,15 @@ declare const getSizeStyles$5: (theme: {
                 fontFamily: string;
                 fontWeight: string;
                 fontSize: string;
-                lineHeight: string;
+                lineHeight: string; /**
+                 * Alignment of the heading
+                 * @default 'left'
+                 */
                 letterSpacing: string;
             };
             '2xs': {
                 fontFamily: string;
-                fontWeight: string; /**
-                 * Alignment of the heading
-                 * @default 'left'
-                 */
+                fontWeight: string;
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
@@ -2313,15 +2394,15 @@ declare const getSizeStyles$5: (theme: {
         fontFamily: string;
         fontWeight: string;
         fontSize: string;
-        lineHeight: string;
+        lineHeight: string; /**
+         * Alignment of the heading
+         * @default 'left'
+         */
         letterSpacing: string;
     };
     '2xs': {
         fontFamily: string;
-        fontWeight: string; /**
-         * Alignment of the heading
-         * @default 'left'
-         */
+        fontWeight: string;
         fontSize: string;
         lineHeight: string;
         letterSpacing: string;
@@ -2404,6 +2485,9 @@ declare const getSizeStyles$4: (theme: {
         tooltip: number;
     };
     colors: {
+        /**
+         * The `svg`'s `viewBox` attribute
+         */
         core: {
             black: string;
             white: string;
@@ -2416,15 +2500,18 @@ declare const getSizeStyles$4: (theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -2436,7 +2523,11 @@ declare const getSizeStyles$4: (theme: {
             red90: string;
             green90: string;
             green80: string;
-            green70: string;
+            green70: string; /**
+             * The size of the icon.
+             *
+             * @default 16
+             */
             green60: string;
             green50: string;
             green40: string;
@@ -2471,6 +2562,9 @@ declare const getSizeStyles$4: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -2485,7 +2579,9 @@ declare const getSizeStyles$4: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -2495,7 +2591,9 @@ declare const getSizeStyles$4: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -2568,6 +2666,7 @@ declare const getSizeStyles$4: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -2575,6 +2674,7 @@ declare const getSizeStyles$4: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -2870,15 +2970,18 @@ declare const getSizeStyles$3: (theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -2925,6 +3028,9 @@ declare const getSizeStyles$3: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -2939,7 +3045,9 @@ declare const getSizeStyles$3: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -2949,7 +3057,9 @@ declare const getSizeStyles$3: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -3018,6 +3128,7 @@ declare const getSizeStyles$3: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -3025,6 +3136,7 @@ declare const getSizeStyles$3: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -3216,15 +3328,18 @@ declare const getVariantStyles: (theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -3271,6 +3386,9 @@ declare const getVariantStyles: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -3285,7 +3403,9 @@ declare const getVariantStyles: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -3295,7 +3415,9 @@ declare const getVariantStyles: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -3364,6 +3486,7 @@ declare const getVariantStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -3371,6 +3494,7 @@ declare const getVariantStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -3491,7 +3615,7 @@ declare const getVariantStyles: (theme: {
     primary: {
         background: string;
         color: string;
-        ':enabled': {
+        ":not([disabled])": {
             '@media(hover: hover)': {
                 ':hover': {
                     background: string;
@@ -3505,7 +3629,7 @@ declare const getVariantStyles: (theme: {
     secondary: {
         background: string;
         color: string;
-        ':enabled': {
+        ":not([disabled])": {
             '@media(hover: hover)': {
                 ':hover': {
                     background: string;
@@ -3519,9 +3643,7 @@ declare const getVariantStyles: (theme: {
     tertiary: {
         background: string;
         color: string;
-        border: string;
-        borderColor: string;
-        ':enabled': {
+        ":not([disabled])": {
             '@media(hover: hover)': {
                 ':hover': {
                     background: string;
@@ -3535,7 +3657,7 @@ declare const getVariantStyles: (theme: {
     ghost: {
         background: string;
         color: string;
-        ':enabled': {
+        ":not([disabled])": {
             '@media(hover: hover)': {
                 ':hover': {
                     background: string;
@@ -3683,15 +3805,18 @@ declare const getSizeStyles$2: (theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -3704,7 +3829,9 @@ declare const getSizeStyles$2: (theme: {
             green90: string;
             green80: string;
             green70: string;
-            green60: string;
+            green60: string; /**
+             * Size of the label
+             */
             green50: string;
             green40: string;
             green30: string;
@@ -3738,6 +3865,9 @@ declare const getSizeStyles$2: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -3752,7 +3882,9 @@ declare const getSizeStyles$2: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -3762,7 +3894,9 @@ declare const getSizeStyles$2: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -3831,13 +3965,17 @@ declare const getSizeStyles$2: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
                 fontWeight: string;
                 fontSize: string;
-                lineHeight: string;
+                lineHeight: string; /**
+                 * Size of the label
+                 */
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -4055,15 +4193,18 @@ declare const getSizeStyles$1: (theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -4110,6 +4251,9 @@ declare const getSizeStyles$1: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -4124,7 +4268,9 @@ declare const getSizeStyles$1: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -4134,7 +4280,9 @@ declare const getSizeStyles$1: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -4203,6 +4351,7 @@ declare const getSizeStyles$1: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -4210,6 +4359,7 @@ declare const getSizeStyles$1: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -4400,15 +4550,18 @@ declare const getSizeStyles: (theme: {
             gray30: string;
             gray20: string;
             gray10: string;
-            brand90: string;
-            brand80: string;
-            brand70: string;
-            brand60: string;
-            brand50: string;
-            brand40: string;
-            brand30: string;
-            brand20: string;
-            brand10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
             red10: string;
             red20: string;
             red30: string;
@@ -4455,6 +4608,9 @@ declare const getSizeStyles: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -4469,7 +4625,9 @@ declare const getSizeStyles: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -4479,7 +4637,9 @@ declare const getSizeStyles: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -4548,6 +4708,7 @@ declare const getSizeStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -4555,6 +4716,7 @@ declare const getSizeStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -4587,9 +4749,7 @@ declare const getSizeStyles: (theme: {
                 letterSpacing: string;
             };
             '2xs': {
-                fontFamily: string; /**
-                 * Truncates the text after a specific number of lines
-                 */
+                fontFamily: string;
                 fontWeight: string;
                 fontSize: string;
                 lineHeight: string;