@mmb-digital/design-system-web 0.1.21 → 0.1.22

package/dist/index.d.ts

@@ -127,24 +127,29 @@ declare enum TabsVariant {
     secondary = "secondary",
     tertiary = "tertiary"
 }
-interface TabsItemProps {
-    colorScheme: ColorScheme;
+interface TabItemType {
     icon?: ReactNode;
     id: string;
     isActive?: boolean;
     onClick?: () => void;
-    text?: ReactNode | string;
+    text?: ReactElement | string;
+}
+interface TabsType {
+    tabItems: TabItemType[];
     variant: TabsVariant;
 }
-interface TabsProps {
-    colorScheme?: ColorScheme;
-    defaultActiveStep?: number;
-    steps: TabsItemProps[];
+
+interface TabsItemProps extends TabItemType {
+    colorScheme: ColorScheme;
     variant: TabsVariant;
 }
 
 declare const TabsItem: FC<TabsItemProps>;
 
+interface TabsProps extends TabsType {
+    colorScheme: ColorScheme;
+}
+
 declare const Tabs: FC<TabsProps>;
 
 declare enum IconProductType {
@@ -752,531 +757,531 @@ type StackProps = HTMLAttributes<HTMLDivElement> & {
 declare const Stack: React.FC<StackProps>;
 
 declare const theme: {
-    palette: {
-        gold100: string;
-        gold200: string;
-        gold500: string;
-        gold600: string;
-        gold700: string;
-        gold800: string;
-        pink100: string;
-        pink200: string;
-        pink300: string;
-        pink400: string;
-        pink500: string;
-        pink600: string;
-        pink700: string;
-        pink800: string;
-        pink900: string;
-        pink1000: string;
-        grey100: string;
-        grey200: string;
-        grey300: string;
-        grey400: string;
-        grey500: string;
-        grey600: string;
-        grey700: string;
-        grey800: string;
-        grey900: string;
-        grey1000: string;
-        black: string;
-        white: string;
-        transparent: string;
-        yellow100: string;
-        yellow200: string;
-        yellow300: string;
-        yellow400: string;
-        yellow500: string;
-        yellow600: string;
-        yellow700: string;
-        yellow800: string;
-        yellow900: string;
-        yellow1000: string;
-        green100: string;
-        green200: string;
-        green300: string;
-        green400: string;
-        green500: string;
-        green600: string;
-        green700: string;
-        green800: string;
-        green900: string;
-        green1000: string;
-        red100: string;
-        red200: string;
-        red300: string;
-        red400: string;
-        red500: string;
-        red600: string;
-        red700: string;
-        red800: string;
-        red900: string;
-        red1000: string;
-        blue100: string;
-        blue200: string;
-        blue300: string;
-        blue400: string;
-        blue500: string;
-        blue600: string;
-        blue700: string;
-        blue800: string;
-        blue900: string;
-        blue1000: string;
+    readonly palette: {
+        readonly gold100: "#fffcee";
+        readonly gold200: "#fbf9f4";
+        readonly gold500: "#a58b4b";
+        readonly gold600: "#85703d";
+        readonly gold700: "#776437";
+        readonly gold800: "#62532d";
+        readonly pink100: "#fef6fc";
+        readonly pink200: "#fae0f5";
+        readonly pink300: "#f3b4e6";
+        readonly pink400: "#ec88d7";
+        readonly pink500: "#e55cc8";
+        readonly pink600: "#de31b9";
+        readonly pink700: "#bd1e9b";
+        readonly pink800: "#911777";
+        readonly pink900: "#651053";
+        readonly pink1000: "#39092f";
+        readonly grey100: "#fafcff";
+        readonly grey200: "#e4e7ec";
+        readonly grey300: "#c6ccd7";
+        readonly grey400: "#a8b2c2";
+        readonly grey500: "#8a97ad";
+        readonly grey600: "#6c7d98";
+        readonly grey700: "#56647b";
+        readonly grey800: "#414c5d";
+        readonly grey900: "#2c333f";
+        readonly grey1000: "#171b21";
+        readonly black: "#000000";
+        readonly white: "#ffffff";
+        readonly transparent: "rgba(255, 255, 255, 0.0000)";
+        readonly yellow100: "#fffcee";
+        readonly yellow200: "#fff9db";
+        readonly yellow300: "#fdf6d8";
+        readonly yellow400: "#fae9a3";
+        readonly yellow500: "#d7b45b";
+        readonly yellow600: "#b17902";
+        readonly yellow700: "#ab6802";
+        readonly yellow800: "#885202";
+        readonly yellow900: "#704300";
+        readonly yellow1000: "#3d2500";
+        readonly green100: "#f7fffb";
+        readonly green200: "#e9fff4";
+        readonly green300: "#def7e6";
+        readonly green400: "#99e5b3";
+        readonly green500: "#6cd07b";
+        readonly green600: "#2e9721";
+        readonly green700: "#258a19";
+        readonly green800: "#1c6c13";
+        readonly green900: "#1d5a16";
+        readonly green1000: "#10310c";
+        readonly red100: "#fff8f7";
+        readonly red200: "#ffebe9";
+        readonly red300: "#fbddda";
+        readonly red400: "#f5aea8";
+        readonly red500: "#eb827a";
+        readonly red600: "#dc3628";
+        readonly red700: "#ca2e21";
+        readonly red800: "#b92518";
+        readonly red900: "#a0271c";
+        readonly red1000: "#57150f";
+        readonly blue100: "#f0f5ff";
+        readonly blue200: "#d7e4ff";
+        readonly blue300: "#b3ccfe";
+        readonly blue400: "#81a9fe";
+        readonly blue500: "#4e86fe";
+        readonly blue600: "#1c65fd";
+        readonly blue700: "#024be3";
+        readonly blue800: "#023ab1";
+        readonly blue900: "#012a7e";
+        readonly blue1000: "#01194c";
     };
-    colors: {
-        fg: {
-            neutral: {
-                default: {
-                    light: string;
-                    dark: string;
+    readonly colors: {
+        readonly fg: {
+            readonly neutral: {
+                readonly default: {
+                    readonly light: "#01194c";
+                    readonly dark: "#ffffff";
                 };
-                subtle: {
-                    light: string;
-                    dark: string;
+                readonly subtle: {
+                    readonly light: "#56647b";
+                    readonly dark: "#a8b2c2";
                 };
-                subtlest: {
-                    light: string;
-                    dark: string;
+                readonly subtlest: {
+                    readonly light: "#6c7d98";
+                    readonly dark: "#6c7d98";
                 };
-                white: {
-                    light: string;
-                    dark: string;
+                readonly white: {
+                    readonly light: "#ffffff";
+                    readonly dark: "#ffffff";
                 };
             };
-            disabled: {
-                light: string;
-                dark: string;
+            readonly disabled: {
+                readonly light: "#8a97ad";
+                readonly dark: "#6c7d98";
             };
-            inverse: {
-                light: string;
-                dark: string;
+            readonly inverse: {
+                readonly light: "#ffffff";
+                readonly dark: "#171b21";
             };
-            link: {
-                default: {
-                    light: string;
-                    dark: string;
+            readonly link: {
+                readonly default: {
+                    readonly light: "#1c65fd";
+                    readonly dark: "#4e86fe";
                 };
-                hover: {
-                    light: string;
-                    dark: string;
+                readonly hover: {
+                    readonly light: "#024be3";
+                    readonly dark: "#81a9fe";
                 };
-                pressed: {
-                    light: string;
-                    dark: string;
+                readonly pressed: {
+                    readonly light: "#023ab1";
+                    readonly dark: "#b3ccfe";
                 };
             };
-            success: {
-                light: string;
-                dark: string;
+            readonly success: {
+                readonly light: "#1c6c13";
+                readonly dark: "#99e5b3";
             };
-            warning: {
-                light: string;
-                dark: string;
+            readonly warning: {
+                readonly light: "#85703d";
+                readonly dark: "#fae9a3";
             };
-            error: {
-                light: string;
-                dark: string;
+            readonly error: {
+                readonly light: "#ca2e21";
+                readonly dark: "#f5aea8";
             };
-            info: {
-                light: string;
-                dark: string;
+            readonly info: {
+                readonly light: "#1c65fd";
+                readonly dark: "#4e86fe";
             };
-            promo: {
-                light: string;
-                dark: string;
+            readonly promo: {
+                readonly light: "#85703d";
+                readonly dark: "#a58b4b";
             };
-            brand: {
-                default: {
-                    light: string;
-                    dark: string;
+            readonly brand: {
+                readonly default: {
+                    readonly light: "#1c65fd";
+                    readonly dark: "#1c65fd";
                 };
-                bold: {
-                    light: string;
-                    dark: string;
+                readonly bold: {
+                    readonly light: "#024be3";
+                    readonly dark: "#4e86fe";
                 };
             };
-            accent: {
-                default: {
-                    light: string;
-                    dark: string;
+            readonly accent: {
+                readonly default: {
+                    readonly light: "#de31b9";
+                    readonly dark: "#de31b9";
                 };
-                bold: {
-                    light: string;
-                    dark: string;
+                readonly bold: {
+                    readonly light: "#bd1e9b";
+                    readonly dark: "#e55cc8";
                 };
             };
         };
-        bg: {
-            neutral: {
-                default: {
-                    light: string;
-                    dark: string;
+        readonly bg: {
+            readonly neutral: {
+                readonly default: {
+                    readonly light: "#a8b2c2";
+                    readonly dark: "#56647b";
                 };
-                subtle: {
-                    light: string;
-                    dark: string;
+                readonly subtle: {
+                    readonly light: "#c6ccd7";
+                    readonly dark: "#414c5d";
                 };
-                subtlest: {
-                    light: string;
-                    dark: string;
+                readonly subtlest: {
+                    readonly light: "#e4e7ec";
+                    readonly dark: "#171b21";
                 };
-                white: {
-                    light: string;
-                    dark: string;
+                readonly white: {
+                    readonly light: "#ffffff";
+                    readonly dark: "#ffffff";
                 };
             };
-            disabled: {
-                light: string;
-                dark: string;
+            readonly disabled: {
+                readonly light: "#e4e7ec";
+                readonly dark: "#414c5d";
             };
-            promo: {
-                default: {
-                    light: string;
-                    dark: string;
+            readonly promo: {
+                readonly default: {
+                    readonly light: "#fbf9f4";
+                    readonly dark: "#62532d";
                 };
-                bold: {
-                    light: string;
-                    dark: string;
+                readonly bold: {
+                    readonly light: "#a58b4b";
+                    readonly dark: "#a58b4b";
                 };
             };
-            error: {
-                default: {
-                    light: string;
-                    dark: string;
+            readonly error: {
+                readonly default: {
+                    readonly light: "#fff8f7";
+                    readonly dark: "#a0271c";
                 };
-                bold: {
-                    light: string;
-                    dark: string;
+                readonly bold: {
+                    readonly light: "#dc3628";
+                    readonly dark: "#f5aea8";
                 };
             };
-            warning: {
-                default: {
-                    light: string;
-                    dark: string;
+            readonly warning: {
+                readonly default: {
+                    readonly light: "#fff9db";
+                    readonly dark: "#fffcee";
                 };
-                bold: {
-                    light: string;
-                    dark: string;
+                readonly bold: {
+                    readonly light: "#fae9a3";
+                    readonly dark: "#b17902";
                 };
             };
-            inverse: {
-                light: string;
-                dark: string;
+            readonly inverse: {
+                readonly light: "#171b21";
+                readonly dark: "#fafcff";
             };
-            success: {
-                default: {
-                    light: string;
-                    dark: string;
+            readonly success: {
+                readonly default: {
+                    readonly light: "#e9fff4";
+                    readonly dark: "#1d5a16";
                 };
-                bold: {
-                    light: string;
-                    dark: string;
+                readonly bold: {
+                    readonly light: "#2e9721";
+                    readonly dark: "#99e5b3";
                 };
             };
-            info: {
-                default: {
-                    light: string;
-                    dark: string;
+            readonly info: {
+                readonly default: {
+                    readonly light: "#f0f5ff";
+                    readonly dark: "#01194c";
                 };
-                bold: {
-                    light: string;
-                    dark: string;
+                readonly bold: {
+                    readonly light: "#1c65fd";
+                    readonly dark: "#4e86fe";
                 };
             };
-            accent: {
-                light: string;
-                dark: string;
+            readonly accent: {
+                readonly light: "#fef6fc";
+                readonly dark: "#651053";
             };
-            brand: {
-                default: {
-                    light: string;
-                    dark: string;
-                    hover: {
-                        light: string;
-                        dark: string;
+            readonly brand: {
+                readonly default: {
+                    readonly light: "#f0f5ff";
+                    readonly dark: "#01194c";
+                    readonly hover: {
+                        readonly light: "#d7e4ff";
+                        readonly dark: "#023ab1";
                     };
-                    pressed: {
-                        light: string;
-                        dark: string;
+                    readonly pressed: {
+                        readonly light: "#d7e4ff";
+                        readonly dark: "#023ab1";
                     };
                 };
-                bold: {
-                    light: string;
-                    dark: string;
-                    hover: {
-                        light: string;
-                        dark: string;
+                readonly bold: {
+                    readonly light: "#1c65fd";
+                    readonly dark: "#1c65fd";
+                    readonly hover: {
+                        readonly light: "#024be3";
+                        readonly dark: "#024be3";
                     };
-                    pressed: {
-                        light: string;
-                        dark: string;
+                    readonly pressed: {
+                        readonly light: "#023ab1";
+                        readonly dark: "#023ab1";
                     };
                 };
             };
         };
-        surface: {
-            overlay: {
-                light: string;
-                dark: string;
+        readonly surface: {
+            readonly overlay: {
+                readonly light: "#f0f5ff";
+                readonly dark: "#171b21";
             };
-            risen: {
-                light: string;
-                dark: string;
+            readonly risen: {
+                readonly light: "#ffffff";
+                readonly dark: "#2c333f";
             };
-            default: {
-                light: string;
-                dark: string;
+            readonly default: {
+                readonly light: "#fafcff";
+                readonly dark: "#171b21";
             };
-            sunken: {
-                light: string;
-                dark: string;
+            readonly sunken: {
+                readonly light: "#c6ccd7";
+                readonly dark: "#56647b";
             };
         };
-        border: {
-            neutral: {
-                default: {
-                    light: string;
-                    dark: string;
+        readonly border: {
+            readonly neutral: {
+                readonly default: {
+                    readonly light: "#56647b";
+                    readonly dark: "#c6ccd7";
                 };
-                subtle: {
-                    light: string;
-                    dark: string;
+                readonly subtle: {
+                    readonly light: "#a8b2c2";
+                    readonly dark: "#6c7d98";
                 };
-                subtlest: {
-                    light: string;
-                    dark: string;
+                readonly subtlest: {
+                    readonly light: "#e4e7ec";
+                    readonly dark: "#56647b";
                 };
             };
-            disabled: {
-                light: string;
-                dark: string;
+            readonly disabled: {
+                readonly light: "#c6ccd7";
+                readonly dark: "#56647b";
             };
-            success: {
-                light: string;
-                dark: string;
+            readonly success: {
+                readonly light: "#2e9721";
+                readonly dark: "#2e9721";
             };
-            warning: {
-                light: string;
-                dark: string;
+            readonly warning: {
+                readonly light: "#b17902";
+                readonly dark: "#b17902";
             };
-            error: {
-                light: string;
-                dark: string;
+            readonly error: {
+                readonly light: "#ca2e21";
+                readonly dark: "#dc3628";
             };
-            promo: {
-                light: string;
-                dark: string;
+            readonly promo: {
+                readonly light: "#a58b4b";
+                readonly dark: "#a58b4b";
             };
-            brand: {
-                bold: {
-                    light: string;
-                    dark: string;
+            readonly brand: {
+                readonly bold: {
+                    readonly light: "#024be3";
+                    readonly dark: "#024be3";
                 };
-                default: {
-                    light: string;
-                    dark: string;
+                readonly default: {
+                    readonly light: "#1c65fd";
+                    readonly dark: "#1c65fd";
                 };
-                subtle: {
-                    light: string;
-                    dark: string;
+                readonly subtle: {
+                    readonly light: "#81a9fe";
+                    readonly dark: "#1c65fd";
                 };
-                subtlest: {
-                    light: string;
-                    dark: string;
+                readonly subtlest: {
+                    readonly light: "#d7e4ff";
+                    readonly dark: "#023ab1";
                 };
             };
-            inverse: {
-                light: string;
-                dark: string;
+            readonly inverse: {
+                readonly light: "rgba(255, 255, 255, 0.1000)";
+                readonly dark: "rgba(255, 255, 255, 0.1000)";
             };
-            accent: {
-                light: string;
-                dark: string;
+            readonly accent: {
+                readonly light: "#fae0f5";
+                readonly dark: "#911777";
             };
         };
-        icon: {
-            bg: {
-                light: string;
-                dark: string;
+        readonly icon: {
+            readonly bg: {
+                readonly light: "#ffffff";
+                readonly dark: "rgba(255, 255, 255, 0.0000)";
             };
-            brand: {
-                light: string;
-                dark: string;
+            readonly brand: {
+                readonly light: "#1c65fd";
+                readonly dark: "#a8b2c2";
             };
-            neutral: {
-                light: string;
-                dark: string;
+            readonly neutral: {
+                readonly light: "#56647b";
+                readonly dark: "#a8b2c2";
             };
-            inverse: {
-                light: string;
-                dark: string;
+            readonly inverse: {
+                readonly light: "#ffffff";
+                readonly dark: "#000000";
             };
-            disabled: {
-                light: string;
-                dark: string;
+            readonly disabled: {
+                readonly light: "#c6ccd7";
+                readonly dark: "#ffffff";
             };
-            error: {
-                light: string;
-                dark: string;
+            readonly error: {
+                readonly light: "#dc3628";
+                readonly dark: "#dc3628";
             };
         };
-        shadow: {
-            buttonFocus: string;
-            cards: string;
-            ultraStrongBlueLg: string;
-            strongBlueMd: string;
+        readonly shadow: {
+            readonly buttonFocus: "0px 0px 0px 2px #FFF, 0px 0px 0px 5px #024BE3";
+            readonly cards: "0px 1px 40px 0px rgba(0, 0, 0, 0.05)";
+            readonly ultraStrongBlueLg: "0px 4px 25px 0px rgba(28, 101, 253, 0.08), 0px 4px 4px 0px rgba(28, 101, 253, 0.04)";
+            readonly strongBlueMd: "0px 4px 4px 0px rgba(28, 101, 253, 0.02), 0px 4px 25px 0px rgba(28, 101, 253, 0.06)";
         };
-        focus: {
-            light: string;
-            dark: string;
+        readonly focus: {
+            readonly light: "#024be3";
+            readonly dark: "#024be3";
         };
     };
-    font: {
-        size: {
-            heading: {
-                h1: {
-                    desktop: string;
-                    mobile: string;
+    readonly font: {
+        readonly size: {
+            readonly heading: {
+                readonly h1: {
+                    readonly desktop: "4rem";
+                    readonly mobile: "2rem";
                 };
-                h2: {
-                    desktop: string;
-                    mobile: string;
+                readonly h2: {
+                    readonly desktop: "2.625rem";
+                    readonly mobile: "2rem";
                 };
-                h3: {
-                    desktop: string;
-                    mobile: string;
+                readonly h3: {
+                    readonly desktop: "2rem";
+                    readonly mobile: "1.5rem";
                 };
-                h4: {
-                    desktop: string;
-                    mobile: string;
+                readonly h4: {
+                    readonly desktop: "1.5rem";
+                    readonly mobile: "1.125rem";
                 };
-                h5: {
-                    desktop: string;
-                    mobile: string;
+                readonly h5: {
+                    readonly desktop: "1.125rem";
+                    readonly mobile: "1.125rem";
                 };
             };
-            body: {
-                xs: string;
-                sm: string;
-                md: string;
-                lg: string;
+            readonly body: {
+                readonly xs: "12px";
+                readonly sm: "14px";
+                readonly md: "16px";
+                readonly lg: "18px";
             };
         };
-        lineHeight: {
-            heading: {
-                h1: {
-                    desktop: string;
-                    mobile: string;
+        readonly lineHeight: {
+            readonly heading: {
+                readonly h1: {
+                    readonly desktop: "4.375rem";
+                    readonly mobile: "2.5rem";
                 };
-                h2: {
-                    desktop: string;
-                    mobile: string;
+                readonly h2: {
+                    readonly desktop: "3.375rem";
+                    readonly mobile: "2.5rem";
                 };
-                h3: {
-                    desktop: string;
-                    mobile: string;
+                readonly h3: {
+                    readonly desktop: "2.5rem";
+                    readonly mobile: "2rem";
                 };
-                h4: {
-                    desktop: string;
-                    mobile: string;
+                readonly h4: {
+                    readonly desktop: "2rem";
+                    readonly mobile: "1.5rem";
                 };
-                h5: {
-                    desktop: string;
-                    mobile: string;
+                readonly h5: {
+                    readonly desktop: "1.5rem";
+                    readonly mobile: "1.5rem";
                 };
             };
-            body: {
-                lg: string;
-                md: string;
-                sm: string;
-                xs: string;
+            readonly body: {
+                readonly lg: "28px";
+                readonly md: "24px";
+                readonly sm: "20px";
+                readonly xs: "16px";
             };
         };
-        weight: {
-            thin: number;
-            extraLight: number;
-            light: number;
-            normal: number;
-            medium: number;
-            semiBold: number;
-            bold: number;
-            extraBold: number;
-            heavy: number;
-            ultra: number;
+        readonly weight: {
+            readonly thin: 100;
+            readonly extraLight: 200;
+            readonly light: 300;
+            readonly normal: 400;
+            readonly medium: 500;
+            readonly semiBold: 600;
+            readonly bold: 700;
+            readonly extraBold: 800;
+            readonly heavy: 900;
+            readonly ultra: 950;
         };
-        letterSpacing: {
-            heading: {
-                h1: {
-                    desktop: string;
-                    mobile: string;
+        readonly letterSpacing: {
+            readonly heading: {
+                readonly h1: {
+                    readonly desktop: "-1.28px";
+                    readonly mobile: "-1px";
                 };
-                h2: {
-                    desktop: string;
-                    mobile: string;
+                readonly h2: {
+                    readonly desktop: "-1px";
+                    readonly mobile: "-1px";
                 };
-                h3: {
-                    desktop: string;
-                    mobile: string;
+                readonly h3: {
+                    readonly desktop: "-1px";
+                    readonly mobile: "0";
                 };
-                h4: {
-                    desktop: string;
-                    mobile: string;
+                readonly h4: {
+                    readonly desktop: "0";
+                    readonly mobile: "0";
                 };
-                h5: {
-                    desktop: string;
-                    mobile: string;
+                readonly h5: {
+                    readonly desktop: "0";
+                    readonly mobile: "0";
                 };
             };
-            body: {
-                lg: string;
-                md: string;
-                sm: string;
-                xs: string;
+            readonly body: {
+                readonly lg: "0";
+                readonly md: "0";
+                readonly sm: "-0.2px";
+                readonly xs: "-0.2px";
             };
         };
     };
-    spacing: {
-        xxs: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        xxl: string;
-        xxxl: string;
-        xxxxl: string;
-        xxxxxl: string;
+    readonly spacing: {
+        readonly xxs: "4px";
+        readonly xs: "8px";
+        readonly sm: "12px";
+        readonly md: "16px";
+        readonly lg: "24px";
+        readonly xl: "32px";
+        readonly xxl: "40px";
+        readonly xxxl: "48px";
+        readonly xxxxl: "56px";
+        readonly xxxxxl: "64px";
     };
-    borderRadius: {
-        xxs: string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
+    readonly borderRadius: {
+        readonly xxs: "4px";
+        readonly xs: "8px";
+        readonly sm: "12px";
+        readonly md: "16px";
+        readonly lg: "24px";
+        readonly xl: "32px";
+        readonly full: "9999px";
     };
-    shadow: {
-        box: {
-            sm: string;
-            md: string;
-            lg: string;
+    readonly shadow: {
+        readonly box: {
+            readonly sm: "0px 0px 8px 0px rgba(28, 101, 253, 0.06), 0px 1px 1px 0px rgba(28, 101, 253, 0.02)";
+            readonly md: "0px 4px 25px 0px rgba(28, 101, 253, 0.06), 0px 4px 4px 0px rgba(28, 101, 253, 0.02)";
+            readonly lg: "0px 4px 25px 0px rgba(28, 101, 253, 0.08), 0px 4px 4px 0px rgba(28, 101, 253, 0.04)";
         };
-        border: {
-            sm: string;
+        readonly border: {
+            readonly sm: "0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10)";
         };
     };
-    container: {
-        xl: string;
+    readonly container: {
+        readonly xl: "1200px";
     };
-    breakpoints: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        xxl: string;
+    readonly breakpoints: {
+        readonly xs: "375px";
+        readonly sm: "576px";
+        readonly md: "768px";
+        readonly lg: "992px";
+        readonly xl: "1280px";
+        readonly xxl: "1920px";
     };
 };
 
-export { AsyncSelect, Button, type ButtonProps, ButtonSize, ButtonStyle, ButtonType, CalculatorResult, CalculatorResultBox, type CalculatorResultBoxModal, type CalculatorResultBoxProps, type CalculatorResultProps, Checkbox, type CheckboxLabel, CheckboxPosition, type CheckboxProps, type ChooseColor, ColorScheme, type ColorSchemeObject, DatePicker, type DatePickerProps, EmailInput, type EmailInputProps, FieldWrapper, type FieldWrapperValues, _default as FormattedAmount, FormattedHtmlMessage, type FormattedHtmlMessageProps, FormattedMessage, type FormattedMessageProps, type FormattedMessageTypes, _default$1 as FormattedPercentage, GapSize, type GetColor, IconProduct, IconProductSize, IconProductType, IconSystem, IconSystemSize, IconSystemType, TooltipInfoConditional as InfoConditional, Infobox, type InfoboxProps, InfoboxSize, InfoboxVariant, InputBase, type InputBaseProps, InputLabel, type InputLabelProps, InputSize, Loader, LoaderOverlayBox, type LoaderOverlayBoxProps, type LoaderProps, LoaderSize, MediaType, Modal, type ModalOnClose, type ModalProps, PhoneInput, type PhoneInputProps, Radio, type RadioBaseWithLabelProps, RadioButton, type RadioButtonLabel, type RadioButtonProps, RadioButtonsHorizontal, type RadioButtonsHorizontalItem, type RadioButtonsHorizontalLabel, type RadioButtonsHorizontalProps, type RadioLabel, RadioPosition, ReasonForClosing, SearchInput, type SearchInputProps, Select, SelectBase, SelectField, type SelectOption, type SelectProps, type SingleValue, Slider, type SliderBreakpoint, SliderInput, type SliderInputLabel, type SliderInputMinMax, type SliderInputProps, type SliderProps, SliderStepType, type SliderSteps, Stack, StackDirection, type StackProps, Table, TableBody, TableData, TableHead, TableHeadData, TableRow, TableVariant, Tabs, TabsItem, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, type TooltipFloatingElement, TooltipGeneral, type TooltipGeneralProps, TooltipInfo, type TooltipInfoConditionalProps, TooltipInfoDisplayMethod, TooltipInfoDisplayableCheck, type TooltipInfoDisplayableCheckProps, type TooltipInfoProps, type TooltipParentElement, type TooltipParentElementProps, TooltipPlacement, TrailingTextInput, type TrailingTextInputProps, Typography, type TypographyProps, TypographyTextAlign, TypographyVariant, TypographyWeight, getColor, theme, useColorScheme, useCreateTooltipFloatingElement, useFormatAmount, useFormattedPercentage, useIsMessageDisplayable };
+export { AsyncSelect, Button, type ButtonProps, ButtonSize, ButtonStyle, ButtonType, CalculatorResult, CalculatorResultBox, type CalculatorResultBoxModal, type CalculatorResultBoxProps, type CalculatorResultProps, Checkbox, type CheckboxLabel, CheckboxPosition, type CheckboxProps, type ChooseColor, ColorScheme, type ColorSchemeObject, DatePicker, type DatePickerProps, EmailInput, type EmailInputProps, FieldWrapper, type FieldWrapperValues, _default as FormattedAmount, FormattedHtmlMessage, type FormattedHtmlMessageProps, FormattedMessage, type FormattedMessageProps, type FormattedMessageTypes, _default$1 as FormattedPercentage, GapSize, type GetColor, IconProduct, IconProductSize, IconProductType, IconSystem, IconSystemSize, IconSystemType, TooltipInfoConditional as InfoConditional, Infobox, type InfoboxProps, InfoboxSize, InfoboxVariant, InputBase, type InputBaseProps, InputLabel, type InputLabelProps, InputSize, Loader, LoaderOverlayBox, type LoaderOverlayBoxProps, type LoaderProps, LoaderSize, MediaType, Modal, type ModalOnClose, type ModalProps, PhoneInput, type PhoneInputProps, Radio, type RadioBaseWithLabelProps, RadioButton, type RadioButtonLabel, type RadioButtonProps, RadioButtonsHorizontal, type RadioButtonsHorizontalItem, type RadioButtonsHorizontalLabel, type RadioButtonsHorizontalProps, type RadioLabel, RadioPosition, ReasonForClosing, SearchInput, type SearchInputProps, Select, SelectBase, SelectField, type SelectOption, type SelectProps, type SingleValue, Slider, type SliderBreakpoint, SliderInput, type SliderInputLabel, type SliderInputMinMax, type SliderInputProps, type SliderProps, SliderStepType, type SliderSteps, Stack, StackDirection, type StackProps, type TabItemType, Table, TableBody, TableData, TableHead, TableHeadData, TableRow, TableVariant, Tabs, TabsItem, type TabsProps, type TabsType, TabsVariant, TextArea, type TextAreaProps, TextInput, type TextInputProps, Toggle, type ToggleProps, type TooltipFloatingElement, TooltipGeneral, type TooltipGeneralProps, TooltipInfo, type TooltipInfoConditionalProps, TooltipInfoDisplayMethod, TooltipInfoDisplayableCheck, type TooltipInfoDisplayableCheckProps, type TooltipInfoProps, type TooltipParentElement, type TooltipParentElementProps, TooltipPlacement, TrailingTextInput, type TrailingTextInputProps, Typography, type TypographyProps, TypographyTextAlign, TypographyVariant, TypographyWeight, getColor, theme, useColorScheme, useCreateTooltipFloatingElement, useFormatAmount, useFormattedPercentage, useIsMessageDisplayable };