sevatech-library 1.0.0 → 1.0.1

package/dist/esm/index.js

@@ -1,26 +1,26 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Stack, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme, Skeleton, Box, Icon, Typography, Link, Breadcrumbs, IconButton, Menu, MenuItem, CircularProgress, Button, Chip, Select, Avatar, Container, TextField, InputAdornment, Dialog, DialogContent, DialogActions, styled as styled$1, Autocomplete, Switch } from '@mui/material';
-import React, { useState, useRef, useMemo, useCallback, useEffect, useId } from 'react';
+import { Stack, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme, Skeleton, Box, Icon, Typography, Link, CircularProgress, Button, Dialog, DialogContent, DialogActions, styled as styled$1, Autocomplete, Switch } from '@mui/material';
+import React, { useState } from 'react';
 import { styled } from '@mui/material/styles';
 import LinkIcon from '@mui/icons-material/Link';
 import CheckIcon from '@mui/icons-material/Check';
 import RemoveIcon from '@mui/icons-material/Remove';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import dayjs from 'dayjs';
-import AddIcon from '@mui/icons-material/Add';
+import '@mui/x-date-pickers/DatePicker';
+import '@mui/x-date-pickers/LocalizationProvider';
+import '@mui/x-date-pickers/AdapterDayjs';
+import 'dayjs';
+import '@mui/icons-material/Add';
 import MuiTextField from '@mui/material/TextField';
 import { Form } from 'formik';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
-import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
-import SearchIcon from '@mui/icons-material/Search';
-import { LayoutGroup, motion } from 'framer-motion';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import RefreshIcon from '@mui/icons-material/Refresh';
+import '@mui/icons-material/AttachMoney';
+import '@mui/icons-material/Search';
+import 'framer-motion';
+import '@mui/icons-material/CheckCircle';
+import '@mui/icons-material/Refresh';
 
 const AVATAR_SIZES = {
     xs: 24,
@@ -231,7 +231,7 @@ const FONT_SIZE_ICON = {
     medium: '19px',
     small: '12px',
 };
-const FONT_SIZE_LOADING$1 = {
+const FONT_SIZE_LOADING = {
     large: 40,
     medium: 22.5,
     small: 16,
@@ -272,7 +272,7 @@ var style_constant = /*#__PURE__*/Object.freeze({
     BORDER_RADIUS_ELEMENT_TAG: BORDER_RADIUS_ELEMENT_TAG,
     BORDER_RADIUS_ELEMENT_WRAPPER: BORDER_RADIUS_ELEMENT_WRAPPER,
     FONT_SIZE_ICON: FONT_SIZE_ICON,
-    FONT_SIZE_LOADING: FONT_SIZE_LOADING$1,
+    FONT_SIZE_LOADING: FONT_SIZE_LOADING,
     GAP_ICON_CONTENT_BY_SIZE: GAP_ICON_CONTENT_BY_SIZE,
     HEIGHT_DEFAULT_TEXT_FIELD_BUTTON: HEIGHT_DEFAULT_TEXT_FIELD_BUTTON,
     HEIGHT_ELEMENT_OTHER: HEIGHT_ELEMENT_OTHER,
@@ -908,7 +908,7 @@ styled(Stack)(() => ({
     alignItems: 'center',
     justifyContent: 'center',
 }));
-const StackRowAlignCenterJustEnd = styled(Stack)(() => ({
+styled(Stack)(() => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-end',
@@ -921,7 +921,7 @@ styled(Stack)(() => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
 }));
-const StackRowAlignCenterJustBetween = styled(Stack)(() => ({
+styled(Stack)(() => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -1200,60 +1200,6 @@ const AvatarUserComponent = ({ title, description, descriptionHref, onDescriptio
                         }, children: [jsx(LinkIcon, { sx: { fontSize: 16, color: descriptionColor } }), description] }))] })] }));
 };
 
-const SEPARATOR_URLS = {
-    '>': '/images/icon/chevron-right.svg',
-    '/': '/images/icon/slash-separator.svg',
-};
-const BreadcrumbsComponent = ({ items, separator = '>', maxItems = 5, idSelect, sx, sxItem, onChange, }) => {
-    // state
-    const [anchorEl, setAnchorEl] = useState(null);
-    const showCollapsed = items.length > maxItems;
-    const visibleItems = showCollapsed ? [items[0], ...items.slice(-2)] : items;
-    const collapsedItems = showCollapsed ? items.slice(1, -2) : [];
-    //   function
-    const handleMenuOpen = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleMenuClose = () => {
-        setAnchorEl(null);
-    };
-    const renderItem = (item) => {
-        const isActive = item.id === idSelect;
-        return (jsxs(Link, { href: item.href, onClick: (e) => {
-                if (item.onClick) {
-                    e.preventDefault();
-                    item.onClick();
-                }
-                if (onChange) {
-                    onChange(item.id);
-                }
-            }, sx: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: GAP_ICON_CONTENT_BY_SIZE.medium,
-                ...TYPOGRAPHY_STYLES.textSm.semiBold,
-                color: isActive ? '#000000' : '#676E76',
-                cursor: 'pointer',
-                textDecoration: 'none',
-                ...sxItem,
-            }, children: [item.icon && jsx(IconElement, { icon: item.icon }), item.label] }, item.id));
-    };
-    const renderSeparator = () => jsx(ImageElement, { sx: { width: 14, height: 14 }, url: SEPARATOR_URLS[separator] });
-    return (jsxs(React.Fragment, { children: [jsx(Breadcrumbs, { "aria-label": "breadcrumb", sx: { ...sx }, children: showCollapsed ? (jsxs(StackRowAlignCenter, { sx: { gap: GAP_ICON_CONTENT_BY_SIZE.small }, children: [renderItem(items[0]), renderSeparator(), jsx(IconButton, { size: "small", onClick: handleMenuOpen, sx: { p: 0, mt: 'auto' }, children: jsx(IconElement, { icon: "more_horiz" }) }), renderSeparator(), visibleItems.slice(1).map((item, idx) => (jsxs(React.Fragment, { children: [idx > 0 && renderSeparator(), renderItem(item)] }, item.id)))] })) : (items.map((item) => renderItem(item))) }), jsx(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleMenuClose, disableScrollLock: true, children: collapsedItems.map((item) => {
-                    const isActive = item.id === idSelect;
-                    return (jsxs(MenuItem, { onClick: () => {
-                            if (item.onClick) {
-                                item.onClick();
-                            }
-                            handleMenuClose();
-                        }, sx: {
-                            gap: GAP_ICON_CONTENT_BY_SIZE.medium,
-                            color: isActive ? '#0F766E' : '#111827',
-                            bgcolor: isActive ? '#E0F2FE' : 'transparent',
-                        }, children: [item.icon && jsx(IconElement, { icon: item.icon }), item.label] }, item.id));
-                }) })] }));
-};
-
 /** Shade values mapping */
 const SHADE_VALUES = {
     light: 100,
@@ -1394,17 +1340,6 @@ const ButtonComponent = ({ variant = 'solid', color = 'brand', shade = 'dark', s
     return (jsx(Button, { sx: { ...buttonSx, ...sx }, disabled: disabled || loading, fullWidth: fullWidth, startIcon: !isIconOnly ? prefixContent : undefined, endIcon: !isIconOnly ? suffixContent : undefined, ...props, children: isIconOnly ? (jsxs(Fragment, { children: [prefixContent, suffixContent] })) : (jsxs(Fragment, { children: [activeDot, children] })) }));
 };
 
-const ButtonBarComponent = ({ layout, children, gap = 12, style }) => {
-    const containerStyle = {
-        display: 'flex',
-        flexDirection: layout === 'horizontal' ? 'row' : 'column',
-        gap: `${gap}px`,
-        alignItems: layout === 'horizontal' ? 'center' : 'stretch',
-        ...style,
-    };
-    return jsx("div", { style: containerStyle, children: children });
-};
-
 const CHECKBOX_COLORS = {
     default: {
         border: '#D0D5DD',
@@ -1528,356 +1463,44 @@ const CheckboxComponent = ({ checked = false, disabled = false, shape = 'square'
                 }, children: title })] }));
 };
 
-const CHIP_LABEL_PADDING = {
-    WITH_ICON_LEFT: '4px 8px 4px 4px',
-    WITH_ICON_RIGHT: '4px 4px 4px 8px',
-    NO_ICON: '4px 8px',
-};
-const CHIP_SIZE_CONFIG = {
+const CONTENT_TYPO = {
     small: {
-        height: 24,
-        fontSize: '12px',
-        borderRadius: '12px',
-        iconSize: '16px',
+        titleFontSize: 14,
+        titleFontWeight: 500,
+        contentFontSize: 14,
+        lineHeight: '20px',
     },
     medium: {
-        height: 32,
-        fontSize: '14px',
-        borderRadius: '16px',
-        iconSize: '18px',
-    },
-    large: {
-        height: 40,
-        fontSize: '16px',
-        borderRadius: '20px',
-        iconSize: '22px',
+        titleFontSize: 16,
+        titleFontWeight: 600,
+        contentFontSize: 16,
+        lineHeight: '24px',
     },
 };
-
-const getLabelPadding = (hasIcon, position) => {
-    if (!hasIcon)
-        return CHIP_LABEL_PADDING.NO_ICON;
-    return position === 'left' ? CHIP_LABEL_PADDING.WITH_ICON_LEFT : CHIP_LABEL_PADDING.WITH_ICON_RIGHT;
-};
-const ChipIcon = ({ icon, size, sxIcon }) => (jsx(Box, { sx: {
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: '50%',
-        padding: '2px',
-        '& svg': {
-            width: size,
-            height: size,
-            display: 'block',
-        },
-        ...sxIcon,
-    }, children: icon }));
-const ChipComponent = ({ label, onAction, icon, disabled = false, clickable = true, sx, sxIcon, iconPosition = 'right', size = 'medium', }) => {
-    const sizeConfig = CHIP_SIZE_CONFIG[size];
-    const hasIcon = Boolean(icon);
-    return (jsx(Chip, { disabled: disabled, clickable: clickable, onClick: onAction, label: jsxs(StackRowAlignCenter, { sx: { gap: '8px' }, children: [hasIcon && iconPosition === 'left' && jsx(ChipIcon, { icon: icon, size: sizeConfig.iconSize, sxIcon: sxIcon }), jsx(Box, { component: "span", children: label }), hasIcon && iconPosition === 'right' && jsx(ChipIcon, { icon: icon, size: sizeConfig.iconSize, sxIcon: sxIcon })] }), sx: {
-            height: sizeConfig.height,
-            fontSize: sizeConfig.fontSize,
-            borderRadius: sizeConfig.borderRadius,
-            cursor: clickable ? 'pointer' : 'default',
-            backgroundColor: 'transparent',
-            border: '1px solid #D1D5DB',
-            '& .MuiChip-label': {
-                padding: getLabelPadding(hasIcon, iconPosition),
-                display: 'flex',
-                alignItems: 'center',
-            },
-            '& .MuiChip-label svg': {
-                flexShrink: 0,
-                color: '#4B5563',
-            },
-            '&.Mui-disabled': {
-                opacity: 0.5,
-                color: '#9E9E9E',
-            },
-            ...sx,
-        } }));
-};
-
-const DateFieldComponent = ({ label = 'Label', placeholder = 'DD/MM/YYYY', value, disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, helperText = '', onChange, locale = 'vi', format = 'DD/MM/YYYY', sx, disablePastDates = false, ...props }) => {
-    // Convert string to Dayjs if needed
-    const dayjsValue = value && typeof value === 'string' ? dayjs(value, format) : value instanceof dayjs ? value : null;
-    const handleDateChange = (date) => {
-        onChange?.(date);
-    };
-    // Disable past dates function
-    const shouldDisableDate = (date) => {
-        if (!disablePastDates)
-            return false;
-        return date.isBefore(dayjs(), 'day');
-    };
-    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
-                    display: 'block',
-                    ...TYPOGRAPHY.textFieldLabel,
-                    color: COLOR_GRAY[800],
-                    marginBottom: '4px',
-                }, children: label })), jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: locale, children: jsx(DatePicker, { value: dayjsValue, onChange: handleDateChange, disabled: disabled, format: format, shouldDisableDate: shouldDisableDate, slotProps: {
-                        textField: {
-                            placeholder,
-                            error: error || false,
-                            helperText: error ? errorMessage : helperText,
-                            size: 'small',
-                            fullWidth: true,
-                            disabled: disabled,
-                        },
-                        openPickerButton: {
-                            size: 'small',
-                        },
-                    }, slots: {
-                        openPickerIcon: (props) => jsx(IconElement, { icon: "calendar_today", ...props }),
-                    }, sx: {
-                        width: '100%',
-                        '& .MuiPickersInputBase-root': {
-                            borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
-                            '& fieldset': { borderColor: COLOR_NEUTRAL[300] },
-                            '&:hover fieldset': { borderColor: COLOR_NEUTRAL[400] },
-                            '&.Mui-focused fieldset': { borderColor: COLOR_NEUTRAL[300], borderWidth: '2px' },
-                            '&.Mui-focused': {
-                                boxShadow: '0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 4px #FEE4E2',
-                            },
-                            '&.Mui-disabled': {
-                                backgroundColor: COLOR_NEUTRAL[100],
-                                '& fieldset': { borderColor: COLOR_NEUTRAL[200] },
-                                '& input': { color: COLOR_NEUTRAL[400], WebkitTextFillColor: COLOR_NEUTRAL[400] },
-                            },
-                            '&.Mui-error fieldset': { borderColor: COLOR_ERROR[500] },
-                            '&.Mui-error.Mui-focused fieldset': { borderColor: COLOR_ERROR[500], borderWidth: '2px' },
-                            '&.Mui-error.Mui-focused': {
-                                boxShadow: `0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 4px rgba(255, 66, 79, 0.15)`,
-                            },
-                            ...(success && {
-                                '&.Mui-focused': {
-                                    boxShadow: `0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 4px ${COLOR_SUCCESS[100]}`,
-                                },
-                            }),
-                        },
-                        '& .MuiInputBase-input': {
-                            ...TYPOGRAPHY.text14Regular,
-                            padding: '12px 8px',
-                            color: COLOR_GRAY[900],
-                            '&::placeholder': { color: COLOR_NEUTRAL[400], opacity: 0.7 },
-                        },
-                    }, ...props }) }), success && !error && successMessage && (jsx(Typography, { sx: {
-                    ...TYPOGRAPHY.textFieldHelper,
-                    color: COLOR_SUCCESS[500],
-                    marginTop: '4px',
-                }, children: successMessage }))] }));
-};
-
-const DateRangePickerComponent = ({ label = 'Date Range', fromDate, toDate, disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, helperText = '', onChange, locale = 'vi', format = 'DD/MM/YYYY', minDate, maxDate, sx, disablePastDates = false, ...props }) => {
-    // Convert string to Dayjs if needed
-    const dayjsFromDate = fromDate && typeof fromDate === 'string' ? dayjs(fromDate, format) : fromDate instanceof dayjs ? fromDate : null;
-    const dayjsToDate = toDate && typeof toDate === 'string' ? dayjs(toDate, format) : toDate instanceof dayjs ? toDate : null;
-    // State for picker
-    const [pickerOpen, setPickerOpen] = useState(false);
-    const [selectingPhase, setSelectingPhase] = useState('from');
-    const inputRef = useRef(null);
-    // Disable past dates function
-    const shouldDisableDate = (date) => {
-        if (!disablePastDates)
-            return false;
-        return date.isBefore(dayjs(), 'day');
-    };
-    const handleInputClick = () => {
-        setPickerOpen(true);
-        // Only reset to 'from' if both dates are empty (fresh start)
-        if (!dayjsFromDate && !dayjsToDate) {
-            setSelectingPhase('from');
-        }
-    };
-    const handleDateChange = (date) => {
-        if (selectingPhase === 'from') {
-            onChange?.([date, dayjsToDate]);
-            if (date) {
-                // Auto switch to toDate selection
-                setSelectingPhase('to');
-            }
-        }
-        else {
-            onChange?.([dayjsFromDate, date]);
-            // Keep picker open for user to potentially change toDate
+const CheckboxContentComponent = ({ checked = false, disabled = false, title, content, size = 'medium', variant = 'filled', shape = 'square', iconType = 'check', onChange, sxCheckbox, sxLabel, sx, }) => {
+    const typo = CONTENT_TYPO[size];
+    const handleToggle = () => {
+        if (!disabled) {
+            onChange?.(!checked);
         }
     };
-    return (jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: locale, children: jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
-                        display: 'block',
-                        ...TYPOGRAPHY.textFieldLabel,
-                        color: COLOR_GRAY[800],
-                        marginBottom: '4px',
-                    }, children: label })), jsxs(Box, { ref: inputRef, onClick: !disabled ? handleInputClick : undefined, sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '12px',
-                        padding: '12px 8px',
-                        borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
-                        border: `1px solid ${error ? COLOR_ERROR[500] : COLOR_NEUTRAL[300]}`,
-                        backgroundColor: disabled ? COLOR_NEUTRAL[100] : 'white',
-                        cursor: disabled ? 'default' : 'pointer',
-                        transition: 'all 0.2s ease',
-                        ...(disabled
-                            ? {}
-                            : {
-                                '&:hover': {
-                                    borderColor: error ? COLOR_ERROR[500] : COLOR_NEUTRAL[400],
-                                },
-                            }),
-                    }, children: [jsxs(Typography, { sx: {
-                                flex: 1,
-                                ...TYPOGRAPHY.text14Regular,
-                                color: dayjsFromDate || dayjsToDate ? COLOR_GRAY[900] : COLOR_NEUTRAL[400],
-                            }, children: [dayjsFromDate ? dayjsFromDate.format(format) : format, " \u2192", ' ', dayjsToDate ? dayjsToDate.format(format) : format] }), jsx(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                width: '24px',
-                                height: '24px',
-                                color: COLOR_NEUTRAL[400],
-                            }, children: jsx(IconElement, { icon: "calendar_today" }) })] }), jsx(DatePicker, { open: pickerOpen, onOpen: () => setPickerOpen(true), onClose: () => setPickerOpen(false), value: selectingPhase === 'from' ? dayjsFromDate : dayjsToDate, onChange: handleDateChange, disabled: disabled, format: format, minDate: selectingPhase === 'from' ? minDate : dayjsFromDate || minDate, maxDate: selectingPhase === 'to' ? maxDate : dayjsToDate || maxDate, shouldDisableDate: shouldDisableDate, slotProps: {
-                        textField: {
-                            hidden: true,
-                            size: 'small',
-                            sx: {
-                                display: 'none',
-                            },
-                        },
-                        popper: {
-                            anchorEl: inputRef.current,
-                            placement: 'bottom-start',
-                        },
-                    } }), helperText && !error && !success && (jsx(Typography, { sx: {
-                        ...TYPOGRAPHY.textFieldHelper,
-                        color: COLOR_NEUTRAL[400],
-                        marginTop: '4px',
-                    }, children: helperText })), error && errorMessage && (jsx(Typography, { sx: {
-                        ...TYPOGRAPHY.textFieldHelper,
-                        color: COLOR_ERROR[500],
-                        marginTop: '4px',
-                    }, children: errorMessage })), success && !error && successMessage && (jsx(Typography, { sx: {
-                        ...TYPOGRAPHY.textFieldHelper,
-                        color: COLOR_SUCCESS[500],
-                        marginTop: '4px',
-                    }, children: successMessage }))] }) }));
-};
-
-const DropdownFieldComponent = ({ label = '', placeholder = 'Select option', value = null, disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, onChange, helperText = '', options = [], checkIconColor = COLOR_ACCENT[900], sx, }) => {
-    const borderRadiusValue = borderRadius === 'max' ? '100px' : `${borderRadius}px`;
-    const selectedOption = useMemo(() => options.find((opt) => opt.value === value), [options, value]);
-    const getHelperText = useCallback(() => {
-        if (error && errorMessage)
-            return errorMessage;
-        if (success && successMessage)
-            return successMessage;
-        if (helperText)
-            return helperText;
-        return '';
-    }, [error, errorMessage, success, successMessage, helperText]);
-    const getHelperTextColor = useCallback(() => {
-        if (error)
-            return COLOR_ERROR[500];
-        if (success)
-            return COLOR_SUCCESS[500];
-        return COLOR_NEUTRAL[400];
-    }, [error, success]);
-    const getBorderColor = useCallback(() => {
-        if (error)
-            return COLOR_ERROR[500];
-        if (success)
-            return COLOR_SUCCESS[500];
-        return COLOR_NEUTRAL[300];
-    }, [error, success]);
-    const selectSx = useMemo(() => ({
-        '& .MuiOutlinedInput-root': {
-            borderRadius: borderRadiusValue,
-            backgroundColor: disabled ? COLOR_NEUTRAL[100] : 'white',
-            transition: 'all 0.2s ease',
-            '& fieldset': {
-                borderColor: getBorderColor(),
-            },
-            '&:hover fieldset': {
-                borderColor: disabled ? getBorderColor() : error ? COLOR_ERROR[500] : COLOR_NEUTRAL[400],
-            },
-            '&.Mui-focused fieldset': {
-                borderColor: error ? COLOR_ERROR[500] : COLOR_NEUTRAL[400],
-                borderWidth: '1.5px',
-            },
-        },
-        '& .MuiOutlinedInput-input': {
-            padding: '12px 14px',
-            color: COLOR_GRAY[900],
-            '&::placeholder': {
-                color: COLOR_NEUTRAL[400],
-                opacity: 1,
-            },
-        },
-    }), [borderRadiusValue, disabled, error, getBorderColor]);
-    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
-                    display: 'block',
-                    ...TYPOGRAPHY.textFieldLabel,
-                    color: COLOR_GRAY[800],
-                    marginBottom: '4px',
-                }, children: label })), jsx(Select, { fullWidth: true, value: value || '', onChange: (e) => {
-                    const selectedValue = e.target.value;
-                    const matchedOption = options.find((opt) => String(opt.value) === String(selectedValue));
-                    if (matchedOption) {
-                        onChange?.(matchedOption.value);
-                    }
-                }, disabled: disabled, displayEmpty: true, MenuProps: {
-                    disableScrollLock: true,
-                }, renderValue: () => {
-                    if (!value) {
-                        return (jsx(Box, { sx: { color: COLOR_NEUTRAL[400], display: 'flex', alignItems: 'center', gap: '8px' }, children: placeholder }));
-                    }
-                    return (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [selectedOption?.statusIndicator && (jsx(Box, { sx: {
-                                    width: '8px',
-                                    height: '8px',
-                                    borderRadius: '50%',
-                                    backgroundColor: '#4CAF50',
-                                } })), selectedOption?.avatar && (jsx(Avatar, { src: selectedOption.avatar, sx: {
-                                    width: '24px',
-                                    height: '24px',
-                                    fontSize: '12px',
-                                } })), selectedOption?.icon && jsx(IconElement, { icon: selectedOption.icon }), jsx(Typography, { sx: { color: COLOR_GRAY[900], ...TYPOGRAPHY.text14Regular }, children: selectedOption?.label })] }));
-                }, sx: selectSx, children: options.map((option) => (jsx(MenuItem, { value: option.value, children: jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: '8px', width: '100%' }, children: [option.statusIndicator && (jsx(Box, { sx: {
-                                    width: '8px',
-                                    height: '8px',
-                                    borderRadius: '50%',
-                                    backgroundColor: '#4CAF50',
-                                } })), option.avatar && (jsx(Avatar, { src: option.avatar, sx: {
-                                    width: '24px',
-                                    height: '24px',
-                                    fontSize: '12px',
-                                } })), option.icon && jsx(IconElement, { icon: option.icon }), jsx(Typography, { sx: { color: COLOR_GRAY[900], ...TYPOGRAPHY.text14Regular }, children: option.label }), value === option.value && (jsx(Box, { sx: { marginLeft: 'auto', display: 'flex', alignItems: 'center' }, children: jsx(IconElement, { icon: "check", sx: { color: checkIconColor } }) }))] }) }, option.value))) }), getHelperText() && (jsx(Box, { sx: {
-                    color: getHelperTextColor(),
-                    marginTop: '4px',
-                    ...TYPOGRAPHY.textFieldHelper,
-                }, children: getHelperText() }))] }));
-};
-
-const BACKGROUND_COLOR_GRID = '#FFFFFF';
-const COLOR_CONTENT_GRID = '#27272A';
-const BORDER_RADIUS_GRID_CONTAINER = 8;
-const BORDER_RADIUS_GRID = 4;
-const GridComponent = ({ sx = {}, sxContainer = {}, content = 'Grids', children, }) => {
-    return (jsxs(Stack, { sx: {
-            bgcolor: BACKGROUND_COLOR_GRID,
-            p: BORDER_RADIUS_GRID_CONTAINER,
-            borderRadius: BORDER_RADIUS_GRID_CONTAINER,
-            gap: BORDER_RADIUS_GRID,
+    return (jsxs(Box, { onClick: handleToggle, sx: {
+            display: 'flex',
+            alignItems: 'flex-start',
+            gap: '12px',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            width: 'fit-content',
             ...sx,
-        }, children: [content && (jsx(Typography, { sx: {
-                    color: COLOR_CONTENT_GRID,
-                    ...TYPOGRAPHY_STYLES.lg.bold,
-                }, children: content })), jsx(Container, { maxWidth: false, sx: {
-                    bgcolor: BACKGROUND_COLOR_GRID,
-                    borderRadius: BORDER_RADIUS_GRID,
-                    minHeight: 400,
-                    boxShadow: '0 0 8px -4px rgba(16, 24, 40, 0.3)',
-                    ...sxContainer,
-                }, children: children })] }));
+        }, children: [jsx(CheckboxComponent, { checked: checked, disabled: disabled, size: size, variant: variant, shape: shape, iconType: iconType, onChange: onChange, sxCheckbox: sxCheckbox }), jsxs(Box, { children: [jsx(Typography, { fontSize: typo.titleFontSize, fontWeight: typo.titleFontWeight, lineHeight: typo.lineHeight, sx: {
+                            userSelect: 'none',
+                            ...(disabled && { opacity: 0.6 }),
+                            ...sxLabel,
+                        }, children: title }), content && (jsx(Typography, { fontSize: typo.contentFontSize, lineHeight: typo.lineHeight, sx: {
+                            mt: '4px',
+                            userSelect: 'none',
+                            ...(disabled && { opacity: 0.6 }),
+                            ...sxLabel,
+                        }, children: content }))] })] }));
 };
 
 var BorderRadius;
@@ -1900,159 +1523,6 @@ var ButtonSize;
     ButtonSize[ButtonSize["SMALL"] = 32] = "SMALL";
     ButtonSize[ButtonSize["MEDIUM"] = 40] = "MEDIUM";
 })(ButtonSize || (ButtonSize = {}));
-const Colors = {
-    BORDER_COLOR_BUTTON: '#07554B',
-    BORDER_COLOR_DISABLE: '#0000000D',
-    HOVER_BG_COLOR: 'rgba(7, 85, 75, 0.04)',
-    BACKGROUND_COLOR: '#FFFFFF',
-    TEXT_COLOR_READONLY: '#27272A',
-};
-const FONT_SIZE_LOADING = {
-    large: 40,
-};
-const BORDER_TEXT_FIELD_LOADING = 20;
-
-const InputStepperSkeleton = ({ orientation, buttonShape }) => {
-    return (jsxs(Box, { display: "inline-flex", flexDirection: orientation === Orientation.HORIZONTAL ? 'row' : 'column', alignItems: "center", gap: 1, children: [jsx(Skeleton, { variant: buttonShape === ShapeType.CIRCLE ? 'circular' : 'rectangular', width: FONT_SIZE_LOADING.large, height: FONT_SIZE_LOADING.large, sx: {
-                    borderRadius: buttonShape === ShapeType.CIRCLE ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
-                    maxHeight: FONT_SIZE_LOADING.large,
-                } }), jsx(Skeleton, { width: FONT_SIZE_LOADING.large, sx: {
-                    borderRadius: `${BORDER_TEXT_FIELD_LOADING}px`,
-                } }), jsx(Skeleton, { variant: buttonShape === ShapeType.CIRCLE ? 'circular' : 'rectangular', width: FONT_SIZE_LOADING.large, height: FONT_SIZE_LOADING.large, sx: {
-                    borderRadius: buttonShape === ShapeType.CIRCLE ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
-                    maxHeight: FONT_SIZE_LOADING.large,
-                } })] }));
-};
-
-const InputStepperComponent = ({ value: controlledValue, onChange, min, max, step = 1, disabled = false, readOnly = false, orientation = Orientation.HORIZONTAL, loading = false, sx = {}, sxTextField = {}, // style cho input chứa value
-sxButton = {}, // style cho 2 button
-buttonShape = ShapeType.SQUARE, buttonColor, textFieldShape = ShapeType.SQUARE, decrementIcon = jsx(RemoveIcon, {}), incrementIcon = jsx(AddIcon, {}), }) => {
-    const [internalValue, setInternalValue] = useState(controlledValue ?? min ?? 0);
-    const value = controlledValue !== undefined ? controlledValue : internalValue;
-    const updateValue = (newValue) => {
-        let finalValue = newValue;
-        if (min !== undefined && newValue < min)
-            finalValue = min;
-        if (max !== undefined && newValue > max)
-            finalValue = max;
-        if (controlledValue === undefined) {
-            setInternalValue(finalValue);
-        }
-        onChange?.(finalValue);
-    };
-    const handleIncrement = () => {
-        updateValue(Number(value) + step);
-    };
-    const handleDecrement = () => {
-        updateValue(Number(value) - step);
-    };
-    const handleInputChange = (event) => {
-        if (!readOnly) {
-            const newValue = event.target.value === '' ? min || 0 : Number(event.target.value);
-            if (!isNaN(newValue)) {
-                updateValue(newValue);
-            }
-        }
-    };
-    const isDecrementDisabled = disabled || (min !== undefined && Number(value) <= min);
-    const isIncrementDisabled = disabled || (max !== undefined && Number(value) >= max);
-    const buttonSize = ButtonSize.MEDIUM;
-    if (loading) {
-        return jsx(InputStepperSkeleton, { orientation: orientation, buttonShape: buttonShape });
-    }
-    return (jsxs(Box, { display: "inline-flex", flexDirection: orientation === 'horizontal' ? 'row' : 'column', alignItems: "center", gap: PADDING_GAP_ITEM, sx: {
-            opacity: disabled ? 0.5 : 1,
-            pointerEvents: disabled ? 'none' : 'auto',
-            ...sx,
-        }, children: [jsx(IconButton, { onClick: handleDecrement, disabled: isDecrementDisabled, sx: {
-                    borderRadius: buttonShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
-                    width: buttonSize,
-                    height: buttonSize,
-                    padding: PADDING_GAP_ITEM,
-                    border: isDecrementDisabled
-                        ? `1px solid ${Colors.BORDER_COLOR_DISABLE}`
-                        : `1px solid ${Colors.BORDER_COLOR_BUTTON}`,
-                    backgroundColor: Colors.BACKGROUND_COLOR,
-                    color: buttonColor || Colors.BORDER_COLOR_BUTTON,
-                    '&:hover': {
-                        backgroundColor: Colors.HOVER_BG_COLOR,
-                    },
-                    ...(isDecrementDisabled ? {} : sxButton),
-                }, children: decrementIcon }), jsx(TextField, { value: value, onChange: handleInputChange, disabled: disabled, inputProps: {
-                    min,
-                    max,
-                    step,
-                    readOnly,
-                }, type: "number", sx: {
-                    minWidth: buttonSize,
-                    width: sxTextField?.width || buttonSize,
-                    minHeight: buttonSize,
-                    height: sxTextField?.height || buttonSize,
-                    overflow: 'hidden',
-                    borderRadius: textFieldShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
-                    color: readOnly ? Colors.TEXT_COLOR_READONLY : '',
-                    backgroundColor: readOnly ? 'transparent !important' : sxTextField?.backgroundColor,
-                    '& .MuiOutlinedInput-root': {
-                        width: '100%',
-                        height: '100%',
-                        borderRadius: 'inherit',
-                        '& fieldset': {
-                            borderColor: readOnly || disabled ? 'transparent' : sxTextField?.borderColor || Colors.BORDER_COLOR_BUTTON,
-                            borderWidth: readOnly || disabled ? 0 : 1,
-                            borderRadius: textFieldShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
-                        },
-                        '&:hover fieldset': readOnly || disabled
-                            ? {}
-                            : {
-                                borderColor: sxTextField?.borderColorHover || Colors.BORDER_COLOR_BUTTON,
-                            },
-                        '&.Mui-focused fieldset': readOnly
-                            ? {
-                                borderColor: 'transparent',
-                                borderWidth: 0,
-                            }
-                            : {
-                                borderColor: sxTextField?.borderColorFocused || Colors.BORDER_COLOR_BUTTON,
-                                borderWidth: 1,
-                            },
-                        '&.Mui-disabled fieldset': {
-                            borderColor: Colors.BORDER_COLOR_DISABLE,
-                            backgroundColor: readOnly ? 'transparent' : Colors.BORDER_COLOR_DISABLE,
-                        },
-                    },
-                    '& input[type=number]::-webkit-outer-spin-button, & input[type=number]::-webkit-inner-spin-button': {
-                        WebkitAppearance: 'none',
-                        margin: 0,
-                    },
-                    '& input[type=number]': {
-                        MozAppearance: 'textfield',
-                    },
-                    '& .MuiInputBase-input': {
-                        textAlign: sxTextField?.textAlign || 'center',
-                        padding: sxTextField?.padding || '4px 8px',
-                        fontSize: readOnly ? '16px' : sxTextField?.fontSize || '1rem',
-                        cursor: readOnly ? 'not-allowed' : 'text',
-                        borderRadius: 'inherit',
-                        backgroundColor: readOnly ? 'transparent' : sxTextField?.backgroundColor || 'transparent',
-                        color: readOnly ? Colors.TEXT_COLOR_READONLY : sxTextField?.color || 'inherit',
-                        fontWeight: sxTextField?.fontWeight || (readOnly ? 700 : 'normal'),
-                    },
-                } }), jsx(IconButton, { onClick: handleIncrement, disabled: isIncrementDisabled, sx: {
-                    borderRadius: buttonShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
-                    width: buttonSize,
-                    height: buttonSize,
-                    padding: PADDING_GAP_ITEM,
-                    border: isIncrementDisabled
-                        ? `1px solid ${Colors.BORDER_COLOR_DISABLE}`
-                        : `1px solid ${Colors.BORDER_COLOR_BUTTON}`,
-                    backgroundColor: Colors.BACKGROUND_COLOR,
-                    color: buttonColor || Colors.BORDER_COLOR_BUTTON,
-                    '&:hover': {
-                        backgroundColor: Colors.HOVER_BG_COLOR,
-                    },
-                    ...(isIncrementDisabled ? {} : sxButton),
-                }, children: incrementIcon })] }));
-};
 
 const LinkInternalElement = ({ content, onClick, sx = {} }) => {
     return (jsx(Typography, { onClick: onClick, sx: {
@@ -2075,7 +1545,7 @@ const LinkElement = ({ onClick, sx = {}, target = '_self', ...rest }) => {
         }, ...rest }));
 };
 
-const StyledTextField$3 = styled(MuiTextField)(({ theme }) => {
+styled(MuiTextField)(({ theme }) => {
     return {
         '& .MuiOutlinedInput-root': {
             '& fieldset': { borderColor: COLOR_NEUTRAL[300] },
@@ -2117,57 +1587,6 @@ const StyledTextField$3 = styled(MuiTextField)(({ theme }) => {
         },
     };
 });
-const LinkFieldComponent = ({ label = 'Website', placeholder = 'www.untitledui.com', value, disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, helperText = 'This is a hint text to help user.', onChange, protocol = 'http://', iconAfter, sx, ...props }) => {
-    const [validationError, setValidationError] = useState(false);
-    const isValidLink = (url) => {
-        if (!url)
-            return true; // Empty is valid (optional field)
-        try {
-            const urlToTest = url.includes('://') ? url : `${protocol}${url}`;
-            new URL(urlToTest);
-            // Kiểm tra domain phải có dấu chấm (ít nhất là có TLD)
-            const hostname = new URL(urlToTest).hostname;
-            if (!hostname || !hostname.includes('.')) {
-                return false;
-            }
-            return true;
-        }
-        catch {
-            return false;
-        }
-    };
-    const handleBlur = (event) => {
-        const inputValue = event.target.value;
-        if (inputValue && !isValidLink(inputValue)) {
-            setValidationError(true);
-        }
-        else {
-            setValidationError(false);
-        }
-    };
-    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
-                    display: 'block',
-                    ...TYPOGRAPHY.textFieldLabel,
-                    color: COLOR_GRAY[800],
-                    marginBottom: '4px',
-                }, children: label })), jsx(StyledTextField$3, { placeholder: placeholder, value: value, disabled: disabled, error: error || validationError, helperText: error || validationError ? (error ? errorMessage : 'đây không phải link') : '', size: "small", fullWidth: true, onChange: onChange, onBlur: handleBlur, InputProps: {
-                    startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(Typography, { sx: { color: COLOR_NEUTRAL[300], ...TYPOGRAPHY.text14Regular }, children: protocol }) })),
-                    endAdornment: (success || error || validationError) && (jsx(InputAdornment, { position: "end", children: iconAfter ? (iconAfter) : (jsx(IconElement, { icon: error || validationError ? 'info' : 'check_circle', sx: { color: error || validationError ? COLOR_ERROR[500] : COLOR_SUCCESS[500] } })) })),
-                }, sx: {
-                    '& .MuiOutlinedInput-root': {
-                        borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
-                        ...(success && {
-                            '&.Mui-focused': {
-                                boxShadow: `0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 4px ${COLOR_SUCCESS[100]}`,
-                            },
-                        }),
-                    },
-                } }), success && !error && successMessage && (jsx(Typography, { sx: {
-                    ...TYPOGRAPHY.textFieldHelper,
-                    color: COLOR_SUCCESS[500],
-                    marginTop: '4px',
-                }, children: successMessage }))] }));
-};
 
 const MODAL_ICON_COLORS = {
     check_circle: '#10B981',
@@ -2277,15 +1696,7 @@ const ModalCardComponent = ({ open, isForm = false, onClose, items, nodeContent,
                     }, children: jsxs(StackRowAlignCenter, { sx: { width: '100%' }, children: [nodeBottomLeft && jsx(Box, { sx: { width: '100%' }, children: nodeBottomLeft }), (buttonLeft || buttonCenter || buttonRight) && (jsxs(StackRow, { sx: { width: '100%', gap: PADDING_GAP_LAYOUT }, children: [buttonLeft && (jsx(Box, { sx: { flex: 1 }, children: jsx(ButtonComponent, { ...buttonLeft, fullWidth: true }) })), buttonCenter && (jsx(Box, { sx: { flex: 1 }, children: jsx(ButtonComponent, { ...buttonCenter, fullWidth: true }) })), buttonRight && (jsx(Box, { sx: { flex: 1 }, children: jsx(ButtonComponent, { ...buttonRight, fullWidth: true }) }))] }))] }) }))] }) }));
 };
 
-const CURRENCIES = ['USD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD', 'CHF', 'CNY', 'VND', 'INR'];
-// Format number with thousand separators
-const formatMoneyDisplay = (value) => {
-    if (!value)
-        return '';
-    const numericOnly = value.replace(/\D/g, '');
-    return numericOnly.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-};
-const StyledTextField$2 = styled(MuiTextField)(({ theme }) => {
+styled(MuiTextField)(({ theme }) => {
     return {
         '& .MuiOutlinedInput-root': {
             '& fieldset': { borderColor: COLOR_NEUTRAL[300] },
@@ -2327,64 +1738,8 @@ const StyledTextField$2 = styled(MuiTextField)(({ theme }) => {
         },
     };
 });
-const MoneyFieldComponent = ({ label = 'Sale amount', placeholder = '1,000.00', value, disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, helperText = 'This is a hint text to help user.', onChange, currency = 'USD', onCurrencyChange, iconBefore, optionCurrencies = CURRENCIES, sx, ...props }) => {
-    const [selectedCurrency, setSelectedCurrency] = useState(currency);
-    const handleCurrencyChange = (e) => {
-        const newCurrency = e.target.value;
-        setSelectedCurrency(newCurrency);
-        onCurrencyChange?.(newCurrency);
-    };
-    const handleMoneyChange = (e) => {
-        const rawValue = e.target.value.replace(/,/g, '');
-        onChange?.({ ...e, target: { ...e.target, value: rawValue } });
-    };
-    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
-                    display: 'block',
-                    ...TYPOGRAPHY.textFieldLabel,
-                    color: COLOR_GRAY[800],
-                    marginBottom: '4px',
-                }, children: label })), jsx(StyledTextField$2, { placeholder: placeholder, value: formatMoneyDisplay(value), disabled: disabled, error: error, helperText: error ? errorMessage : helperText, size: "small", fullWidth: true, onChange: handleMoneyChange, InputProps: {
-                    startAdornment: (jsx(InputAdornment, { position: "start", children: iconBefore ? iconBefore : jsx(AttachMoneyIcon, { sx: { fontSize: '18px', color: COLOR_GRAY[400], mr: 0.5 } }) })),
-                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [(success || error) && (jsx(IconElement, { icon: error ? 'info' : 'check_circle', sx: { color: error ? COLOR_ERROR[500] : COLOR_SUCCESS[500] } })), jsx(Select, { value: selectedCurrency, onChange: handleCurrencyChange, disabled: disabled, variant: "standard", sx: {
-                                        border: 'none',
-                                        outline: 'none',
-                                        '& .MuiSelect-standard': { border: 'none' },
-                                        '&.MuiInput-underline:before': { borderBottom: 'none' },
-                                        '&.MuiInput-underline:hover:before': { borderBottom: 'none' },
-                                        '&.MuiInput-underline:after': { borderBottom: 'none' },
-                                        minWidth: '70px',
-                                        fontSize: '14px',
-                                        color: COLOR_GRAY[500],
-                                    }, children: optionCurrencies.map((curr) => (jsx(MenuItem, { value: curr, children: curr }, curr))) })] }) })),
-                }, sx: {
-                    '& .MuiOutlinedInput-root': {
-                        borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
-                        ...(success && {
-                            '&.Mui-focused': {
-                                boxShadow: `0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 4px ${COLOR_SUCCESS[100]}`,
-                            },
-                        }),
-                    },
-                } }), success && !error && successMessage && (jsx(Typography, { sx: {
-                    ...TYPOGRAPHY.textFieldHelper,
-                    color: COLOR_SUCCESS[600],
-                    marginTop: '4px',
-                }, children: successMessage }))] }));
-};
 
-const COUNTRY_CODES = [
-    { code: 'US', name: 'United States', flag: '🇺🇸', value: '+1' },
-    { code: 'GB', name: 'United Kingdom', flag: '🇬🇧', value: '+44' },
-    { code: 'CA', name: 'Canada', flag: '🇨🇦', value: '+1' },
-    { code: 'AU', name: 'Australia', flag: '🇦🇺', value: '+61' },
-    { code: 'VN', name: 'Vietnam', flag: '🇻🇳', value: '+84' },
-    { code: 'JP', name: 'Japan', flag: '🇯🇵', value: '+81' },
-    { code: 'CN', name: 'China', flag: '🇨🇳', value: '+86' },
-    { code: 'IN', name: 'India', flag: '🇮🇳', value: '+91' },
-    { code: 'DE', name: 'Germany', flag: '🇩🇪', value: '+49' },
-    { code: 'FR', name: 'France', flag: '🇫🇷', value: '+33' },
-];
-const StyledTextField$1 = styled(MuiTextField)(({ theme }) => {
+styled(MuiTextField)(({ theme }) => {
     return {
         '& .MuiOutlinedInput-root': {
             '& fieldset': { borderColor: COLOR_NEUTRAL[300] },
@@ -2426,250 +1781,8 @@ const StyledTextField$1 = styled(MuiTextField)(({ theme }) => {
         },
     };
 });
-const PhoneNumberFieldComponent = ({ label = 'Số điện thoại', placeholder = '0123 456 789', value, disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, helperText, onChange, countryCode = 'US', onCountryCodeChange, countries = COUNTRY_CODES, sx, ...props }) => {
-    const handleCountryChange = (e) => {
-        const newCode = e.target.value;
-        onCountryCodeChange?.(newCode);
-    };
-    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
-                    display: 'block',
-                    ...TYPOGRAPHY.textFieldLabel,
-                    color: COLOR_GRAY[800],
-                    marginBottom: '4px',
-                }, children: label })), jsx(StyledTextField$1, { placeholder: placeholder, value: value, disabled: disabled, error: error, helperText: error ? errorMessage : helperText, size: "small", fullWidth: true, onChange: onChange, InputProps: {
-                    startAdornment: (jsx(InputAdornment, { position: "start", sx: { mr: 0 }, children: jsx(Select, { value: countryCode, onChange: handleCountryChange, disabled: disabled, variant: "standard", sx: {
-                                border: 'none',
-                                outline: 'none',
-                                '& .MuiSelect-standard': { border: 'none' },
-                                '&.MuiInput-underline:before': { borderBottom: 'none' },
-                                '&.MuiInput-underline:hover:before': { borderBottom: 'none' },
-                                '&.MuiInput-underline:after': { borderBottom: 'none' },
-                                minWidth: '50px',
-                                fontSize: '14px',
-                                color: COLOR_GRAY[500],
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: 0.5,
-                            }, children: countries.map((c) => (jsx(MenuItem, { value: c.code, children: c.code }, c.code))) }) })),
-                    endAdornment: (success || error) && (jsx(InputAdornment, { position: "end", children: jsx(IconElement, { icon: error ? 'info' : 'check_circle', sx: { color: error ? COLOR_ERROR[500] : COLOR_SUCCESS[500] } }) })),
-                }, sx: {
-                    '& .MuiOutlinedInput-root': {
-                        borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
-                        ...(success && {
-                            '&.Mui-focused': {
-                                boxShadow: `0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 4px ${COLOR_SUCCESS[100]}`,
-                            },
-                        }),
-                    },
-                } }), success && !error && successMessage && (jsx(Typography, { sx: {
-                    ...TYPOGRAPHY.textFieldHelper,
-                    color: COLOR_SUCCESS[600],
-                    marginTop: '4px',
-                }, children: successMessage }))] }));
-};
 
-const PIN_SIZES = {
-    sm: { width: 40, height: 40, fontSize: 18 },
-    md: { width: 48, height: 48, fontSize: 20 },
-    lg: { width: 56, height: 56, fontSize: 24 },
-};
-const PIN_SPACING = {
-    sm: 8,
-    md: 12,
-    lg: 16,
-};
-
-const PINComponent = ({ length = 6, value, onChange, label, error = false, errorMessage, type = 'text', disabled = false, autoFocus = false, onComplete, align = 'left', spacing = 'md', size = 'md', masked = false, borderFocusColor, sx, }) => {
-    const { palette } = useTheme();
-    const inputRefs = useRef([]);
-    useEffect(() => {
-        if (autoFocus && inputRefs.current[0]) {
-            inputRefs.current[0].focus();
-        }
-    }, [autoFocus]);
-    const handleChange = (index, val) => {
-        if (!/^\d*$/.test(val))
-            return;
-        const newValue = value.split('');
-        newValue[index] = val;
-        const updatedValue = newValue.join('').slice(0, length);
-        onChange(updatedValue);
-        if (val && index < length - 1) {
-            inputRefs.current[index + 1]?.focus();
-        }
-        if (updatedValue.length === length) {
-            onComplete?.(updatedValue);
-        }
-    };
-    const handleKeyDown = (index, e) => {
-        if (e.key === 'Backspace' && !value[index] && index > 0) {
-            inputRefs.current[index - 1]?.focus();
-        }
-    };
-    const renderPINDisplay = (index) => {
-        const inputValue = value[index] || '';
-        const isFilled = !!inputValue;
-        const sizeStyle = PIN_SIZES[size];
-        const borderColor = error ? palette.error.main : COLOR_GRAY[200];
-        const borderFocusColorValue = borderFocusColor || (error ? palette.error.main : COLOR_GRAY[900]);
-        if (type === 'bullet') {
-            return (jsxs(Box, { sx: { position: 'relative', width: sizeStyle.width, height: sizeStyle.height }, children: [jsx(TextField, { ref: (el) => {
-                            const input = el?.querySelector('input');
-                            if (input) {
-                                inputRefs.current[index] = input;
-                            }
-                        }, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), disabled: disabled, error: error, sx: {
-                            width: '100%',
-                            height: '100%',
-                            '& .MuiOutlinedInput-root': {
-                                height: '100%',
-                                padding: 0,
-                                '& input': {
-                                    textAlign: 'center',
-                                    fontSize: sizeStyle.fontSize,
-                                    fontWeight: 600,
-                                    padding: 0,
-                                    color: masked && isFilled ? 'transparent' : 'inherit',
-                                    WebkitTextFillColor: masked && isFilled ? 'transparent' : 'unset',
-                                    caretColor: palette.primary.main,
-                                    '&::placeholder': {
-                                        color: palette.action.disabled,
-                                        opacity: 1,
-                                    },
-                                },
-                                '& fieldset': {
-                                    borderColor: borderColor,
-                                    borderRadius: '8px',
-                                },
-                                '&:hover fieldset': {
-                                    borderColor: error ? palette.error.main : borderFocusColorValue,
-                                },
-                                '&.Mui-focused fieldset': {
-                                    borderColor: borderFocusColorValue,
-                                    borderWidth: 1,
-                                },
-                            },
-                            '& input': {
-                                maxLength: 1,
-                            },
-                        }, placeholder: "-" }), masked && isFilled && (jsx(Box, { sx: {
-                            position: 'absolute',
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            fontSize: sizeStyle.fontSize,
-                            fontWeight: 600,
-                            color: error ? palette.error.main : palette.text.primary,
-                            pointerEvents: 'none',
-                        }, children: "\u25CF" }))] }));
-        }
-        if (type === 'circle') {
-            return (jsxs(Box, { sx: { position: 'relative', width: sizeStyle.width, height: sizeStyle.height }, children: [jsx(TextField, { ref: (el) => {
-                            const input = el?.querySelector('input');
-                            if (input) {
-                                inputRefs.current[index] = input;
-                            }
-                        }, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), disabled: disabled, error: error, sx: {
-                            width: '100%',
-                            height: '100%',
-                            '& .MuiOutlinedInput-root': {
-                                height: '100%',
-                                padding: 0,
-                                borderRadius: '50%',
-                                '& input': {
-                                    textAlign: 'center',
-                                    fontSize: sizeStyle.fontSize,
-                                    fontWeight: 600,
-                                    padding: 0,
-                                    color: masked && isFilled ? 'transparent' : 'inherit',
-                                    WebkitTextFillColor: masked && isFilled ? 'transparent' : 'unset',
-                                    caretColor: palette.primary.main,
-                                    '&::placeholder': {
-                                        color: palette.action.disabled,
-                                        opacity: 1,
-                                    },
-                                },
-                                '& fieldset': {
-                                    borderColor: borderColor,
-                                    borderRadius: '50%',
-                                },
-                                '&:hover fieldset': {
-                                    borderColor: error ? palette.error.main : borderFocusColorValue,
-                                },
-                                '&.Mui-focused fieldset': {
-                                    borderColor: borderFocusColorValue,
-                                    borderWidth: 1,
-                                },
-                            },
-                            '& input': {
-                                maxLength: 1,
-                            },
-                        }, placeholder: "-" }), masked && isFilled && (jsx(Box, { sx: {
-                            position: 'absolute',
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            fontSize: sizeStyle.fontSize,
-                            fontWeight: 600,
-                            color: error ? palette.error.main : palette.text.primary,
-                            pointerEvents: 'none',
-                        }, children: "\u25CF" }))] }));
-        }
-        // Default text type
-        return (jsx(TextField, { ref: (el) => {
-                const input = el?.querySelector('input');
-                if (input) {
-                    inputRefs.current[index] = input;
-                }
-            }, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), disabled: disabled, error: error, sx: {
-                width: sizeStyle.width,
-                '& .MuiOutlinedInput-root': {
-                    height: sizeStyle.height,
-                    padding: 0,
-                    '& input': {
-                        textAlign: 'center',
-                        fontSize: sizeStyle.fontSize,
-                        fontWeight: 600,
-                        padding: 0,
-                        '&::placeholder': {
-                            color: palette.action.disabled,
-                            opacity: 1,
-                        },
-                    },
-                    '& fieldset': {
-                        borderColor: borderColor,
-                    },
-                    '&:hover fieldset': {
-                        borderColor: error ? palette.error.main : borderFocusColorValue,
-                    },
-                    '&.Mui-focused fieldset': {
-                        borderColor: borderFocusColorValue,
-                        borderWidth: 1,
-                    },
-                },
-                '& input': {
-                    maxLength: 1,
-                },
-            }, placeholder: "-" }));
-    };
-    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Box, { sx: {
-                    mb: 1,
-                    fontSize: 14,
-                    fontWeight: 500,
-                    color: palette.text.primary,
-                }, children: label })), jsx(Box, { sx: {
-                    display: 'flex',
-                    gap: `${PIN_SPACING[spacing]}px`,
-                    justifyContent: align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start',
-                }, children: Array.from({ length }).map((_, index) => (jsx(Box, { children: renderPINDisplay(index) }, index))) }), error && errorMessage && (jsx(Box, { sx: {
-                    mt: 1,
-                    fontSize: 12,
-                    color: palette.error.main,
-                    textAlign: align,
-                }, children: errorMessage }))] }));
-};
-
-const StyledAutocomplete$1 = styled$1(Autocomplete)(({ theme }) => ({
+styled$1(Autocomplete)(({ theme }) => ({
     '& .MuiOutlinedInput-root': {
         padding: '8px !important',
         display: 'flex',
@@ -2730,138 +1843,8 @@ const StyledAutocomplete$1 = styled$1(Autocomplete)(({ theme }) => ({
         },
     },
 }));
-const SearchDropdownComponent = ({ value, onChange, onClear, onInputChange, onSearch, borderRadius = 6, disabled = false, multiple = false, label = '', placeholder = 'Search...', error = false, errorMessage, success = false, successMessage, helperText = '', options = [], loading = false, sx, }) => {
-    const DEBOUNCE_DELAY = 500;
-    const [inputValue, setInputValue] = useState('');
-    const [filteredOptions, setFilteredOptions] = useState(options);
-    const [isLoading, setIsLoading] = useState(false);
-    const debounceTimerRef = useRef(null);
-    const onSearchRef = useRef(onSearch);
-    const onInputChangeRef = useRef(onInputChange);
-    const optionsRef = useRef(options);
-    // Update refs when props change
-    useEffect(() => {
-        onSearchRef.current = onSearch;
-        onInputChangeRef.current = onInputChange;
-        optionsRef.current = options;
-    }, [onSearch, onInputChange, options]);
-    // Normalize value to array for internal state
-    const selectedValues = useMemo(() => {
-        if (!value)
-            return [];
-        const values = Array.isArray(value) ? value : [value];
-        return values.map((v) => (typeof v === 'object' ? v : { label: String(v), value: v }));
-    }, [value]);
-    // Search logic with debounce
-    useEffect(() => {
-        if (debounceTimerRef.current) {
-            clearTimeout(debounceTimerRef.current);
-        }
-        // Reset to original options when input is empty
-        if (!inputValue.trim()) {
-            setFilteredOptions(optionsRef.current);
-            return;
-        }
-        debounceTimerRef.current = setTimeout(async () => {
-            const searchFn = onSearchRef.current;
-            if (searchFn) {
-                // Async search
-                setIsLoading(true);
-                try {
-                    const results = await searchFn(inputValue);
-                    setFilteredOptions(results);
-                }
-                catch (error) {
-                    console.error('Search error:', error);
-                    setFilteredOptions([]);
-                }
-                finally {
-                    setIsLoading(false);
-                }
-            }
-            else {
-                // Local filtering
-                const filtered = optionsRef.current.filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase()));
-                setFilteredOptions(filtered);
-            }
-            onInputChangeRef.current?.(inputValue);
-        }, DEBOUNCE_DELAY);
-        return () => {
-            if (debounceTimerRef.current) {
-                clearTimeout(debounceTimerRef.current);
-            }
-        };
-    }, [inputValue]);
-    const handleInputChange = (event, newInputValue) => {
-        setInputValue(newInputValue);
-    };
-    const handleChange = (event, newValue) => {
-        if (multiple) {
-            const result = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
-            onChange?.(result.length > 0 ? result : null);
-        }
-        else {
-            onChange?.(newValue || null);
-        }
-    };
-    const handleClear = () => {
-        setInputValue('');
-        setFilteredOptions(optionsRef.current);
-        onClear?.();
-    };
-    return (jsxs(Box, { sx: { width: '100%', ...sx }, children: [label && (jsx(Typography, { variant: "subtitle2", sx: {
-                    fontWeight: 500,
-                    color: COLOR_GRAY[900],
-                    marginBottom: '6px',
-                    display: 'block',
-                }, children: label })), jsx(StyledAutocomplete$1, { multiple: multiple, freeSolo: true, options: filteredOptions, getOptionLabel: (option) => {
-                    if (!option)
-                        return '';
-                    if (typeof option === 'object' && 'label' in option)
-                        return option.label;
-                    return String(option);
-                }, isOptionEqualToValue: (option, val) => {
-                    if (!option || !val)
-                        return false;
-                    if (typeof option === 'object' && typeof val === 'object' && 'value' in option && 'value' in val) {
-                        return option.value === val.value;
-                    }
-                    return false;
-                }, value: multiple ? selectedValues : selectedValues[0] || null, inputValue: inputValue, onInputChange: handleInputChange, onChange: handleChange, disabled: disabled || loading, loading: isLoading || loading, noOptionsText: inputValue ? 'No results found' : 'Type to search', sx: {
-                    '& .MuiOutlinedInput-root': {
-                        borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
-                        borderColor: error ? COLOR_ERROR[500] : success ? COLOR_SUCCESS[500] : undefined,
-                    },
-                }, renderInput: (params) => (jsx(TextField, { ...params, placeholder: placeholder, variant: "outlined", size: "small", error: error, InputProps: {
-                        ...params.InputProps,
-                        startAdornment: (jsxs(Fragment, { children: [jsx(InputAdornment, { position: "start", sx: { marginLeft: '4px', marginRight: '0px' }, children: jsx(SearchIcon, { sx: { color: '#999', fontSize: '18px' } }) }), params.InputProps?.startAdornment] })),
-                    } })), renderTags: (value, getTagProps) => value.map((option, index) => {
-                    const label = typeof option === 'object' && option && 'label' in option ? option.label : String(option);
-                    return jsx(Chip, { ...getTagProps({ index }), label: label, size: "small" });
-                }), renderOption: (props, option) => {
-                    const { key, ...otherProps } = props;
-                    const label = option?.label || '';
-                    return (jsx(Box, { ...otherProps, component: "li", children: label }, key));
-                }, componentsProps: {
-                    clearIndicator: {
-                        onClick: handleClear,
-                    },
-                } }), error && errorMessage && (jsx(Box, { sx: {
-                    fontSize: '12px',
-                    color: COLOR_ERROR[500],
-                    marginTop: '4px',
-                }, children: errorMessage })), success && successMessage && (jsx(Box, { sx: {
-                    fontSize: '12px',
-                    color: COLOR_SUCCESS[500],
-                    marginTop: '4px',
-                }, children: successMessage })), helperText && !error && !success && (jsx(Box, { sx: {
-                    fontSize: '12px',
-                    color: COLOR_NEUTRAL[500],
-                    marginTop: '4px',
-                }, children: helperText }))] }));
-};
 
-const StyledAutocomplete = styled$1(Autocomplete)(({ theme }) => ({
+styled$1(Autocomplete)(({ theme }) => ({
     '& .MuiOutlinedInput-root': {
         padding: '0 !important',
         display: 'flex',
@@ -2900,45 +1883,6 @@ const StyledAutocomplete = styled$1(Autocomplete)(({ theme }) => ({
         paddingRight: '8px',
     },
 }));
-const SearchFieldComponent = ({ value, onChange, onClear, onInputChange, borderRadius = 6, disabled = false, placeholder = 'Placeholder', sx, }) => {
-    const DEBOUNCE_DELAY = 1000;
-    const [inputValue, setInputValue] = useState('');
-    const debounceTimer = useRef(null);
-    useEffect(() => {
-        if (debounceTimer.current) {
-            clearTimeout(debounceTimer.current);
-        }
-        debounceTimer.current = setTimeout(() => {
-            onInputChange?.(new Event('debounce'), inputValue, 'debounce');
-        }, DEBOUNCE_DELAY);
-        return () => {
-            if (debounceTimer.current) {
-                clearTimeout(debounceTimer.current);
-            }
-        };
-    }, [inputValue, onInputChange]);
-    const handleInputChange = useCallback((event, value) => {
-        setInputValue(value);
-    }, []);
-    const handleClear = useCallback(() => {
-        setInputValue('');
-        onClear?.();
-        onInputChange?.(new Event('clear'), '', 'clear');
-    }, [onClear, onInputChange]);
-    return (jsx(StyledAutocomplete, { freeSolo: true, options: [], inputValue: inputValue, onInputChange: handleInputChange, disabled: disabled, onChange: onChange, noOptionsText: null, sx: {
-            '& .MuiOutlinedInput-root': {
-                borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
-            },
-            ...sx,
-        }, renderInput: (params) => (jsx(TextField, { ...params, placeholder: placeholder, variant: "outlined", size: "small", InputProps: {
-                ...params.InputProps,
-                startAdornment: (jsx(InputAdornment, { position: "start", sx: { marginLeft: '8px' }, children: jsx(SearchIcon, { sx: { color: '#999', fontSize: '20px' } }) })),
-            } })), componentsProps: {
-            clearIndicator: {
-                onClick: handleClear,
-            },
-        } }));
-};
 
 const SWITCH_SIZE = {
     small: { width: '36px', height: '20px', thumbSize: '16px' },
@@ -2958,7 +1902,7 @@ const SWITCH_COLORS = {
         thumbFocusColor: '#F4EBFF',
     },
 };
-const StyledSwitch = styled$1(Switch, {
+styled$1(Switch, {
     shouldForwardProp: (prop) => prop !== 'size',
 })(({ theme, size = 'medium' }) => {
     const mode = theme.palette.mode;
@@ -3011,61 +1955,7 @@ const StyledSwitch = styled$1(Switch, {
         },
     };
 });
-const SwitchComponent = ({ title, sx, ...switchProps }) => {
-    if (!title) {
-        return jsx(StyledSwitch, { disableRipple: true, ...switchProps });
-    }
-    return (jsxs(StackRowAlignCenterJustEnd, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: '12px',
-            ...sx,
-        }, children: [jsx(StyledSwitch, { disableRipple: true, ...switchProps }), title] }));
-};
 
-const TAB_STYLES = {
-    position: 'relative',
-    padding: '18px 16px',
-    cursor: 'pointer',
-    minHeight: 44,
-    '&:hover': {
-        bgcolor: '#F3F4F6',
-    },
-};
-const TAB_UNDERLINE_STYLES = {
-    width: '1px',
-    alignSelf: 'stretch',
-    bgcolor: '#E5E7EB',
-};
-const TABS_CONTAINER_HORIZONTAL = {
-    display: 'flex',
-    alignItems: 'center',
-    borderBottom: '2px solid #E5E7EB',
-};
-const TAB_ACTIVE_BACKGROUND_HORIZONTAL = {
-    position: 'absolute',
-    bottom: -2,
-    left: 0,
-    right: 0,
-    height: '2px',
-    bgcolor: '#0F766E',
-};
-const TABS_CONTAINER_VERTICAL = {
-    position: 'relative',
-    padding: '10px',
-    cursor: 'pointer',
-    minHeight: 40,
-    '&:hover': {
-        bgcolor: '#F3F4F6',
-    },
-    width: '100%',
-};
-const TAB_ACTIVE_BACKGROUND_VERTICAL = {
-    position: 'absolute',
-    inset: 0,
-    bgcolor: '#E6EEED',
-    borderRadius: 1,
-};
 var TabColors;
 (function (TabColors) {
     TabColors["ACTIVE_TEXT"] = "#0F766E";
@@ -3074,171 +1964,7 @@ var TabColors;
     TabColors["MENU_ACTIVE_BACKGROUND"] = "#E0F2FE";
 })(TabColors || (TabColors = {}));
 
-const TabsComponent = ({ idSelect, tabs, size, direction = 'row', maxDisplay, onChange, sx, sxTabs, sxWrapper, }) => {
-    // state
-    const [selected, setSelected] = useState(idSelect);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const layoutGroupId = useId();
-    useEffect(() => {
-        setSelected(idSelect);
-    }, [idSelect]);
-    const isVertical = direction === 'column';
-    const showOverflow = !isVertical && maxDisplay && tabs.length > maxDisplay;
-    const visibleTabs = showOverflow ? tabs.slice(0, maxDisplay) : tabs;
-    const overflowTabs = showOverflow ? tabs.slice(maxDisplay) : [];
-    // function
-    const handleOpenDropdown = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleTabClick = (tab) => {
-        setSelected(tab.id);
-        onChange?.(tab.id);
-        if (tab.onClick) {
-            tab.onClick();
-        }
-    };
-    const handleOverflowItemClick = (tab) => {
-        handleTabClick(tab);
-        setAnchorEl(null);
-    };
-    return (jsx(React.Fragment, { children: isVertical ? (jsx(LayoutGroup, { id: layoutGroupId, children: jsx(Stack, { direction: "column", sx: { width: 'fit-content', gap: PADDING_GAP_ITEM_SMALL, ...sxWrapper }, children: tabs.map((tab) => {
-                    const isActive = tab.id === selected;
-                    return (jsx(LinkElement, { href: tab.href, onClick: tab.onClick, id: tab.id, children: jsxs(Box, { sx: { position: 'relative' }, children: [jsx(Stack, { component: motion.div, sx: {
-                                        ...TABS_CONTAINER_VERTICAL,
-                                        color: isActive ? TabColors.ACTIVE_TEXT : TabColors.INACTIVE_TEXT,
-                                    }, onTap: () => handleTabClick(tab), children: jsxs(Box, { sx: {
-                                            ...TYPOGRAPHY_STYLES.textMd.medium,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: tab.icon ? 0.5 : 0,
-                                            position: 'relative',
-                                            zIndex: 1,
-                                            ...sx,
-                                        }, children: [tab.icon && jsx(IconElement, { size: size, icon: tab.icon }), tab.name] }) }), isActive && (jsx(Box, { component: motion.div, sx: { ...TAB_ACTIVE_BACKGROUND_VERTICAL }, layoutId: `${layoutGroupId}-background` }))] }) }, tab.id));
-                }) }) })) : (jsx(LayoutGroup, { id: layoutGroupId, children: jsxs(Box, { sx: { position: 'relative', display: 'flex', alignItems: 'center' }, children: [jsxs(Box, { sx: { ...TABS_CONTAINER_HORIZONTAL }, children: [visibleTabs.map((tab) => {
-                                const isActive = tab.id === selected;
-                                return (jsx(LinkElement, { href: tab.href, onClick: tab.onClick, id: tab.id, children: jsxs(Stack, { component: motion.div, sx: {
-                                            color: isActive ? TabColors.ACTIVE_TEXT : TabColors.INACTIVE_TEXT,
-                                            position: 'relative',
-                                            padding: '18px 16px',
-                                            cursor: 'pointer',
-                                            minHeight: 40,
-                                            '&:hover': {
-                                                bgcolor: TabColors.HOVER_BACKGROUND,
-                                            },
-                                            ...sxTabs,
-                                        }, onTap: () => handleTabClick(tab), children: [jsxs(Box, { sx: {
-                                                    ...TYPOGRAPHY_STYLES.textMd.medium,
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: tab.icon ? 0.5 : 0,
-                                                    ...sx,
-                                                }, children: [tab.icon && jsx(IconElement, { size: size, icon: tab.icon }), tab.name] }), isActive && (jsx(Box, { component: motion.div, sx: { ...TAB_ACTIVE_BACKGROUND_HORIZONTAL }, layoutId: `${layoutGroupId}-underline` }))] }) }, tab.id));
-                            }), showOverflow && (jsxs(React.Fragment, { children: [jsx(Box, { sx: { ...TAB_UNDERLINE_STYLES } }), jsx(Stack, { sx: {
-                                            ...TAB_STYLES,
-                                        }, onClick: handleOpenDropdown, children: jsx(IconElement, { icon: "more_horiz", size: size }) })] }))] }), jsx(Menu, { disableScrollLock: true, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null), anchorOrigin: {
-                            vertical: 'bottom',
-                            horizontal: 'left',
-                        }, transformOrigin: {
-                            vertical: 'top',
-                            horizontal: 'left',
-                        }, children: overflowTabs.map((tab) => {
-                            const isActive = tab.id === selected;
-                            return (jsx(MenuItem, { onClick: () => handleOverflowItemClick(tab), sx: {
-                                    color: isActive ? TabColors.ACTIVE_TEXT : TabColors.INACTIVE_TEXT,
-                                    bgcolor: isActive ? TabColors.MENU_ACTIVE_BACKGROUND : 'transparent',
-                                    '&:hover': {
-                                        bgcolor: isActive ? TabColors.MENU_ACTIVE_BACKGROUND : TabColors.HOVER_BACKGROUND,
-                                    },
-                                }, children: jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: tab.icon ? 0.5 : 0,
-                                    }, children: [tab.icon && jsx(IconElement, { size: size, icon: tab.icon }), tab.name] }) }, tab.id));
-                        }) })] }) })) }));
-};
-
-const TextAreaComponent = ({ label = '', placeholder = '', value = '', disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, onChange, onBlur, helperText = '', rows = 4, maxLength, sx, }) => {
-    const borderRadiusValue = borderRadius === 'max' ? '100px' : `${borderRadius}px`;
-    const getHelperText = () => {
-        if (error && errorMessage)
-            return errorMessage;
-        if (success && successMessage)
-            return successMessage;
-        if (helperText)
-            return helperText;
-        return '';
-    };
-    const getHelperTextColor = () => {
-        if (error)
-            return COLOR_ERROR[500];
-        if (success)
-            return COLOR_SUCCESS[500];
-        return COLOR_NEUTRAL[400];
-    };
-    const getBorderColor = () => {
-        if (error)
-            return COLOR_ERROR[500];
-        if (success)
-            return COLOR_SUCCESS[500];
-        return COLOR_NEUTRAL[300];
-    };
-    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
-                    display: 'block',
-                    ...TYPOGRAPHY.textFieldLabel,
-                    color: COLOR_GRAY[800],
-                    marginBottom: '4px',
-                }, children: label })), jsxs(Box, { sx: { position: 'relative' }, children: [jsx(TextField, { fullWidth: true, multiline: true, rows: rows, placeholder: placeholder, value: value, disabled: disabled, onChange: (e) => onChange?.(e.target.value), onBlur: (e) => onBlur?.(e.target.value), inputProps: {
-                            maxLength: maxLength,
-                            style: {
-                                ...TYPOGRAPHY.text14Regular,
-                                paddingBottom: maxLength ? '24px' : '0px',
-                            },
-                        }, sx: {
-                            '& .MuiOutlinedInput-root': {
-                                borderRadius: borderRadiusValue,
-                                backgroundColor: disabled ? COLOR_NEUTRAL[100] : 'white',
-                                transition: 'all 0.2s ease',
-                                '& fieldset': {
-                                    borderColor: getBorderColor(),
-                                },
-                                '&:hover fieldset': {
-                                    borderColor: disabled ? getBorderColor() : error ? COLOR_ERROR[500] : COLOR_NEUTRAL[400],
-                                },
-                                '&.Mui-focused fieldset': {
-                                    borderColor: error ? COLOR_ERROR[500] : COLOR_NEUTRAL[400],
-                                    borderWidth: '1.5px',
-                                },
-                            },
-                            '& .MuiOutlinedInput-input': {
-                                color: value ? COLOR_GRAY[900] : COLOR_NEUTRAL[400],
-                                '&::placeholder': {
-                                    color: COLOR_NEUTRAL[400],
-                                    opacity: 1,
-                                },
-                                '&:disabled': {
-                                    color: COLOR_NEUTRAL[400],
-                                    WebkitTextFillColor: COLOR_NEUTRAL[400],
-                                },
-                            },
-                            '& .MuiOutlinedInput-notchedOutline': {
-                                borderColor: getBorderColor(),
-                            },
-                        } }), maxLength && (jsxs(Box, { sx: {
-                            position: 'absolute',
-                            bottom: '8px',
-                            right: '12px',
-                            fontSize: '12px',
-                            color: COLOR_NEUTRAL[400],
-                            pointerEvents: 'none',
-                        }, children: ["(", value?.length, "/", maxLength, ")"] }))] }), getHelperText() && (jsx(Box, { sx: {
-                    color: getHelperTextColor(),
-                    marginTop: '4px',
-                    ...TYPOGRAPHY.textFieldHelper,
-                }, children: getHelperText() }))] }));
-};
-
-const StyledTextField = styled(MuiTextField)(({ theme }) => {
+styled(MuiTextField)(({ theme }) => {
     return {
         '& .MuiOutlinedInput-root': {
             '& fieldset': { borderColor: COLOR_NEUTRAL[300] },
@@ -3280,221 +2006,10 @@ const StyledTextField = styled(MuiTextField)(({ theme }) => {
         },
     };
 });
-const TextFieldComponent = ({ label, placeholder = 'Placeholder', value, disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, helperText, onChange, iconBefore, iconAfter, sx, ...props }) => {
-    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
-                    display: 'block',
-                    ...TYPOGRAPHY.textFieldLabel,
-                    color: COLOR_GRAY[800],
-                    marginBottom: '4px',
-                }, children: label })), jsx(StyledTextField, { placeholder: placeholder, value: value, disabled: disabled, error: error, helperText: error ? errorMessage : helperText, size: "small", fullWidth: true, onChange: onChange, InputProps: {
-                    startAdornment: iconBefore ? jsx(InputAdornment, { position: "start", children: iconBefore }) : undefined,
-                    endAdornment: iconAfter ? jsx(InputAdornment, { position: "end", children: iconAfter }) : undefined,
-                }, sx: {
-                    '& .MuiOutlinedInput-root': {
-                        borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
-                        ...(success && {
-                            '&.Mui-focused': {
-                                boxShadow: `0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 4px ${COLOR_SUCCESS[100]}`,
-                            },
-                        }),
-                    },
-                }, ...props }), success && !error && successMessage && (jsx(Typography, { sx: {
-                    ...TYPOGRAPHY.textFieldHelper,
-                    color: COLOR_SUCCESS[500],
-                    marginTop: '4px',
-                }, children: successMessage }))] }));
-};
 
-const SX_STYLES = {
+({
     progressBar: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        height: '100%',
-        backgroundColor: COLOR_GRAY[200],
-        opacity: 0.8,
-        transition: 'width 0.3s ease, opacity 0.3s ease',
-        animation: 'wave 1.5s linear infinite',
-        '@keyframes wave': {
-            '0%': { backgroundPosition: '0% 0%' },
-            '50%': { backgroundPosition: '100% 0%' },
-            '100%': { backgroundPosition: '0% 0%' },
-        },
-    },
-    imageIcon: {
-        width: '40px',
-        height: '40px',
-        flexShrink: 0,
-        position: 'relative',
-        zIndex: 1,
-    },
-    contentBox: {
-        flexGrow: 1,
-        minWidth: 0,
-        position: 'relative',
-        zIndex: 1,
-    },
-    textBox: {
-        minWidth: 0,
-        flexGrow: 1,
-        mr: 2,
-    },
-    actionBox: {
-        flexShrink: 0,
-        display: 'flex',
-        alignItems: 'center',
-        position: 'relative',
-        zIndex: 1,
-    },
-    linearProgress: {
-        mt: 1,
-        width: '100%',
-    },
-};
-
-const VIDEO_EXTENSIONS = ['mp4', 'mov', 'avi', 'wmv', 'flv', 'mkv', 'webm'];
-const ICON_PATH = {
-    VIDEO: '/images/icon/film.svg',
-    FILE: '/images/icon/file.svg',
-};
-// ============================================================================
-// Helper Functions
-// ============================================================================
-const formatFileSize = (bytes) => {
-    if (bytes === 0)
-        return '0 Bytes';
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-};
-const getFileIcon = (fileName) => {
-    const ext = fileName.split('.').pop()?.toLowerCase();
-    return ext && VIDEO_EXTENSIONS.includes(ext) ? ICON_PATH.VIDEO : ICON_PATH.FILE;
-};
-// ============================================================================
-// Component
-// ============================================================================
-const UploaderItemComponent = ({ file, progress = 0, status = 'pending', onDelete, onRetry, isProcess = true, borderSuccess, borderError = COLOR_ERROR[600], sx, }) => {
-    // Memoize
-    const iconSrc = useMemo(() => getFileIcon(file.name), [file.name]);
-    // Status flags
-    const isCompleted = status === 'success';
-    const isFailed = status === 'failed';
-    const isUploading = status === 'uploading';
-    // Determine colors based on status
-    const borderColor = isFailed
-        ? String(borderError)
-        : isCompleted && borderSuccess
-            ? String(borderSuccess)
-            : '#e0e0e0';
-    const textColor = isFailed ? String(borderError) : '#737373';
-    const subtitleColor = isFailed ? String(borderError) : '#a3a3a3';
-    // Render progress info
-    const renderProgressInfo = () => {
-        if (isUploading && !isCompleted)
-            return ` • ${Math.round(progress)}% uploaded`;
-        if (isFailed)
-            return ' • Upload failed';
-        return '';
-    };
-    return (jsxs(Box, { sx: {
-            display: 'flex',
-            alignItems: 'flex-start',
-            padding: '16px',
-            border: '1px solid',
-            borderColor: borderColor,
-            borderRadius: '8px',
-            gap: '16px',
-            position: 'relative',
-            overflow: 'hidden',
-            transition: 'background-color 0.3s ease',
-            backgroundColor: 'background.paper',
-            ...sx,
-        }, children: [!isProcess && isUploading && !isCompleted && !isFailed && (jsx(Box, { sx: { ...SX_STYLES.progressBar, width: `${progress}%` } })), jsx(Box, { component: "img", src: iconSrc, alt: "file icon", sx: SX_STYLES.imageIcon }), jsxs(Box, { sx: SX_STYLES.contentBox, children: [jsxs(StackRowAlignCenterJustBetween, { children: [jsxs(Box, { sx: SX_STYLES.textBox, children: [jsx(Typography, { noWrap: true, title: file.name, sx: { ...TYPOGRAPHY.text14Medium, color: textColor }, children: file.name }), jsxs(Typography, { sx: { ...TYPOGRAPHY.text14Regular, color: subtitleColor }, children: [formatFileSize(file.size), renderProgressInfo()] })] }), jsxs(Box, { sx: SX_STYLES.actionBox, children: [!isProcess && isUploading && !isCompleted && (jsx(Box, { sx: { position: 'relative', display: 'inline-flex', mr: 1 }, children: jsx(CircularProgress, { variant: "determinate", value: progress, color: "success", size: 24 }) })), isCompleted && jsx(CheckCircleIcon, { color: "success", sx: { mr: 1 } }), isFailed && onRetry && (jsx(IconButton, { size: "small", onClick: onRetry, title: "Retry upload", children: jsx(RefreshIcon, { fontSize: "small", sx: { color: borderError } }) })), !isFailed && onDelete && (jsx(IconButton, { size: "small", onClick: onDelete, children: jsx(IconElement, { icon: "delete" }) }))] })] }), isProcess && isUploading && (jsx(Box, { sx: SX_STYLES.linearProgress, children: jsx(LinearProgress, { variant: "determinate", value: progress, color: "success", sx: { height: 8, borderRadius: 4 } }) }))] })] }));
-};
-
-const UploaderComponent = ({ onFilesSelected, accept = '*', multiple = true, children, sx, labelSx, uploadLabel = 'Click to upload', appearance, files: externalFiles, onDeleteFile, onRetryFile, borderError, }) => {
-    const fileInputRef = useRef(null);
-    const [isDragging, setIsDragging] = useState(false);
-    // Sử dụng external files nếu có, nếu không hiển thị rỗng
-    const displayFiles = externalFiles || [];
-    const handleClick = () => {
-        fileInputRef.current?.click();
-    };
-    const handleFileChange = (event) => {
-        const selectedFiles = event.target.files;
-        if (selectedFiles) {
-            const fileArray = Array.from(selectedFiles);
-            onFilesSelected(fileArray);
-        }
-        event.target.value = '';
-    };
-    const handleDeleteFile = (file) => {
-        if (onDeleteFile) {
-            onDeleteFile(file);
-        }
-    };
-    const handleDragOver = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(true);
-    };
-    const handleDragLeave = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-    };
-    const handleDrop = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setIsDragging(false);
-        const files = e.dataTransfer.files;
-        if (files) {
-            onFilesSelected(Array.from(files));
-        }
-    };
-    return (jsxs(Box, { sx: {
-            border: '2px solid',
-            borderColor: appearance?.borderColor || 'action.selected',
-            borderRadius: '8px',
-            padding: '32px 24px',
-            textAlign: 'center',
-            cursor: 'pointer',
-            transition: 'all 0.3s ease',
-            backgroundColor: isDragging ? 'action.selected' : appearance?.background || 'background.paper',
-            '&:hover': {
-                borderColor: appearance?.borderColorHover || appearance?.borderColor || 'primary.main',
-                filter: 'brightness(0.92)',
-            },
-            ...sx,
-        }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, style: { display: 'none' } }), displayFiles.length === 0 && (jsx(Fragment, { children: children ? (jsxs(Box, { children: [children, jsxs(Box, { component: "p", sx: {
-                                color: 'primary.main',
-                                textDecoration: 'underline',
-                                fontWeight: 500,
-                                fontSize: '14px',
-                                marginTop: '12px',
-                                margin: '12px 0 0 0',
-                                ...labelSx,
-                            }, children: [uploadLabel, " or drag and drop"] })] })) : (jsxs(Box, { children: [jsx(Box, { component: "img", src: "/images/icon/uploader.svg", alt: "Upload icon", sx: {
-                                width: '46px',
-                                height: '46px',
-                                marginBottom: '12px',
-                            } }), jsxs(Box, { component: "p", sx: {
-                                color: 'primary.main',
-                                textDecoration: 'underline',
-                                fontWeight: 500,
-                                fontSize: '14px',
-                                margin: 0,
-                                ...labelSx,
-                            }, children: [uploadLabel, " or drag and drop"] })] })) })), displayFiles && displayFiles.length > 0 && (jsx(Box, { sx: {
-                    marginTop: '24px',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '12px',
-                    textAlign: 'left',
-                }, onClick: (e) => e.stopPropagation(), children: displayFiles.map((item, index) => (jsx(UploaderItemComponent, { file: item.file, progress: item.progress, status: item.status, isProcess: item.isProcess ?? true, onDelete: () => handleDeleteFile(item.file), onRetry: () => onRetryFile?.(item.id), borderSuccess: appearance?.borderSuccess, borderError: borderError }, item.id || index))) }))] }));
-};
+        backgroundColor: COLOR_GRAY[200]}});
 
-export { AVATAR_SIZES, AvatarColor, AvatarComponent, AvatarGroupComponent as AvatarGroup, AvatarLabelGroupComponent as AvatarLabelGroup, AvatarProfileComponent as AvatarProfile, AvatarUserComponent as AvatarUser, BADGE_FONT_SIZES, BADGE_SIZES, BadgeImage, BadgeLive, BadgeNumber, BadgeOnline, BreadcrumbsComponent as Breadcrumbs, ButtonBarComponent as ButtonBar, ButtonComponent, COLOR_ACCENT, COLOR_BRAND, COLOR_ERROR, COLOR_GRAY, COLOR_INFO, COLOR_NEUTRAL, COLOR_SUCCESS, COLOR_WARNING, CheckboxComponent as Checkbox, ChipComponent as Chip, DateFieldComponent as DateField, DateRangePickerComponent as DateRangePicker, DialogWrapper, DropdownFieldComponent as DropdownField, FONT_FAMILY, FONT_SIZE, FONT_STYLE, FONT_WEIGHT, GridComponent as Grid, IconElement, ImageElement, ImageSizeType, InputStepperComponent as InputStepper, LINE_HEIGHT, LinkElement, LinkFieldComponent as LinkField, LinkInternalElement, MAP_SIZE, ModalComponent as Modal, ModalCardComponent as ModalCard, ModalDescription, ModalIcon, ModalTitle, MoneyFieldComponent as MoneyField, PINComponent as PIN, PhoneNumberFieldComponent as PhoneField, SIZE_EXTRA_LARGE, style_constant as STYLE, SearchDropdownComponent as SearchDropdown, SearchFieldComponent as SearchField, SwitchComponent as Switch, TYPOGRAPHY, TYPOGRAPHY_STYLES, TabsComponent as Tabs, TextAreaComponent as TextArea, TextFieldComponent as TextField, TypographyOneLine, UploaderComponent as Uploader, createTypography, getBadgePosition };
+export { AVATAR_SIZES, AvatarColor, AvatarComponent, AvatarGroupComponent, AvatarLabelGroupComponent, AvatarProfileComponent, AvatarUserComponent, BADGE_FONT_SIZES, BADGE_SIZES, BadgeImage, BadgeLive, BadgeNumber, BadgeOnline, ButtonComponent, COLOR_ACCENT, COLOR_BRAND, COLOR_ERROR, COLOR_GRAY, COLOR_INFO, COLOR_NEUTRAL, COLOR_SUCCESS, COLOR_WARNING, CheckboxContentComponent, DialogWrapper, FONT_FAMILY, FONT_SIZE, FONT_STYLE, FONT_WEIGHT, IconElement, ImageElement, ImageSizeType, LINE_HEIGHT, LinkElement, LinkInternalElement, MAP_SIZE, ModalComponent as Modal, ModalCardComponent as ModalCard, ModalDescription, ModalIcon, ModalTitle, SIZE_EXTRA_LARGE, style_constant as STYLE, TYPOGRAPHY, TYPOGRAPHY_STYLES, TypographyOneLine, createTypography, getBadgePosition };
 //# sourceMappingURL=index.js.map