@qasa/qds-ui 0.2.0 → 0.4.0

package/dist/index.d.ts

@@ -62,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;
@@ -117,6 +120,9 @@ declare const theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -131,7 +137,9 @@ declare const theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -141,7 +149,9 @@ declare const theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -210,6 +220,7 @@ declare const theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -217,6 +228,7 @@ declare const theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -362,6 +374,7 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -369,6 +382,7 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -498,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;
@@ -553,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;
@@ -567,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;
@@ -577,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;
@@ -692,6 +716,7 @@ interface QdsProviderProps {
 declare function QdsProvider({ children, themeOverrides, cacheOptions }: QdsProviderProps): JSX.Element;
 
 declare const SIZE_MAP: {
+    xs: number;
     sm: number;
     md: number;
     lg: number;
@@ -799,15 +824,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;
@@ -854,6 +882,9 @@ declare const getFormFieldBaseStyles: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -868,7 +899,9 @@ declare const getFormFieldBaseStyles: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -878,7 +911,9 @@ declare const getFormFieldBaseStyles: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -947,6 +982,7 @@ declare const getFormFieldBaseStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -954,6 +990,7 @@ declare const getFormFieldBaseStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -1108,6 +1145,11 @@ declare const getFormFieldBaseStyles: (theme: {
     borderRadius: string;
     backgroundColor: string;
     color: string;
+    WebkitTouchCallout: "none";
+    WebkitTapHighlightColor: "transparent";
+    '&::-webkit-date-and-time-value': {
+        textAlign: "left";
+    };
     alignItems: "center";
 };
 
@@ -1209,15 +1251,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;
@@ -1264,6 +1309,9 @@ declare const getSizeStyles$6: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -1278,7 +1326,9 @@ declare const getSizeStyles$6: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -1288,7 +1338,9 @@ declare const getSizeStyles$6: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -1357,6 +1409,7 @@ declare const getSizeStyles$6: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -1364,6 +1417,7 @@ declare const getSizeStyles$6: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -1514,6 +1568,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: {
@@ -1573,15 +1648,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;
@@ -1628,6 +1706,9 @@ declare const getVariantStyles$1: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -1642,7 +1723,9 @@ declare const getVariantStyles$1: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -1652,7 +1735,9 @@ declare const getVariantStyles$1: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -1721,6 +1806,7 @@ declare const getVariantStyles$1: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -1728,6 +1814,7 @@ declare const getVariantStyles$1: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -1876,8 +1963,6 @@ declare const getVariantStyles$1: (theme: {
     tertiary: {
         background: string;
         color: string;
-        border: string;
-        borderColor: string;
         ":not([disabled])": {
             '@media(hover: hover)': {
                 ':hover': {
@@ -1889,22 +1974,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>;
@@ -2015,15 +2084,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;
@@ -2067,9 +2139,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;
@@ -2084,7 +2163,9 @@ declare const getSizeStyles$5: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -2094,7 +2175,9 @@ declare const getSizeStyles$5: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -2163,6 +2246,7 @@ declare const getSizeStyles$5: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -2170,6 +2254,7 @@ declare const getSizeStyles$5: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -2198,15 +2283,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;
@@ -2315,15 +2400,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;
@@ -2406,6 +2491,9 @@ declare const getSizeStyles$4: (theme: {
         tooltip: number;
     };
     colors: {
+        /**
+         * The `svg`'s `viewBox` attribute
+         */
         core: {
             black: string;
             white: string;
@@ -2418,15 +2506,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;
@@ -2438,7 +2529,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;
@@ -2473,6 +2568,9 @@ declare const getSizeStyles$4: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -2487,7 +2585,9 @@ declare const getSizeStyles$4: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -2497,7 +2597,9 @@ declare const getSizeStyles$4: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -2570,6 +2672,7 @@ declare const getSizeStyles$4: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -2577,6 +2680,7 @@ declare const getSizeStyles$4: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -2798,6 +2902,8 @@ declare const LocationDotIcon: react.ForwardRefExoticComponent<IconProps & react
 
 declare const MapIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 
+declare const MinusIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+
 declare const PlusIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 
 declare const SearchIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
@@ -2872,15 +2978,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;
@@ -2927,6 +3036,9 @@ declare const getSizeStyles$3: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -2941,7 +3053,9 @@ declare const getSizeStyles$3: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -2951,7 +3065,9 @@ declare const getSizeStyles$3: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -3020,6 +3136,7 @@ declare const getSizeStyles$3: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -3027,6 +3144,7 @@ declare const getSizeStyles$3: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -3218,15 +3336,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;
@@ -3273,6 +3394,9 @@ declare const getVariantStyles: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -3287,7 +3411,9 @@ declare const getVariantStyles: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -3297,7 +3423,9 @@ declare const getVariantStyles: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -3366,6 +3494,7 @@ declare const getVariantStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -3373,6 +3502,7 @@ declare const getVariantStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -3493,7 +3623,7 @@ declare const getVariantStyles: (theme: {
     primary: {
         background: string;
         color: string;
-        ':enabled': {
+        ":not([disabled])": {
             '@media(hover: hover)': {
                 ':hover': {
                     background: string;
@@ -3507,7 +3637,7 @@ declare const getVariantStyles: (theme: {
     secondary: {
         background: string;
         color: string;
-        ':enabled': {
+        ":not([disabled])": {
             '@media(hover: hover)': {
                 ':hover': {
                     background: string;
@@ -3521,9 +3651,7 @@ declare const getVariantStyles: (theme: {
     tertiary: {
         background: string;
         color: string;
-        border: string;
-        borderColor: string;
-        ':enabled': {
+        ":not([disabled])": {
             '@media(hover: hover)': {
                 ':hover': {
                     background: string;
@@ -3537,7 +3665,7 @@ declare const getVariantStyles: (theme: {
     ghost: {
         background: string;
         color: string;
-        ':enabled': {
+        ":not([disabled])": {
             '@media(hover: hover)': {
                 ':hover': {
                     background: string;
@@ -3685,15 +3813,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;
@@ -3740,6 +3871,9 @@ declare const getSizeStyles$2: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -3754,7 +3888,9 @@ declare const getSizeStyles$2: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -3764,7 +3900,9 @@ declare const getSizeStyles$2: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -3833,6 +3971,7 @@ declare const getSizeStyles$2: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -3840,6 +3979,7 @@ declare const getSizeStyles$2: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -3955,9 +4095,7 @@ declare const getSizeStyles$2: (theme: {
                 letterSpacing: string;
             };
         };
-    }; /**
-     * Size of the label
-     */
+    };
 }) => {
     sm: {
         fontFamily: string;
@@ -4057,15 +4195,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;
@@ -4112,6 +4253,9 @@ declare const getSizeStyles$1: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -4126,7 +4270,9 @@ declare const getSizeStyles$1: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -4136,7 +4282,9 @@ declare const getSizeStyles$1: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -4205,6 +4353,7 @@ declare const getSizeStyles$1: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -4212,6 +4361,7 @@ declare const getSizeStyles$1: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -4402,15 +4552,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;
@@ -4457,6 +4610,9 @@ declare const getSizeStyles: (theme: {
             brandSecondary: string;
             brandSecondaryHover: string;
             brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
             negative: string;
             warning: string;
             positive: string;
@@ -4471,7 +4627,9 @@ declare const getSizeStyles: (theme: {
             negative: string;
             warning: string;
             positive: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         icon: {
             default: string;
@@ -4481,7 +4639,9 @@ declare const getSizeStyles: (theme: {
             negative: string;
             warning: string;
             success: string;
-            onColor: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
         };
         border: {
             default: string;
@@ -4550,6 +4710,7 @@ declare const getSizeStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
             md: {
                 fontFamily: string;
@@ -4557,6 +4718,7 @@ declare const getSizeStyles: (theme: {
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
+                fontFeatureSettings: string;
             };
         };
         title: {
@@ -4589,9 +4751,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;
@@ -5001,4 +5161,4 @@ declare function useStableId(fixedId?: string | null): string;
  */
 declare const useSafeLayoutEffect: typeof useLayoutEffect;
 
-export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellSlashIcon, Button, ButtonProps, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, Divider, DividerProps, EllipsisIcon, EllipsisVerticalIcon, ForwardRefComponent, GlobalStyles, Heading, HeadingProps, HeartFilledIcon, HeartIcon, IconButton, IconButtonProps, IconProps, Image, ImageIcon, ImageProps, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, LoadingDots, LoadingDotsProps, LocationDotIcon, MapIcon, OwnProps, Paragraph, ParagraphProps, PlusIcon, PropsOf, QdsProvider, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XmarkIcon, createIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };
+export { ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellSlashIcon, Button, ButtonProps, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, Divider, DividerProps, EllipsisIcon, EllipsisVerticalIcon, ForwardRefComponent, GlobalStyles, Heading, HeadingProps, HeartFilledIcon, HeartIcon, IconButton, IconButtonProps, IconProps, Image, ImageIcon, ImageProps, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, LoadingDots, LoadingDotsProps, LocationDotIcon, MapIcon, MinusIcon, OwnProps, Paragraph, ParagraphProps, PlusIcon, PropsOf, QdsProvider, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XmarkIcon, createIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };