@qasa/qds-ui 0.5.0 → 0.7.0

package/dist/index.d.ts

@@ -198,6 +198,7 @@ declare const theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -214,6 +215,30 @@ declare const theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -230,6 +255,22 @@ declare const theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -328,6 +369,22 @@ declare const theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -368,6 +425,30 @@ interface ThemeOverrides {
 declare const overrideTheme: (overrides: ThemeOverrides) => {
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -384,6 +465,22 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -482,6 +579,22 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -692,6 +805,7 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -708,12 +822,16 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
     };
 };
 
+declare const SUPPORTED_LANGUAGE_CODES: readonly ["en", "sv", "fi", "fr"];
+declare type LanguageCode = typeof SUPPORTED_LANGUAGE_CODES[number];
+
 interface QdsProviderProps {
     children: ReactNode;
     themeOverrides?: ThemeOverrides;
     cacheOptions?: Partial<Options>;
+    locale: LanguageCode;
 }
-declare function QdsProvider({ children, themeOverrides, cacheOptions }: QdsProviderProps): JSX.Element;
+declare function QdsProvider({ children, themeOverrides, cacheOptions, locale }: QdsProviderProps): JSX.Element;
 
 declare const SIZE_MAP: {
     xs: number;
@@ -960,6 +1078,7 @@ declare const getFormFieldBaseStyles: (theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -976,6 +1095,30 @@ declare const getFormFieldBaseStyles: (theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -992,6 +1135,22 @@ declare const getFormFieldBaseStyles: (theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -1090,6 +1249,22 @@ declare const getFormFieldBaseStyles: (theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -1387,6 +1562,7 @@ declare const getSizeStyles$6: (theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -1403,6 +1579,30 @@ declare const getSizeStyles$6: (theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -1419,6 +1619,22 @@ declare const getSizeStyles$6: (theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -1517,6 +1733,22 @@ declare const getSizeStyles$6: (theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -1784,6 +2016,7 @@ declare const getVariantStyles$1: (theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -1800,6 +2033,30 @@ declare const getVariantStyles$1: (theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -1816,6 +2073,22 @@ declare const getVariantStyles$1: (theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -1914,6 +2187,22 @@ declare const getVariantStyles$1: (theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -2220,6 +2509,7 @@ declare const getSizeStyles$5: (theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -2236,6 +2526,30 @@ declare const getSizeStyles$5: (theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -2252,6 +2566,22 @@ declare const getSizeStyles$5: (theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -2285,16 +2615,10 @@ declare const getSizeStyles$5: (theme: {
             '2xs': {
                 fontFamily: string;
                 fontWeight: string;
-                /**
-                 * Truncates the heading after a specific number of lines
-                 */
                 fontSize: string;
                 lineHeight: string;
                 letterSpacing: string;
-            }; /**
-             * Alignment of the heading
-             * @default 'left'
-             */
+            };
             '3xs': {
                 fontFamily: string;
                 fontWeight: string;
@@ -2356,6 +2680,22 @@ declare const getSizeStyles$5: (theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -2405,9 +2745,6 @@ declare const getSizeStyles$5: (theme: {
     '2xs': {
         fontFamily: string;
         fontWeight: string;
-        /**
-         * Truncates the heading after a specific number of lines
-         */
         fontSize: string;
         lineHeight: string;
         letterSpacing: string;
@@ -2651,6 +2988,7 @@ declare const getSizeStyles$4: (theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -2671,6 +3009,30 @@ declare const getSizeStyles$4: (theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -2687,6 +3049,22 @@ declare const getSizeStyles$4: (theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -2785,6 +3163,22 @@ declare const getSizeStyles$4: (theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -3119,6 +3513,7 @@ declare const getSizeStyles$3: (theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -3135,6 +3530,30 @@ declare const getSizeStyles$3: (theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -3151,6 +3570,22 @@ declare const getSizeStyles$3: (theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -3249,6 +3684,22 @@ declare const getSizeStyles$3: (theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -3477,6 +3928,7 @@ declare const getVariantStyles: (theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -3493,6 +3945,30 @@ declare const getVariantStyles: (theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -3509,6 +3985,22 @@ declare const getVariantStyles: (theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -3607,6 +4099,22 @@ declare const getVariantStyles: (theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -3750,6 +4258,11 @@ interface TextFieldOptions extends InputBaseOptions {
      * The error message to display if `isInvalid` is `true`
      */
     errorMessage?: string;
+    /**
+     * If `true`, the input will display an optional indicator.
+     * If the `isRequired` prop is also `true`, this prop will be ignored.
+     */
+    isOptional?: boolean;
     /**
      * Text that provides additional guidance to the user
      */
@@ -3962,6 +4475,7 @@ declare const getSizeStyles$2: (theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -3978,6 +4492,30 @@ declare const getSizeStyles$2: (theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -3994,6 +4532,22 @@ declare const getSizeStyles$2: (theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -4092,6 +4646,22 @@ declare const getSizeStyles$2: (theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -4350,6 +4920,7 @@ declare const getSizeStyles$1: (theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -4366,6 +4937,30 @@ declare const getSizeStyles$1: (theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -4382,6 +4977,22 @@ declare const getSizeStyles$1: (theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -4480,6 +5091,22 @@ declare const getSizeStyles$1: (theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -4707,6 +5334,7 @@ declare const getSizeStyles: (theme: {
     };
     radii: {
         none: string;
+        '2xs': string;
         xs: string;
         sm: string;
         md: string;
@@ -4723,6 +5351,30 @@ declare const getSizeStyles: (theme: {
     };
     typography: {
         display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
             lg: {
                 fontFamily: string;
                 fontWeight: string;
@@ -4739,6 +5391,22 @@ declare const getSizeStyles: (theme: {
                 letterSpacing: string;
                 fontFeatureSettings: string;
             };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
         };
         title: {
             lg: {
@@ -4837,6 +5505,22 @@ declare const getSizeStyles: (theme: {
                 letterSpacing: string;
             };
         };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
         caption: {
             md: {
                 fontFamily: string;
@@ -5081,12 +5765,10 @@ declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.Re
 
 interface UseBreakpointOptions {
     /**
-     * If `true` the intital value will be `base` instead of the current breakpoint.
-     * This is to support hydration when using SSR.
+     * If `true` the initial value will be `base` instead of the current breakpoint.
+     * This is to support hydration when using server side rendering.
      *
-     * If you're creating a client-side rendered app, you can pass `false` to get the correct value on the first render.
-     *
-     * @default true
+     * @default false
      */
     ssr?: boolean;
 }
@@ -5094,7 +5776,7 @@ interface UseBreakpointOptions {
  * Hook for getting the current breakpoint.
  */
 declare function useBreakpoint(params?: UseBreakpointOptions): {
-    currentBreakpoint: "2xl" | "base" | "lg" | "md" | "sm" | "xl";
+    currentBreakpoint: "2xl" | "base" | "xl" | "lg" | "md" | "sm";
 };
 
 declare type Breakpoints = Theme['breakpoints'];