@zimyo/ui 1.1.2 → 1.1.4

package/dist/RadioGroup/index.esm.js

@@ -1,92 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
-import { useTheme, FormControl, FormLabel, Typography, RadioGroup as RadioGroup$1, Box, FormControlLabel, Radio, FormHelperText } from '@mui/material';
-
-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 }))] }));
-});
-RadioGroup.displayName = 'RadioGroup';
-
-export { RadioGroup, RadioGroup as default };

package/dist/RadioGroup/index.js

@@ -1,97 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var material = require('@mui/material');
-
-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 = material.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 (jsxRuntime.jsxs(material.FormControl, { ref: ref, component: "fieldset", variant: "standard", disabled: disabled, required: required, error: error, sx: {
-            borderRadius: '8px',
-            ...sx,
-        }, ...props, children: [label && (jsxRuntime.jsxs(material.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 && (jsxRuntime.jsx(material.Typography, { component: "span", sx: {
-                            color: theme.palette.error.main,
-                            ml: 0.5,
-                            fontSize: 'inherit',
-                        }, children: "*" }))] })), jsxRuntime.jsx(material.RadioGroup, { 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) => (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(material.FormControlLabel, { value: option.value, disabled: disabled || option.disabled, control: jsxRuntime.jsx(material.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: jsxRuntime.jsxs(material.Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsx(material.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 && (jsxRuntime.jsx(material.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 && (jsxRuntime.jsx(material.FormHelperText, { sx: {
-                    mt: 1,
-                    fontSize: size === 'small' ? '0.75rem' : '0.875rem',
-                    color: error
-                        ? theme.palette.error.main
-                        : theme.palette.text.secondary,
-                }, children: helperText }))] }));
-});
-RadioGroup.displayName = 'RadioGroup';
-
-exports.RadioGroup = RadioGroup;
-exports.default = RadioGroup;

package/dist/Select/index.d.ts

@@ -1,22 +0,0 @@
-import React from 'react';
-import { SelectProps, SelectChangeEvent } from '@mui/material';
-
-interface OptionType {
-    label: string;
-    value: string | number;
-}
-interface CustomSelectProps extends Omit<SelectProps, 'value' | 'onChange'> {
-    label?: string;
-    options: OptionType[];
-    error?: boolean;
-    helperText?: string;
-    required?: boolean;
-    placeholder?: string;
-    value?: any;
-    onChange?: (event: SelectChangeEvent<any>) => void;
-    isMulti?: boolean;
-}
-declare const CustomSelect: React.ForwardRefExoticComponent<Omit<CustomSelectProps, "ref"> & React.RefAttributes<any>>;
-
-export { CustomSelect, CustomSelect as default };
-export type { CustomSelectProps, OptionType };

package/dist/Select/index.esm.js

@@ -1,63 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React from 'react';
-import { useTheme, FormControl, Select, OutlinedInput, IconButton, MenuItem, ListItemText, FormHelperText, Box, Chip } from '@mui/material';
-import { ExpandMore, Clear } from '@mui/icons-material';
-
-const CustomSelect = 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, { displayEmpty: true, 
-                //   labelId={labelId}
-                multiple: isMulti, value: value || (isMulti ? [] : ''), onChange: onChange, input: jsx(OutlinedInput, { label: label }), renderValue: renderValue, ref: ref, IconComponent: ExpandMore, endAdornment: value && !isMulti && ((isMulti && value.length > 0) || (!isMulti && value !== '')) ? (jsx(IconButton, { sx: { marginRight: '1rem' }, size: "small", onClick: handleClearSelection, children: jsx(Clear, { 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 })] }));
-});
-CustomSelect.displayName = 'CustomSelect';
-
-export { CustomSelect, CustomSelect as default };

package/dist/Select/index.js

@@ -1,68 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var material = require('@mui/material');
-var iconsMaterial = require('@mui/icons-material');
-
-const CustomSelect = React.forwardRef(({ label = '', options = [], value, onChange, error = false, helperText = '', required = false, placeholder = 'Select...', isMulti = false, disabled = false, ...rest }, ref) => {
-    material.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 (jsxRuntime.jsx(material.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: selected.map((val) => {
-                    const label = options.find((o) => o.value === val)?.label || val;
-                    return jsxRuntime.jsx(material.Box, { onMouseDown: (e) => e.stopPropagation(), children: jsxRuntime.jsx(material.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 (jsxRuntime.jsxs(material.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: [jsxRuntime.jsx(material.Select, { displayEmpty: true, 
-                //   labelId={labelId}
-                multiple: isMulti, value: value || (isMulti ? [] : ''), onChange: onChange, input: jsxRuntime.jsx(material.OutlinedInput, { label: label }), renderValue: renderValue, ref: ref, IconComponent: iconsMaterial.ExpandMore, endAdornment: value && !isMulti && ((isMulti && value.length > 0) || (!isMulti && value !== '')) ? (jsxRuntime.jsx(material.IconButton, { sx: { marginRight: '1rem' }, size: "small", onClick: handleClearSelection, children: jsxRuntime.jsx(iconsMaterial.Clear, { fontSize: "small" }) })) : null, variant: "outlined", ...rest, children: options && options.map((option) => (jsxRuntime.jsx(material.MenuItem, { value: option.value, children: isMulti ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.ListItemText, { primary: option.label }) })) : (option.label || placeholder) }, option.value))) }), helperText && jsxRuntime.jsx(material.FormHelperText, { children: helperText })] }));
-});
-CustomSelect.displayName = 'CustomSelect';
-
-exports.CustomSelect = CustomSelect;
-exports.default = CustomSelect;

package/dist/Switch/index.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { SwitchProps } from '@mui/material';
-
-interface SwitchInputProps extends Omit<SwitchProps, 'onChange'> {
-    label?: string;
-    helperText?: string;
-    error?: boolean;
-    required?: boolean | number;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
-}
-declare const SwitchInput: React.ForwardRefExoticComponent<Omit<SwitchInputProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-
-export { SwitchInput as default };
-export type { SwitchInputProps };

package/dist/Switch/index.esm.js

@@ -1,9 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React from 'react';
-import { FormControl, FormControlLabel, Switch, FormHelperText } from '@mui/material';
-
-const SwitchInput = 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, { 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 })] }));
-});
-
-export { SwitchInput as default };

package/dist/Switch/index.js

@@ -1,11 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var material = require('@mui/material');
-
-const SwitchInput = React.forwardRef(({ label = '', helperText = '', error = false, onChange, checked, required = false, disabled = false, ...rest }, ref) => {
-    return (jsxRuntime.jsxs(material.FormControl, { error: error, disabled: disabled, component: "fieldset", children: [jsxRuntime.jsx(material.FormControlLabel, { control: jsxRuntime.jsx(material.Switch, { inputRef: ref, checked: checked, onChange: (e, checked) => onChange?.(e, checked), disabled: disabled, required: required == 1 || required === true ? true : false, ...rest }), label: label }), helperText && jsxRuntime.jsx(material.FormHelperText, { children: helperText })] }));
-});
-
-module.exports = SwitchInput;

package/dist/Tabs/index.d.ts

@@ -1,36 +0,0 @@
-import React from 'react';
-import { TabProps, TabsProps as TabsProps$1 } from '@mui/material';
-import { SxProps, Theme } from '@mui/system';
-
-interface TabItem {
-    label: string;
-    value: string | number;
-    icon?: React.ReactNode;
-    disabled?: boolean;
-    badge?: string | number;
-}
-interface CustomTabProps extends Omit<TabProps, 'sx'> {
-    sx?: SxProps<Theme>;
-    badge?: string | number;
-}
-interface TabsProps extends Omit<TabsProps$1, 'children' | 'sx' | 'indicatorColor' | 'textColor'> {
-    items: TabItem[];
-    value: string | number;
-    onChange: (event: React.SyntheticEvent, newValue: string | number) => void;
-    variant?: 'standard' | 'scrollable' | 'fullWidth';
-    orientation?: 'horizontal' | 'vertical';
-    styleVariant?: 'default' | 'filled' | 'outlined' | 'pills' | 'underlined';
-    size?: 'small' | 'medium' | 'large';
-    centered?: boolean;
-    allowScrollButtonsMobile?: boolean;
-    scrollButtons?: boolean | 'auto';
-    sx?: SxProps<Theme>;
-    tabSx?: SxProps<Theme>;
-    iconPosition?: 'start' | 'end' | 'top' | 'bottom';
-    indicatorColor?: TabsProps$1['indicatorColor'];
-    textColor?: TabsProps$1['textColor'];
-}
-declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-
-export { Tabs, Tabs as default };
-export type { CustomTabProps, TabItem, TabsProps };

package/dist/Tabs/index.esm.js

@@ -1,202 +0,0 @@
-import React from 'react';
-import { useTheme, Box, Tab, Tabs as Tabs$1, alpha } from '@mui/material';
-
-// Custom Tab Component
-const CustomTab = React.forwardRef(({ badge, sx, label, ...props }, ref) => {
-    const theme = useTheme();
-    const tabLabel = badge ? React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } }, label, React.createElement(Box, {
-        component: 'span',
-        sx: {
-            backgroundColor: theme.palette.error.main,
-            color: theme.palette.error.contrastText,
-            borderRadius: '10px',
-            padding: '2px 6px',
-            fontSize: '0.75rem',
-            fontWeight: 600,
-            minWidth: '18px',
-            height: '18px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            lineHeight: 1,
-        }
-    }, badge)) : label;
-    return React.createElement(Tab, {
-        ref,
-        sx: {
-            position: 'relative',
-            ...sx,
-        },
-        label: tabLabel,
-        ...props
-    });
-});
-CustomTab.displayName = 'CustomTab';
-// Main Tabs Component
-const Tabs = React.forwardRef(({ items, value, onChange, variant = 'standard', orientation = 'horizontal', styleVariant = 'default', size = 'medium', centered = false, allowScrollButtonsMobile = false, scrollButtons = 'auto', sx = {}, tabSx = {}, iconPosition = 'start', indicatorColor = 'primary', textColor = 'primary', ...props }, ref) => {
-    const theme = useTheme();
-    // Get size-based styling
-    const getSizeStyles = () => {
-        switch (size) {
-            case 'small':
-                return {
-                    minHeight: 36,
-                    fontSize: '0.875rem',
-                    padding: '6px 12px',
-                };
-            case 'large':
-                return {
-                    minHeight: 56,
-                    fontSize: '1rem',
-                    padding: '12px 24px',
-                };
-            default:
-                return {
-                    minHeight: 48,
-                    fontSize: '0.9375rem',
-                    padding: '8px 16px',
-                };
-        }
-    };
-    // Get style variant specific styling
-    const getStyleVariantStyles = () => {
-        const baseStyles = getSizeStyles();
-        switch (styleVariant) {
-            case 'filled':
-                return {
-                    '& .MuiTab-root': {
-                        ...baseStyles,
-                        backgroundColor: alpha(theme.palette.action.hover, 0.08),
-                        borderRadius: theme.shape.borderRadius,
-                        margin: '0 4px',
-                        border: 'none',
-                        '&.Mui-selected': {
-                            backgroundColor: theme.palette.primary.main,
-                            color: theme.palette.primary.contrastText,
-                        },
-                        '&:hover': {
-                            backgroundColor: alpha(theme.palette.action.hover, 0.12),
-                        },
-                    },
-                    '& .MuiTabs-indicator': {
-                        display: 'none',
-                    },
-                };
-            case 'outlined':
-                return {
-                    '& .MuiTab-root': {
-                        ...baseStyles,
-                        border: `1px solid ${alpha(theme.palette.divider, 0.5)}`,
-                        borderRadius: theme.shape.borderRadius,
-                        margin: '0 2px',
-                        '&.Mui-selected': {
-                            borderColor: theme.palette.primary.main,
-                            backgroundColor: alpha(theme.palette.primary.main, 0.08),
-                            color: theme.palette.primary.main,
-                        },
-                        '&:hover': {
-                            borderColor: alpha(theme.palette.primary.main, 0.5),
-                        },
-                    },
-                    '& .MuiTabs-indicator': {
-                        display: 'none',
-                    },
-                };
-            case 'pills':
-                return {
-                    '& .MuiTab-root': {
-                        ...baseStyles,
-                        borderRadius: 25,
-                        margin: '0 4px',
-                        backgroundColor: 'transparent',
-                        border: `1px solid transparent`,
-                        '&.Mui-selected': {
-                            backgroundColor: theme.palette.primary.main,
-                            color: theme.palette.primary.contrastText,
-                        },
-                        '&:hover': {
-                            backgroundColor: alpha(theme.palette.action.hover, 0.08),
-                        },
-                    },
-                    '& .MuiTabs-indicator': {
-                        display: 'none',
-                    },
-                };
-            case 'underlined':
-                return {
-                    '& .MuiTab-root': {
-                        ...baseStyles,
-                        borderBottom: `2px solid transparent`,
-                        '&.Mui-selected': {
-                            borderBottomColor: theme.palette.primary.main,
-                        },
-                    },
-                    '& .MuiTabs-indicator': {
-                        display: 'none',
-                    },
-                };
-            default:
-                return {
-                    '& .MuiTab-root': {
-                        ...baseStyles,
-                    },
-                };
-        }
-    };
-    return React.createElement(Box, { ref }, React.createElement(Tabs$1, {
-        value,
-        onChange,
-        variant,
-        orientation,
-        centered,
-        allowScrollButtonsMobile,
-        scrollButtons,
-        indicatorColor,
-        textColor,
-        sx: {
-            ...getStyleVariantStyles(),
-            '& .MuiTab-root': {
-                textTransform: 'none',
-                fontWeight: 500,
-                letterSpacing: '0.5px',
-                transition: 'all 0.2s ease-in-out',
-                ...getStyleVariantStyles()['& .MuiTab-root'],
-                ...tabSx,
-            },
-            ...sx,
-        },
-        ...props,
-    }, ...items.map((item) => {
-        // Create the label content based on icon position
-        let labelContent;
-        if (item.icon) {
-            switch (iconPosition) {
-                case 'end':
-                    labelContent = React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexDirection: 'row-reverse' } }, item.icon, item.label);
-                    break;
-                case 'top':
-                    labelContent = React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5, flexDirection: 'column' } }, item.icon, item.label);
-                    break;
-                case 'bottom':
-                    labelContent = React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5, flexDirection: 'column-reverse' } }, item.icon, item.label);
-                    break;
-                default: // 'start'
-                    labelContent = React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } }, item.icon, item.label);
-                    break;
-            }
-        }
-        else {
-            labelContent = item.label;
-        }
-        return React.createElement(CustomTab, {
-            key: item.value,
-            value: item.value,
-            disabled: item.disabled,
-            badge: item.badge,
-            label: labelContent,
-        });
-    })));
-});
-Tabs.displayName = 'Tabs';
-
-export { Tabs, Tabs as default };