venice-ui 2.4.13 → 3.0.1

package/dist/types/config/config.d.ts

@@ -0,0 +1,4268 @@
+import { type AppTheme, type ThemeName } from './themes';
+export declare const createTheme: (theme?: ThemeName | AppTheme) => {
+    text: {
+        primary: "#111827";
+        secondary: "#4B5563";
+        tertiary: "#6B7280";
+        placeholder: "#9CA3AF";
+        disabled: "#9CA3AF";
+        inverse: "#FFFFFF";
+        link: "#2F78B0";
+        error: "#DC2626";
+        success: "#059669";
+    };
+    surface: {
+        page: "#F9FAFB";
+        default: "#FFFFFF";
+        subtle: "#F9FAFB";
+        tertiary: "#F3F4F6";
+        selected: "#F2F8FD";
+        disabled: "#F3F4F6";
+        danger: "#EF4444";
+        hover: "#F2F8FD";
+    };
+    border: {
+        default: "#E5E7EB";
+        strong: "#D1D5DB";
+        hover: "#D1D5DB";
+        focus: "#3B90CB";
+        disabled: "#E5E7EB";
+        error: "#FCA5A5";
+        success: "#059669";
+    };
+    action: {
+        primary: {
+            default: "#3B90CB";
+            hover: "#2F78B0";
+            active: "#25608E";
+            subtitle: "#E4F1FA";
+            disabledText: "#6EB8DF";
+            selected: "#C7E3F5";
+            selectedHover: "#9FD0EC";
+        };
+        danger: {
+            default: "#EF4444";
+            hover: "#DC2626";
+            active: any;
+            disabledBackground: "#FEE2E2";
+            disabledText: "#FCA5A5";
+        };
+        success: {
+            default: "#10B981";
+            hover: "#059669";
+            active: any;
+            disabledBackground: "#D1FAE5";
+            disabledText: any;
+        };
+        warning: {
+            default: "#F59E0B";
+            hover: "#D97706";
+            active: any;
+            disabledBackground: "#FEF3C7";
+            disabledText: any;
+        };
+        secondary: {
+            active: "#F3F4F6";
+            disabledBackground: "#F9FAFB";
+            disabledBorder: "#E5E7EB";
+        };
+    };
+    feedback: {
+        error: {
+            bg: "#FEF2F2";
+            text: "#DC2626";
+        };
+        warning: {
+            bg: "#FFFBEB";
+            text: "#D97706";
+        };
+        success: {
+            bg: "#ECFDF5";
+            text: "#059669";
+        };
+    };
+    focus: {
+        ringPrimary: string;
+    };
+    shadow: {
+        toggleThumb: string;
+        inner: string;
+        card: string;
+        modal: string;
+    };
+    divider: {
+        default: string;
+    };
+    overlayer: {
+        default: string;
+    };
+    other: {
+        transparent: string;
+    };
+};
+export type ThemeConfig = ReturnType<typeof createTheme>;
+export declare const measurements: {
+    readonly space: {
+        readonly none: 0;
+        readonly xxs: 2;
+        readonly xs: 4;
+        readonly xsm: 6;
+        readonly sxm: 7;
+        readonly sm: 8;
+        readonly md: 12;
+        readonly lg: 16;
+        readonly xl: 20;
+        readonly xl2: 24;
+        readonly xl3: 28;
+        readonly xl4: 32;
+        readonly xl5: 40;
+        readonly xl6: 48;
+        readonly xl7: 56;
+        readonly xl8: 64;
+        readonly xl9: 80;
+        readonly xl10: 96;
+    };
+    readonly font: {
+        readonly size: {
+            readonly xs2: 11;
+            readonly xs: 12;
+            readonly sm: 13;
+            readonly md: 14;
+            readonly lg: 16;
+            readonly xl: 18;
+            readonly xl2: 20;
+            readonly xl3: 24;
+            readonly xl4: 30;
+            readonly xl5: 36;
+        };
+        readonly lineHeight: {
+            readonly xs2: 14;
+            readonly xs: 16;
+            readonly sm: 18;
+            readonly md: 20;
+            readonly lg: 22;
+            readonly xl: 24;
+            readonly xl2: 28;
+            readonly xl3: 32;
+            readonly xl4: 38;
+            readonly xl5: 44;
+        };
+        readonly weight: {
+            readonly thin: 300;
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+    };
+    readonly size: {
+        readonly icon: {
+            readonly xs: 14;
+            readonly sm: 16;
+            readonly md: 18;
+            readonly lg: 20;
+            readonly xl: 24;
+            readonly xl2: 28;
+            readonly xl3: 32;
+            readonly xl4: 40;
+        };
+        readonly radius: {
+            readonly xs: 6;
+            readonly sm: 8;
+            readonly md: 10;
+            readonly lg: 12;
+            readonly xl: 16;
+            readonly full: 999;
+        };
+        readonly control: {
+            readonly sm: 32;
+            readonly md: 40;
+            readonly lg: 48;
+        };
+        readonly layout: {
+            readonly toggle: {
+                readonly sm: 18;
+                readonly md: 22;
+                readonly lg: 26;
+            };
+            readonly toggleThumb: {
+                readonly sm: 16;
+                readonly md: 20;
+                readonly lg: 24;
+            };
+            readonly toggleThumbPosition: {
+                readonly sm: 14;
+                readonly md: 18;
+                readonly lg: 22;
+            };
+            readonly buttonsFooter: {
+                readonly md: 72;
+            };
+            readonly checkboxRadius: {
+                readonly sm: 4;
+                readonly md: 5;
+                readonly lg: 6;
+            };
+            readonly checkboxIcon: {
+                readonly sm: 12;
+                readonly md: 14;
+                readonly lg: 16;
+            };
+            readonly tile: {
+                readonly sm: "500px";
+                readonly md: "750px";
+                readonly lg: "100%";
+            };
+            readonly calendar: {
+                readonly md: 320;
+            };
+            readonly table: {
+                readonly sm: 80;
+                readonly md: 120;
+                readonly lg: 240;
+            };
+        };
+    };
+    readonly zIndex: {
+        readonly dropdown: 800;
+        readonly modal: 1000;
+        readonly sidepanel: 900;
+        readonly sidepanelOverlayer: 850;
+    };
+};
+export declare const createTypography: () => {
+    font: {
+        body: string;
+        bodyLarge: string;
+        caption: string;
+        label: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+};
+export declare const typography: {
+    font: {
+        body: string;
+        bodyLarge: string;
+        caption: string;
+        label: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+};
+export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
+    icon: {
+        size: {
+            xs: {
+                svg: 14;
+                wrapper: 20;
+                padding: 4;
+            };
+            sm: {
+                svg: 16;
+                wrapper: 24;
+                padding: 6;
+            };
+            md: {
+                svg: 18;
+                wrapper: 28;
+                padding: 7;
+            };
+            lg: {
+                svg: 20;
+                wrapper: 32;
+                padding: 8;
+            };
+            xl: {
+                svg: 24;
+                wrapper: 40;
+                padding: 8;
+            };
+            xl2: {
+                svg: 28;
+                wrapper: 48;
+                padding: 12;
+            };
+            xl3: {
+                svg: 32;
+                wrapper: 56;
+                padding: 12;
+            };
+            xl4: {
+                svg: 40;
+                wrapper: 64;
+                padding: 12;
+            };
+        };
+        color: {
+            default: "#6B7280";
+            hover: "#4B5563";
+            active: "#3B90CB";
+            hoverActive: "#2F78B0";
+            disabled: "#9CA3AF";
+            error: "#DC2626";
+        };
+        background: {
+            default: string;
+            hover: "#F2F8FD";
+            active: "#E4F1FA";
+            hoverActive: "#E4F1FA";
+            disabled: string;
+            error: string;
+        };
+        radius: {
+            default: 8;
+            pill: 999;
+        };
+    };
+    input: {
+        size: {
+            sm: {
+                height: 32;
+                fontSize: 13;
+                lineHeight: 18;
+                paddingX: 8;
+                radius: 8;
+                iconSize: string;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 10;
+                iconSize: string;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 16;
+                radius: 12;
+                iconSize: string;
+            };
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+                text: "#111827";
+                sufix: "#4B5563";
+                sufixBackground: "#F9FAFB";
+                placeholder: "#9CA3AF";
+            };
+            hover: {
+                border: "#D1D5DB";
+            };
+            focus: {
+                border: "#3B90CB";
+                shadow: string;
+            };
+            error: {
+                border: "#FCA5A5";
+                helper: "#DC2626";
+            };
+            disabled: {
+                background: "#F3F4F6";
+                text: "#9CA3AF";
+                cursor: string;
+            };
+            readonly: {
+                bg: "#FFFFFF";
+                text: "#4B5563";
+            };
+        };
+    };
+    helperText: {
+        size: {
+            fontSize: 12;
+            lineHeight: 16;
+        };
+        color: {
+            default: {
+                text: "#6B7280";
+            };
+            error: {
+                text: "#DC2626";
+            };
+            disabled: {
+                text: "#9CA3AF";
+            };
+            success: {
+                text: "#059669";
+            };
+        };
+    };
+    label: {
+        size: {
+            sm: {
+                height: 32;
+                fontSize: 13;
+                lineHeight: 18;
+                smallHeight: 18;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                smallHeight: 22;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                smallHeight: 26;
+            };
+            top: {
+                fontSize: 13;
+                lineHeight: 18;
+                height: 18;
+                smallHeight: 18;
+            };
+        };
+        color: {
+            top: {
+                text: "#4B5563";
+            };
+            left: {
+                text: "#111827";
+            };
+            required: {
+                text: "#DC2626";
+            };
+        };
+    };
+    dropdown: {
+        size: {
+            sm: {
+                height: 32;
+                paddingX: 8;
+                borderRadius: 8;
+                fontSize: 13;
+                lineHeight: 18;
+                iconSize: string;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 10;
+                iconSize: string;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 16;
+                radius: 12;
+                iconSize: string;
+            };
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+                text: "#111827";
+                sufix: "#4B5563";
+                sufixBackground: "#F9FAFB";
+                placeholder: "#9CA3AF";
+            };
+            hover: {
+                border: "#D1D5DB";
+            };
+            focus: {
+                border: "#3B90CB";
+                shadow: string;
+            };
+            error: {
+                border: "#FCA5A5";
+                helper: "#DC2626";
+            };
+            disabled: {
+                bg: "#F3F4F6";
+                text: "#9CA3AF";
+                cursor: string;
+            };
+            readonly: {
+                bg: "#FFFFFF";
+                text: "#4B5563";
+            };
+        };
+        menu: {
+            size: {
+                padding: 8;
+                borderRadius: 12;
+                zIndex: 800;
+            };
+            color: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+            };
+        };
+    };
+    panel: {
+        item: {
+            size: {
+                sm: {
+                    height: 32;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    radius: 8;
+                    paddingX: 8;
+                    iconSize: string;
+                };
+                md: {
+                    height: 32;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    radius: 10;
+                    paddingX: 16;
+                    iconSize: string;
+                };
+                lg: {
+                    height: 40;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    radius: 10;
+                    paddingX: 16;
+                    iconSize: string;
+                };
+            };
+            color: {
+                default: {
+                    itmeBackground: string;
+                    text: "#111827";
+                };
+                hover: {
+                    background: "#F2F8FD";
+                };
+                selected: {
+                    iconColor: "#3B90CB";
+                };
+                disabled: {
+                    text: "#9CA3AF";
+                    background: "#F3F4F6";
+                };
+            };
+        };
+        panel: {
+            color: {
+                default: "#FFFFFF";
+                divider: "#E5E7EB";
+                placeholder: "#9CA3AF";
+            };
+        };
+    };
+    searchInput: {
+        size: {
+            height: 32;
+            fontSize: 13;
+            lineHeight: 18;
+            paddingX: 8;
+            radius: 8;
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+                text: "#111827";
+                placeholder: "#9CA3AF";
+            };
+            hover: {
+                border: "#D1D5DB";
+            };
+            focus: {
+                border: "#3B90CB";
+                shadow: string;
+            };
+        };
+    };
+    button: {
+        sizes: {
+            sm: {
+                height: 32;
+                paddingX: 12;
+                fontSize: 13;
+                lineHeight: 18;
+                radius: 8;
+                iconSize: string;
+                minWidth: 64;
+            };
+            md: {
+                height: 40;
+                paddingX: 16;
+                fontSize: 14;
+                lineHeight: 20;
+                radius: 10;
+                iconSize: string;
+                minWidth: 80;
+            };
+            lg: {
+                height: 48;
+                paddingX: 20;
+                fontSize: 16;
+                lineHeight: 22;
+                radius: 12;
+                iconSize: string;
+                minWidth: 96;
+            };
+        };
+        variants: {
+            primary: {
+                background: "#3B90CB";
+                backgroundHover: "#2F78B0";
+                backgroundActive: "#25608E";
+                text: "#FFFFFF";
+                disabledBackground: "#E4F1FA";
+                disabledText: "#6EB8DF";
+                disabledBorder: string;
+            };
+            secondary: {
+                background: "#FFFFFF";
+                backgroundHover: "#F2F8FD";
+                backgroundActive: "#F3F4F6";
+                border: "#E5E7EB";
+                borderHover: "#D1D5DB";
+                text: "#111827";
+                disabledBackground: "#F9FAFB";
+                disabledBorder: "#E5E7EB";
+                disabledText: "#9CA3AF";
+            };
+            ghost: {
+                background: string;
+                backgroundHover: "#F2F8FD";
+                backgroundActive: "#F3F4F6";
+                text: "#3B90CB";
+                textHover: "#2F78B0";
+                disabledBackground: string;
+                disabledText: "#9CA3AF";
+            };
+            danger: {
+                background: "#EF4444";
+                backgroundHover: "#DC2626";
+                backgroundActive: any;
+                text: "#FFFFFF";
+                disabledBackground: "#FEE2E2";
+                disabledText: "#FCA5A5";
+                disabledBorder: string;
+            };
+        };
+    };
+    toggle: {
+        size: {
+            sm: {
+                width: 32;
+                height: 18;
+                radius: 18;
+                sizeThumb: 16;
+                activePosition: 14;
+            };
+            md: {
+                width: 40;
+                height: 22;
+                radius: 22;
+                sizeThumb: 20;
+                activePosition: 18;
+            };
+            lg: {
+                width: 48;
+                height: 26;
+                radius: 26;
+                sizeThumb: 24;
+                activePosition: 22;
+            };
+        };
+        color: {
+            default: {
+                background: "#F9FAFB";
+                border: string;
+                thumbBackground: "#FFFFFF";
+                thumbBorder: "#D1D5DB";
+            };
+            hover: {
+                border: string;
+            };
+            focus: {
+                background: "#3B90CB";
+                thumbBackground: "#FFFFFF";
+                thumbBorder: string;
+            };
+            disabled: {
+                background: "#F3F4F6";
+                backgroundActive: "#E4F1FA";
+                border: string;
+                thumbBorder: "#E5E7EB";
+            };
+            error: {
+                border: string;
+                helper: "#DC2626";
+            };
+        };
+        shadow: {
+            track: string;
+            thumb: string;
+        };
+    };
+    buttonsFooter: {
+        layout: {
+            minHeight: 72;
+            paddingX: 24;
+            paddingY: 16;
+        };
+        gap: {
+            actions: 12;
+            groups: 24;
+        };
+        color: {
+            topBorder: string;
+            background: "#FFFFFF";
+        };
+    };
+    checkbox: {
+        size: {
+            sm: {
+                width: 18;
+                height: 18;
+                radius: 4;
+                iconSize: 12;
+            };
+            md: {
+                width: 22;
+                height: 22;
+                radius: 5;
+                iconSize: 14;
+            };
+            lg: {
+                width: 26;
+                height: 26;
+                radius: 6;
+                iconSize: 16;
+            };
+        };
+        color: {
+            default: {
+                background: string;
+                border: string;
+                boxBorder: "#E5E7EB";
+                boxBackground: "#FFFFFF";
+                icon: string;
+            };
+            hover: {
+                border: string;
+                boxBorder: "#D1D5DB";
+            };
+            focus: {
+                border: string;
+                boxBorder: "#3B90CB";
+                boxBackground: "#3B90CB";
+                icon: "#FFFFFF";
+            };
+            intermedian: {
+                boxBorder: "#E4F1FA";
+                boxBackground: "#6EB8DF";
+                icon: "#25608E";
+            };
+            error: {
+                border: string;
+                helper: "#DC2626";
+            };
+            disabled: {
+                background: string;
+                cursor: string;
+                boxBorder: "#E5E7EB";
+                boxBackground: "#F3F4F6";
+                icon: "#9CA3AF";
+            };
+            readonly: {
+                bg: string;
+            };
+        };
+    };
+    list: {
+        size: {
+            rowHeight: 40;
+            iconSpace: 32;
+            paddingX: 8;
+            gap: 8;
+            indent: 24;
+            borderRadius: 8;
+            font: 14;
+            lineHeight: 20;
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                text: "#111827";
+            };
+            hover: {
+                background: "#F2F8FD";
+            };
+            selected: {
+                background: "#C7E3F5";
+                hoverBackground: "#9FD0EC";
+            };
+            status: {
+                success: "#DC2626";
+                error: "#DC2626";
+                warning: "#D97706";
+            };
+        };
+    };
+    dropdownMenu: {
+        size: {
+            font: 14;
+            lineHeight: 20;
+        };
+        color: {
+            default: {
+                text: "#111827";
+            };
+            hover: {
+                background: "#4B5563";
+            };
+            active: {
+                background: {
+                    primary: {
+                        default: "#3B90CB";
+                        hover: "#2F78B0";
+                        active: "#25608E";
+                        subtitle: "#E4F1FA";
+                        disabledText: "#6EB8DF";
+                        selected: "#C7E3F5";
+                        selectedHover: "#9FD0EC";
+                    };
+                    danger: {
+                        default: "#EF4444";
+                        hover: "#DC2626";
+                        active: any;
+                        disabledBackground: "#FEE2E2";
+                        disabledText: "#FCA5A5";
+                    };
+                    success: {
+                        default: "#10B981";
+                        hover: "#059669";
+                        active: any;
+                        disabledBackground: "#D1FAE5";
+                        disabledText: any;
+                    };
+                    warning: {
+                        default: "#F59E0B";
+                        hover: "#D97706";
+                        active: any;
+                        disabledBackground: "#FEF3C7";
+                        disabledText: any;
+                    };
+                    secondary: {
+                        active: "#F3F4F6";
+                        disabledBackground: "#F9FAFB";
+                        disabledBorder: "#E5E7EB";
+                    };
+                };
+            };
+        };
+        menu: {
+            size: {
+                padding: 8;
+                borderRadius: 12;
+                zIndex: 800;
+            };
+            color: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+            };
+        };
+    };
+    tag: {
+        size: {
+            sm: {
+                height: 24;
+                fontSize: 12;
+                lineHeight: 16;
+                paddingX: 12;
+                radius: 999;
+                gap: 4;
+                iconSize: string;
+            };
+            md: {
+                height: 28;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 999;
+                gap: 8;
+                iconSize: string;
+            };
+            lg: {
+                height: 32;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 12;
+                radius: 999;
+                gap: 8;
+                iconSize: string;
+            };
+        };
+        color: {
+            default: {
+                background: "#3B90CB";
+                hover: "#2F78B0";
+                text: "#FFFFFF";
+            };
+            success: {
+                background: "#10B981";
+                hover: "#059669";
+                text: "#FFFFFF";
+            };
+            warning: {
+                background: "#F59E0B";
+                hover: "#D97706";
+                text: "#FFFFFF";
+            };
+            error: {
+                background: "#EF4444";
+                hover: "#DC2626";
+                text: "#FFFFFF";
+            };
+        };
+    };
+    header: {
+        size: {
+            height: 56;
+            paddingX: 16;
+            gap: 8;
+            iconSize: string;
+            fontSize: 20;
+            lineHeight: 28;
+        };
+        color: {
+            bottomBorder: string;
+            background: "#FFFFFF";
+        };
+    };
+    card: {
+        size: {
+            borderRadius: 8;
+            paddingX: 16;
+            paddingY: 16;
+        };
+        color: {
+            background: "#FFFFFF";
+            shadow: string;
+        };
+    };
+    tile: {
+        size: {
+            common: {
+                paddingX: 16;
+                paddingY: 16;
+            };
+            sm: {
+                width: "500px";
+            };
+            md: {
+                width: "750px";
+            };
+            lg: {
+                width: "100%";
+            };
+        };
+        color: {
+            background: "#FFFFFF";
+            shadow: string;
+        };
+    };
+    modal: {
+        size: {
+            common: {
+                borderRadius: 12;
+                paddingX: 16;
+                paddingY: 16;
+                overlayerPadding: 20;
+                zIndex: 1000;
+            };
+            sm: {
+                width: "500px";
+            };
+            md: {
+                width: "750px";
+            };
+            lg: {
+                width: "100%";
+            };
+        };
+        color: {
+            background: "#FFFFFF";
+            shadow: string;
+            overlayer: string;
+        };
+    };
+    sidepanel: {
+        size: {
+            paddingX: 16;
+            paddingY: 16;
+            zIndex: 900;
+            overlayerZIndex: 850;
+        };
+        color: {
+            background: "#FFFFFF";
+            shadow: string;
+            overlayer: string;
+        };
+    };
+    file: {
+        size: {
+            sm: {
+                height: 32;
+                fontSize: 13;
+                lineHeight: 18;
+                paddingX: 8;
+                radius: 8;
+                iconSize: string;
+                gap: 8;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 10;
+                gap: 8;
+                iconSize: string;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 16;
+                radius: 12;
+                gap: 8;
+                iconSize: string;
+            };
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                fileBorder: "#E5E7EB";
+                border: string;
+                text: "#111827";
+                sufix: "#4B5563";
+                sufixBackground: "#F9FAFB";
+                placeholder: "#9CA3AF";
+            };
+            hover: {
+                fileBorder: "#D1D5DB";
+                border: string;
+            };
+            focus: {
+                fileBorder: "#3B90CB";
+                border: string;
+                shadow: string;
+            };
+            error: {
+                fileBorder: "#FCA5A5";
+                border: string;
+                helper: "#DC2626";
+            };
+            disabled: {
+                background: "#F3F4F6";
+                text: "#9CA3AF";
+                cursor: string;
+            };
+            readonly: {
+                bg: "#FFFFFF";
+                text: "#4B5563";
+            };
+        };
+    };
+    selector: {
+        size: {
+            sm: {
+                height: 32;
+                fontSize: 13;
+                lineHeight: 18;
+                paddingX: 8;
+                radius: 8;
+                iconSize: string;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 10;
+                iconSize: string;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 16;
+                radius: 12;
+                iconSize: string;
+            };
+        };
+        color: {
+            default: {
+                background: string;
+                fileBorder: "#E5E7EB";
+                border: string;
+                text: "#3B90CB";
+                sufix: "#4B5563";
+                sufixBackground: "#F9FAFB";
+                placeholder: "#9CA3AF";
+                pillBackground: "#C7E3F5";
+                pillText: "#111827";
+            };
+            hover: {
+                fileBorder: "#D1D5DB";
+                border: string;
+                text: "#2F78B0";
+            };
+            focus: {
+                fileBorder: "#3B90CB";
+                border: string;
+                shadow: string;
+            };
+            error: {
+                fileBorder: "#FCA5A5";
+                border: string;
+                helper: "#DC2626";
+            };
+            disabled: {
+                background: "#F3F4F6";
+                text: "#9CA3AF";
+                cursor: string;
+            };
+            readonly: {
+                bg: "#FFFFFF";
+                text: "#4B5563";
+            };
+        };
+    };
+    datePicker: {
+        size: {
+            sm: {
+                height: 32;
+                paddingX: 8;
+                borderRadius: 8;
+                fontSize: 13;
+                lineHeight: 18;
+                iconSize: string;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 10;
+                iconSize: string;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 16;
+                radius: 12;
+                iconSize: string;
+            };
+            common: {
+                iconGap: 8;
+                zIndex: 1000;
+            };
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+                text: "#111827";
+                sufix: "#4B5563";
+                sufixBackground: "#F9FAFB";
+                placeholder: "#9CA3AF";
+            };
+            hover: {
+                border: "#D1D5DB";
+            };
+            focus: {
+                border: "#3B90CB";
+                shadow: string;
+            };
+            error: {
+                border: "#FCA5A5";
+                helper: "#DC2626";
+            };
+            disabled: {
+                bg: "#F3F4F6";
+                text: "#9CA3AF";
+                cursor: string;
+            };
+            readonly: {
+                bg: "#FFFFFF";
+                text: "#4B5563";
+            };
+        };
+        calendarCard: {
+            size: {
+                width: 320;
+                zIndex: 1000;
+                padding: 16;
+                borderRadius: 6;
+                overlayerZIndex: 850;
+                headerPaddingX: 16;
+                headerHeight: 40;
+                fontSize: 16;
+                lineHeight: 22;
+                gap: 8;
+            };
+            color: {
+                background: "#FFFFFF";
+                shadow: string;
+                border: "#E5E7EB";
+                overlayer: string;
+                text: "#111827";
+                actionText: "#3B90CB";
+                disabled: {
+                    text: "#9CA3AF";
+                };
+                hover: {
+                    text: "#2F78B0";
+                };
+            };
+        };
+        calendarContent: {
+            size: {
+                padding: 8;
+                gap: 8;
+                cellWidth: 32;
+                cellHeight: 32;
+                cellRadius: 6;
+                weekdays: {
+                    fontSize: 12;
+                    lineHeight: 16;
+                };
+                day: {
+                    fontSize: 14;
+                    lineHeight: 20;
+                };
+            };
+            color: {
+                weekdays: {
+                    text: "#4B5563";
+                };
+                day: {
+                    text: "#111827";
+                    hover: "#F2F8FD";
+                    selectedHover: "#2F78B0";
+                    selected: "#3B90CB";
+                    selectedText: "#FFFFFF";
+                };
+            };
+        };
+    };
+    loader: {
+        size: {
+            sm: {
+                size: 16;
+                border: 2;
+            };
+            md: {
+                size: 28;
+                border: 2;
+            };
+            lg: {
+                size: 48;
+                border: 2;
+            };
+        };
+    };
+    section: {
+        size: {
+            paddingY: 16;
+            paddingX: 16;
+            header: {
+                bottomMargin: 16;
+                fontSize: 20;
+                lineHeight: 28;
+            };
+        };
+        color: {
+            background: "#FFFFFF";
+            header: {
+                color: "#4B5563";
+            };
+        };
+    };
+    pagination: {
+        size: {
+            paginationHeight: 32;
+            height: 28;
+            width: 28;
+            itemGap: 8;
+            elementGap: 16;
+            borderRadius: 8;
+            fontSize: 14;
+            lineHeight: 20;
+        };
+        color: {
+            default: {
+                text: "#111827";
+                background: string;
+            };
+            hover: {
+                text: "#2F78B0";
+                icon: "#2F78B0";
+                activeTest: "#C7E3F5";
+            };
+            disabled: {
+                text: "#9CA3AF";
+                background: "#F3F4F6";
+            };
+            active: {
+                text: "#FFFFFF";
+                background: "#3B90CB";
+            };
+        };
+    };
+    form: {
+        size: {
+            gap: 12;
+            marginBottom: 16;
+        };
+    };
+    filters: {
+        size: {
+            triger: {
+                sm: {
+                    height: 32;
+                    paddingX: 12;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    radius: 8;
+                    iconSize: string;
+                    gap: 8;
+                };
+                md: {
+                    height: 40;
+                    paddingX: 16;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    radius: 10;
+                    iconSize: string;
+                    gap: 8;
+                };
+                lg: {
+                    paddingX: 20;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    radius: 12;
+                    iconSize: string;
+                    gap: 8;
+                };
+            };
+            counter: {
+                sm: {
+                    fontSize: 11;
+                    lineHeight: 14;
+                    radius: 999;
+                    paddingX: 8;
+                };
+                md: {
+                    fontSize: 12;
+                    lineHeight: 16;
+                    radius: 999;
+                    paddingX: 8;
+                };
+                lg: {
+                    fontSize: 13;
+                    lineHeight: 18;
+                    radius: 999;
+                    paddingX: 12;
+                };
+            };
+            filterRow: {
+                paddingY: 16;
+            };
+            header: {
+                fontSize: 12;
+                lineHeight: 16;
+                height: 24;
+                gap: 8;
+            };
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                text: "#111827";
+                counterText: "#FFFFFF";
+                counterBackground: "#3B90CB";
+                headerText: "#4B5563";
+            };
+            hover: {
+                background: "#F9FAFB";
+                activeBackground: "#9FD0EC";
+                clearText: "#3B90CB";
+            };
+            selected: {
+                background: "#C7E3F5";
+            };
+        };
+    };
+    table: {
+        size: {
+            common: {
+                borderRadius: 8;
+            };
+            header: {
+                height: 48;
+                fontSize: 14;
+                lineHeight: 20;
+                text: "#111827";
+            };
+            cell: {
+                common: {
+                    paddingX: 12;
+                };
+                sizes: {
+                    sm: {
+                        width: 80;
+                    };
+                    md: {
+                        width: 120;
+                    };
+                    lg: {
+                        width: 240;
+                    };
+                    option: {
+                        width: 28;
+                    };
+                    icon: {
+                        width: 28;
+                    };
+                };
+            };
+        };
+        color: {
+            default: {
+                common: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                };
+                header: {
+                    border: "#D1D5DB";
+                    text: "#111827";
+                    sortIcon: "#111827";
+                };
+            };
+            hover: {
+                background: "#F2F8FD";
+                activeBackground: "#9FD0EC";
+            };
+            active: {
+                background: "#C7E3F5";
+                header: {
+                    textHeader: "#3B90CB";
+                    sortIcon: "#3B90CB";
+                };
+            };
+            disabled: {
+                text: "#9CA3AF";
+            };
+        };
+    };
+};
+export type ComponentsConfig = ReturnType<typeof createComponentsConfig>;
+export declare const Theme: {
+    text: {
+        primary: "#111827";
+        secondary: "#4B5563";
+        tertiary: "#6B7280";
+        placeholder: "#9CA3AF";
+        disabled: "#9CA3AF";
+        inverse: "#FFFFFF";
+        link: "#2F78B0";
+        error: "#DC2626";
+        success: "#059669";
+    };
+    surface: {
+        page: "#F9FAFB";
+        default: "#FFFFFF";
+        subtle: "#F9FAFB";
+        tertiary: "#F3F4F6";
+        selected: "#F2F8FD";
+        disabled: "#F3F4F6";
+        danger: "#EF4444";
+        hover: "#F2F8FD";
+    };
+    border: {
+        default: "#E5E7EB";
+        strong: "#D1D5DB";
+        hover: "#D1D5DB";
+        focus: "#3B90CB";
+        disabled: "#E5E7EB";
+        error: "#FCA5A5";
+        success: "#059669";
+    };
+    action: {
+        primary: {
+            default: "#3B90CB";
+            hover: "#2F78B0";
+            active: "#25608E";
+            subtitle: "#E4F1FA";
+            disabledText: "#6EB8DF";
+            selected: "#C7E3F5";
+            selectedHover: "#9FD0EC";
+        };
+        danger: {
+            default: "#EF4444";
+            hover: "#DC2626";
+            active: any;
+            disabledBackground: "#FEE2E2";
+            disabledText: "#FCA5A5";
+        };
+        success: {
+            default: "#10B981";
+            hover: "#059669";
+            active: any;
+            disabledBackground: "#D1FAE5";
+            disabledText: any;
+        };
+        warning: {
+            default: "#F59E0B";
+            hover: "#D97706";
+            active: any;
+            disabledBackground: "#FEF3C7";
+            disabledText: any;
+        };
+        secondary: {
+            active: "#F3F4F6";
+            disabledBackground: "#F9FAFB";
+            disabledBorder: "#E5E7EB";
+        };
+    };
+    feedback: {
+        error: {
+            bg: "#FEF2F2";
+            text: "#DC2626";
+        };
+        warning: {
+            bg: "#FFFBEB";
+            text: "#D97706";
+        };
+        success: {
+            bg: "#ECFDF5";
+            text: "#059669";
+        };
+    };
+    focus: {
+        ringPrimary: string;
+    };
+    shadow: {
+        toggleThumb: string;
+        inner: string;
+        card: string;
+        modal: string;
+    };
+    divider: {
+        default: string;
+    };
+    overlayer: {
+        default: string;
+    };
+    other: {
+        transparent: string;
+    };
+};
+export declare const componentsConfig: {
+    icon: {
+        size: {
+            xs: {
+                svg: 14;
+                wrapper: 20;
+                padding: 4;
+            };
+            sm: {
+                svg: 16;
+                wrapper: 24;
+                padding: 6;
+            };
+            md: {
+                svg: 18;
+                wrapper: 28;
+                padding: 7;
+            };
+            lg: {
+                svg: 20;
+                wrapper: 32;
+                padding: 8;
+            };
+            xl: {
+                svg: 24;
+                wrapper: 40;
+                padding: 8;
+            };
+            xl2: {
+                svg: 28;
+                wrapper: 48;
+                padding: 12;
+            };
+            xl3: {
+                svg: 32;
+                wrapper: 56;
+                padding: 12;
+            };
+            xl4: {
+                svg: 40;
+                wrapper: 64;
+                padding: 12;
+            };
+        };
+        color: {
+            default: "#6B7280";
+            hover: "#4B5563";
+            active: "#3B90CB";
+            hoverActive: "#2F78B0";
+            disabled: "#9CA3AF";
+            error: "#DC2626";
+        };
+        background: {
+            default: string;
+            hover: "#F2F8FD";
+            active: "#E4F1FA";
+            hoverActive: "#E4F1FA";
+            disabled: string;
+            error: string;
+        };
+        radius: {
+            default: 8;
+            pill: 999;
+        };
+    };
+    input: {
+        size: {
+            sm: {
+                height: 32;
+                fontSize: 13;
+                lineHeight: 18;
+                paddingX: 8;
+                radius: 8;
+                iconSize: string;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 10;
+                iconSize: string;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 16;
+                radius: 12;
+                iconSize: string;
+            };
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+                text: "#111827";
+                sufix: "#4B5563";
+                sufixBackground: "#F9FAFB";
+                placeholder: "#9CA3AF";
+            };
+            hover: {
+                border: "#D1D5DB";
+            };
+            focus: {
+                border: "#3B90CB";
+                shadow: string;
+            };
+            error: {
+                border: "#FCA5A5";
+                helper: "#DC2626";
+            };
+            disabled: {
+                background: "#F3F4F6";
+                text: "#9CA3AF";
+                cursor: string;
+            };
+            readonly: {
+                bg: "#FFFFFF";
+                text: "#4B5563";
+            };
+        };
+    };
+    helperText: {
+        size: {
+            fontSize: 12;
+            lineHeight: 16;
+        };
+        color: {
+            default: {
+                text: "#6B7280";
+            };
+            error: {
+                text: "#DC2626";
+            };
+            disabled: {
+                text: "#9CA3AF";
+            };
+            success: {
+                text: "#059669";
+            };
+        };
+    };
+    label: {
+        size: {
+            sm: {
+                height: 32;
+                fontSize: 13;
+                lineHeight: 18;
+                smallHeight: 18;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                smallHeight: 22;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                smallHeight: 26;
+            };
+            top: {
+                fontSize: 13;
+                lineHeight: 18;
+                height: 18;
+                smallHeight: 18;
+            };
+        };
+        color: {
+            top: {
+                text: "#4B5563";
+            };
+            left: {
+                text: "#111827";
+            };
+            required: {
+                text: "#DC2626";
+            };
+        };
+    };
+    dropdown: {
+        size: {
+            sm: {
+                height: 32;
+                paddingX: 8;
+                borderRadius: 8;
+                fontSize: 13;
+                lineHeight: 18;
+                iconSize: string;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 10;
+                iconSize: string;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 16;
+                radius: 12;
+                iconSize: string;
+            };
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+                text: "#111827";
+                sufix: "#4B5563";
+                sufixBackground: "#F9FAFB";
+                placeholder: "#9CA3AF";
+            };
+            hover: {
+                border: "#D1D5DB";
+            };
+            focus: {
+                border: "#3B90CB";
+                shadow: string;
+            };
+            error: {
+                border: "#FCA5A5";
+                helper: "#DC2626";
+            };
+            disabled: {
+                bg: "#F3F4F6";
+                text: "#9CA3AF";
+                cursor: string;
+            };
+            readonly: {
+                bg: "#FFFFFF";
+                text: "#4B5563";
+            };
+        };
+        menu: {
+            size: {
+                padding: 8;
+                borderRadius: 12;
+                zIndex: 800;
+            };
+            color: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+            };
+        };
+    };
+    panel: {
+        item: {
+            size: {
+                sm: {
+                    height: 32;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    radius: 8;
+                    paddingX: 8;
+                    iconSize: string;
+                };
+                md: {
+                    height: 32;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    radius: 10;
+                    paddingX: 16;
+                    iconSize: string;
+                };
+                lg: {
+                    height: 40;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    radius: 10;
+                    paddingX: 16;
+                    iconSize: string;
+                };
+            };
+            color: {
+                default: {
+                    itmeBackground: string;
+                    text: "#111827";
+                };
+                hover: {
+                    background: "#F2F8FD";
+                };
+                selected: {
+                    iconColor: "#3B90CB";
+                };
+                disabled: {
+                    text: "#9CA3AF";
+                    background: "#F3F4F6";
+                };
+            };
+        };
+        panel: {
+            color: {
+                default: "#FFFFFF";
+                divider: "#E5E7EB";
+                placeholder: "#9CA3AF";
+            };
+        };
+    };
+    searchInput: {
+        size: {
+            height: 32;
+            fontSize: 13;
+            lineHeight: 18;
+            paddingX: 8;
+            radius: 8;
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+                text: "#111827";
+                placeholder: "#9CA3AF";
+            };
+            hover: {
+                border: "#D1D5DB";
+            };
+            focus: {
+                border: "#3B90CB";
+                shadow: string;
+            };
+        };
+    };
+    button: {
+        sizes: {
+            sm: {
+                height: 32;
+                paddingX: 12;
+                fontSize: 13;
+                lineHeight: 18;
+                radius: 8;
+                iconSize: string;
+                minWidth: 64;
+            };
+            md: {
+                height: 40;
+                paddingX: 16;
+                fontSize: 14;
+                lineHeight: 20;
+                radius: 10;
+                iconSize: string;
+                minWidth: 80;
+            };
+            lg: {
+                height: 48;
+                paddingX: 20;
+                fontSize: 16;
+                lineHeight: 22;
+                radius: 12;
+                iconSize: string;
+                minWidth: 96;
+            };
+        };
+        variants: {
+            primary: {
+                background: "#3B90CB";
+                backgroundHover: "#2F78B0";
+                backgroundActive: "#25608E";
+                text: "#FFFFFF";
+                disabledBackground: "#E4F1FA";
+                disabledText: "#6EB8DF";
+                disabledBorder: string;
+            };
+            secondary: {
+                background: "#FFFFFF";
+                backgroundHover: "#F2F8FD";
+                backgroundActive: "#F3F4F6";
+                border: "#E5E7EB";
+                borderHover: "#D1D5DB";
+                text: "#111827";
+                disabledBackground: "#F9FAFB";
+                disabledBorder: "#E5E7EB";
+                disabledText: "#9CA3AF";
+            };
+            ghost: {
+                background: string;
+                backgroundHover: "#F2F8FD";
+                backgroundActive: "#F3F4F6";
+                text: "#3B90CB";
+                textHover: "#2F78B0";
+                disabledBackground: string;
+                disabledText: "#9CA3AF";
+            };
+            danger: {
+                background: "#EF4444";
+                backgroundHover: "#DC2626";
+                backgroundActive: any;
+                text: "#FFFFFF";
+                disabledBackground: "#FEE2E2";
+                disabledText: "#FCA5A5";
+                disabledBorder: string;
+            };
+        };
+    };
+    toggle: {
+        size: {
+            sm: {
+                width: 32;
+                height: 18;
+                radius: 18;
+                sizeThumb: 16;
+                activePosition: 14;
+            };
+            md: {
+                width: 40;
+                height: 22;
+                radius: 22;
+                sizeThumb: 20;
+                activePosition: 18;
+            };
+            lg: {
+                width: 48;
+                height: 26;
+                radius: 26;
+                sizeThumb: 24;
+                activePosition: 22;
+            };
+        };
+        color: {
+            default: {
+                background: "#F9FAFB";
+                border: string;
+                thumbBackground: "#FFFFFF";
+                thumbBorder: "#D1D5DB";
+            };
+            hover: {
+                border: string;
+            };
+            focus: {
+                background: "#3B90CB";
+                thumbBackground: "#FFFFFF";
+                thumbBorder: string;
+            };
+            disabled: {
+                background: "#F3F4F6";
+                backgroundActive: "#E4F1FA";
+                border: string;
+                thumbBorder: "#E5E7EB";
+            };
+            error: {
+                border: string;
+                helper: "#DC2626";
+            };
+        };
+        shadow: {
+            track: string;
+            thumb: string;
+        };
+    };
+    buttonsFooter: {
+        layout: {
+            minHeight: 72;
+            paddingX: 24;
+            paddingY: 16;
+        };
+        gap: {
+            actions: 12;
+            groups: 24;
+        };
+        color: {
+            topBorder: string;
+            background: "#FFFFFF";
+        };
+    };
+    checkbox: {
+        size: {
+            sm: {
+                width: 18;
+                height: 18;
+                radius: 4;
+                iconSize: 12;
+            };
+            md: {
+                width: 22;
+                height: 22;
+                radius: 5;
+                iconSize: 14;
+            };
+            lg: {
+                width: 26;
+                height: 26;
+                radius: 6;
+                iconSize: 16;
+            };
+        };
+        color: {
+            default: {
+                background: string;
+                border: string;
+                boxBorder: "#E5E7EB";
+                boxBackground: "#FFFFFF";
+                icon: string;
+            };
+            hover: {
+                border: string;
+                boxBorder: "#D1D5DB";
+            };
+            focus: {
+                border: string;
+                boxBorder: "#3B90CB";
+                boxBackground: "#3B90CB";
+                icon: "#FFFFFF";
+            };
+            intermedian: {
+                boxBorder: "#E4F1FA";
+                boxBackground: "#6EB8DF";
+                icon: "#25608E";
+            };
+            error: {
+                border: string;
+                helper: "#DC2626";
+            };
+            disabled: {
+                background: string;
+                cursor: string;
+                boxBorder: "#E5E7EB";
+                boxBackground: "#F3F4F6";
+                icon: "#9CA3AF";
+            };
+            readonly: {
+                bg: string;
+            };
+        };
+    };
+    list: {
+        size: {
+            rowHeight: 40;
+            iconSpace: 32;
+            paddingX: 8;
+            gap: 8;
+            indent: 24;
+            borderRadius: 8;
+            font: 14;
+            lineHeight: 20;
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                text: "#111827";
+            };
+            hover: {
+                background: "#F2F8FD";
+            };
+            selected: {
+                background: "#C7E3F5";
+                hoverBackground: "#9FD0EC";
+            };
+            status: {
+                success: "#DC2626";
+                error: "#DC2626";
+                warning: "#D97706";
+            };
+        };
+    };
+    dropdownMenu: {
+        size: {
+            font: 14;
+            lineHeight: 20;
+        };
+        color: {
+            default: {
+                text: "#111827";
+            };
+            hover: {
+                background: "#4B5563";
+            };
+            active: {
+                background: {
+                    primary: {
+                        default: "#3B90CB";
+                        hover: "#2F78B0";
+                        active: "#25608E";
+                        subtitle: "#E4F1FA";
+                        disabledText: "#6EB8DF";
+                        selected: "#C7E3F5";
+                        selectedHover: "#9FD0EC";
+                    };
+                    danger: {
+                        default: "#EF4444";
+                        hover: "#DC2626";
+                        active: any;
+                        disabledBackground: "#FEE2E2";
+                        disabledText: "#FCA5A5";
+                    };
+                    success: {
+                        default: "#10B981";
+                        hover: "#059669";
+                        active: any;
+                        disabledBackground: "#D1FAE5";
+                        disabledText: any;
+                    };
+                    warning: {
+                        default: "#F59E0B";
+                        hover: "#D97706";
+                        active: any;
+                        disabledBackground: "#FEF3C7";
+                        disabledText: any;
+                    };
+                    secondary: {
+                        active: "#F3F4F6";
+                        disabledBackground: "#F9FAFB";
+                        disabledBorder: "#E5E7EB";
+                    };
+                };
+            };
+        };
+        menu: {
+            size: {
+                padding: 8;
+                borderRadius: 12;
+                zIndex: 800;
+            };
+            color: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+            };
+        };
+    };
+    tag: {
+        size: {
+            sm: {
+                height: 24;
+                fontSize: 12;
+                lineHeight: 16;
+                paddingX: 12;
+                radius: 999;
+                gap: 4;
+                iconSize: string;
+            };
+            md: {
+                height: 28;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 999;
+                gap: 8;
+                iconSize: string;
+            };
+            lg: {
+                height: 32;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 12;
+                radius: 999;
+                gap: 8;
+                iconSize: string;
+            };
+        };
+        color: {
+            default: {
+                background: "#3B90CB";
+                hover: "#2F78B0";
+                text: "#FFFFFF";
+            };
+            success: {
+                background: "#10B981";
+                hover: "#059669";
+                text: "#FFFFFF";
+            };
+            warning: {
+                background: "#F59E0B";
+                hover: "#D97706";
+                text: "#FFFFFF";
+            };
+            error: {
+                background: "#EF4444";
+                hover: "#DC2626";
+                text: "#FFFFFF";
+            };
+        };
+    };
+    header: {
+        size: {
+            height: 56;
+            paddingX: 16;
+            gap: 8;
+            iconSize: string;
+            fontSize: 20;
+            lineHeight: 28;
+        };
+        color: {
+            bottomBorder: string;
+            background: "#FFFFFF";
+        };
+    };
+    card: {
+        size: {
+            borderRadius: 8;
+            paddingX: 16;
+            paddingY: 16;
+        };
+        color: {
+            background: "#FFFFFF";
+            shadow: string;
+        };
+    };
+    tile: {
+        size: {
+            common: {
+                paddingX: 16;
+                paddingY: 16;
+            };
+            sm: {
+                width: "500px";
+            };
+            md: {
+                width: "750px";
+            };
+            lg: {
+                width: "100%";
+            };
+        };
+        color: {
+            background: "#FFFFFF";
+            shadow: string;
+        };
+    };
+    modal: {
+        size: {
+            common: {
+                borderRadius: 12;
+                paddingX: 16;
+                paddingY: 16;
+                overlayerPadding: 20;
+                zIndex: 1000;
+            };
+            sm: {
+                width: "500px";
+            };
+            md: {
+                width: "750px";
+            };
+            lg: {
+                width: "100%";
+            };
+        };
+        color: {
+            background: "#FFFFFF";
+            shadow: string;
+            overlayer: string;
+        };
+    };
+    sidepanel: {
+        size: {
+            paddingX: 16;
+            paddingY: 16;
+            zIndex: 900;
+            overlayerZIndex: 850;
+        };
+        color: {
+            background: "#FFFFFF";
+            shadow: string;
+            overlayer: string;
+        };
+    };
+    file: {
+        size: {
+            sm: {
+                height: 32;
+                fontSize: 13;
+                lineHeight: 18;
+                paddingX: 8;
+                radius: 8;
+                iconSize: string;
+                gap: 8;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 10;
+                gap: 8;
+                iconSize: string;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 16;
+                radius: 12;
+                gap: 8;
+                iconSize: string;
+            };
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                fileBorder: "#E5E7EB";
+                border: string;
+                text: "#111827";
+                sufix: "#4B5563";
+                sufixBackground: "#F9FAFB";
+                placeholder: "#9CA3AF";
+            };
+            hover: {
+                fileBorder: "#D1D5DB";
+                border: string;
+            };
+            focus: {
+                fileBorder: "#3B90CB";
+                border: string;
+                shadow: string;
+            };
+            error: {
+                fileBorder: "#FCA5A5";
+                border: string;
+                helper: "#DC2626";
+            };
+            disabled: {
+                background: "#F3F4F6";
+                text: "#9CA3AF";
+                cursor: string;
+            };
+            readonly: {
+                bg: "#FFFFFF";
+                text: "#4B5563";
+            };
+        };
+    };
+    selector: {
+        size: {
+            sm: {
+                height: 32;
+                fontSize: 13;
+                lineHeight: 18;
+                paddingX: 8;
+                radius: 8;
+                iconSize: string;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 10;
+                iconSize: string;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 16;
+                radius: 12;
+                iconSize: string;
+            };
+        };
+        color: {
+            default: {
+                background: string;
+                fileBorder: "#E5E7EB";
+                border: string;
+                text: "#3B90CB";
+                sufix: "#4B5563";
+                sufixBackground: "#F9FAFB";
+                placeholder: "#9CA3AF";
+                pillBackground: "#C7E3F5";
+                pillText: "#111827";
+            };
+            hover: {
+                fileBorder: "#D1D5DB";
+                border: string;
+                text: "#2F78B0";
+            };
+            focus: {
+                fileBorder: "#3B90CB";
+                border: string;
+                shadow: string;
+            };
+            error: {
+                fileBorder: "#FCA5A5";
+                border: string;
+                helper: "#DC2626";
+            };
+            disabled: {
+                background: "#F3F4F6";
+                text: "#9CA3AF";
+                cursor: string;
+            };
+            readonly: {
+                bg: "#FFFFFF";
+                text: "#4B5563";
+            };
+        };
+    };
+    datePicker: {
+        size: {
+            sm: {
+                height: 32;
+                paddingX: 8;
+                borderRadius: 8;
+                fontSize: 13;
+                lineHeight: 18;
+                iconSize: string;
+            };
+            md: {
+                height: 40;
+                fontSize: 14;
+                lineHeight: 20;
+                paddingX: 12;
+                radius: 10;
+                iconSize: string;
+            };
+            lg: {
+                height: 48;
+                fontSize: 16;
+                lineHeight: 22;
+                paddingX: 16;
+                radius: 12;
+                iconSize: string;
+            };
+            common: {
+                iconGap: 8;
+                zIndex: 1000;
+            };
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                border: "#E5E7EB";
+                text: "#111827";
+                sufix: "#4B5563";
+                sufixBackground: "#F9FAFB";
+                placeholder: "#9CA3AF";
+            };
+            hover: {
+                border: "#D1D5DB";
+            };
+            focus: {
+                border: "#3B90CB";
+                shadow: string;
+            };
+            error: {
+                border: "#FCA5A5";
+                helper: "#DC2626";
+            };
+            disabled: {
+                bg: "#F3F4F6";
+                text: "#9CA3AF";
+                cursor: string;
+            };
+            readonly: {
+                bg: "#FFFFFF";
+                text: "#4B5563";
+            };
+        };
+        calendarCard: {
+            size: {
+                width: 320;
+                zIndex: 1000;
+                padding: 16;
+                borderRadius: 6;
+                overlayerZIndex: 850;
+                headerPaddingX: 16;
+                headerHeight: 40;
+                fontSize: 16;
+                lineHeight: 22;
+                gap: 8;
+            };
+            color: {
+                background: "#FFFFFF";
+                shadow: string;
+                border: "#E5E7EB";
+                overlayer: string;
+                text: "#111827";
+                actionText: "#3B90CB";
+                disabled: {
+                    text: "#9CA3AF";
+                };
+                hover: {
+                    text: "#2F78B0";
+                };
+            };
+        };
+        calendarContent: {
+            size: {
+                padding: 8;
+                gap: 8;
+                cellWidth: 32;
+                cellHeight: 32;
+                cellRadius: 6;
+                weekdays: {
+                    fontSize: 12;
+                    lineHeight: 16;
+                };
+                day: {
+                    fontSize: 14;
+                    lineHeight: 20;
+                };
+            };
+            color: {
+                weekdays: {
+                    text: "#4B5563";
+                };
+                day: {
+                    text: "#111827";
+                    hover: "#F2F8FD";
+                    selectedHover: "#2F78B0";
+                    selected: "#3B90CB";
+                    selectedText: "#FFFFFF";
+                };
+            };
+        };
+    };
+    loader: {
+        size: {
+            sm: {
+                size: 16;
+                border: 2;
+            };
+            md: {
+                size: 28;
+                border: 2;
+            };
+            lg: {
+                size: 48;
+                border: 2;
+            };
+        };
+    };
+    section: {
+        size: {
+            paddingY: 16;
+            paddingX: 16;
+            header: {
+                bottomMargin: 16;
+                fontSize: 20;
+                lineHeight: 28;
+            };
+        };
+        color: {
+            background: "#FFFFFF";
+            header: {
+                color: "#4B5563";
+            };
+        };
+    };
+    pagination: {
+        size: {
+            paginationHeight: 32;
+            height: 28;
+            width: 28;
+            itemGap: 8;
+            elementGap: 16;
+            borderRadius: 8;
+            fontSize: 14;
+            lineHeight: 20;
+        };
+        color: {
+            default: {
+                text: "#111827";
+                background: string;
+            };
+            hover: {
+                text: "#2F78B0";
+                icon: "#2F78B0";
+                activeTest: "#C7E3F5";
+            };
+            disabled: {
+                text: "#9CA3AF";
+                background: "#F3F4F6";
+            };
+            active: {
+                text: "#FFFFFF";
+                background: "#3B90CB";
+            };
+        };
+    };
+    form: {
+        size: {
+            gap: 12;
+            marginBottom: 16;
+        };
+    };
+    filters: {
+        size: {
+            triger: {
+                sm: {
+                    height: 32;
+                    paddingX: 12;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    radius: 8;
+                    iconSize: string;
+                    gap: 8;
+                };
+                md: {
+                    height: 40;
+                    paddingX: 16;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    radius: 10;
+                    iconSize: string;
+                    gap: 8;
+                };
+                lg: {
+                    paddingX: 20;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    radius: 12;
+                    iconSize: string;
+                    gap: 8;
+                };
+            };
+            counter: {
+                sm: {
+                    fontSize: 11;
+                    lineHeight: 14;
+                    radius: 999;
+                    paddingX: 8;
+                };
+                md: {
+                    fontSize: 12;
+                    lineHeight: 16;
+                    radius: 999;
+                    paddingX: 8;
+                };
+                lg: {
+                    fontSize: 13;
+                    lineHeight: 18;
+                    radius: 999;
+                    paddingX: 12;
+                };
+            };
+            filterRow: {
+                paddingY: 16;
+            };
+            header: {
+                fontSize: 12;
+                lineHeight: 16;
+                height: 24;
+                gap: 8;
+            };
+        };
+        color: {
+            default: {
+                background: "#FFFFFF";
+                text: "#111827";
+                counterText: "#FFFFFF";
+                counterBackground: "#3B90CB";
+                headerText: "#4B5563";
+            };
+            hover: {
+                background: "#F9FAFB";
+                activeBackground: "#9FD0EC";
+                clearText: "#3B90CB";
+            };
+            selected: {
+                background: "#C7E3F5";
+            };
+        };
+    };
+    table: {
+        size: {
+            common: {
+                borderRadius: 8;
+            };
+            header: {
+                height: 48;
+                fontSize: 14;
+                lineHeight: 20;
+                text: "#111827";
+            };
+            cell: {
+                common: {
+                    paddingX: 12;
+                };
+                sizes: {
+                    sm: {
+                        width: 80;
+                    };
+                    md: {
+                        width: 120;
+                    };
+                    lg: {
+                        width: 240;
+                    };
+                    option: {
+                        width: 28;
+                    };
+                    icon: {
+                        width: 28;
+                    };
+                };
+            };
+        };
+        color: {
+            default: {
+                common: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                };
+                header: {
+                    border: "#D1D5DB";
+                    text: "#111827";
+                    sortIcon: "#111827";
+                };
+            };
+            hover: {
+                background: "#F2F8FD";
+                activeBackground: "#9FD0EC";
+            };
+            active: {
+                background: "#C7E3F5";
+                header: {
+                    textHeader: "#3B90CB";
+                    sortIcon: "#3B90CB";
+                };
+            };
+            disabled: {
+                text: "#9CA3AF";
+            };
+        };
+    };
+};
+export declare const createConfig: (theme?: ThemeName | AppTheme) => {
+    Theme: {
+        text: {
+            primary: "#111827";
+            secondary: "#4B5563";
+            tertiary: "#6B7280";
+            placeholder: "#9CA3AF";
+            disabled: "#9CA3AF";
+            inverse: "#FFFFFF";
+            link: "#2F78B0";
+            error: "#DC2626";
+            success: "#059669";
+        };
+        surface: {
+            page: "#F9FAFB";
+            default: "#FFFFFF";
+            subtle: "#F9FAFB";
+            tertiary: "#F3F4F6";
+            selected: "#F2F8FD";
+            disabled: "#F3F4F6";
+            danger: "#EF4444";
+            hover: "#F2F8FD";
+        };
+        border: {
+            default: "#E5E7EB";
+            strong: "#D1D5DB";
+            hover: "#D1D5DB";
+            focus: "#3B90CB";
+            disabled: "#E5E7EB";
+            error: "#FCA5A5";
+            success: "#059669";
+        };
+        action: {
+            primary: {
+                default: "#3B90CB";
+                hover: "#2F78B0";
+                active: "#25608E";
+                subtitle: "#E4F1FA";
+                disabledText: "#6EB8DF";
+                selected: "#C7E3F5";
+                selectedHover: "#9FD0EC";
+            };
+            danger: {
+                default: "#EF4444";
+                hover: "#DC2626";
+                active: any;
+                disabledBackground: "#FEE2E2";
+                disabledText: "#FCA5A5";
+            };
+            success: {
+                default: "#10B981";
+                hover: "#059669";
+                active: any;
+                disabledBackground: "#D1FAE5";
+                disabledText: any;
+            };
+            warning: {
+                default: "#F59E0B";
+                hover: "#D97706";
+                active: any;
+                disabledBackground: "#FEF3C7";
+                disabledText: any;
+            };
+            secondary: {
+                active: "#F3F4F6";
+                disabledBackground: "#F9FAFB";
+                disabledBorder: "#E5E7EB";
+            };
+        };
+        feedback: {
+            error: {
+                bg: "#FEF2F2";
+                text: "#DC2626";
+            };
+            warning: {
+                bg: "#FFFBEB";
+                text: "#D97706";
+            };
+            success: {
+                bg: "#ECFDF5";
+                text: "#059669";
+            };
+        };
+        focus: {
+            ringPrimary: string;
+        };
+        shadow: {
+            toggleThumb: string;
+            inner: string;
+            card: string;
+            modal: string;
+        };
+        divider: {
+            default: string;
+        };
+        overlayer: {
+            default: string;
+        };
+        other: {
+            transparent: string;
+        };
+    };
+    measurements: {
+        readonly space: {
+            readonly none: 0;
+            readonly xxs: 2;
+            readonly xs: 4;
+            readonly xsm: 6;
+            readonly sxm: 7;
+            readonly sm: 8;
+            readonly md: 12;
+            readonly lg: 16;
+            readonly xl: 20;
+            readonly xl2: 24;
+            readonly xl3: 28;
+            readonly xl4: 32;
+            readonly xl5: 40;
+            readonly xl6: 48;
+            readonly xl7: 56;
+            readonly xl8: 64;
+            readonly xl9: 80;
+            readonly xl10: 96;
+        };
+        readonly font: {
+            readonly size: {
+                readonly xs2: 11;
+                readonly xs: 12;
+                readonly sm: 13;
+                readonly md: 14;
+                readonly lg: 16;
+                readonly xl: 18;
+                readonly xl2: 20;
+                readonly xl3: 24;
+                readonly xl4: 30;
+                readonly xl5: 36;
+            };
+            readonly lineHeight: {
+                readonly xs2: 14;
+                readonly xs: 16;
+                readonly sm: 18;
+                readonly md: 20;
+                readonly lg: 22;
+                readonly xl: 24;
+                readonly xl2: 28;
+                readonly xl3: 32;
+                readonly xl4: 38;
+                readonly xl5: 44;
+            };
+            readonly weight: {
+                readonly thin: 300;
+                readonly regular: 400;
+                readonly medium: 500;
+                readonly semibold: 600;
+                readonly bold: 700;
+            };
+        };
+        readonly size: {
+            readonly icon: {
+                readonly xs: 14;
+                readonly sm: 16;
+                readonly md: 18;
+                readonly lg: 20;
+                readonly xl: 24;
+                readonly xl2: 28;
+                readonly xl3: 32;
+                readonly xl4: 40;
+            };
+            readonly radius: {
+                readonly xs: 6;
+                readonly sm: 8;
+                readonly md: 10;
+                readonly lg: 12;
+                readonly xl: 16;
+                readonly full: 999;
+            };
+            readonly control: {
+                readonly sm: 32;
+                readonly md: 40;
+                readonly lg: 48;
+            };
+            readonly layout: {
+                readonly toggle: {
+                    readonly sm: 18;
+                    readonly md: 22;
+                    readonly lg: 26;
+                };
+                readonly toggleThumb: {
+                    readonly sm: 16;
+                    readonly md: 20;
+                    readonly lg: 24;
+                };
+                readonly toggleThumbPosition: {
+                    readonly sm: 14;
+                    readonly md: 18;
+                    readonly lg: 22;
+                };
+                readonly buttonsFooter: {
+                    readonly md: 72;
+                };
+                readonly checkboxRadius: {
+                    readonly sm: 4;
+                    readonly md: 5;
+                    readonly lg: 6;
+                };
+                readonly checkboxIcon: {
+                    readonly sm: 12;
+                    readonly md: 14;
+                    readonly lg: 16;
+                };
+                readonly tile: {
+                    readonly sm: "500px";
+                    readonly md: "750px";
+                    readonly lg: "100%";
+                };
+                readonly calendar: {
+                    readonly md: 320;
+                };
+                readonly table: {
+                    readonly sm: 80;
+                    readonly md: 120;
+                    readonly lg: 240;
+                };
+            };
+        };
+        readonly zIndex: {
+            readonly dropdown: 800;
+            readonly modal: 1000;
+            readonly sidepanel: 900;
+            readonly sidepanelOverlayer: 850;
+        };
+    };
+    typography: {
+        font: {
+            body: string;
+            bodyLarge: string;
+            caption: string;
+            label: string;
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+            h5: string;
+            h6: string;
+        };
+    };
+    componentsConfig: {
+        icon: {
+            size: {
+                xs: {
+                    svg: 14;
+                    wrapper: 20;
+                    padding: 4;
+                };
+                sm: {
+                    svg: 16;
+                    wrapper: 24;
+                    padding: 6;
+                };
+                md: {
+                    svg: 18;
+                    wrapper: 28;
+                    padding: 7;
+                };
+                lg: {
+                    svg: 20;
+                    wrapper: 32;
+                    padding: 8;
+                };
+                xl: {
+                    svg: 24;
+                    wrapper: 40;
+                    padding: 8;
+                };
+                xl2: {
+                    svg: 28;
+                    wrapper: 48;
+                    padding: 12;
+                };
+                xl3: {
+                    svg: 32;
+                    wrapper: 56;
+                    padding: 12;
+                };
+                xl4: {
+                    svg: 40;
+                    wrapper: 64;
+                    padding: 12;
+                };
+            };
+            color: {
+                default: "#6B7280";
+                hover: "#4B5563";
+                active: "#3B90CB";
+                hoverActive: "#2F78B0";
+                disabled: "#9CA3AF";
+                error: "#DC2626";
+            };
+            background: {
+                default: string;
+                hover: "#F2F8FD";
+                active: "#E4F1FA";
+                hoverActive: "#E4F1FA";
+                disabled: string;
+                error: string;
+            };
+            radius: {
+                default: 8;
+                pill: 999;
+            };
+        };
+        input: {
+            size: {
+                sm: {
+                    height: 32;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    paddingX: 8;
+                    radius: 8;
+                    iconSize: string;
+                };
+                md: {
+                    height: 40;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    paddingX: 12;
+                    radius: 10;
+                    iconSize: string;
+                };
+                lg: {
+                    height: 48;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    paddingX: 16;
+                    radius: 12;
+                    iconSize: string;
+                };
+            };
+            color: {
+                default: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                    text: "#111827";
+                    sufix: "#4B5563";
+                    sufixBackground: "#F9FAFB";
+                    placeholder: "#9CA3AF";
+                };
+                hover: {
+                    border: "#D1D5DB";
+                };
+                focus: {
+                    border: "#3B90CB";
+                    shadow: string;
+                };
+                error: {
+                    border: "#FCA5A5";
+                    helper: "#DC2626";
+                };
+                disabled: {
+                    background: "#F3F4F6";
+                    text: "#9CA3AF";
+                    cursor: string;
+                };
+                readonly: {
+                    bg: "#FFFFFF";
+                    text: "#4B5563";
+                };
+            };
+        };
+        helperText: {
+            size: {
+                fontSize: 12;
+                lineHeight: 16;
+            };
+            color: {
+                default: {
+                    text: "#6B7280";
+                };
+                error: {
+                    text: "#DC2626";
+                };
+                disabled: {
+                    text: "#9CA3AF";
+                };
+                success: {
+                    text: "#059669";
+                };
+            };
+        };
+        label: {
+            size: {
+                sm: {
+                    height: 32;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    smallHeight: 18;
+                };
+                md: {
+                    height: 40;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    smallHeight: 22;
+                };
+                lg: {
+                    height: 48;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    smallHeight: 26;
+                };
+                top: {
+                    fontSize: 13;
+                    lineHeight: 18;
+                    height: 18;
+                    smallHeight: 18;
+                };
+            };
+            color: {
+                top: {
+                    text: "#4B5563";
+                };
+                left: {
+                    text: "#111827";
+                };
+                required: {
+                    text: "#DC2626";
+                };
+            };
+        };
+        dropdown: {
+            size: {
+                sm: {
+                    height: 32;
+                    paddingX: 8;
+                    borderRadius: 8;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    iconSize: string;
+                };
+                md: {
+                    height: 40;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    paddingX: 12;
+                    radius: 10;
+                    iconSize: string;
+                };
+                lg: {
+                    height: 48;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    paddingX: 16;
+                    radius: 12;
+                    iconSize: string;
+                };
+            };
+            color: {
+                default: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                    text: "#111827";
+                    sufix: "#4B5563";
+                    sufixBackground: "#F9FAFB";
+                    placeholder: "#9CA3AF";
+                };
+                hover: {
+                    border: "#D1D5DB";
+                };
+                focus: {
+                    border: "#3B90CB";
+                    shadow: string;
+                };
+                error: {
+                    border: "#FCA5A5";
+                    helper: "#DC2626";
+                };
+                disabled: {
+                    bg: "#F3F4F6";
+                    text: "#9CA3AF";
+                    cursor: string;
+                };
+                readonly: {
+                    bg: "#FFFFFF";
+                    text: "#4B5563";
+                };
+            };
+            menu: {
+                size: {
+                    padding: 8;
+                    borderRadius: 12;
+                    zIndex: 800;
+                };
+                color: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                };
+            };
+        };
+        panel: {
+            item: {
+                size: {
+                    sm: {
+                        height: 32;
+                        fontSize: 13;
+                        lineHeight: 18;
+                        radius: 8;
+                        paddingX: 8;
+                        iconSize: string;
+                    };
+                    md: {
+                        height: 32;
+                        fontSize: 14;
+                        lineHeight: 20;
+                        radius: 10;
+                        paddingX: 16;
+                        iconSize: string;
+                    };
+                    lg: {
+                        height: 40;
+                        fontSize: 14;
+                        lineHeight: 20;
+                        radius: 10;
+                        paddingX: 16;
+                        iconSize: string;
+                    };
+                };
+                color: {
+                    default: {
+                        itmeBackground: string;
+                        text: "#111827";
+                    };
+                    hover: {
+                        background: "#F2F8FD";
+                    };
+                    selected: {
+                        iconColor: "#3B90CB";
+                    };
+                    disabled: {
+                        text: "#9CA3AF";
+                        background: "#F3F4F6";
+                    };
+                };
+            };
+            panel: {
+                color: {
+                    default: "#FFFFFF";
+                    divider: "#E5E7EB";
+                    placeholder: "#9CA3AF";
+                };
+            };
+        };
+        searchInput: {
+            size: {
+                height: 32;
+                fontSize: 13;
+                lineHeight: 18;
+                paddingX: 8;
+                radius: 8;
+            };
+            color: {
+                default: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                    text: "#111827";
+                    placeholder: "#9CA3AF";
+                };
+                hover: {
+                    border: "#D1D5DB";
+                };
+                focus: {
+                    border: "#3B90CB";
+                    shadow: string;
+                };
+            };
+        };
+        button: {
+            sizes: {
+                sm: {
+                    height: 32;
+                    paddingX: 12;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    radius: 8;
+                    iconSize: string;
+                    minWidth: 64;
+                };
+                md: {
+                    height: 40;
+                    paddingX: 16;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    radius: 10;
+                    iconSize: string;
+                    minWidth: 80;
+                };
+                lg: {
+                    height: 48;
+                    paddingX: 20;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    radius: 12;
+                    iconSize: string;
+                    minWidth: 96;
+                };
+            };
+            variants: {
+                primary: {
+                    background: "#3B90CB";
+                    backgroundHover: "#2F78B0";
+                    backgroundActive: "#25608E";
+                    text: "#FFFFFF";
+                    disabledBackground: "#E4F1FA";
+                    disabledText: "#6EB8DF";
+                    disabledBorder: string;
+                };
+                secondary: {
+                    background: "#FFFFFF";
+                    backgroundHover: "#F2F8FD";
+                    backgroundActive: "#F3F4F6";
+                    border: "#E5E7EB";
+                    borderHover: "#D1D5DB";
+                    text: "#111827";
+                    disabledBackground: "#F9FAFB";
+                    disabledBorder: "#E5E7EB";
+                    disabledText: "#9CA3AF";
+                };
+                ghost: {
+                    background: string;
+                    backgroundHover: "#F2F8FD";
+                    backgroundActive: "#F3F4F6";
+                    text: "#3B90CB";
+                    textHover: "#2F78B0";
+                    disabledBackground: string;
+                    disabledText: "#9CA3AF";
+                };
+                danger: {
+                    background: "#EF4444";
+                    backgroundHover: "#DC2626";
+                    backgroundActive: any;
+                    text: "#FFFFFF";
+                    disabledBackground: "#FEE2E2";
+                    disabledText: "#FCA5A5";
+                    disabledBorder: string;
+                };
+            };
+        };
+        toggle: {
+            size: {
+                sm: {
+                    width: 32;
+                    height: 18;
+                    radius: 18;
+                    sizeThumb: 16;
+                    activePosition: 14;
+                };
+                md: {
+                    width: 40;
+                    height: 22;
+                    radius: 22;
+                    sizeThumb: 20;
+                    activePosition: 18;
+                };
+                lg: {
+                    width: 48;
+                    height: 26;
+                    radius: 26;
+                    sizeThumb: 24;
+                    activePosition: 22;
+                };
+            };
+            color: {
+                default: {
+                    background: "#F9FAFB";
+                    border: string;
+                    thumbBackground: "#FFFFFF";
+                    thumbBorder: "#D1D5DB";
+                };
+                hover: {
+                    border: string;
+                };
+                focus: {
+                    background: "#3B90CB";
+                    thumbBackground: "#FFFFFF";
+                    thumbBorder: string;
+                };
+                disabled: {
+                    background: "#F3F4F6";
+                    backgroundActive: "#E4F1FA";
+                    border: string;
+                    thumbBorder: "#E5E7EB";
+                };
+                error: {
+                    border: string;
+                    helper: "#DC2626";
+                };
+            };
+            shadow: {
+                track: string;
+                thumb: string;
+            };
+        };
+        buttonsFooter: {
+            layout: {
+                minHeight: 72;
+                paddingX: 24;
+                paddingY: 16;
+            };
+            gap: {
+                actions: 12;
+                groups: 24;
+            };
+            color: {
+                topBorder: string;
+                background: "#FFFFFF";
+            };
+        };
+        checkbox: {
+            size: {
+                sm: {
+                    width: 18;
+                    height: 18;
+                    radius: 4;
+                    iconSize: 12;
+                };
+                md: {
+                    width: 22;
+                    height: 22;
+                    radius: 5;
+                    iconSize: 14;
+                };
+                lg: {
+                    width: 26;
+                    height: 26;
+                    radius: 6;
+                    iconSize: 16;
+                };
+            };
+            color: {
+                default: {
+                    background: string;
+                    border: string;
+                    boxBorder: "#E5E7EB";
+                    boxBackground: "#FFFFFF";
+                    icon: string;
+                };
+                hover: {
+                    border: string;
+                    boxBorder: "#D1D5DB";
+                };
+                focus: {
+                    border: string;
+                    boxBorder: "#3B90CB";
+                    boxBackground: "#3B90CB";
+                    icon: "#FFFFFF";
+                };
+                intermedian: {
+                    boxBorder: "#E4F1FA";
+                    boxBackground: "#6EB8DF";
+                    icon: "#25608E";
+                };
+                error: {
+                    border: string;
+                    helper: "#DC2626";
+                };
+                disabled: {
+                    background: string;
+                    cursor: string;
+                    boxBorder: "#E5E7EB";
+                    boxBackground: "#F3F4F6";
+                    icon: "#9CA3AF";
+                };
+                readonly: {
+                    bg: string;
+                };
+            };
+        };
+        list: {
+            size: {
+                rowHeight: 40;
+                iconSpace: 32;
+                paddingX: 8;
+                gap: 8;
+                indent: 24;
+                borderRadius: 8;
+                font: 14;
+                lineHeight: 20;
+            };
+            color: {
+                default: {
+                    background: "#FFFFFF";
+                    text: "#111827";
+                };
+                hover: {
+                    background: "#F2F8FD";
+                };
+                selected: {
+                    background: "#C7E3F5";
+                    hoverBackground: "#9FD0EC";
+                };
+                status: {
+                    success: "#DC2626";
+                    error: "#DC2626";
+                    warning: "#D97706";
+                };
+            };
+        };
+        dropdownMenu: {
+            size: {
+                font: 14;
+                lineHeight: 20;
+            };
+            color: {
+                default: {
+                    text: "#111827";
+                };
+                hover: {
+                    background: "#4B5563";
+                };
+                active: {
+                    background: {
+                        primary: {
+                            default: "#3B90CB";
+                            hover: "#2F78B0";
+                            active: "#25608E";
+                            subtitle: "#E4F1FA";
+                            disabledText: "#6EB8DF";
+                            selected: "#C7E3F5";
+                            selectedHover: "#9FD0EC";
+                        };
+                        danger: {
+                            default: "#EF4444";
+                            hover: "#DC2626";
+                            active: any;
+                            disabledBackground: "#FEE2E2";
+                            disabledText: "#FCA5A5";
+                        };
+                        success: {
+                            default: "#10B981";
+                            hover: "#059669";
+                            active: any;
+                            disabledBackground: "#D1FAE5";
+                            disabledText: any;
+                        };
+                        warning: {
+                            default: "#F59E0B";
+                            hover: "#D97706";
+                            active: any;
+                            disabledBackground: "#FEF3C7";
+                            disabledText: any;
+                        };
+                        secondary: {
+                            active: "#F3F4F6";
+                            disabledBackground: "#F9FAFB";
+                            disabledBorder: "#E5E7EB";
+                        };
+                    };
+                };
+            };
+            menu: {
+                size: {
+                    padding: 8;
+                    borderRadius: 12;
+                    zIndex: 800;
+                };
+                color: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                };
+            };
+        };
+        tag: {
+            size: {
+                sm: {
+                    height: 24;
+                    fontSize: 12;
+                    lineHeight: 16;
+                    paddingX: 12;
+                    radius: 999;
+                    gap: 4;
+                    iconSize: string;
+                };
+                md: {
+                    height: 28;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    paddingX: 12;
+                    radius: 999;
+                    gap: 8;
+                    iconSize: string;
+                };
+                lg: {
+                    height: 32;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    paddingX: 12;
+                    radius: 999;
+                    gap: 8;
+                    iconSize: string;
+                };
+            };
+            color: {
+                default: {
+                    background: "#3B90CB";
+                    hover: "#2F78B0";
+                    text: "#FFFFFF";
+                };
+                success: {
+                    background: "#10B981";
+                    hover: "#059669";
+                    text: "#FFFFFF";
+                };
+                warning: {
+                    background: "#F59E0B";
+                    hover: "#D97706";
+                    text: "#FFFFFF";
+                };
+                error: {
+                    background: "#EF4444";
+                    hover: "#DC2626";
+                    text: "#FFFFFF";
+                };
+            };
+        };
+        header: {
+            size: {
+                height: 56;
+                paddingX: 16;
+                gap: 8;
+                iconSize: string;
+                fontSize: 20;
+                lineHeight: 28;
+            };
+            color: {
+                bottomBorder: string;
+                background: "#FFFFFF";
+            };
+        };
+        card: {
+            size: {
+                borderRadius: 8;
+                paddingX: 16;
+                paddingY: 16;
+            };
+            color: {
+                background: "#FFFFFF";
+                shadow: string;
+            };
+        };
+        tile: {
+            size: {
+                common: {
+                    paddingX: 16;
+                    paddingY: 16;
+                };
+                sm: {
+                    width: "500px";
+                };
+                md: {
+                    width: "750px";
+                };
+                lg: {
+                    width: "100%";
+                };
+            };
+            color: {
+                background: "#FFFFFF";
+                shadow: string;
+            };
+        };
+        modal: {
+            size: {
+                common: {
+                    borderRadius: 12;
+                    paddingX: 16;
+                    paddingY: 16;
+                    overlayerPadding: 20;
+                    zIndex: 1000;
+                };
+                sm: {
+                    width: "500px";
+                };
+                md: {
+                    width: "750px";
+                };
+                lg: {
+                    width: "100%";
+                };
+            };
+            color: {
+                background: "#FFFFFF";
+                shadow: string;
+                overlayer: string;
+            };
+        };
+        sidepanel: {
+            size: {
+                paddingX: 16;
+                paddingY: 16;
+                zIndex: 900;
+                overlayerZIndex: 850;
+            };
+            color: {
+                background: "#FFFFFF";
+                shadow: string;
+                overlayer: string;
+            };
+        };
+        file: {
+            size: {
+                sm: {
+                    height: 32;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    paddingX: 8;
+                    radius: 8;
+                    iconSize: string;
+                    gap: 8;
+                };
+                md: {
+                    height: 40;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    paddingX: 12;
+                    radius: 10;
+                    gap: 8;
+                    iconSize: string;
+                };
+                lg: {
+                    height: 48;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    paddingX: 16;
+                    radius: 12;
+                    gap: 8;
+                    iconSize: string;
+                };
+            };
+            color: {
+                default: {
+                    background: "#FFFFFF";
+                    fileBorder: "#E5E7EB";
+                    border: string;
+                    text: "#111827";
+                    sufix: "#4B5563";
+                    sufixBackground: "#F9FAFB";
+                    placeholder: "#9CA3AF";
+                };
+                hover: {
+                    fileBorder: "#D1D5DB";
+                    border: string;
+                };
+                focus: {
+                    fileBorder: "#3B90CB";
+                    border: string;
+                    shadow: string;
+                };
+                error: {
+                    fileBorder: "#FCA5A5";
+                    border: string;
+                    helper: "#DC2626";
+                };
+                disabled: {
+                    background: "#F3F4F6";
+                    text: "#9CA3AF";
+                    cursor: string;
+                };
+                readonly: {
+                    bg: "#FFFFFF";
+                    text: "#4B5563";
+                };
+            };
+        };
+        selector: {
+            size: {
+                sm: {
+                    height: 32;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    paddingX: 8;
+                    radius: 8;
+                    iconSize: string;
+                };
+                md: {
+                    height: 40;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    paddingX: 12;
+                    radius: 10;
+                    iconSize: string;
+                };
+                lg: {
+                    height: 48;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    paddingX: 16;
+                    radius: 12;
+                    iconSize: string;
+                };
+            };
+            color: {
+                default: {
+                    background: string;
+                    fileBorder: "#E5E7EB";
+                    border: string;
+                    text: "#3B90CB";
+                    sufix: "#4B5563";
+                    sufixBackground: "#F9FAFB";
+                    placeholder: "#9CA3AF";
+                    pillBackground: "#C7E3F5";
+                    pillText: "#111827";
+                };
+                hover: {
+                    fileBorder: "#D1D5DB";
+                    border: string;
+                    text: "#2F78B0";
+                };
+                focus: {
+                    fileBorder: "#3B90CB";
+                    border: string;
+                    shadow: string;
+                };
+                error: {
+                    fileBorder: "#FCA5A5";
+                    border: string;
+                    helper: "#DC2626";
+                };
+                disabled: {
+                    background: "#F3F4F6";
+                    text: "#9CA3AF";
+                    cursor: string;
+                };
+                readonly: {
+                    bg: "#FFFFFF";
+                    text: "#4B5563";
+                };
+            };
+        };
+        datePicker: {
+            size: {
+                sm: {
+                    height: 32;
+                    paddingX: 8;
+                    borderRadius: 8;
+                    fontSize: 13;
+                    lineHeight: 18;
+                    iconSize: string;
+                };
+                md: {
+                    height: 40;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    paddingX: 12;
+                    radius: 10;
+                    iconSize: string;
+                };
+                lg: {
+                    height: 48;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    paddingX: 16;
+                    radius: 12;
+                    iconSize: string;
+                };
+                common: {
+                    iconGap: 8;
+                    zIndex: 1000;
+                };
+            };
+            color: {
+                default: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                    text: "#111827";
+                    sufix: "#4B5563";
+                    sufixBackground: "#F9FAFB";
+                    placeholder: "#9CA3AF";
+                };
+                hover: {
+                    border: "#D1D5DB";
+                };
+                focus: {
+                    border: "#3B90CB";
+                    shadow: string;
+                };
+                error: {
+                    border: "#FCA5A5";
+                    helper: "#DC2626";
+                };
+                disabled: {
+                    bg: "#F3F4F6";
+                    text: "#9CA3AF";
+                    cursor: string;
+                };
+                readonly: {
+                    bg: "#FFFFFF";
+                    text: "#4B5563";
+                };
+            };
+            calendarCard: {
+                size: {
+                    width: 320;
+                    zIndex: 1000;
+                    padding: 16;
+                    borderRadius: 6;
+                    overlayerZIndex: 850;
+                    headerPaddingX: 16;
+                    headerHeight: 40;
+                    fontSize: 16;
+                    lineHeight: 22;
+                    gap: 8;
+                };
+                color: {
+                    background: "#FFFFFF";
+                    shadow: string;
+                    border: "#E5E7EB";
+                    overlayer: string;
+                    text: "#111827";
+                    actionText: "#3B90CB";
+                    disabled: {
+                        text: "#9CA3AF";
+                    };
+                    hover: {
+                        text: "#2F78B0";
+                    };
+                };
+            };
+            calendarContent: {
+                size: {
+                    padding: 8;
+                    gap: 8;
+                    cellWidth: 32;
+                    cellHeight: 32;
+                    cellRadius: 6;
+                    weekdays: {
+                        fontSize: 12;
+                        lineHeight: 16;
+                    };
+                    day: {
+                        fontSize: 14;
+                        lineHeight: 20;
+                    };
+                };
+                color: {
+                    weekdays: {
+                        text: "#4B5563";
+                    };
+                    day: {
+                        text: "#111827";
+                        hover: "#F2F8FD";
+                        selectedHover: "#2F78B0";
+                        selected: "#3B90CB";
+                        selectedText: "#FFFFFF";
+                    };
+                };
+            };
+        };
+        loader: {
+            size: {
+                sm: {
+                    size: 16;
+                    border: 2;
+                };
+                md: {
+                    size: 28;
+                    border: 2;
+                };
+                lg: {
+                    size: 48;
+                    border: 2;
+                };
+            };
+        };
+        section: {
+            size: {
+                paddingY: 16;
+                paddingX: 16;
+                header: {
+                    bottomMargin: 16;
+                    fontSize: 20;
+                    lineHeight: 28;
+                };
+            };
+            color: {
+                background: "#FFFFFF";
+                header: {
+                    color: "#4B5563";
+                };
+            };
+        };
+        pagination: {
+            size: {
+                paginationHeight: 32;
+                height: 28;
+                width: 28;
+                itemGap: 8;
+                elementGap: 16;
+                borderRadius: 8;
+                fontSize: 14;
+                lineHeight: 20;
+            };
+            color: {
+                default: {
+                    text: "#111827";
+                    background: string;
+                };
+                hover: {
+                    text: "#2F78B0";
+                    icon: "#2F78B0";
+                    activeTest: "#C7E3F5";
+                };
+                disabled: {
+                    text: "#9CA3AF";
+                    background: "#F3F4F6";
+                };
+                active: {
+                    text: "#FFFFFF";
+                    background: "#3B90CB";
+                };
+            };
+        };
+        form: {
+            size: {
+                gap: 12;
+                marginBottom: 16;
+            };
+        };
+        filters: {
+            size: {
+                triger: {
+                    sm: {
+                        height: 32;
+                        paddingX: 12;
+                        fontSize: 13;
+                        lineHeight: 18;
+                        radius: 8;
+                        iconSize: string;
+                        gap: 8;
+                    };
+                    md: {
+                        height: 40;
+                        paddingX: 16;
+                        fontSize: 14;
+                        lineHeight: 20;
+                        radius: 10;
+                        iconSize: string;
+                        gap: 8;
+                    };
+                    lg: {
+                        paddingX: 20;
+                        fontSize: 16;
+                        lineHeight: 22;
+                        radius: 12;
+                        iconSize: string;
+                        gap: 8;
+                    };
+                };
+                counter: {
+                    sm: {
+                        fontSize: 11;
+                        lineHeight: 14;
+                        radius: 999;
+                        paddingX: 8;
+                    };
+                    md: {
+                        fontSize: 12;
+                        lineHeight: 16;
+                        radius: 999;
+                        paddingX: 8;
+                    };
+                    lg: {
+                        fontSize: 13;
+                        lineHeight: 18;
+                        radius: 999;
+                        paddingX: 12;
+                    };
+                };
+                filterRow: {
+                    paddingY: 16;
+                };
+                header: {
+                    fontSize: 12;
+                    lineHeight: 16;
+                    height: 24;
+                    gap: 8;
+                };
+            };
+            color: {
+                default: {
+                    background: "#FFFFFF";
+                    text: "#111827";
+                    counterText: "#FFFFFF";
+                    counterBackground: "#3B90CB";
+                    headerText: "#4B5563";
+                };
+                hover: {
+                    background: "#F9FAFB";
+                    activeBackground: "#9FD0EC";
+                    clearText: "#3B90CB";
+                };
+                selected: {
+                    background: "#C7E3F5";
+                };
+            };
+        };
+        table: {
+            size: {
+                common: {
+                    borderRadius: 8;
+                };
+                header: {
+                    height: 48;
+                    fontSize: 14;
+                    lineHeight: 20;
+                    text: "#111827";
+                };
+                cell: {
+                    common: {
+                        paddingX: 12;
+                    };
+                    sizes: {
+                        sm: {
+                            width: 80;
+                        };
+                        md: {
+                            width: 120;
+                        };
+                        lg: {
+                            width: 240;
+                        };
+                        option: {
+                            width: 28;
+                        };
+                        icon: {
+                            width: 28;
+                        };
+                    };
+                };
+            };
+            color: {
+                default: {
+                    common: {
+                        background: "#FFFFFF";
+                        border: "#E5E7EB";
+                    };
+                    header: {
+                        border: "#D1D5DB";
+                        text: "#111827";
+                        sortIcon: "#111827";
+                    };
+                };
+                hover: {
+                    background: "#F2F8FD";
+                    activeBackground: "#9FD0EC";
+                };
+                active: {
+                    background: "#C7E3F5";
+                    header: {
+                        textHeader: "#3B90CB";
+                        sortIcon: "#3B90CB";
+                    };
+                };
+                disabled: {
+                    text: "#9CA3AF";
+                };
+            };
+        };
+    };
+};