sevatech-library 1.0.1 → 1.0.3

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, CircularProgress, Button, Dialog, DialogContent, DialogActions, styled as styled$1, Autocomplete, Switch } from '@mui/material';
-import React, { useState } from 'react';
+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 { 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 '@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 { 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 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 '@mui/icons-material/AttachMoney';
-import '@mui/icons-material/Search';
-import 'framer-motion';
-import '@mui/icons-material/CheckCircle';
-import '@mui/icons-material/Refresh';
+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';
 
 const AVATAR_SIZES = {
     xs: 24,
@@ -225,13 +225,13 @@ const TEXT_FIELD = {
     FONT_SIZE_TITLE: 18,
     FONT_SIZE_CAPTION: 10,
 };
-const FONT_SIZE_ICON = {
+const FONT_SIZE_ICON$1 = {
     large: '22px',
     xl: '20px',
     medium: '19px',
     small: '12px',
 };
-const FONT_SIZE_LOADING = {
+const FONT_SIZE_LOADING$1 = {
     large: 40,
     medium: 22.5,
     small: 16,
@@ -271,8 +271,8 @@ var style_constant = /*#__PURE__*/Object.freeze({
     BORDER_RADIUS_ELEMENT_SMALL: BORDER_RADIUS_ELEMENT_SMALL,
     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,
+    FONT_SIZE_ICON: FONT_SIZE_ICON$1,
+    FONT_SIZE_LOADING: FONT_SIZE_LOADING$1,
     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',
 }));
-styled(Stack)(() => ({
+const StackRowAlignCenterJustEnd = styled(Stack)(() => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-end',
@@ -921,7 +921,7 @@ styled(Stack)(() => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
 }));
-styled(Stack)(() => ({
+const StackRowAlignCenterJustBetween = styled(Stack)(() => ({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
@@ -1120,7 +1120,7 @@ const IconElement = ({ icon, size = 'medium', color, disabled, onClick, sx, fill
         };
     return (jsx(Icon, { onClick: onClick, color: color, sx: {
             cursor: 'inherit',
-            fontSize: FONT_SIZE_ICON[size],
+            fontSize: FONT_SIZE_ICON$1[size],
             fontVariationSettings: `'FILL' ${fill}, 'wght' 100, 'GRAD' 200, 'opsz' 24`,
             ...sx,
         }, component: 'span', className: "material-symbols-rounded", children: icon }));
@@ -1200,6 +1200,60 @@ 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,
@@ -1340,6 +1394,17 @@ 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',
@@ -1503,6 +1568,363 @@ const CheckboxContentComponent = ({ checked = false, disabled = false, title, co
                         }, children: content }))] })] }));
 };
 
+const CHIP_ICON_SIZE = {
+    small: '16px',
+    medium: '18px',
+    large: '22px',
+};
+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 = {
+    small: {
+        height: 24,
+        fontSize: '12px',
+        borderRadius: '12px',
+        iconSize: '16px',
+    },
+    medium: {
+        height: 32,
+        fontSize: '14px',
+        borderRadius: '16px',
+        iconSize: '18px',
+    },
+    large: {
+        height: 40,
+        fontSize: '16px',
+        borderRadius: '20px',
+        iconSize: '22px',
+    },
+};
+
+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
+        }
+    };
+    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,
+            ...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 })] }));
+};
+
 var BorderRadius;
 (function (BorderRadius) {
     BorderRadius["SQUARE"] = "4px";
@@ -1523,6 +1945,163 @@ 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 FONT_SIZE_ICON = {
+    small: 12,
+    xl: 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: {
@@ -1545,7 +2124,7 @@ const LinkElement = ({ onClick, sx = {}, target = '_self', ...rest }) => {
         }, ...rest }));
 };
 
-styled(MuiTextField)(({ theme }) => {
+const StyledTextField$3 = styled(MuiTextField)(({ theme }) => {
     return {
         '& .MuiOutlinedInput-root': {
             '& fieldset': { borderColor: COLOR_NEUTRAL[300] },
@@ -1587,6 +2166,57 @@ 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',
@@ -1696,7 +2326,15 @@ 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 }) }))] }))] }) }))] }) }));
 };
 
-styled(MuiTextField)(({ theme }) => {
+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 }) => {
     return {
         '& .MuiOutlinedInput-root': {
             '& fieldset': { borderColor: COLOR_NEUTRAL[300] },
@@ -1738,8 +2376,64 @@ 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 }))] }));
+};
 
-styled(MuiTextField)(({ theme }) => {
+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 }) => {
     return {
         '& .MuiOutlinedInput-root': {
             '& fieldset': { borderColor: COLOR_NEUTRAL[300] },
@@ -1781,8 +2475,250 @@ 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,
+};
 
-styled$1(Autocomplete)(({ theme }) => ({
+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 }) => ({
     '& .MuiOutlinedInput-root': {
         padding: '8px !important',
         display: 'flex',
@@ -1843,8 +2779,138 @@ 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 }))] }));
+};
 
-styled$1(Autocomplete)(({ theme }) => ({
+const StyledAutocomplete = styled$1(Autocomplete)(({ theme }) => ({
     '& .MuiOutlinedInput-root': {
         padding: '0 !important',
         display: 'flex',
@@ -1883,6 +2949,45 @@ 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' },
@@ -1902,7 +3007,7 @@ const SWITCH_COLORS = {
         thumbFocusColor: '#F4EBFF',
     },
 };
-styled$1(Switch, {
+const StyledSwitch = styled$1(Switch, {
     shouldForwardProp: (prop) => prop !== 'size',
 })(({ theme, size = 'medium' }) => {
     const mode = theme.palette.mode;
@@ -1955,7 +3060,89 @@ 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 SwitchContentComponent = ({ title, content, checked, disabled, size = 'medium', onChange, sx, }) => {
+    return (jsxs(StackRow, { sx: {
+            width: 'fit-content',
+            gap: '12px',
+            maxWidth: '345px',
+            ...sx,
+        }, children: [jsx(SwitchComponent, { checked: checked, disabled: disabled, size: size, onChange: onChange }), jsxs(Box, { children: [jsx(Typography, { sx: {
+                            fontSize: 16,
+                            lineHeight: '24px',
+                            fontWeight: 500,
+                            color: '#344054',
+                        }, children: title }), content && (jsx(Typography, { sx: {
+                            mt: 0.5,
+                            fontSize: 16,
+                            lineHeight: '24px',
+                            fontWeight: 400,
+                            color: '#667085',
+                        }, children: content }))] })] }));
+};
 
+const TAB_STYLES = {
+    position: 'relative',
+    padding: '18px 16px',
+    cursor: 'pointer',
+    minHeight: 44,
+    '&:hover': {
+        bgcolor: '#F3F4F6',
+    },
+};
+const TAB_BACKGROUND_STYLES = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 1,
+};
+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";
@@ -1964,7 +3151,171 @@ var TabColors;
     TabColors["MENU_ACTIVE_BACKGROUND"] = "#E0F2FE";
 })(TabColors || (TabColors = {}));
 
-styled(MuiTextField)(({ theme }) => {
+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 }) => {
     return {
         '& .MuiOutlinedInput-root': {
             '& fieldset': { borderColor: COLOR_NEUTRAL[300] },
@@ -2006,10 +3357,221 @@ 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: {
-        backgroundColor: COLOR_GRAY[200]}});
+        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))) }))] }));
+};
 
-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 };
+export { ACCESSIBILITY, AVATAR_SIZES, AvatarColor, AvatarComponent, AvatarGroupComponent, AvatarLabelGroupComponent, AvatarProfileComponent, AvatarUserComponent, BADGE_FONT_SIZES, BADGE_SIZES, BORDER_TEXT_FIELD_LOADING, BUTTON_CONSTANTS, BadgeImage, BadgeLive, BadgeNumber, BadgeOnline, BorderRadius, BreadcrumbsComponent, ButtonBarComponent, ButtonComponent, ButtonSize, CHECKBOX_COLORS, CHECKBOX_SIZE, CHIP_ICON_SIZE, CHIP_LABEL_PADDING, CHIP_SIZE_CONFIG, COLORS, COLOR_ACCENT, COLOR_BRAND, COLOR_ERROR, COLOR_GRAY, COLOR_INFO, COLOR_NEUTRAL, COLOR_SUCCESS, COLOR_WARNING, CheckboxComponent, CheckboxContentComponent, ChipComponent, Colors, DateFieldComponent, DateRangePickerComponent, DialogWrapper, DropdownFieldComponent, FONT_FAMILY, FONT_SIZE, FONT_SIZE_ICON, FONT_SIZE_LOADING, FONT_STYLE, FONT_WEIGHT, GridComponent, IconElement, ImageElement, ImageSizeType, InputStepperComponent, InputStepperSkeleton, LINE_HEIGHT, LinkElement, LinkFieldComponent, LinkInternalElement, MAP_SIZE, ModalComponent as Modal, ModalCardComponent as ModalCard, ModalDescription, ModalIcon, ModalTitle, MoneyFieldComponent, Orientation, PINComponent, PIN_SIZES, PIN_SPACING, PhoneNumberFieldComponent, SHADE_VALUES, SIZES, SIZE_EXTRA_LARGE, style_constant as STYLE, SearchDropdownComponent, SearchFieldComponent, ShapeType, SwitchComponent, SwitchContentComponent, TABS_CONTAINER_HORIZONTAL, TABS_CONTAINER_VERTICAL, TAB_ACTIVE_BACKGROUND_HORIZONTAL, TAB_ACTIVE_BACKGROUND_VERTICAL, TAB_BACKGROUND_STYLES, TAB_STYLES, TAB_UNDERLINE_STYLES, TYPOGRAPHY, TYPOGRAPHY_STYLES, TabColors, TabsComponent, TextAreaComponent, TextFieldComponent, TypographyOneLine, UploaderComponent, UploaderItemComponent, createTypography, getBadgePosition };
 //# sourceMappingURL=index.js.map