venice-ui 2.4.13 → 3.0.2

package/dist/esm/config/config.js

@@ -0,0 +1,1446 @@
+import { themes } from './themes';
+const resolveTheme = (theme = 'default') => typeof theme === 'string' ? themes[theme] : theme;
+export const createTheme = (theme = 'default') => {
+    const p = resolveTheme(theme).primitive;
+    return {
+        text: {
+            primary: p.neutral[900],
+            secondary: p.neutral[600],
+            tertiary: p.neutral[500],
+            placeholder: p.neutral[400],
+            disabled: p.neutral[400],
+            inverse: p.neutral[0],
+            link: p.primary[600],
+            error: p.error[600],
+            success: p.success[600],
+        },
+        surface: {
+            page: p.neutral[50],
+            default: p.neutral[0],
+            subtle: p.neutral[50],
+            tertiary: p.neutral[100],
+            selected: p.primary[50],
+            disabled: p.neutral[100],
+            danger: p.error[500],
+            hover: p.primary[50],
+        },
+        border: {
+            default: p.neutral[200],
+            strong: p.neutral[300],
+            hover: p.neutral[300],
+            focus: p.primary[500],
+            disabled: p.neutral[200],
+            error: p.error[300],
+            success: p.success[600],
+        },
+        action: {
+            primary: {
+                default: p.primary[500],
+                hover: p.primary[600],
+                active: p.primary[700],
+                subtitle: p.primary[100],
+                disabledText: p.primary[400],
+                selected: p.primary[200],
+                selectedHover: p.primary[300],
+            },
+            danger: {
+                default: p.error[500],
+                hover: p.error[600],
+                active: p.error[700],
+                disabledBackground: p.error[100],
+                disabledText: p.error[300],
+            },
+            success: {
+                default: p.success[500],
+                hover: p.success[600],
+                active: p.success[700],
+                disabledBackground: p.success[100],
+                disabledText: p.success[300],
+            },
+            warning: {
+                default: p.warning[500],
+                hover: p.warning[600],
+                active: p.warning[700],
+                disabledBackground: p.warning[100],
+                disabledText: p.warning[300],
+            },
+            secondary: {
+                active: p.neutral[100],
+                disabledBackground: p.neutral[50],
+                disabledBorder: p.neutral[200],
+            },
+        },
+        feedback: {
+            error: {
+                bg: p.error[50],
+                text: p.error[600],
+            },
+            warning: {
+                bg: p.warning[50],
+                text: p.warning[600],
+            },
+            success: {
+                bg: p.success[50],
+                text: p.success[600],
+            },
+        },
+        focus: {
+            ringPrimary: 'rgba(59, 144, 203, 0.22)',
+        },
+        shadow: {
+            toggleThumb: '0 1px 2px rgba(0,0,0,0.10),0 1px 3px rgba(0,0,0,0.06)',
+            inner: 'inset 0 1px 2px rgba(0,0,0,0.06)',
+            card: ' 0px 1px 2px rgba(16, 24, 40, 0.04),0px 1px 3px rgba(16, 24, 40, 0.10);',
+            modal: '0px 24px 48px rgba(15, 23, 42, 0.18),0px 8px 16px rgba(15, 23, 42, 0.12),0px 2px 4px rgba(15, 23, 42, 0.08)',
+        },
+        divider: {
+            default: 'rgba(17,24,39,0.06)',
+        },
+        overlayer: {
+            default: 'rgba(0,0,0,0.5)',
+        },
+        other: {
+            transparent: 'transparent',
+        },
+    };
+};
+export const measurements = {
+    space: {
+        none: 0,
+        xxs: 2,
+        xs: 4,
+        xsm: 6,
+        sxm: 7,
+        sm: 8,
+        md: 12,
+        lg: 16,
+        xl: 20,
+        xl2: 24,
+        xl3: 28,
+        xl4: 32,
+        xl5: 40,
+        xl6: 48,
+        xl7: 56,
+        xl8: 64,
+        xl9: 80,
+        xl10: 96,
+    },
+    font: {
+        size: {
+            xs2: 11,
+            xs: 12,
+            sm: 13,
+            md: 14,
+            lg: 16,
+            xl: 18,
+            xl2: 20,
+            xl3: 24,
+            xl4: 30,
+            xl5: 36,
+        },
+        lineHeight: {
+            xs2: 14,
+            xs: 16,
+            sm: 18,
+            md: 20,
+            lg: 22,
+            xl: 24,
+            xl2: 28,
+            xl3: 32,
+            xl4: 38,
+            xl5: 44,
+        },
+        weight: {
+            thin: 300,
+            regular: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+        },
+    },
+    size: {
+        icon: {
+            xs: 14,
+            sm: 16,
+            md: 18,
+            lg: 20,
+            xl: 24,
+            xl2: 28,
+            xl3: 32,
+            xl4: 40,
+        },
+        radius: {
+            xs: 6,
+            sm: 8,
+            md: 10,
+            lg: 12,
+            xl: 16,
+            full: 999,
+        },
+        control: {
+            sm: 32,
+            md: 40,
+            lg: 48,
+        },
+        layout: {
+            toggle: {
+                sm: 18,
+                md: 22,
+                lg: 26,
+            },
+            toggleThumb: {
+                sm: 16,
+                md: 20,
+                lg: 24,
+            },
+            toggleThumbPosition: {
+                sm: 14,
+                md: 18,
+                lg: 22,
+            },
+            buttonsFooter: {
+                md: 72,
+            },
+            checkboxRadius: {
+                sm: 4,
+                md: 5,
+                lg: 6,
+            },
+            checkboxIcon: {
+                sm: 12,
+                md: 14,
+                lg: 16,
+            },
+            tile: {
+                sm: '500px',
+                md: '750px',
+                lg: '100%',
+            },
+            calendar: {
+                md: 320,
+            },
+            table: {
+                sm: 80,
+                md: 120,
+                lg: 240,
+            },
+        },
+    },
+    zIndex: {
+        dropdown: 800,
+        modal: 1000,
+        sidepanel: 900,
+        sidepanelOverlayer: 850,
+    },
+};
+export const createTypography = () => ({
+    font: {
+        body: `${measurements.font.size.md}`,
+        bodyLarge: `${measurements.font.size.lg}`,
+        caption: `${measurements.font.size.xs}`,
+        label: `${measurements.font.size.sm}`,
+        h1: `${measurements.font.size.xl5}`,
+        h2: `${measurements.font.size.xl4}`,
+        h3: `${measurements.font.size.xl3}`,
+        h4: `${measurements.font.size.xl2}`,
+        h5: `${measurements.font.size.xl}`,
+        h6: `${measurements.font.size.lg}`,
+    },
+});
+export const typography = createTypography();
+export const createComponentsConfig = (theme = 'default') => {
+    const Theme = createTheme(theme);
+    return {
+        icon: {
+            size: {
+                xs: {
+                    svg: measurements.size.icon.xs,
+                    wrapper: measurements.space.xl,
+                    padding: measurements.space.xs,
+                },
+                sm: {
+                    svg: measurements.size.icon.sm,
+                    wrapper: measurements.space.xl2,
+                    padding: measurements.space.xsm,
+                },
+                md: {
+                    svg: measurements.size.icon.md,
+                    wrapper: measurements.space.xl3,
+                    padding: measurements.space.sxm,
+                },
+                lg: {
+                    svg: measurements.size.icon.lg,
+                    wrapper: measurements.space.xl4,
+                    padding: measurements.space.sm,
+                },
+                xl: {
+                    svg: measurements.size.icon.xl,
+                    wrapper: measurements.space.xl5,
+                    padding: measurements.space.sm,
+                },
+                xl2: {
+                    svg: measurements.size.icon.xl2,
+                    wrapper: measurements.space.xl6,
+                    padding: measurements.space.md,
+                },
+                xl3: {
+                    svg: measurements.size.icon.xl3,
+                    wrapper: measurements.space.xl7,
+                    padding: measurements.space.md,
+                },
+                xl4: {
+                    svg: measurements.size.icon.xl4,
+                    wrapper: measurements.space.xl8,
+                    padding: measurements.space.md,
+                },
+            },
+            color: {
+                default: Theme.text.tertiary,
+                hover: Theme.text.secondary,
+                active: Theme.action.primary.default,
+                hoverActive: Theme.action.primary.hover,
+                disabled: Theme.text.disabled,
+                error: Theme.text.error,
+            },
+            background: {
+                default: Theme.other.transparent,
+                hover: Theme.surface.hover,
+                active: Theme.action.primary.subtitle,
+                hoverActive: Theme.action.primary.subtitle,
+                disabled: Theme.other.transparent,
+                error: Theme.other.transparent,
+            },
+            radius: {
+                default: measurements.size.radius.sm,
+                pill: measurements.size.radius.full,
+            },
+        },
+        input: {
+            size: {
+                sm: {
+                    height: measurements.space.xl4,
+                    fontSize: measurements.font.size.sm,
+                    lineHeight: measurements.font.lineHeight.sm,
+                    paddingX: measurements.space.sm,
+                    radius: measurements.size.radius.sm,
+                    iconSize: 'md',
+                },
+                md: {
+                    height: measurements.space.xl5,
+                    fontSize: measurements.font.size.md,
+                    lineHeight: measurements.font.lineHeight.md,
+                    paddingX: measurements.space.md,
+                    radius: measurements.size.radius.md,
+                    iconSize: 'lg',
+                },
+                lg: {
+                    height: measurements.space.xl6,
+                    fontSize: measurements.font.size.lg,
+                    lineHeight: measurements.font.lineHeight.lg,
+                    paddingX: measurements.space.lg,
+                    radius: measurements.size.radius.lg,
+                    iconSize: 'xl',
+                },
+            },
+            color: {
+                default: {
+                    background: Theme.surface.default,
+                    border: Theme.border.default,
+                    text: Theme.text.primary,
+                    sufix: Theme.text.secondary,
+                    sufixBackground: Theme.surface.subtle,
+                    placeholder: Theme.text.placeholder,
+                },
+                hover: {
+                    border: Theme.border.strong,
+                },
+                focus: {
+                    border: Theme.border.focus,
+                    shadow: Theme.focus.ringPrimary,
+                },
+                error: {
+                    border: Theme.border.error,
+                    helper: Theme.text.error,
+                },
+                disabled: {
+                    background: Theme.surface.disabled,
+                    text: Theme.text.disabled,
+                    cursor: 'not-allowed',
+                },
+                readonly: {
+                    bg: Theme.surface.default,
+                    text: Theme.text.secondary,
+                },
+            },
+        },
+        helperText: {
+            size: {
+                fontSize: measurements.font.size.xs,
+                lineHeight: measurements.font.lineHeight.xs,
+            },
+            color: {
+                default: {
+                    text: Theme.text.tertiary,
+                },
+                error: {
+                    text: Theme.text.error,
+                },
+                disabled: {
+                    text: Theme.text.disabled,
+                },
+                success: {
+                    text: Theme.text.success,
+                },
+            },
+        },
+        label: {
+            size: {
+                sm: {
+                    height: measurements.space.xl4,
+                    fontSize: measurements.font.size.sm,
+                    lineHeight: measurements.font.lineHeight.sm,
+                    smallHeight: measurements.size.layout.toggle.sm,
+                },
+                md: {
+                    height: measurements.space.xl5,
+                    fontSize: measurements.font.size.md,
+                    lineHeight: measurements.font.lineHeight.md,
+                    smallHeight: measurements.size.layout.toggle.md,
+                },
+                lg: {
+                    height: measurements.space.xl6,
+                    fontSize: measurements.font.size.lg,
+                    lineHeight: measurements.font.lineHeight.lg,
+                    smallHeight: measurements.size.layout.toggle.lg,
+                },
+                top: {
+                    fontSize: measurements.font.size.sm,
+                    lineHeight: measurements.font.lineHeight.sm,
+                    height: measurements.size.layout.toggle.sm,
+                    smallHeight: measurements.size.layout.toggle.sm,
+                },
+            },
+            color: {
+                top: {
+                    text: Theme.text.secondary,
+                },
+                left: {
+                    text: Theme.text.primary,
+                },
+                required: {
+                    text: Theme.text.error,
+                },
+            },
+        },
+        dropdown: {
+            size: {
+                sm: {
+                    height: measurements.space.xl4,
+                    paddingX: measurements.space.sm,
+                    borderRadius: measurements.size.radius.sm,
+                    fontSize: measurements.font.size.sm,
+                    lineHeight: measurements.font.lineHeight.sm,
+                    iconSize: 'md',
+                },
+                md: {
+                    height: measurements.space.xl5,
+                    fontSize: measurements.font.size.md,
+                    lineHeight: measurements.font.lineHeight.md,
+                    paddingX: measurements.space.md,
+                    radius: measurements.size.radius.md,
+                    iconSize: 'lg',
+                },
+                lg: {
+                    height: measurements.space.xl6,
+                    fontSize: measurements.font.size.lg,
+                    lineHeight: measurements.font.lineHeight.lg,
+                    paddingX: measurements.space.lg,
+                    radius: measurements.size.radius.lg,
+                    iconSize: 'xl',
+                },
+            },
+            color: {
+                default: {
+                    background: Theme.surface.default,
+                    border: Theme.border.default,
+                    text: Theme.text.primary,
+                    sufix: Theme.text.secondary,
+                    sufixBackground: Theme.surface.subtle,
+                    placeholder: Theme.text.placeholder,
+                },
+                hover: {
+                    border: Theme.border.strong,
+                },
+                focus: {
+                    border: Theme.border.focus,
+                    shadow: Theme.focus.ringPrimary,
+                },
+                error: {
+                    border: Theme.border.error,
+                    helper: Theme.text.error,
+                },
+                disabled: {
+                    bg: Theme.surface.disabled,
+                    text: Theme.text.disabled,
+                    cursor: 'not-allowed',
+                },
+                readonly: {
+                    bg: Theme.surface.default,
+                    text: Theme.text.secondary,
+                },
+            },
+            menu: {
+                size: {
+                    padding: measurements.space.sm,
+                    borderRadius: measurements.size.radius.lg,
+                    zIndex: measurements.zIndex.dropdown,
+                },
+                color: {
+                    background: Theme.surface.default,
+                    border: Theme.border.default,
+                },
+            },
+        },
+        panel: {
+            item: {
+                size: {
+                    sm: {
+                        height: measurements.space.xl4,
+                        fontSize: measurements.font.size.sm,
+                        lineHeight: measurements.font.lineHeight.sm,
+                        radius: measurements.size.radius.sm,
+                        paddingX: measurements.space.sm,
+                        iconSize: 'md',
+                    },
+                    md: {
+                        height: measurements.space.xl4,
+                        fontSize: measurements.font.size.md,
+                        lineHeight: measurements.font.lineHeight.md,
+                        radius: measurements.size.radius.md,
+                        paddingX: measurements.space.lg,
+                        iconSize: 'lg',
+                    },
+                    lg: {
+                        height: measurements.space.xl5,
+                        fontSize: measurements.font.size.md,
+                        lineHeight: measurements.font.lineHeight.md,
+                        radius: measurements.size.radius.md,
+                        paddingX: measurements.space.lg,
+                        iconSize: 'lg',
+                    },
+                },
+                color: {
+                    default: {
+                        itmeBackground: 'transparent',
+                        text: Theme.text.primary,
+                    },
+                    hover: {
+                        background: Theme.surface.hover,
+                    },
+                    selected: {
+                        iconColor: Theme.action.primary.default,
+                    },
+                    disabled: {
+                        text: Theme.text.disabled,
+                        background: Theme.surface.disabled,
+                    },
+                },
+            },
+            panel: {
+                color: {
+                    default: Theme.surface.default,
+                    divider: Theme.border.default,
+                    placeholder: Theme.text.placeholder,
+                },
+            },
+        },
+        searchInput: {
+            size: {
+                height: measurements.space.xl4,
+                fontSize: measurements.font.size.sm,
+                lineHeight: measurements.font.lineHeight.sm,
+                paddingX: measurements.space.sm,
+                radius: measurements.size.radius.sm,
+            },
+            color: {
+                default: {
+                    background: Theme.surface.default,
+                    border: Theme.border.default,
+                    text: Theme.text.primary,
+                    placeholder: Theme.text.placeholder,
+                },
+                hover: {
+                    border: Theme.border.strong,
+                },
+                focus: {
+                    border: Theme.border.focus,
+                    shadow: Theme.focus.ringPrimary,
+                },
+            },
+        },
+        button: {
+            sizes: {
+                sm: {
+                    height: measurements.space.xl4,
+                    paddingX: measurements.space.md,
+                    fontSize: measurements.font.size.sm,
+                    lineHeight: measurements.font.lineHeight.sm,
+                    radius: measurements.size.radius.sm,
+                    iconSize: 'md',
+                    minWidth: measurements.space.xl8,
+                },
+                md: {
+                    height: measurements.space.xl5,
+                    paddingX: measurements.space.lg,
+                    fontSize: measurements.font.size.md,
+                    lineHeight: measurements.font.lineHeight.md,
+                    radius: measurements.size.radius.md,
+                    iconSize: 'lg',
+                    minWidth: measurements.space.xl9,
+                },
+                lg: {
+                    height: measurements.space.xl6,
+                    paddingX: measurements.space.xl,
+                    fontSize: measurements.font.size.lg,
+                    lineHeight: measurements.font.lineHeight.lg,
+                    radius: measurements.size.radius.lg,
+                    iconSize: 'lg',
+                    minWidth: measurements.space.xl10,
+                },
+            },
+            variants: {
+                primary: {
+                    background: Theme.action.primary.default,
+                    backgroundHover: Theme.action.primary.hover,
+                    backgroundActive: Theme.action.primary.active,
+                    text: Theme.text.inverse,
+                    disabledBackground: Theme.action.primary.subtitle,
+                    disabledText: Theme.action.primary.disabledText,
+                    disabledBorder: 'transparent',
+                },
+                secondary: {
+                    background: Theme.surface.default,
+                    backgroundHover: Theme.surface.hover,
+                    backgroundActive: Theme.action.secondary.active,
+                    border: Theme.border.default,
+                    borderHover: Theme.border.strong,
+                    text: Theme.text.primary,
+                    disabledBackground: Theme.action.secondary.disabledBackground,
+                    disabledBorder: Theme.action.secondary.disabledBorder,
+                    disabledText: Theme.text.disabled,
+                },
+                ghost: {
+                    background: 'transparent',
+                    backgroundHover: Theme.surface.hover,
+                    backgroundActive: Theme.surface.tertiary,
+                    text: Theme.action.primary.default,
+                    textHover: Theme.action.primary.hover,
+                    disabledBackground: 'transparent',
+                    disabledText: Theme.text.disabled,
+                },
+                danger: {
+                    background: Theme.action.danger.default,
+                    backgroundHover: Theme.action.danger.hover,
+                    backgroundActive: Theme.action.danger.active,
+                    text: Theme.text.inverse,
+                    disabledBackground: Theme.action.danger.disabledBackground,
+                    disabledText: Theme.action.danger.disabledText,
+                    disabledBorder: 'transparent',
+                },
+            },
+        },
+        toggle: {
+            size: {
+                sm: {
+                    width: measurements.space.xl4,
+                    height: measurements.size.layout.toggle.sm,
+                    radius: measurements.size.layout.toggle.sm,
+                    sizeThumb: measurements.size.layout.toggleThumb.sm,
+                    activePosition: measurements.size.layout.toggleThumbPosition.sm,
+                },
+                md: {
+                    width: measurements.space.xl5,
+                    height: measurements.size.layout.toggle.md,
+                    radius: measurements.size.layout.toggle.md,
+                    sizeThumb: measurements.size.layout.toggleThumb.md,
+                    activePosition: measurements.size.layout.toggleThumbPosition.md,
+                },
+                lg: {
+                    width: measurements.space.xl6,
+                    height: measurements.size.layout.toggle.lg,
+                    radius: measurements.size.layout.toggle.lg,
+                    sizeThumb: measurements.size.layout.toggleThumb.lg,
+                    activePosition: measurements.size.layout.toggleThumbPosition.lg,
+                },
+            },
+            color: {
+                default: {
+                    background: Theme.surface.subtle,
+                    border: 'transparent',
+                    thumbBackground: Theme.surface.default,
+                    thumbBorder: Theme.border.strong,
+                },
+                hover: {
+                    border: 'transparent',
+                },
+                focus: {
+                    background: Theme.border.focus,
+                    thumbBackground: Theme.surface.default,
+                    thumbBorder: 'transparent',
+                },
+                disabled: {
+                    background: Theme.surface.disabled,
+                    backgroundActive: Theme.action.primary.subtitle,
+                    border: 'transparent',
+                    thumbBorder: Theme.border.disabled,
+                },
+                error: {
+                    border: 'transparent',
+                    helper: Theme.text.error,
+                },
+            },
+            shadow: {
+                track: Theme.shadow.inner,
+                thumb: Theme.shadow.toggleThumb,
+            },
+        },
+        buttonsFooter: {
+            layout: {
+                minHeight: measurements.size.layout.buttonsFooter.md,
+                paddingX: measurements.space.xl2,
+                paddingY: measurements.space.lg,
+            },
+            gap: {
+                actions: measurements.space.md,
+                groups: measurements.space.xl2,
+            },
+            color: {
+                topBorder: Theme.divider.default,
+                background: Theme.surface.default,
+            },
+        },
+        checkbox: {
+            size: {
+                sm: {
+                    width: measurements.size.layout.toggle.sm,
+                    height: measurements.size.layout.toggle.sm,
+                    radius: measurements.size.layout.checkboxRadius.sm,
+                    iconSize: measurements.size.layout.checkboxIcon.sm,
+                },
+                md: {
+                    width: measurements.size.layout.toggle.md,
+                    height: measurements.size.layout.toggle.md,
+                    radius: measurements.size.layout.checkboxRadius.md,
+                    iconSize: measurements.size.layout.checkboxIcon.md,
+                },
+                lg: {
+                    width: measurements.size.layout.toggle.lg,
+                    height: measurements.size.layout.toggle.lg,
+                    radius: measurements.size.layout.checkboxRadius.lg,
+                    iconSize: measurements.size.layout.checkboxIcon.lg,
+                },
+            },
+            color: {
+                default: {
+                    background: 'transparent',
+                    border: 'transparent',
+                    boxBorder: Theme.border.default,
+                    boxBackground: Theme.surface.default,
+                    icon: 'transparent',
+                },
+                hover: {
+                    border: 'transparent',
+                    boxBorder: Theme.border.strong,
+                },
+                focus: {
+                    border: 'transparent',
+                    boxBorder: Theme.action.primary.default,
+                    boxBackground: Theme.action.primary.default,
+                    icon: Theme.text.inverse,
+                },
+                intermedian: {
+                    boxBorder: Theme.action.primary.subtitle,
+                    boxBackground: Theme.action.primary.disabledText,
+                    icon: Theme.action.primary.active,
+                },
+                error: {
+                    border: 'transparent',
+                    helper: Theme.text.error,
+                },
+                disabled: {
+                    background: 'transparent',
+                    cursor: 'not-allowed',
+                    boxBorder: Theme.border.disabled,
+                    boxBackground: Theme.surface.disabled,
+                    icon: Theme.text.disabled,
+                },
+                readonly: {
+                    bg: 'transparent',
+                    // text: Theme.text.secondary,
+                },
+            },
+        },
+        list: {
+            size: {
+                rowHeight: measurements.space.xl5,
+                iconSpace: measurements.space.xl4,
+                paddingX: measurements.space.sm,
+                gap: measurements.space.sm,
+                indent: measurements.space.xl2,
+                borderRadius: measurements.size.radius.sm,
+                font: measurements.font.size.md,
+                lineHeight: measurements.font.lineHeight.md,
+            },
+            color: {
+                default: {
+                    background: Theme.surface.default,
+                    text: Theme.text.primary,
+                },
+                hover: {
+                    background: Theme.surface.hover,
+                },
+                selected: {
+                    background: Theme.action.primary.selected,
+                    hoverBackground: Theme.action.primary.selectedHover,
+                },
+                status: {
+                    success: Theme.feedback.error.text,
+                    error: Theme.feedback.error.text,
+                    warning: Theme.feedback.warning.text,
+                },
+            },
+        },
+        dropdownMenu: {
+            size: {
+                font: measurements.font.size.md,
+                lineHeight: measurements.font.lineHeight.md,
+            },
+            color: {
+                default: {
+                    text: Theme.text.primary,
+                },
+                hover: {
+                    background: Theme.text.secondary,
+                },
+                active: {
+                    background: Theme.action,
+                },
+            },
+            menu: {
+                size: {
+                    padding: measurements.space.sm,
+                    borderRadius: measurements.size.radius.lg,
+                    zIndex: measurements.zIndex.dropdown,
+                },
+                color: {
+                    background: Theme.surface.default,
+                    border: Theme.border.default,
+                },
+            },
+        },
+        tag: {
+            size: {
+                sm: {
+                    height: measurements.space.xl2,
+                    fontSize: measurements.font.size.xs,
+                    lineHeight: measurements.font.lineHeight.xs,
+                    paddingX: measurements.space.md,
+                    radius: measurements.size.radius.full,
+                    gap: measurements.space.xs,
+                    iconSize: 'xs',
+                },
+                md: {
+                    height: measurements.space.xl3,
+                    fontSize: measurements.font.size.md,
+                    lineHeight: measurements.font.lineHeight.md,
+                    paddingX: measurements.space.md,
+                    radius: measurements.size.radius.full,
+                    gap: measurements.space.sm,
+                    iconSize: 'sm',
+                },
+                lg: {
+                    height: measurements.space.xl4,
+                    fontSize: measurements.font.size.lg,
+                    lineHeight: measurements.font.lineHeight.lg,
+                    paddingX: measurements.space.md,
+                    radius: measurements.size.radius.full,
+                    gap: measurements.space.sm,
+                    iconSize: 'md',
+                },
+            },
+            color: {
+                default: {
+                    background: Theme.action.primary.default,
+                    hover: Theme.action.primary.hover,
+                    text: Theme.text.inverse,
+                },
+                success: {
+                    background: Theme.action.success.default,
+                    hover: Theme.action.success.hover,
+                    text: Theme.text.inverse,
+                },
+                warning: {
+                    background: Theme.action.warning.default,
+                    hover: Theme.action.warning.hover,
+                    text: Theme.text.inverse,
+                },
+                error: {
+                    background: Theme.action.danger.default,
+                    hover: Theme.action.danger.hover,
+                    text: Theme.text.inverse,
+                },
+            },
+        },
+        header: {
+            size: {
+                height: measurements.space.xl7,
+                paddingX: measurements.space.lg,
+                gap: measurements.space.sm,
+                iconSize: 'lg',
+                fontSize: measurements.font.size.xl2,
+                lineHeight: measurements.font.lineHeight.xl2,
+            },
+            color: {
+                bottomBorder: Theme.divider.default,
+                background: Theme.surface.default,
+            },
+        },
+        card: {
+            size: {
+                borderRadius: measurements.size.radius.sm,
+                paddingX: measurements.space.lg,
+                paddingY: measurements.space.lg,
+            },
+            color: {
+                background: Theme.surface.default,
+                shadow: Theme.shadow.card,
+            },
+        },
+        tile: {
+            size: {
+                common: {
+                    paddingX: measurements.space.lg,
+                    paddingY: measurements.space.lg,
+                },
+                sm: {
+                    width: measurements.size.layout.tile.sm,
+                },
+                md: {
+                    width: measurements.size.layout.tile.md,
+                },
+                lg: {
+                    width: measurements.size.layout.tile.lg,
+                },
+            },
+            color: {
+                background: Theme.surface.default,
+                shadow: Theme.shadow.card,
+            },
+        },
+        modal: {
+            size: {
+                common: {
+                    borderRadius: measurements.size.radius.lg,
+                    paddingX: measurements.space.lg,
+                    paddingY: measurements.space.lg,
+                    overlayerPadding: measurements.space.xl,
+                    zIndex: measurements.zIndex.modal,
+                },
+                sm: {
+                    width: measurements.size.layout.tile.sm,
+                },
+                md: {
+                    width: measurements.size.layout.tile.md,
+                },
+                lg: {
+                    width: measurements.size.layout.tile.lg,
+                },
+            },
+            color: {
+                background: Theme.surface.default,
+                shadow: Theme.shadow.modal,
+                overlayer: Theme.overlayer.default,
+            },
+        },
+        sidepanel: {
+            size: {
+                paddingX: measurements.space.lg,
+                paddingY: measurements.space.lg,
+                zIndex: measurements.zIndex.sidepanel,
+                overlayerZIndex: measurements.zIndex.sidepanelOverlayer,
+            },
+            color: {
+                background: Theme.surface.default,
+                shadow: Theme.shadow.modal,
+                overlayer: Theme.overlayer.default,
+            },
+        },
+        file: {
+            size: {
+                sm: {
+                    height: measurements.space.xl4,
+                    fontSize: measurements.font.size.sm,
+                    lineHeight: measurements.font.lineHeight.sm,
+                    paddingX: measurements.space.sm,
+                    radius: measurements.size.radius.sm,
+                    iconSize: 'md',
+                    gap: measurements.space.sm,
+                },
+                md: {
+                    height: measurements.space.xl5,
+                    fontSize: measurements.font.size.md,
+                    lineHeight: measurements.font.lineHeight.md,
+                    paddingX: measurements.space.md,
+                    radius: measurements.size.radius.md,
+                    gap: measurements.space.sm,
+                    iconSize: 'lg',
+                },
+                lg: {
+                    height: measurements.space.xl6,
+                    fontSize: measurements.font.size.lg,
+                    lineHeight: measurements.font.lineHeight.lg,
+                    paddingX: measurements.space.lg,
+                    radius: measurements.size.radius.lg,
+                    gap: measurements.space.sm,
+                    iconSize: 'xl',
+                },
+            },
+            color: {
+                default: {
+                    background: Theme.surface.default,
+                    fileBorder: Theme.border.default,
+                    border: 'transparent',
+                    text: Theme.text.primary,
+                    sufix: Theme.text.secondary,
+                    sufixBackground: Theme.surface.subtle,
+                    placeholder: Theme.text.placeholder,
+                },
+                hover: {
+                    fileBorder: Theme.border.strong,
+                    border: 'transparent',
+                },
+                focus: {
+                    fileBorder: Theme.border.focus,
+                    border: 'transparent',
+                    shadow: Theme.focus.ringPrimary,
+                },
+                error: {
+                    fileBorder: Theme.border.error,
+                    border: 'transparent',
+                    helper: Theme.text.error,
+                },
+                disabled: {
+                    background: Theme.surface.disabled,
+                    text: Theme.text.disabled,
+                    cursor: 'not-allowed',
+                },
+                readonly: {
+                    bg: Theme.surface.default,
+                    text: Theme.text.secondary,
+                },
+            },
+        },
+        selector: {
+            size: {
+                sm: {
+                    height: measurements.space.xl4,
+                    fontSize: measurements.font.size.sm,
+                    lineHeight: measurements.font.lineHeight.sm,
+                    paddingX: measurements.space.sm,
+                    radius: measurements.size.radius.sm,
+                    iconSize: 'sm',
+                },
+                md: {
+                    height: measurements.space.xl5,
+                    fontSize: measurements.font.size.md,
+                    lineHeight: measurements.font.lineHeight.md,
+                    paddingX: measurements.space.md,
+                    radius: measurements.size.radius.md,
+                    iconSize: 'md',
+                },
+                lg: {
+                    height: measurements.space.xl6,
+                    fontSize: measurements.font.size.lg,
+                    lineHeight: measurements.font.lineHeight.lg,
+                    paddingX: measurements.space.lg,
+                    radius: measurements.size.radius.lg,
+                    iconSize: 'lg',
+                },
+            },
+            color: {
+                default: {
+                    background: 'transparent',
+                    fileBorder: Theme.border.default,
+                    border: 'transparent',
+                    text: Theme.action.primary.default,
+                    sufix: Theme.text.secondary,
+                    sufixBackground: Theme.surface.subtle,
+                    placeholder: Theme.text.placeholder,
+                    pillBackground: Theme.action.primary.selected,
+                    pillText: Theme.text.primary,
+                },
+                hover: {
+                    fileBorder: Theme.border.strong,
+                    border: 'transparent',
+                    text: Theme.action.primary.hover,
+                },
+                focus: {
+                    fileBorder: Theme.border.focus,
+                    border: 'transparent',
+                    shadow: Theme.focus.ringPrimary,
+                },
+                error: {
+                    fileBorder: Theme.border.error,
+                    border: 'transparent',
+                    helper: Theme.text.error,
+                },
+                disabled: {
+                    background: Theme.surface.disabled,
+                    text: Theme.text.disabled,
+                    cursor: 'not-allowed',
+                },
+                readonly: {
+                    bg: Theme.surface.default,
+                    text: Theme.text.secondary,
+                },
+            },
+        },
+        datePicker: {
+            size: {
+                sm: {
+                    height: measurements.space.xl4,
+                    paddingX: measurements.space.sm,
+                    borderRadius: measurements.size.radius.sm,
+                    fontSize: measurements.font.size.sm,
+                    lineHeight: measurements.font.lineHeight.sm,
+                    iconSize: 'md',
+                },
+                md: {
+                    height: measurements.space.xl5,
+                    fontSize: measurements.font.size.md,
+                    lineHeight: measurements.font.lineHeight.md,
+                    paddingX: measurements.space.md,
+                    radius: measurements.size.radius.md,
+                    iconSize: 'lg',
+                },
+                lg: {
+                    height: measurements.space.xl6,
+                    fontSize: measurements.font.size.lg,
+                    lineHeight: measurements.font.lineHeight.lg,
+                    paddingX: measurements.space.lg,
+                    radius: measurements.size.radius.lg,
+                    iconSize: 'xl',
+                },
+                common: {
+                    iconGap: measurements.space.sm,
+                    zIndex: measurements.zIndex.modal,
+                },
+            },
+            color: {
+                default: {
+                    background: Theme.surface.default,
+                    border: Theme.border.default,
+                    text: Theme.text.primary,
+                    sufix: Theme.text.secondary,
+                    sufixBackground: Theme.surface.subtle,
+                    placeholder: Theme.text.placeholder,
+                },
+                hover: {
+                    border: Theme.border.strong,
+                },
+                focus: {
+                    border: Theme.border.focus,
+                    shadow: Theme.focus.ringPrimary,
+                },
+                error: {
+                    border: Theme.border.error,
+                    helper: Theme.text.error,
+                },
+                disabled: {
+                    bg: Theme.surface.disabled,
+                    text: Theme.text.disabled,
+                    cursor: 'not-allowed',
+                },
+                readonly: {
+                    bg: Theme.surface.default,
+                    text: Theme.text.secondary,
+                },
+            },
+            calendarCard: {
+                size: {
+                    width: measurements.size.layout.calendar.md,
+                    zIndex: measurements.zIndex.modal,
+                    padding: measurements.space.lg,
+                    borderRadius: measurements.size.radius.xs,
+                    overlayerZIndex: measurements.zIndex.sidepanelOverlayer,
+                    headerPaddingX: measurements.space.lg,
+                    headerHeight: measurements.space.xl5,
+                    fontSize: measurements.font.size.lg,
+                    lineHeight: measurements.font.lineHeight.lg,
+                    gap: measurements.space.sm,
+                },
+                color: {
+                    background: Theme.surface.default,
+                    shadow: Theme.shadow.card,
+                    border: Theme.border.default,
+                    overlayer: Theme.overlayer.default,
+                    text: Theme.text.primary,
+                    actionText: Theme.action.primary.default,
+                    disabled: {
+                        text: Theme.text.disabled,
+                    },
+                    hover: {
+                        text: Theme.action.primary.hover,
+                    },
+                },
+            },
+            calendarContent: {
+                size: {
+                    padding: measurements.space.sm,
+                    gap: measurements.space.sm,
+                    cellWidth: measurements.space.xl4,
+                    cellHeight: measurements.space.xl4,
+                    cellRadius: measurements.size.radius.xs,
+                    weekdays: {
+                        fontSize: measurements.font.size.xs,
+                        lineHeight: measurements.font.lineHeight.xs,
+                    },
+                    day: {
+                        fontSize: measurements.font.size.md,
+                        lineHeight: measurements.font.lineHeight.md,
+                    },
+                },
+                color: {
+                    weekdays: {
+                        text: Theme.text.secondary,
+                    },
+                    day: {
+                        text: Theme.text.primary,
+                        hover: Theme.surface.hover,
+                        selectedHover: Theme.action.primary.hover,
+                        selected: Theme.action.primary.default,
+                        selectedText: Theme.text.inverse,
+                    },
+                },
+            },
+        },
+        loader: {
+            size: {
+                sm: {
+                    size: measurements.space.lg,
+                    border: measurements.space.xxs,
+                },
+                md: {
+                    size: measurements.space.xl3,
+                    border: measurements.space.xxs,
+                },
+                lg: {
+                    size: measurements.space.xl6,
+                    border: measurements.space.xxs,
+                },
+            },
+        },
+        section: {
+            size: {
+                paddingY: measurements.space.lg,
+                paddingX: measurements.space.lg,
+                header: {
+                    bottomMargin: measurements.space.lg,
+                    fontSize: measurements.font.size.xl2,
+                    lineHeight: measurements.font.lineHeight.xl2,
+                },
+            },
+            color: {
+                background: Theme.surface.default,
+                header: {
+                    color: Theme.text.secondary,
+                },
+            },
+        },
+        pagination: {
+            size: {
+                paginationHeight: measurements.space.xl4,
+                height: measurements.space.xl3,
+                width: measurements.space.xl3,
+                itemGap: measurements.space.sm,
+                elementGap: measurements.space.lg,
+                borderRadius: measurements.size.radius.sm,
+                fontSize: measurements.font.size.md,
+                lineHeight: measurements.font.lineHeight.md,
+            },
+            color: {
+                default: {
+                    text: Theme.text.primary,
+                    background: 'transparent',
+                },
+                hover: {
+                    text: Theme.action.primary.hover,
+                    icon: Theme.action.primary.hover,
+                    activeTest: Theme.action.primary.selected,
+                },
+                disabled: {
+                    text: Theme.text.disabled,
+                    background: Theme.surface.disabled,
+                },
+                active: {
+                    text: Theme.text.inverse,
+                    background: Theme.action.primary.default,
+                },
+            },
+        },
+        form: {
+            size: {
+                gap: measurements.space.md,
+                marginBottom: measurements.space.lg,
+            },
+        },
+        filters: {
+            size: {
+                triger: {
+                    sm: {
+                        height: measurements.space.xl4,
+                        paddingX: measurements.space.md,
+                        fontSize: measurements.font.size.sm,
+                        lineHeight: measurements.font.lineHeight.sm,
+                        radius: measurements.size.radius.sm,
+                        iconSize: 'md',
+                        gap: measurements.space.sm,
+                    },
+                    md: {
+                        height: measurements.space.xl5,
+                        paddingX: measurements.space.lg,
+                        fontSize: measurements.font.size.md,
+                        lineHeight: measurements.font.lineHeight.md,
+                        radius: measurements.size.radius.md,
+                        iconSize: 'lg',
+                        gap: measurements.space.sm,
+                    },
+                    lg: {
+                        paddingX: measurements.space.xl,
+                        fontSize: measurements.font.size.lg,
+                        lineHeight: measurements.font.lineHeight.lg,
+                        radius: measurements.size.radius.lg,
+                        iconSize: 'lg',
+                        gap: measurements.space.sm,
+                    },
+                },
+                counter: {
+                    sm: {
+                        fontSize: measurements.font.size.xs2,
+                        lineHeight: measurements.font.lineHeight.xs2,
+                        radius: measurements.size.radius.full,
+                        paddingX: measurements.space.sm,
+                    },
+                    md: {
+                        fontSize: measurements.font.size.xs,
+                        lineHeight: measurements.font.lineHeight.xs,
+                        radius: measurements.size.radius.full,
+                        paddingX: measurements.space.sm,
+                    },
+                    lg: {
+                        fontSize: measurements.font.size.sm,
+                        lineHeight: measurements.font.lineHeight.sm,
+                        radius: measurements.size.radius.full,
+                        paddingX: measurements.space.md,
+                    },
+                },
+                filterRow: {
+                    paddingY: measurements.space.lg,
+                },
+                header: {
+                    fontSize: measurements.font.size.xs,
+                    lineHeight: measurements.font.lineHeight.xs,
+                    height: measurements.space.xl2,
+                    gap: measurements.space.sm,
+                },
+            },
+            color: {
+                default: {
+                    background: Theme.surface.default,
+                    text: Theme.text.primary,
+                    counterText: Theme.text.inverse,
+                    counterBackground: Theme.action.primary.default,
+                    headerText: Theme.text.secondary,
+                },
+                hover: {
+                    background: Theme.surface.subtle,
+                    activeBackground: Theme.action.primary.selectedHover,
+                    clearText: Theme.action.primary.default,
+                },
+                selected: {
+                    background: Theme.action.primary.selected,
+                },
+            },
+        },
+        table: {
+            size: {
+                common: {
+                    borderRadius: measurements.size.radius.sm,
+                },
+                header: {
+                    height: measurements.space.xl6,
+                    fontSize: measurements.font.size.md,
+                    lineHeight: measurements.font.lineHeight.md,
+                    text: Theme.text.primary,
+                },
+                cell: {
+                    common: {
+                        paddingX: measurements.space.md,
+                    },
+                    sizes: {
+                        sm: {
+                            width: measurements.size.layout.table.sm,
+                        },
+                        md: {
+                            width: measurements.size.layout.table.md,
+                        },
+                        lg: {
+                            width: measurements.size.layout.table.lg,
+                        },
+                        option: {
+                            width: measurements.space.xl3,
+                        },
+                        icon: {
+                            width: measurements.space.xl3,
+                        }
+                    },
+                },
+            },
+            color: {
+                default: {
+                    common: {
+                        background: Theme.surface.default,
+                        border: Theme.border.default,
+                    },
+                    header: {
+                        border: Theme.border.strong,
+                        text: Theme.text.primary,
+                        sortIcon: Theme.text.primary,
+                    },
+                },
+                hover: {
+                    background: Theme.surface.hover,
+                    activeBackground: Theme.action.primary.selectedHover,
+                },
+                active: {
+                    background: Theme.action.primary.selected,
+                    header: {
+                        textHeader: Theme.action.primary.default,
+                        sortIcon: Theme.action.primary.default,
+                    },
+                },
+                disabled: {
+                    text: Theme.text.disabled,
+                },
+            },
+        },
+    };
+};
+export const Theme = createTheme('default');
+export const componentsConfig = createComponentsConfig('default');
+export const createConfig = (theme = 'default') => ({
+    Theme: createTheme(theme),
+    measurements,
+    typography: createTypography(),
+    componentsConfig: createComponentsConfig(theme),
+});