@zimyo/ui 1.1.4 → 1.1.6

package/dist/index.esm.js

@@ -0,0 +1,763 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { forwardRef, createElement } from 'react';
+import { useTheme, Button as Button$1, CircularProgress, Card, CardHeader as CardHeader$1, Typography, CardActions as CardActions$1, Box, Skeleton, FormControl, Select as Select$1, OutlinedInput, IconButton, MenuItem, ListItemText, FormHelperText, Chip, Accordion as Accordion$1, AccordionSummary, AccordionDetails, FormControlLabel, Switch as Switch$1, TextField, InputAdornment, FormLabel, RadioGroup as RadioGroup$1, Radio, GlobalStyles, CssBaseline } from '@mui/material';
+import MuiCardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+const Button = React.forwardRef(({ children, loading = false, loadingText, loaderSize = 18, loaderPosition = 'start', variant = 'contained', color = 'primary', size = 'medium', sx = {}, disabled, startIcon, endIcon, ...props }, ref) => {
+    useTheme();
+    const showStartSpinner = loading && loaderPosition === 'start';
+    const showEndSpinner = loading && loaderPosition === 'end';
+    const showCenterSpinner = loading && loaderPosition === 'center';
+    return (jsx(Button$1, { ref: ref, variant: variant, color: color, size: size, disabled: disabled || loading, startIcon: showStartSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (startIcon), endIcon: showEndSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : (endIcon), sx: {
+            // borderRadius: theme.radius.sm,
+            fontWeight: 500,
+            textTransform: 'none',
+            letterSpacing: '0.5px',
+            px: size === 'small' ? 1.5 : size === 'large' ? 3 : 2,
+            py: size === 'small' ? 0.5 : size === 'large' ? 1.5 : 1,
+            position: 'relative',
+            ...sx,
+        }, ...props, children: showCenterSpinner ? (jsx(CircularProgress, { size: loaderSize, color: "inherit" })) : loading && loadingText ? (loadingText) : (children) }));
+});
+Button.displayName = 'Button';
+
+const CardRoot = ({ children, sx = {}, elevation = 1, variant = 'elevated', ...props }) => {
+    const theme = useTheme();
+    return (jsx(Card, { elevation: variant === 'elevated' ? elevation : 0, variant: variant === 'outlined' ? 'outlined' : 'elevation', sx: {
+            borderRadius: theme.radius?.sm || 8,
+            border: variant === 'bordered' ? `1px solid ${theme.palette.divider}` : 'none',
+            overflow: 'hidden',
+            backgroundColor: theme.palette.background.paper,
+            ...sx,
+        }, ...props, children: children }));
+};
+
+const CardHeader = ({ title, subtitle, action, }) => (jsx(CardHeader$1, { title: typeof title === 'string' ? (jsx(Typography, { variant: "h6", fontWeight: 600, children: title })) : (title), subheader: typeof subtitle === 'string' ? (jsx(Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : (subtitle), action: action }));
+
+const CardContent = ({ children, sx }) => (jsx(MuiCardContent, { sx: sx, children: children }));
+
+const CardActions = ({ children, sx }) => (jsx(CardActions$1, { sx: sx, children: children }));
+
+const CardImage = ({ src, height = 160, alt = 'card image' }) => (jsx(CardMedia, { component: "img", height: height, image: src, alt: alt }));
+
+const CardSkeleton = ({ lines = 3 }) => (jsxs(Box, { p: 2, children: [jsx(Skeleton, { variant: "rectangular", height: 140 }), [...Array(lines)].map((_, i) => (jsx(Skeleton, { variant: "text", height: 20, sx: { mt: 1 } }, i)))] }));
+
+Object.assign(CardRoot, {
+    Header: CardHeader,
+    Content: CardContent,
+    Body: CardContent, // alias
+    Actions: CardActions,
+    Image: CardImage,
+    Skeleton: CardSkeleton,
+});
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$1);
+
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
+
+const Select = React.forwardRef(({ label = '', options = [], value, onChange, error = false, helperText = '', required = false, placeholder = 'Select...', isMulti = false, disabled = false, ...rest }, ref) => {
+    useTheme();
+    const handleRemoveChip = (chipValue) => (e) => {
+        e.stopPropagation();
+        const newValue = value.filter((v) => v !== chipValue);
+        onChange?.({
+            target: {
+                name: rest.name,
+                value: newValue,
+            },
+        });
+    };
+    const renderValue = (selected) => {
+        if (isMulti && Array.isArray(selected)) {
+            return (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: selected.map((val) => {
+                    const label = options.find((o) => o.value === val)?.label || val;
+                    return jsx(Box, { onMouseDown: (e) => e.stopPropagation(), children: jsx(Chip, { onDelete: handleRemoveChip(val), label: label, sx: { borderRadius: '12px' } }) }, val);
+                }) }));
+        }
+        return options.find((o) => o.value === selected)?.label || placeholder;
+    };
+    const handleClearSelection = (e) => {
+        e.stopPropagation();
+        const emptyValue = isMulti ? [] : '';
+        onChange?.({
+            target: {
+                name: rest.name,
+                value: emptyValue,
+            },
+        });
+    };
+    return (jsxs(FormControl, { fullWidth: true, error: error, disabled: disabled, sx: {
+            '& .MuiOutlinedInput-root': {
+                borderRadius: '8px',
+                minHeight: '44px',
+                // backgroundColor: theme.palette.background.paper,
+                fontSize: '14px'
+            },
+            '& .MuiSelect-select': {
+                fontSize: '14px',
+                padding: '10px 14px',
+            },
+            '& .MuiSelect-placeholder': {
+                fontSize: '14px',
+            },
+            '& .MuiMenuItem-root': {
+                fontSize: '14px',
+            },
+            '& .MuiChip-label': {
+                fontSize: '14px',
+            },
+        }, children: [jsx(Select$1, { displayEmpty: true, 
+                //   labelId={labelId}
+                multiple: isMulti, value: value || (isMulti ? [] : ''), onChange: onChange, input: jsx(OutlinedInput, { label: label }), renderValue: renderValue, ref: ref, IconComponent: ChevronDown, endAdornment: value && !isMulti && ((isMulti && value.length > 0) || (!isMulti && value !== '')) ? (jsx(IconButton, { sx: { marginRight: '1rem' }, size: "small", onClick: handleClearSelection, children: jsx(X, { fontSize: "small" }) })) : null, variant: "outlined", ...rest, children: options && options.map((option) => (jsx(MenuItem, { value: option.value, children: isMulti ? (jsx(Fragment, { children: jsx(ListItemText, { primary: option.label }) })) : (option.label || placeholder) }, option.value))) }), helperText && jsx(FormHelperText, { children: helperText })] }));
+});
+
+const AccordionContext = React.createContext({});
+// Main Accordion Container Component
+const Accordion = React.forwardRef(({ type = 'single', collapsible = false, value: controlledValue, defaultValue, onValueChange, children, sx = {}, ...props }, ref) => {
+    const theme = useTheme();
+    // Internal state management
+    const [internalValue, setInternalValue] = React.useState(() => {
+        if (controlledValue !== undefined)
+            return controlledValue;
+        if (defaultValue !== undefined)
+            return defaultValue;
+        return type === 'multiple' ? [] : '';
+    });
+    const value = controlledValue !== undefined ? controlledValue : internalValue;
+    const handleValueChange = React.useCallback((newValue) => {
+        if (controlledValue === undefined) {
+            setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+    }, [controlledValue, onValueChange]);
+    const contextValue = React.useMemo(() => ({
+        type,
+        collapsible,
+        value,
+        defaultValue,
+        onValueChange: handleValueChange,
+    }), [type, collapsible, value, defaultValue, handleValueChange]);
+    return (jsx(AccordionContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: theme.spacing(1),
+            }, ...props, children: children }) }));
+});
+// AccordionItem Component
+const AccordionItem = React.forwardRef(({ value: itemValue, children, sx = {}, ...props }, ref) => {
+    const theme = useTheme();
+    const context = React.useContext(AccordionContext);
+    const isExpanded = React.useMemo(() => {
+        if (context.type === 'multiple') {
+            return Array.isArray(context.value) && context.value.includes(itemValue);
+        }
+        return context.value === itemValue;
+    }, [context.value, context.type, itemValue]);
+    const handleChange = React.useCallback(() => {
+        if (!context.onValueChange)
+            return;
+        if (context.type === 'multiple') {
+            const currentValue = Array.isArray(context.value) ? context.value : [];
+            const newValue = isExpanded
+                ? currentValue.filter(v => v !== itemValue)
+                : [...currentValue, itemValue];
+            context.onValueChange(newValue);
+        }
+        else {
+            const newValue = isExpanded && context.collapsible ? '' : itemValue;
+            context.onValueChange(newValue);
+        }
+    }, [context, itemValue, isExpanded]);
+    return (jsx(Accordion$1, { ref: ref, expanded: isExpanded, onChange: handleChange, variant: "outlined", sx: {
+            borderRadius: theme.radius?.sm || theme.shape.borderRadius,
+            '&:before': {
+                display: 'none',
+            },
+            '&.Mui-expanded': {
+                margin: 0,
+            },
+            border: `1px solid ${theme.palette.divider}`,
+            ...sx,
+        }, ...props, children: children }));
+});
+// AccordionTrigger Component
+const AccordionTrigger = React.forwardRef(({ children, sx = {}, expandIcon, ...props }, ref) => {
+    const theme = useTheme();
+    const defaultExpandIcon = expandIcon !== undefined ? expandIcon : jsx(ChevronDown, {});
+    return (jsx(AccordionSummary, { ref: ref, expandIcon: defaultExpandIcon, sx: {
+            borderRadius: theme.radius?.sm || theme.shape.borderRadius,
+            minHeight: 56,
+            fontWeight: 500,
+            '&.Mui-expanded': {
+                minHeight: 56,
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                borderBottom: `1px solid ${theme.palette.divider}`,
+            },
+            '& .MuiAccordionSummary-content': {
+                margin: '12px 0',
+                '&.Mui-expanded': {
+                    margin: '12px 0',
+                },
+            },
+            '& .MuiAccordionSummary-expandIconWrapper': {
+                transition: theme.transitions.create('transform', {
+                    duration: theme.transitions.duration.shortest,
+                }),
+                '&.Mui-expanded': {
+                    transform: 'rotate(180deg)',
+                },
+            },
+            '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+            },
+            ...sx,
+        }, ...props, children: children }));
+});
+// AccordionContent Component
+const AccordionContent = React.forwardRef(({ children, sx = {}, ...props }, ref) => {
+    const theme = useTheme();
+    return (jsx(AccordionDetails, { ref: ref, sx: {
+            padding: theme.spacing(2),
+            borderBottomLeftRadius: theme.radius?.sm || theme.shape.borderRadius,
+            borderBottomRightRadius: theme.radius?.sm || theme.shape.borderRadius,
+            ...sx,
+        }, ...props, children: children }));
+});
+
+const Switch = React.forwardRef(({ label = '', helperText = '', error = false, onChange, checked, required = false, disabled = false, ...rest }, ref) => {
+    return (jsxs(FormControl, { error: error, disabled: disabled, component: "fieldset", children: [jsx(FormControlLabel, { control: jsx(Switch$1, { inputRef: ref, checked: checked, onChange: (e, checked) => onChange?.(e, checked), disabled: disabled, required: required == 1 || required === true ? true : false, ...rest }), label: label }), helperText && jsx(FormHelperText, { children: helperText })] }));
+});
+
+const TextInput = React.forwardRef(({ label = '', placeholder, IS_MANDATORY = false, 
+//   multiline = false,
+startIcon, endIcon, error = false, helperText, type = 'text', variant = 'outlined', ...rest }, ref) => {
+    return (jsx(TextField, { fullWidth: true, inputRef: ref, type: type, 
+        // multiline={multiline}
+        label: label, placeholder: placeholder, required: (IS_MANDATORY == 1 || IS_MANDATORY == true) ? true : false, error: error, InputLabelProps: !label ? { shrink: false } : undefined, sx: {
+            '& .MuiInputLabel-outlined': {
+                top: '-4px',
+                fontSize: '13px',
+                fontWeight: 500,
+            },
+            '& .MuiOutlinedInput-root': {
+                minHeight: '44px',
+                borderRadius: '10px',
+            },
+            '& input': {
+                padding: '10.5px 14px',
+            },
+            '& input::placeholder': {
+                fontSize: '13px',
+                opacity: 0.5,
+            },
+        }, helperText: helperText, InputProps: {
+            startAdornment: startIcon ? (jsx(InputAdornment, { position: "start", children: startIcon })) : undefined,
+            endAdornment: endIcon ? (jsx(InputAdornment, { position: "end", children: endIcon })) : undefined,
+        }, variant: variant, ...rest }));
+});
+
+const RadioGroup = React.forwardRef(({ label, options = [], value, defaultValue, onChange, name, disabled = false, required = false, error = false, helperText, row = false, size = 'medium', color = 'primary', sx = {}, radioSx = {}, labelSx = {}, ...props }, ref) => {
+    const theme = useTheme();
+    const [internalValue, setInternalValue] = React.useState(value || defaultValue || '');
+    // Sync with external value prop
+    React.useEffect(() => {
+        if (value !== undefined) {
+            setInternalValue(value);
+        }
+    }, [value]);
+    const handleChange = (event) => {
+        const newValue = event.target.value;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    };
+    const currentValue = value !== undefined ? value : internalValue;
+    return (jsxs(FormControl, { ref: ref, component: "fieldset", variant: "standard", disabled: disabled, required: required, error: error, sx: {
+            borderRadius: '8px',
+            ...sx,
+        }, ...props, children: [label && (jsxs(FormLabel, { component: "legend", sx: {
+                    fontWeight: 500,
+                    fontSize: size === 'small' ? '0.875rem' : '1rem',
+                    color: disabled
+                        ? theme.palette.text.disabled
+                        : error
+                            ? theme.palette.error.main
+                            : theme.palette.text.primary,
+                    '&.Mui-focused': {
+                        color: error
+                            ? theme.palette.error.main
+                            : `${theme.palette[color].main}`,
+                    },
+                    mb: 1,
+                    ...labelSx,
+                }, children: [label, required && (jsx(Typography, { component: "span", sx: {
+                            color: theme.palette.error.main,
+                            ml: 0.5,
+                            fontSize: 'inherit',
+                        }, children: "*" }))] })), jsx(RadioGroup$1, { name: name, value: currentValue, onChange: handleChange, row: row, sx: {
+                    gap: size === 'small' ? 1 : 1.5,
+                    '& .MuiFormControlLabel-root': {
+                        marginLeft: 0,
+                        marginRight: row ? 2 : 0,
+                    },
+                }, children: options.map((option) => (jsx(Box, { children: jsx(FormControlLabel, { value: option.value, disabled: disabled || option.disabled, control: jsx(Radio, { size: size, color: color, sx: {
+                                '&.Mui-checked': {
+                                    color: error
+                                        ? theme.palette.error.main
+                                        : `${theme.palette[color].main}`,
+                                },
+                                alignSelf: option.description ? 'flex-start' : 'center',
+                                mt: option.description ? 0.25 : 0,
+                                ...radioSx,
+                            } }), label: jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [jsx(Typography, { variant: size === 'small' ? 'body2' : 'body1', sx: {
+                                        fontWeight: 400,
+                                        color: disabled || option.disabled
+                                            ? theme.palette.text.disabled
+                                            : theme.palette.text.primary,
+                                        lineHeight: 1.5,
+                                    }, children: option.label }), option.description && (jsx(Typography, { variant: "caption", sx: {
+                                        color: disabled || option.disabled
+                                            ? theme.palette.text.disabled
+                                            : theme.palette.text.secondary,
+                                        mt: 0.25,
+                                        lineHeight: 1.4,
+                                    }, children: option.description }))] }), sx: {
+                            alignItems: option.description ? 'flex-start' : 'center',
+                            margin: 0,
+                            display: 'flex',
+                            '& .MuiFormControlLabel-label': {
+                                ml: 1,
+                                flex: 1,
+                            },
+                            '& .MuiButtonBase-root': {
+                                p: size === 'small' ? 0.5 : 1,
+                            },
+                        } }) }, option.value))) }), helperText && (jsx(FormHelperText, { sx: {
+                    mt: 1,
+                    fontSize: size === 'small' ? '0.75rem' : '0.875rem',
+                    color: error
+                        ? theme.palette.error.main
+                        : theme.palette.text.secondary,
+                }, children: helperText }))] }));
+});
+
+const Heading = ({ level = 1, ...props }) => {
+    const variant = `h${level}`;
+    return (jsx(Typography, { variant: variant, component: props.component || `h${level}`, fontWeight: 600, gutterBottom: true, ...props }));
+};
+
+const Text = ({ size = 'md', ...props }) => {
+    const variantMap = {
+        sm: 'body2',
+        md: 'body1',
+        lg: 'subtitle1',
+    };
+    return (jsx(Typography, { variant: variantMap[size], component: props.component || 'p', ...props }));
+};
+
+const Lead = (props) => {
+    return (jsx(Typography, { variant: "subtitle1", component: props.component || 'p', fontWeight: 400, color: "text.secondary", ...props }));
+};
+
+const Muted = (props) => {
+    return (jsx(Typography, { variant: "body2", component: props.component || 'span', color: "text.disabled", ...props }));
+};
+
+const Strong = (props) => {
+    return (jsx(Typography, { component: props.component || 'strong', fontWeight: 500, display: "inline", ...props }));
+};
+
+const Caption = (props) => {
+    return (jsx(Typography, { variant: "caption", color: "text.secondary", component: props.component || 'span', ...props }));
+};
+
+const Blockquote = (props) => {
+    return (jsx(Typography, { component: "blockquote", sx: {
+            borderLeft: '4px solid',
+            borderColor: 'divider',
+            pl: 2,
+            color: 'text.secondary',
+            fontStyle: 'italic',
+        }, ...props }));
+};
+
+const Code = ({ children, sx }) => {
+    return (jsx(Box, { component: "code", sx: {
+            fontFamily: 'monospace',
+            backgroundColor: 'grey.100',
+            color: 'primary.main',
+            px: 0.5,
+            py: 0.25,
+            borderRadius: 1,
+            fontSize: '0.875rem',
+            ...sx,
+        }, children: children }));
+};
+
+const designTokens = {
+    colors: {
+        primary: {
+            50: '#e3f2fd',
+            100: '#bbdefb',
+            500: '#2196f3',
+            900: '#0d47a1',
+        },
+        secondary: {
+            50: '#fce4ec',
+            100: '#f8bbd9',
+            500: '#e91e63',
+            900: '#880e4f',
+        },
+        neutral: {
+            50: '#fafafa',
+            100: '#f5f5f5',
+            200: '#eeeeee',
+            500: '#9e9e9e',
+            900: '#212121',
+        },
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    },
+    radius: {
+        xs: "2px",
+        sm: '4px',
+        md: '8px',
+        lg: '12px',
+        xl: '16px',
+        full: '9999px',
+    },
+    typography: {
+        fontFamily: `'Inter', system-ui, sans-serif`,
+        fontSize: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.25rem',
+            xl: '1.5rem',
+        },
+    },
+};
+
+const createCustomTheme = (config = {}) => {
+    const { primaryColor = designTokens.colors.primary[500], secondaryColor = designTokens.colors.secondary[500], } = config;
+    return createTheme({
+        palette: {
+            primary: {
+                main: primaryColor,
+            },
+            secondary: {
+                main: secondaryColor,
+            },
+            divider: '#e5e5e5'
+        },
+        typography: {
+            fontFamily: designTokens.typography.fontFamily,
+            fontSize: 14,
+            h1: {
+                fontSize: '3rem', // 48px
+                fontWeight: 700,
+                lineHeight: 1.2,
+            },
+            h2: {
+                fontSize: '2.25rem', // 36px
+                fontWeight: 600,
+                lineHeight: 1.25,
+            },
+            h3: {
+                fontSize: '1.875rem', // 30px
+                fontWeight: 600,
+                lineHeight: 1.3,
+            },
+            h4: {
+                fontSize: '1.5rem', // 24px
+                fontWeight: 500,
+                lineHeight: 1.35,
+            },
+            h5: {
+                fontSize: '1.25rem', // 20px
+                fontWeight: 500,
+                lineHeight: 1.4,
+            },
+            h6: {
+                fontSize: '1rem', // 16px
+                fontWeight: 500,
+                lineHeight: 1.5,
+            },
+            body1: {
+                fontSize: '1rem', // 16px
+                lineHeight: '1.625rem', // 26px
+            },
+            body2: {
+                fontSize: '0.875rem', // 14px
+                lineHeight: '1.5rem', // 24px
+            },
+            caption: {
+                fontSize: '0.875rem',
+                lineHeight: '1.25rem', // 20px
+            },
+            button: {
+                fontSize: '0.875rem',
+                lineHeight: '1.5rem',
+                textTransform: 'none',
+            },
+            subtitle1: {
+                fontSize: '1rem', // 16px
+                lineHeight: '1.5rem', // 24px
+                // fontWeight: 500
+            },
+        },
+        spacing: 8,
+        shape: {
+            borderRadius: 8,
+        },
+        radius: designTokens.radius,
+        components: {
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                        borderRadius: designTokens.radius.md,
+                        // fontWeight: 600,
+                        letterSpacing: '0.5px',
+                        padding: '6px 12px',
+                    },
+                    sizeSmall: {
+                        padding: '4px 12px',
+                        // fontSize: '0.875rem',
+                    },
+                    sizeLarge: {
+                        padding: '12px 24px',
+                        // fontSize: '1rem',
+                    },
+                },
+                defaultProps: {
+                    disableElevation: true
+                }
+            },
+            MuiCard: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: '12px',
+                        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+                    },
+                },
+            },
+            MuiTextField: {
+                styleOverrides: {
+                    root: {
+                        '& .MuiOutlinedInput-root': {
+                            borderRadius: '8px',
+                        },
+                    },
+                },
+            },
+        },
+    });
+};
+// Default theme
+const theme = createCustomTheme();
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$4 = "/* inter-cyrillic-ext-300-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 300;\n  src: url(./files/inter-cyrillic-ext-300-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-300-normal.woff) format('woff');\n  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* inter-cyrillic-300-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 300;\n  src: url(./files/inter-cyrillic-300-normal.woff2) format('woff2'), url(./files/inter-cyrillic-300-normal.woff) format('woff');\n  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* inter-greek-ext-300-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 300;\n  src: url(./files/inter-greek-ext-300-normal.woff2) format('woff2'), url(./files/inter-greek-ext-300-normal.woff) format('woff');\n  unicode-range: U+1F00-1FFF;\n}\n\n/* inter-greek-300-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 300;\n  src: url(./files/inter-greek-300-normal.woff2) format('woff2'), url(./files/inter-greek-300-normal.woff) format('woff');\n  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n\n/* inter-vietnamese-300-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 300;\n  src: url(./files/inter-vietnamese-300-normal.woff2) format('woff2'), url(./files/inter-vietnamese-300-normal.woff) format('woff');\n  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n\n/* inter-latin-ext-300-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 300;\n  src: url(./files/inter-latin-ext-300-normal.woff2) format('woff2'), url(./files/inter-latin-ext-300-normal.woff) format('woff');\n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* inter-latin-300-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 300;\n  src: url(./files/inter-latin-300-normal.woff2) format('woff2'), url(./files/inter-latin-300-normal.woff) format('woff');\n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}";
+styleInject(css_248z$4);
+
+var css_248z$3 = "/* inter-cyrillic-ext-400-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 400;\n  src: url(./files/inter-cyrillic-ext-400-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-400-normal.woff) format('woff');\n  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* inter-cyrillic-400-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 400;\n  src: url(./files/inter-cyrillic-400-normal.woff2) format('woff2'), url(./files/inter-cyrillic-400-normal.woff) format('woff');\n  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* inter-greek-ext-400-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 400;\n  src: url(./files/inter-greek-ext-400-normal.woff2) format('woff2'), url(./files/inter-greek-ext-400-normal.woff) format('woff');\n  unicode-range: U+1F00-1FFF;\n}\n\n/* inter-greek-400-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 400;\n  src: url(./files/inter-greek-400-normal.woff2) format('woff2'), url(./files/inter-greek-400-normal.woff) format('woff');\n  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n\n/* inter-vietnamese-400-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 400;\n  src: url(./files/inter-vietnamese-400-normal.woff2) format('woff2'), url(./files/inter-vietnamese-400-normal.woff) format('woff');\n  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n\n/* inter-latin-ext-400-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 400;\n  src: url(./files/inter-latin-ext-400-normal.woff2) format('woff2'), url(./files/inter-latin-ext-400-normal.woff) format('woff');\n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* inter-latin-400-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 400;\n  src: url(./files/inter-latin-400-normal.woff2) format('woff2'), url(./files/inter-latin-400-normal.woff) format('woff');\n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}";
+styleInject(css_248z$3);
+
+var css_248z$2 = "/* inter-cyrillic-ext-500-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 500;\n  src: url(./files/inter-cyrillic-ext-500-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-500-normal.woff) format('woff');\n  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* inter-cyrillic-500-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 500;\n  src: url(./files/inter-cyrillic-500-normal.woff2) format('woff2'), url(./files/inter-cyrillic-500-normal.woff) format('woff');\n  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* inter-greek-ext-500-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 500;\n  src: url(./files/inter-greek-ext-500-normal.woff2) format('woff2'), url(./files/inter-greek-ext-500-normal.woff) format('woff');\n  unicode-range: U+1F00-1FFF;\n}\n\n/* inter-greek-500-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 500;\n  src: url(./files/inter-greek-500-normal.woff2) format('woff2'), url(./files/inter-greek-500-normal.woff) format('woff');\n  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n\n/* inter-vietnamese-500-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 500;\n  src: url(./files/inter-vietnamese-500-normal.woff2) format('woff2'), url(./files/inter-vietnamese-500-normal.woff) format('woff');\n  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n\n/* inter-latin-ext-500-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 500;\n  src: url(./files/inter-latin-ext-500-normal.woff2) format('woff2'), url(./files/inter-latin-ext-500-normal.woff) format('woff');\n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* inter-latin-500-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 500;\n  src: url(./files/inter-latin-500-normal.woff2) format('woff2'), url(./files/inter-latin-500-normal.woff) format('woff');\n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}";
+styleInject(css_248z$2);
+
+var css_248z$1 = "/* inter-cyrillic-ext-600-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 600;\n  src: url(./files/inter-cyrillic-ext-600-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-600-normal.woff) format('woff');\n  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* inter-cyrillic-600-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 600;\n  src: url(./files/inter-cyrillic-600-normal.woff2) format('woff2'), url(./files/inter-cyrillic-600-normal.woff) format('woff');\n  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* inter-greek-ext-600-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 600;\n  src: url(./files/inter-greek-ext-600-normal.woff2) format('woff2'), url(./files/inter-greek-ext-600-normal.woff) format('woff');\n  unicode-range: U+1F00-1FFF;\n}\n\n/* inter-greek-600-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 600;\n  src: url(./files/inter-greek-600-normal.woff2) format('woff2'), url(./files/inter-greek-600-normal.woff) format('woff');\n  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n\n/* inter-vietnamese-600-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 600;\n  src: url(./files/inter-vietnamese-600-normal.woff2) format('woff2'), url(./files/inter-vietnamese-600-normal.woff) format('woff');\n  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n\n/* inter-latin-ext-600-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 600;\n  src: url(./files/inter-latin-ext-600-normal.woff2) format('woff2'), url(./files/inter-latin-ext-600-normal.woff) format('woff');\n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* inter-latin-600-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 600;\n  src: url(./files/inter-latin-600-normal.woff2) format('woff2'), url(./files/inter-latin-600-normal.woff) format('woff');\n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}";
+styleInject(css_248z$1);
+
+var css_248z = "/* inter-cyrillic-ext-700-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 700;\n  src: url(./files/inter-cyrillic-ext-700-normal.woff2) format('woff2'), url(./files/inter-cyrillic-ext-700-normal.woff) format('woff');\n  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;\n}\n\n/* inter-cyrillic-700-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 700;\n  src: url(./files/inter-cyrillic-700-normal.woff2) format('woff2'), url(./files/inter-cyrillic-700-normal.woff) format('woff');\n  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;\n}\n\n/* inter-greek-ext-700-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 700;\n  src: url(./files/inter-greek-ext-700-normal.woff2) format('woff2'), url(./files/inter-greek-ext-700-normal.woff) format('woff');\n  unicode-range: U+1F00-1FFF;\n}\n\n/* inter-greek-700-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 700;\n  src: url(./files/inter-greek-700-normal.woff2) format('woff2'), url(./files/inter-greek-700-normal.woff) format('woff');\n  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;\n}\n\n/* inter-vietnamese-700-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 700;\n  src: url(./files/inter-vietnamese-700-normal.woff2) format('woff2'), url(./files/inter-vietnamese-700-normal.woff) format('woff');\n  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;\n}\n\n/* inter-latin-ext-700-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 700;\n  src: url(./files/inter-latin-ext-700-normal.woff2) format('woff2'), url(./files/inter-latin-ext-700-normal.woff) format('woff');\n  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;\n}\n\n/* inter-latin-700-normal */\n@font-face {\n  font-family: 'Inter';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 700;\n  src: url(./files/inter-latin-700-normal.woff2) format('woff2'), url(./files/inter-latin-700-normal.woff) format('woff');\n  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;\n}";
+styleInject(css_248z);
+
+const Fonts = () => (jsx(GlobalStyles, { styles: {
+        body: {
+            WebkitFontSmoothing: 'antialiased',
+            MozOsxFontSmoothing: 'grayscale',
+        },
+        html: {
+            fontFamily: "'Inter', system-ui, sans-serif",
+        },
+    } }));
+
+const UILibraryThemeProvider = ({ children, primaryColor, secondaryColor, enableCssBaseline = true, }) => {
+    const themeConfig = {};
+    if (primaryColor) {
+        themeConfig.primaryColor = primaryColor;
+    }
+    if (secondaryColor) {
+        themeConfig.secondaryColor = secondaryColor;
+    }
+    const theme = createCustomTheme(themeConfig);
+    return (jsxs(ThemeProvider, { theme: theme, children: [enableCssBaseline && jsx(CssBaseline, {}), jsx(Fonts, {}), children] }));
+};
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Blockquote, Button, Caption, Code, Heading, Lead, Muted, RadioGroup, Select, Strong, Switch, Text, TextInput, UILibraryThemeProvider, createCustomTheme, designTokens, theme };