sevatech-library 1.0.0

package/dist/esm/index.js

@@ -0,0 +1,3500 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Stack, TableCell, tableCellClasses, LinearProgress, linearProgressClasses, useTheme, Skeleton, Box, Icon, Typography, Link, Breadcrumbs, IconButton, Menu, MenuItem, CircularProgress, Button, Chip, Select, Avatar, Container, TextField, InputAdornment, Dialog, DialogContent, DialogActions, styled as styled$1, Autocomplete, Switch } from '@mui/material';
+import React, { useState, useRef, useMemo, useCallback, useEffect, useId } from 'react';
+import { styled } from '@mui/material/styles';
+import LinkIcon from '@mui/icons-material/Link';
+import CheckIcon from '@mui/icons-material/Check';
+import RemoveIcon from '@mui/icons-material/Remove';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import AddIcon from '@mui/icons-material/Add';
+import MuiTextField from '@mui/material/TextField';
+import { Form } from 'formik';
+import Slider from 'react-slick';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
+import SearchIcon from '@mui/icons-material/Search';
+import { LayoutGroup, motion } from 'framer-motion';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import RefreshIcon from '@mui/icons-material/Refresh';
+
+const AVATAR_SIZES = {
+    xs: 24,
+    sm: 32,
+    md: 40,
+    lg: 48,
+    xl: 56,
+    '2xl': 64,
+};
+const BADGE_SIZES = {
+    xs: 8,
+    sm: 10,
+    md: 12,
+    lg: 14,
+    xl: 16,
+    '2xl': 18,
+};
+const BADGE_FONT_SIZES = {
+    xs: 4,
+    sm: 5,
+    md: 6,
+    lg: 7,
+    xl: 8,
+    '2xl': 9,
+};
+const getBadgePosition = (position) => {
+    const positions = {
+        'top-left': { top: 0, left: 0 },
+        'top-right': { top: 0, right: 0 },
+        'top-center': { top: 0, left: '50%', transform: 'translateX(-50%)' },
+        'bottom-left': { bottom: 0, left: 0 },
+        'bottom-right': { bottom: 0, right: 0 },
+        'bottom-center': { bottom: 0, left: '50%', transform: 'translateX(-50%)' },
+    };
+    return positions[position];
+};
+var AvatarColor;
+(function (AvatarColor) {
+    AvatarColor["BACKGROUND_COLOR_BADGE"] = "#000000";
+    AvatarColor["COLOR_BADGE"] = "#FFFFFF";
+    AvatarColor["COLOR_TITLE"] = "#414651";
+    AvatarColor["COLOR_DESCRIPTION"] = "#535862";
+})(AvatarColor || (AvatarColor = {}));
+
+const SIZE_LARGE = 32;
+const SIZE_MEDIUM = 26;
+const SIZE_SMALL = 18;
+const SIZE_EXTRA_SMALL = 20;
+const SIZE_AVATAR_GROUP = 80;
+const SIZE_EXTRA_LARGE = 36;
+const MAP_SIZE = {
+    large: { width: SIZE_LARGE, height: SIZE_LARGE },
+    medium: { width: SIZE_MEDIUM, height: SIZE_MEDIUM },
+    small: { width: SIZE_SMALL, height: SIZE_SMALL },
+    extra_small: { width: SIZE_EXTRA_SMALL, height: SIZE_EXTRA_SMALL },
+    extra_large: { width: SIZE_EXTRA_LARGE, height: SIZE_EXTRA_LARGE },
+    avatar_group: { width: SIZE_AVATAR_GROUP, height: SIZE_AVATAR_GROUP },
+};
+
+// Brand Colors
+const COLOR_BRAND = {
+    50: '#EDFFFA',
+    100: '#C3FFF2',
+    200: '#87FFEB',
+    300: '#42FFDC',
+    400: '#0CF5CA',
+    500: '#00D8B2',
+    600: '#00AF93',
+    700: '#008A77',
+    800: '#026D60',
+    900: '#07554B',
+    950: '#003733',
+};
+// Neutral Colors
+const COLOR_NEUTRAL = {
+    50: '#FAFAFA',
+    100: '#F5F5F5',
+    200: '#E5E5E5',
+    300: '#D4D4D4',
+    400: '#A3A3A3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#202626',
+    900: '#171717',
+    950: '#0A0A0A',
+};
+// Gray Colors
+const COLOR_GRAY = {
+    50: '#F9AFAB',
+    100: '#F3F4F6',
+    200: '#E5E7EB',
+    300: '#DDD5DB',
+    400: '#9CA3AF',
+    500: '#6B7280',
+    600: '#4B5563',
+    700: '#374151',
+    800: '#1F2937',
+    900: '#111827',
+    950: '#030712',
+};
+// Error Colors
+const COLOR_ERROR = {
+    50: '#FEF2F2',
+    100: '#FEE2E2',
+    200: '#FECACA',
+    300: '#FCASA5',
+    400: '#F87171',
+    500: '#EF4444',
+    600: '#DC2626',
+    700: '#B91C1C',
+    800: '#991B1B',
+    900: '#7F1D1D',
+    950: '#450A0A',
+};
+// Warning Colors
+const COLOR_WARNING = {
+    50: '#FFEEB8',
+    100: '#FFDD93',
+    200: '#FFD08A',
+    300: '#FDE047',
+    400: '#FACC15',
+    500: '#EAB308',
+    600: '#CA8A04',
+    700: '#A16207',
+    800: '#854D0E',
+    900: '#713F12',
+    950: '#422006',
+};
+// Success Colors
+const COLOR_SUCCESS = {
+    50: '#F0FDF4',
+    100: '#DCFCE7',
+    200: '#BBF7D0',
+    300: '#A6E96C',
+    400: '#4ADE80',
+    500: '#22C55E',
+    600: '#16A34A',
+    700: '#15803D',
+    800: '#166534',
+    900: '#14532D',
+    950: '#052E16',
+};
+// Info Colors
+const COLOR_INFO = {
+    50: '#EFF8FF',
+    100: '#0B8AFF',
+    200: '#BFD8FE',
+    300: '#93C5FD',
+    400: '#60A5FA',
+    500: '#3B82F6',
+    600: '#2563EB',
+    700: '#1D4ED8',
+    800: '#1E40AF',
+    900: '#1E3A8A',
+    950: '#172554',
+};
+// Accent Colors
+const COLOR_ACCENT = {
+    50: '#F3F3FF',
+    100: '#F9F9FF',
+    200: '#DDD6FE',
+    300: '#C4B5FD',
+    400: '#A78BFA',
+    500: '#8B5CF6',
+    600: '#7C3AED',
+    700: '#6D28D9',
+    800: '#5B21B6',
+    900: '#4C1D95',
+    950: '#2E1065',
+};
+
+// CÁC THÔNG SỐ CÙNG GROUP CÓ TỶ LỆ VỚI NHAU
+//
+const ANIMATION_TIME = 300;
+const SCALE_VALUE = 'scale(1.05)';
+const TRANSITION_TIME = '0.2s';
+//
+const WIDTH_LAYOUT_DESKTOP = `1200px`;
+const HEIGHT_LOGO_DEFAULT = '40px';
+const HEIGHT_IMAGE_DEFAULT = '40px';
+//
+const PADDING_GAP_TAB = '24px';
+const PADDING_GAP_LAYOUT = '16px';
+const PADDING_GAP_BUTTON = '12px';
+const PADDING_LAYOUT_HEADER = '8px 12px';
+const PADDING_GAP_ITEM = '8px';
+const PADDING_GAP_ITEM_SMALL = '6px';
+//
+const HEIGHT_ELEMENT_OTHER = '36px';
+//
+const BORDER_RADIUS_ELEMENT_ACTION = '24px';
+const BORDER_RADIUS_ELEMENT_WRAPPER = '12px';
+const BORDER_RADIUS_ELEMENT = '10px';
+const BORDER_RADIUS_ELEMENT_SMALL = '6px';
+const BORDER_RADIUS_ELEMENT_MIDDLE = '8px';
+const BORDER_RADIUS_ELEMENT_TAG = '3px';
+const HEIGHT_DEFAULT_TEXT_FIELD_BUTTON = '37.13px';
+//
+const TEXT_FIELD = {
+    FONT_SIZE_LABEL: 15,
+    FONT_SIZE_TITLE: 18,
+    FONT_SIZE_CAPTION: 10,
+};
+const FONT_SIZE_ICON = {
+    large: '22px',
+    xl: '20px',
+    medium: '19px',
+    small: '12px',
+};
+const FONT_SIZE_LOADING$1 = {
+    large: 40,
+    medium: 22.5,
+    small: 16,
+};
+const VARIANT_BY_SIZE = {
+    large: 'h6',
+    medium: 'subtitle1',
+    small: 'caption',
+};
+const GAP_ICON_CONTENT_BY_SIZE = {
+    large: '12px',
+    medium: '8px',
+    small: '4px',
+};
+const BORDER_COLOR_CARD = 'rgba(0, 0, 0, 0.12)';
+const BORDER_COLOR_LAYOUT = '#E4E6E6';
+const HEIGHT_HEADER = 57;
+const WIDTH_COLLAPSE = 55;
+const WIDTH_SIDEBAR = 224;
+const WIDTH_SIDEBAR_EXPAND = 200;
+const BACKGROUND_SYSTEM = '#F2F2F2';
+const WIDTH_TEXT_FIELD = {
+    large: 300,
+    medium: 200,
+    small: 100,
+};
+
+var style_constant = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ANIMATION_TIME: ANIMATION_TIME,
+    BACKGROUND_SYSTEM: BACKGROUND_SYSTEM,
+    BORDER_COLOR_CARD: BORDER_COLOR_CARD,
+    BORDER_COLOR_LAYOUT: BORDER_COLOR_LAYOUT,
+    BORDER_RADIUS_ELEMENT: BORDER_RADIUS_ELEMENT,
+    BORDER_RADIUS_ELEMENT_ACTION: BORDER_RADIUS_ELEMENT_ACTION,
+    BORDER_RADIUS_ELEMENT_MIDDLE: BORDER_RADIUS_ELEMENT_MIDDLE,
+    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$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,
+    HEIGHT_HEADER: HEIGHT_HEADER,
+    HEIGHT_IMAGE_DEFAULT: HEIGHT_IMAGE_DEFAULT,
+    HEIGHT_LOGO_DEFAULT: HEIGHT_LOGO_DEFAULT,
+    PADDING_GAP_BUTTON: PADDING_GAP_BUTTON,
+    PADDING_GAP_ITEM: PADDING_GAP_ITEM,
+    PADDING_GAP_ITEM_SMALL: PADDING_GAP_ITEM_SMALL,
+    PADDING_GAP_LAYOUT: PADDING_GAP_LAYOUT,
+    PADDING_GAP_TAB: PADDING_GAP_TAB,
+    PADDING_LAYOUT_HEADER: PADDING_LAYOUT_HEADER,
+    SCALE_VALUE: SCALE_VALUE,
+    TEXT_FIELD: TEXT_FIELD,
+    TRANSITION_TIME: TRANSITION_TIME,
+    VARIANT_BY_SIZE: VARIANT_BY_SIZE,
+    WIDTH_COLLAPSE: WIDTH_COLLAPSE,
+    WIDTH_LAYOUT_DESKTOP: WIDTH_LAYOUT_DESKTOP,
+    WIDTH_SIDEBAR: WIDTH_SIDEBAR,
+    WIDTH_SIDEBAR_EXPAND: WIDTH_SIDEBAR_EXPAND,
+    WIDTH_TEXT_FIELD: WIDTH_TEXT_FIELD
+});
+
+const FONT_FAMILY = {
+    primary: 'Inter, sans-serif',
+};
+const FONT_SIZE = {
+    '5xl': '48px',
+    '4xl': '32px',
+    '3xl': '28px',
+    '2xl': '24px',
+    xl: '20px',
+    lg: '18px',
+    md: '16px',
+    base: '14px',
+    sm: '12px',
+    xs: '10px',
+};
+const FONT_WEIGHT = {
+    bold: 700,
+    semiBold: 600,
+    medium: 500,
+    regular: 400,
+};
+const LINE_HEIGHT = {
+    tight: 1.2,
+    normal: 1.5,
+    relaxed: 1.75,
+    loose: 2,
+};
+const FONT_STYLE = {
+    normal: 'normal',
+    underline: 'underline',
+    strikethrough: 'line-through',
+};
+// Helper function to combine typography styles
+const createTypography = (fontSize, fontWeight, lineHeight, fontStyle) => ({
+    fontFamily: FONT_FAMILY.primary,
+    fontSize: typeof fontSize === 'number' ? `${fontSize}px` : fontSize,
+    fontWeight: fontWeight ?? FONT_WEIGHT.regular,
+    lineHeight: lineHeight ?? LINE_HEIGHT.normal,
+    fontStyle: fontStyle ?? FONT_STYLE.normal,
+});
+// Preset typography styles
+const TYPOGRAPHY = {
+    h1: createTypography(FONT_SIZE['5xl'], FONT_WEIGHT.bold),
+    h2: createTypography(FONT_SIZE['4xl'], FONT_WEIGHT.bold),
+    h3: createTypography(FONT_SIZE['3xl'], FONT_WEIGHT.bold),
+    h4: createTypography(FONT_SIZE['2xl'], FONT_WEIGHT.bold),
+    h5: createTypography(FONT_SIZE['xl'], FONT_WEIGHT.bold),
+    h6: createTypography(FONT_SIZE['lg'], FONT_WEIGHT.bold),
+    body: createTypography(FONT_SIZE['md'], FONT_WEIGHT.regular),
+    caption: createTypography(FONT_SIZE['sm'], FONT_WEIGHT.regular),
+    // 14px combinations
+    text14Medium: createTypography(FONT_SIZE.base, FONT_WEIGHT.medium),
+    text14Regular: createTypography(FONT_SIZE.base, FONT_WEIGHT.regular),
+    text14SemiBold: createTypography(FONT_SIZE.base, FONT_WEIGHT.semiBold),
+    text14Bold: createTypography(FONT_SIZE.base, FONT_WEIGHT.bold),
+    // 12px combinations
+    text12Medium: createTypography(FONT_SIZE.sm, FONT_WEIGHT.medium),
+    text12Regular: createTypography(FONT_SIZE.sm, FONT_WEIGHT.regular),
+    text12SemiBold: createTypography(FONT_SIZE.sm, FONT_WEIGHT.semiBold),
+    text12Bold: createTypography(FONT_SIZE.sm, FONT_WEIGHT.bold),
+    // 10px combinations
+    text10Medium: createTypography(FONT_SIZE.xs, FONT_WEIGHT.medium),
+    text10Regular: createTypography(FONT_SIZE.xs, FONT_WEIGHT.regular),
+    text10SemiBold: createTypography(FONT_SIZE.xs, FONT_WEIGHT.semiBold),
+    text10Bold: createTypography(FONT_SIZE.xs, FONT_WEIGHT.bold),
+    // Custom TextField variants
+    textFieldLabel: createTypography(FONT_SIZE.base, FONT_WEIGHT.medium, LINE_HEIGHT.relaxed),
+    textFieldHelper: createTypography(FONT_SIZE.sm, FONT_WEIGHT.regular, LINE_HEIGHT.relaxed),
+};
+/**
+ * ============================================
+ * CÁCH SỬ DỤNG TYPOGRAPHY
+ * ============================================
+ *
+ * 1. Sử dụng TYPOGRAPHY presets trực tiếp:
+ *    ----
+ *    import { TYPOGRAPHY } from '@/common/constant/typography.constant';
+ *
+ *    <Text style={TYPOGRAPHY.h1}>Heading 1</Text>
+ *    <Text style={TYPOGRAPHY.text14Medium}>14px Medium</Text>
+ *    <Text style={TYPOGRAPHY.text12Bold}>12px Bold</Text>
+ *
+ * 2. Kết hợp với các styles khác (CSS-in-JS):
+ *    ----
+ *    const styles = {
+ *      title: {
+ *        ...TYPOGRAPHY.h2,
+ *        color: '#07554B',
+ *        marginBottom: '16px',
+ *      }
+ *    };
+ *
+ * 3. Sử dụng hàm createTypography để tạo custom style:
+ *    ----
+ *    import { createTypography, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from '@/common/constant/typography.constant';
+ *
+ *    const customStyle = createTypography(
+ *      FONT_SIZE.lg,           // 18px
+ *      FONT_WEIGHT.semiBold,   // 600
+ *      LINE_HEIGHT.relaxed,    // 1.75
+ *      'underline'             // style
+ *    );
+ *    <Text style={customStyle}>Custom Text</Text>
+ *
+ * 4. Sử dụng từng hằng số riêng lẻ:
+ *    ----
+ *    import { FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from '@/common/constant/typography.constant';
+ *
+ *    <Text style={{
+ *      fontSize: FONT_SIZE.md,
+ *      fontWeight: FONT_WEIGHT.bold,
+ *      lineHeight: LINE_HEIGHT.loose,
+ *    }}>
+ *      Custom Combination
+ *    </Text>
+ *
+ * 5. Dùng trong Styled Components / Emotion:
+ *    ----
+ *    import styled from 'styled-components';
+ *    import { TYPOGRAPHY } from '@/common/constant/typography.constant';
+ *
+ *    const Title = styled.h1`
+ *      ${TYPOGRAPHY.h1}
+ *      color: #07554B;
+ *    `;
+ */
+const TYPOGRAPHY_STYLES = {
+    '2xl': {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '72px',
+            lineHeight: '80px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '72px',
+            lineHeight: '80px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '72px',
+            lineHeight: '80px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '72px',
+            lineHeight: '80px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    xl: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '60px',
+            lineHeight: '68px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '60px',
+            lineHeight: '68px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '60px',
+            lineHeight: '68px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '60px',
+            lineHeight: '68px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    lg: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '48px',
+            lineHeight: '56px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '48px',
+            lineHeight: '56px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '48px',
+            lineHeight: '56px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '48px',
+            lineHeight: '56px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    md: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '36px',
+            lineHeight: '44px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '36px',
+            lineHeight: '44px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '36px',
+            lineHeight: '44px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '36px',
+            lineHeight: '44px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    sm: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '30px',
+            lineHeight: '38px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '30px',
+            lineHeight: '38px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '30px',
+            lineHeight: '38px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '30px',
+            lineHeight: '38px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    xs: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '24px',
+            lineHeight: '32px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '24px',
+            lineHeight: '32px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '24px',
+            lineHeight: '32px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '24px',
+            lineHeight: '32px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    textXl: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '20px',
+            lineHeight: '28px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '20px',
+            lineHeight: '28px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '20px',
+            lineHeight: '28px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '20px',
+            lineHeight: '28px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    textLg: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '18px',
+            lineHeight: '26px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '18px',
+            lineHeight: '26px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '18px',
+            lineHeight: '26px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '18px',
+            lineHeight: '26px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    textMd: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '16px',
+            lineHeight: '24px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '16px',
+            lineHeight: '24px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '16px',
+            lineHeight: '24px',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '16px',
+            lineHeight: '24px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    textSm: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '14px',
+            lineHeight: '22px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '14px',
+            lineHeight: '22px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '14px',
+            lineHeight: '22px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '14px',
+            lineHeight: '22px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    textXs: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '12px',
+            lineHeight: '20px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '12px',
+            lineHeight: '20px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '12px',
+            lineHeight: '20px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '12px',
+            lineHeight: '20px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+    },
+    textSmall: {
+        regular: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 400,
+            fontStyle: 'normal',
+            fontSize: '10px',
+            lineHeight: '12px',
+            letterSpacing: 0.1,
+            verticalAlign: 'middle',
+        },
+        medium: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 500,
+            fontStyle: 'normal',
+            fontSize: '10px',
+            lineHeight: '12px',
+            letterSpacing: '0%',
+            verticalAlign: 'middle',
+        },
+        semiBold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 600,
+            fontStyle: 'normal',
+            fontSize: '10px',
+            lineHeight: '12px',
+            letterSpacing: 0.1,
+            verticalAlign: 'middle',
+        },
+        bold: {
+            fontFamily: '"Inter",sans-serif',
+            fontWeight: 700,
+            fontStyle: 'normal',
+            fontSize: '10px',
+            lineHeight: '12px',
+            letterSpacing: 0.1,
+            verticalAlign: 'middle',
+        },
+    },
+};
+
+const StackRow = styled(Stack)(() => ({
+    flexDirection: 'row',
+}));
+styled(Stack)(() => ({
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+}));
+const StackRowAlignCenter = styled(Stack)(() => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+}));
+styled(Stack)(() => ({
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+}));
+styled(Stack)(() => ({
+    flexDirection: 'row',
+    justifyContent: 'center',
+}));
+styled(Stack)(() => ({
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+}));
+styled(Stack)(() => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+const StackRowAlignCenterJustEnd = styled(Stack)(() => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+}));
+styled(Stack)(() => ({
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+}));
+styled(Stack)(() => ({
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+}));
+const StackRowAlignCenterJustBetween = styled(Stack)(() => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+}));
+styled(Stack)(() => ({
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+}));
+styled(Stack)(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    padding: PADDING_GAP_LAYOUT,
+    borderRadius: BORDER_RADIUS_ELEMENT,
+}));
+styled(Stack)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    padding: PADDING_GAP_LAYOUT,
+    borderRadius: BORDER_RADIUS_ELEMENT,
+}));
+styled(Stack)(() => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: PADDING_GAP_ITEM_SMALL,
+    gap: PADDING_GAP_ITEM_SMALL,
+}));
+styled(Stack)(({ theme }) => ({
+    border: `1px solid ${theme.palette.common.white}`,
+    borderRadius: '50%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    background: theme.palette.background.paper,
+    width: 16,
+    height: 16,
+}));
+styled(Stack)(({ theme }) => ({
+    borderRadius: BORDER_RADIUS_ELEMENT_TAG,
+    // padding: '6px',
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[1],
+    width: 'fit-content',
+    gap: 'unset',
+}));
+styled(TableCell)(({ theme }) => ({
+    [`&.${tableCellClasses.head}`]: {
+        backgroundColor: '#008A77',
+        color: theme.palette.common.white,
+        fontWeight: 600,
+    },
+    [`&.${tableCellClasses.body}`]: {
+        fontSize: 14,
+    },
+    '&:first-of-type': {
+        borderBottomLeftRadius: '0 !important',
+    },
+    '&:last-child': {
+        borderBottomRightRadius: '0 !important',
+    },
+}));
+styled(LinearProgress)(({ theme }) => ({
+    height: 10,
+    borderRadius: 5,
+    [`&.${linearProgressClasses.colorPrimary}`]: {
+        backgroundColor: theme.palette.grey[200],
+        ...theme.applyStyles('dark', {
+            backgroundColor: theme.palette.grey[800],
+        }),
+    },
+    [`& .${linearProgressClasses.bar}`]: {
+        borderRadius: 5,
+        backgroundColor: theme.palette.primary,
+    },
+}));
+
+var ImageSizeType;
+(function (ImageSizeType) {
+    ImageSizeType["CIRCLE"] = "CIRCLE";
+    ImageSizeType["SQUARE"] = "SQUARE";
+    ImageSizeType["FULL_WIDTH"] = "FULL_WIDTH";
+})(ImageSizeType || (ImageSizeType = {}));
+
+const ImageWrapper = ({ isWrap = false, children }) => {
+    return isWrap ? (jsx(StackRow, { alignItems: "center", className: "jsdsdj", children: children })) : (jsx(Fragment, { children: children }));
+};
+const ImageElement = ({ url, onClick, sx = {}, isBorder = false, isWrap = false, sizeType = ImageSizeType.CIRCLE, size = 'medium', ...rest }) => {
+    const { palette } = useTheme();
+    const [loaded, setLoaded] = useState(false);
+    if (onClick)
+        sx = { ...sx, cursor: 'pointer' };
+    const borderRadius = sizeType === ImageSizeType.CIRCLE
+        ? '50%'
+        : sizeType === ImageSizeType.SQUARE
+            ? BORDER_RADIUS_ELEMENT_SMALL
+            : 0;
+    return (jsxs(ImageWrapper, { isWrap: isWrap, children: [!loaded && (jsx(Skeleton, { variant: "rectangular", sx: {
+                    ...MAP_SIZE[size],
+                    borderRadius,
+                } })), jsx(Box, { ...rest, component: "img", src: url, onClick: onClick, onLoad: () => setLoaded(true), onError: (e) => {
+                    e.currentTarget.src = '/images/diamond.png';
+                }, sx: {
+                    display: loaded ? 'block' : 'none',
+                    ...MAP_SIZE[size],
+                    objectFit: 'cover',
+                    borderRadius,
+                    border: isBorder ? `1px solid ${palette.divider}` : 'none',
+                    ...sx,
+                } })] }));
+};
+
+const AvatarProfileComponent = ({ url, size = 'md', border = false, borderColor = '#C3FFF2', borderWidth = 4, onClick, sx = {}, children, ...rest }) => {
+    return (jsx(Box, { sx: {
+            width: AVATAR_SIZES[size],
+            height: AVATAR_SIZES[size],
+            borderRadius: '50%',
+            ...(border && {
+                border: `${borderWidth}px solid ${borderColor}`,
+            }),
+            ...sx,
+        }, children: jsx(ImageElement, { ...rest, url: url || '/images/avatarDefault.png', onClick: onClick, sx: {
+                width: '100%',
+                height: '100%',
+                ...(onClick && { cursor: 'pointer' }),
+            }, children: children }) }));
+};
+
+const BadgeLive = ({ text = 'LIVE', size = 'md' }) => {
+    const { typography } = useTheme();
+    return (jsx(Box, { sx: {
+            bgcolor: AvatarColor.BACKGROUND_COLOR_BADGE,
+            color: AvatarColor.COLOR_BADGE,
+            borderRadius: '12px',
+            padding: '3px 6px',
+            fontSize: BADGE_FONT_SIZES[size],
+            fontWeight: typography.body2.fontWeight,
+        }, children: text }));
+};
+const BadgeNumber = ({ number, size = 'md' }) => {
+    const { typography } = useTheme();
+    return (jsx(Box, { sx: {
+            bgcolor: AvatarColor.BACKGROUND_COLOR_BADGE,
+            color: AvatarColor.COLOR_BADGE,
+            borderRadius: '50%',
+            width: BADGE_SIZES[size],
+            height: BADGE_SIZES[size],
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: BADGE_FONT_SIZES[size],
+            fontWeight: typography.h2.fontWeight,
+        }, children: number }));
+};
+const BadgeOnline = ({ size = 'md' }) => (jsx(Box, { sx: {
+        width: BADGE_SIZES[size],
+        height: BADGE_SIZES[size],
+        borderRadius: '50%',
+        bgcolor: '#4CAF50',
+        border: '2px solid white',
+    } }));
+const BadgeImage = ({ url, size = 'md' }) => (jsx(Box, { component: "img", src: url, alt: "badge", sx: {
+        width: BADGE_SIZES[size],
+        height: BADGE_SIZES[size],
+        borderRadius: '50%',
+        objectFit: 'cover',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    } }));
+const AvatarComponent = ({ url, size = 'md', border = false, borderColor = '#C3FFF2', borderWidth = 4, badge, badgePosition = 'bottom-right', onClick, sx = {}, sxProfile = {}, children, ...rest }) => {
+    // Tự động inject size vào badge
+    const badgeWithSize = badge && React.isValidElement(badge) ? React.cloneElement(badge, { size }) : badge;
+    return (jsxs(Box, { sx: {
+            position: 'relative',
+            display: 'inline-flex',
+            width: AVATAR_SIZES[size],
+            height: AVATAR_SIZES[size],
+            ...sx,
+        }, children: [jsx(AvatarProfileComponent, { url: url, size: size, border: border, borderWidth: borderWidth, borderColor: borderColor, onClick: onClick, sx: sxProfile, ...rest, children: children }), badgeWithSize && (jsx(Box, { sx: {
+                    position: 'absolute',
+                    ...getBadgePosition(badgePosition),
+                }, children: badgeWithSize }))] }));
+};
+
+const IconElement = ({ icon, size = 'medium', color, disabled, onClick, sx, fill = 0, }) => {
+    const { palette } = useTheme();
+    if (disabled) {
+        onClick = undefined;
+        color = 'disabled';
+    }
+    if (onClick)
+        sx = {
+            cursor: 'pointer',
+            '&:hover': {
+                color: color ? 'none' : palette.primary.main,
+            },
+            ...sx,
+        };
+    return (jsx(Icon, { onClick: onClick, color: color, sx: {
+            cursor: 'inherit',
+            fontSize: FONT_SIZE_ICON[size],
+            fontVariationSettings: `'FILL' ${fill}, 'wght' 100, 'GRAD' 200, 'opsz' 24`,
+            ...sx,
+        }, component: 'span', className: "material-symbols-rounded", children: icon }));
+};
+
+const AvatarGroupComponent = ({ avatars = [], maxDisplay = 10, size = 'md', border = true, borderColor = '#FFFFFF', borderWidth = 2, onAddClick, overlap = 8, icon, sxAvatar, sx, }) => {
+    const displayAvatars = avatars.slice(0, maxDisplay);
+    const remainingCount = avatars.length - maxDisplay;
+    return (jsxs(StackRowAlignCenter, { sx: { gap: 1, ...sx }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [displayAvatars.map((avatar, index) => (jsx(Box, { sx: {
+                            marginLeft: index > 0 ? `-${overlap}px` : 0,
+                            position: 'relative',
+                        }, children: jsx(AvatarComponent, { url: avatar.url, size: size, border: border, borderColor: borderColor, borderWidth: borderWidth, sx: sxAvatar }) }, avatar.id || index))), remainingCount > 0 && (jsxs(Box, { sx: {
+                            marginLeft: `-${overlap}px`,
+                            position: 'relative',
+                            color: '#07554B',
+                            backgroundColor: '#EDFFFA',
+                            width: AVATAR_SIZES[size],
+                            height: AVATAR_SIZES[size],
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            border: '2px solid #ffffff',
+                            borderRadius: '50%',
+                            ...TYPOGRAPHY_STYLES.textMd.medium,
+                        }, children: ["+", remainingCount] }))] }), icon && (jsx(Box, { sx: {
+                    width: AVATAR_SIZES[size],
+                    height: AVATAR_SIZES[size],
+                    borderRadius: '50%',
+                    border: `2px dashed #D1D5DB`,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    cursor: 'pointer',
+                    transition: 'all 0.2s',
+                    '&:hover': {
+                        borderColor: 'primary.main',
+                    },
+                }, onClick: onAddClick, children: jsx(IconElement, { icon: icon, sx: {
+                        color: 'primary.main',
+                    } }) }))] }));
+};
+
+const AvatarLabelGroupComponent = ({ title, description, url, size = 'md', border, borderColor, borderWidth, badge, badgePosition, onClick, sx, sxAvatar, children, ...rest }) => {
+    return (jsxs(Stack, { direction: "row", alignItems: "center", sx: { gap: BORDER_RADIUS_ELEMENT, ...sx }, children: [jsx(AvatarComponent, { url: url, size: size, border: border, borderColor: borderColor, borderWidth: borderWidth, badge: badge, badgePosition: badgePosition, onClick: onClick, sx: sxAvatar, ...rest, children: children }), jsxs(Stack, { sx: { gap: 0 }, children: [jsx(Typography, { noWrap: true, sx: { ...TYPOGRAPHY_STYLES.textSm.semiBold, color: AvatarColor.COLOR_TITLE }, children: title }), jsx(Typography, { noWrap: true, sx: { ...TYPOGRAPHY_STYLES.textXs.regular, color: AvatarColor.COLOR_DESCRIPTION }, children: description })] })] }));
+};
+
+const getLimitLineCss = (line) => ({
+    display: '-webkit-box',
+    overflow: 'hidden',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: line,
+    // textOverflow: 'ellipsis',
+});
+const TypographyOneLine = ({ content, sx = {}, ...rest }) => {
+    return (jsx(Typography, { sx: {
+            ...getLimitLineCss(1),
+            ...sx,
+        }, ...rest, children: content }));
+};
+
+const AvatarUserComponent = ({ title, description, descriptionHref, onDescriptionClick, titleColor = '#414651', descriptionColor = '#535862', url, onClick, sx, }) => {
+    return (jsxs(Stack, { sx: { gap: 1, ...sx }, children: [jsx(ImageElement, { sx: {
+                    width: 160,
+                    height: 160,
+                    ...(onClick && { cursor: 'pointer' }),
+                }, url: url || '/images/avatarDefault.png', sizeType: ImageSizeType.SQUARE }), jsxs(Stack, { sx: { gap: 0 }, children: [jsx(TypographyOneLine, { sx: { ...TYPOGRAPHY_STYLES.textLg.semiBold, color: titleColor }, content: title }), description && (jsxs(Link, { href: descriptionHref, onClick: onDescriptionClick, sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 0.5,
+                            textDecoration: 'underline',
+                            color: descriptionColor,
+                            ...TYPOGRAPHY_STYLES.textSm.regular,
+                            cursor: 'pointer',
+                            '&:hover': {
+                                opacity: 0.8,
+                            },
+                        }, 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,
+    main: 500,
+    dark: 700,
+};
+/** Button size configuration */
+const SIZES = {
+    xs: { padding: '6px 12px', fontSize: '10px', height: '28px' },
+    sm: { padding: '8px 16px', fontSize: '12px', height: '32px' },
+    md: { padding: '16px 28px', fontSize: '14px', height: '60px', width: '192px' },
+    lg: { padding: '12px 24px', fontSize: '16px', height: '44px' },
+    xl: { padding: '14px 32px', fontSize: '18px', height: '48px' },
+};
+/** Color palette mapping */
+const COLORS = {
+    brand: COLOR_BRAND,
+    neutral: COLOR_NEUTRAL,
+    error: COLOR_ERROR,
+    warning: COLOR_WARNING,
+    success: COLOR_SUCCESS,
+    accent: COLOR_ACCENT,
+    info: COLOR_INFO,
+};
+/** Button UI constants */
+const BUTTON_CONSTANTS = {
+    ACTIVE_DOT_SIZE: 8,
+    ACTIVE_DOT_MARGIN_RIGHT: 8,
+    SPINNER_SIZE: 16,
+    GAP: 12,
+    BORDER_RADIUS: 8,
+    TRANSITION_DURATION: '0.3s',
+};
+/** Accessibility constants */
+const ACCESSIBILITY = {
+    HOVER_TRANSLATE_Y: '-2px',
+    ACTIVE_TRANSLATE_Y: '0',
+    BOX_SHADOW: '0 4px 12px rgba(0, 0, 0, 0.15)',
+    FOCUS_OFFSET: '2px',
+};
+
+const getButtonSx = (variant, color, shade, size, fullWidth) => {
+    const colors = COLORS[color];
+    const sizeConf = SIZES[size] || SIZES.md;
+    // Xác định màu sắc theo shade
+    let colorValue;
+    if (typeof shade === 'number') {
+        colorValue = colors[shade] || colors[700];
+    }
+    else {
+        const shadeNum = SHADE_VALUES[shade] || 700;
+        colorValue = colors[shadeNum];
+    }
+    const lightColor = colors[100];
+    const base = {
+        padding: sizeConf.padding,
+        height: sizeConf.height,
+        fontSize: sizeConf.fontSize,
+        width: fullWidth ? '100%' : sizeConf.width || 'auto',
+        fontFamily: TYPOGRAPHY.body.fontFamily,
+        fontWeight: TYPOGRAPHY.body.fontWeight,
+        borderRadius: `${BUTTON_CONSTANTS.BORDER_RADIUS}px`,
+        gap: `${BUTTON_CONSTANTS.GAP}px`,
+        textTransform: 'none',
+        transition: `all ${BUTTON_CONSTANTS.TRANSITION_DURATION} ease`,
+        '&:hover': {
+            transform: `translateY(${ACCESSIBILITY.HOVER_TRANSLATE_Y})`,
+            boxShadow: ACCESSIBILITY.BOX_SHADOW,
+        },
+        '&:active': {
+            transform: `translateY(${ACCESSIBILITY.ACTIVE_TRANSLATE_Y})`,
+        },
+        '&:focus-visible': {
+            outline: `2px solid ${colorValue}`,
+            outlineOffset: ACCESSIBILITY.FOCUS_OFFSET,
+        },
+    };
+    const variants = {
+        solid: {
+            backgroundColor: colorValue,
+            color: '#ffffff',
+            '&:hover': { ...base['&:hover'], backgroundColor: colorValue },
+            '&:focus-visible': { ...base['&:focus-visible'], outline: '2px solid #ffffff' },
+        },
+        outline: {
+            backgroundColor: 'transparent',
+            color: colorValue,
+            border: `2px solid ${colorValue}`,
+            '&:hover': { ...base['&:hover'], backgroundColor: 'transparent', border: `2px solid ${colorValue}` },
+        },
+        ghost: {
+            backgroundColor: lightColor,
+            color: colorValue,
+            '&:hover': { ...base['&:hover'], backgroundColor: lightColor },
+        },
+        text: {
+            backgroundColor: 'transparent',
+            color: colorValue,
+            border: 'none',
+            '&:hover': { ...base['&:hover'], backgroundColor: 'transparent' },
+        },
+    };
+    return { ...base, ...variants[variant] };
+};
+const ButtonComponent = ({ variant = 'solid', color = 'brand', shade = 'dark', size = 'md', prefix, suffix, prefixIcon, suffixIcon, iconStyle, loading = false, children, fullWidth = false, disabled = false, active = false, activeDotColor = '#10b981', sx, ...props }) => {
+    // Memoize style calculation
+    const buttonSx = getButtonSx(variant, color, shade, size, fullWidth);
+    // Render prefix element
+    const renderPrefix = () => {
+        if (prefixIcon)
+            return jsx(IconElement, { icon: prefixIcon, sx: iconStyle });
+        if (prefix)
+            return prefix;
+        return null;
+    };
+    // Render suffix element
+    const renderSuffix = () => {
+        if (suffixIcon)
+            return jsx(IconElement, { icon: suffixIcon, sx: iconStyle });
+        if (suffix)
+            return suffix;
+        return null;
+    };
+    const prefixContent = loading ? (jsx(CircularProgress, { size: BUTTON_CONSTANTS.SPINNER_SIZE, sx: { color: COLOR_NEUTRAL[50] } })) : (renderPrefix());
+    const suffixContent = renderSuffix();
+    // Nếu chỉ có icon mà không có children, render icon giữa button
+    const isIconOnly = !children && !active && (prefixContent || suffixContent);
+    // Active dot element
+    const activeDot = active ? (jsx("span", { style: {
+            width: `${BUTTON_CONSTANTS.ACTIVE_DOT_SIZE}px`,
+            height: `${BUTTON_CONSTANTS.ACTIVE_DOT_SIZE}px`,
+            borderRadius: '50%',
+            backgroundColor: activeDotColor,
+            display: 'inline-block',
+            flexShrink: 0,
+            marginRight: `${BUTTON_CONSTANTS.ACTIVE_DOT_MARGIN_RIGHT}px`,
+        } })) : null;
+    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',
+        background: '#FFFFFF',
+        hoverBg: '#F0FDF9',
+    },
+    checked: {
+        border: '#07554B',
+        filledBg: '#07554B',
+        outlinedBg: '#FFFFFF',
+        icon: '#FFFFFF',
+    },
+    disabled: {
+        border: '#E4E7EC',
+        background: '#F2F4F7',
+        icon: '#98A2B3',
+    },
+};
+const CHECKBOX_SIZE = {
+    small: {
+        boxSize: 16,
+        iconSize: 14,
+        titleFontSize: 14,
+        titleFontWeight: 500,
+    },
+    medium: {
+        boxSize: 20,
+        iconSize: 16,
+        titleFontSize: 16,
+        titleFontWeight: 600,
+    },
+};
+
+const CheckboxComponent = ({ checked = false, disabled = false, shape = 'square', size = 'medium', variant = 'filled', iconType = 'check', title, children, onChange, sxCheckbox, sxLabel, sx, }) => {
+    const checkboxStyle = CHECKBOX_SIZE[size];
+    const isFilled = variant === 'filled';
+    const handleToggle = () => {
+        if (!disabled) {
+            onChange?.(!checked);
+        }
+    };
+    const backgroundColor = disabled
+        ? CHECKBOX_COLORS.disabled.background
+        : checked
+            ? isFilled
+                ? sxCheckbox?.backgroundColor || CHECKBOX_COLORS.checked.filledBg
+                : CHECKBOX_COLORS.checked.outlinedBg
+            : CHECKBOX_COLORS.default.background;
+    const borderColor = disabled
+        ? CHECKBOX_COLORS.disabled.border
+        : checked
+            ? sxCheckbox?.borderColor || CHECKBOX_COLORS.checked.border
+            : CHECKBOX_COLORS.default.border;
+    const iconColor = disabled
+        ? CHECKBOX_COLORS.disabled.icon
+        : isFilled
+            ? CHECKBOX_COLORS.checked.icon
+            : CHECKBOX_COLORS.checked.border;
+    const renderIcon = () => {
+        if (!checked)
+            return null;
+        const iconSx = {
+            width: checkboxStyle.iconSize,
+            height: checkboxStyle.iconSize,
+            color: iconColor,
+        };
+        switch (iconType) {
+            case 'check':
+                return jsx(CheckIcon, { sx: iconSx });
+            case 'minus':
+                return jsx(RemoveIcon, { sx: iconSx });
+            case 'dot':
+                return (jsx(FiberManualRecordIcon, { sx: { ...iconSx, width: checkboxStyle.iconSize - 3, height: checkboxStyle.iconSize - 3 } }));
+            case 'custom':
+                return children;
+            default:
+                return null;
+        }
+    };
+    const checkbox = (jsx(Box, { role: "checkbox", tabIndex: disabled ? -1 : 0, "aria-checked": checked, onClick: handleToggle, onKeyDown: (e) => {
+            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {
+                e.preventDefault();
+                handleToggle();
+            }
+        }, sx: {
+            width: checkboxStyle.boxSize,
+            height: checkboxStyle.boxSize,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            userSelect: 'none',
+            borderRadius: shape === 'circle' ? '50%' : '4px',
+            border: `1px solid ${borderColor}`,
+            backgroundColor,
+            transition: 'all 0.2s ease',
+            ...(!disabled &&
+                (!checked || !isFilled) && {
+                '&:hover': {
+                    borderColor: sxCheckbox?.backgroundColor || CHECKBOX_COLORS.checked.border,
+                    backgroundColor: CHECKBOX_COLORS.default.hoverBg,
+                },
+            }),
+            '&:focus-visible': {
+                outline: 'none',
+                boxShadow: '0 0 0 3px rgba(14, 147, 132, 0.25)',
+            },
+            ...(disabled && { opacity: 0.4 }),
+        }, children: renderIcon() }));
+    if (!title)
+        return checkbox;
+    return (jsxs(Box, { onClick: handleToggle, sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '8px',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            ...sx,
+        }, children: [checkbox, jsx(Typography, { fontSize: checkboxStyle.titleFontSize, fontWeight: checkboxStyle.titleFontWeight, color: disabled ? '#D0D5DD' : '#344054', sx: {
+                    userSelect: 'none',
+                    ...sxLabel,
+                }, children: title })] }));
+};
+
+const CHIP_LABEL_PADDING = {
+    WITH_ICON_LEFT: '4px 8px 4px 4px',
+    WITH_ICON_RIGHT: '4px 4px 4px 8px',
+    NO_ICON: '4px 8px',
+};
+const CHIP_SIZE_CONFIG = {
+    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";
+    BorderRadius["CIRCLE"] = "20px";
+})(BorderRadius || (BorderRadius = {}));
+var ShapeType;
+(function (ShapeType) {
+    ShapeType["SQUARE"] = "square";
+    ShapeType["CIRCLE"] = "circle";
+})(ShapeType || (ShapeType = {}));
+var Orientation;
+(function (Orientation) {
+    Orientation["HORIZONTAL"] = "horizontal";
+    Orientation["VERTICAL"] = "vertical";
+})(Orientation || (Orientation = {}));
+var ButtonSize;
+(function (ButtonSize) {
+    ButtonSize[ButtonSize["SMALL"] = 32] = "SMALL";
+    ButtonSize[ButtonSize["MEDIUM"] = 40] = "MEDIUM";
+})(ButtonSize || (ButtonSize = {}));
+const Colors = {
+    BORDER_COLOR_BUTTON: '#07554B',
+    BORDER_COLOR_DISABLE: '#0000000D',
+    HOVER_BG_COLOR: 'rgba(7, 85, 75, 0.04)',
+    BACKGROUND_COLOR: '#FFFFFF',
+    TEXT_COLOR_READONLY: '#27272A',
+};
+const FONT_SIZE_LOADING = {
+    large: 40,
+};
+const BORDER_TEXT_FIELD_LOADING = 20;
+
+const InputStepperSkeleton = ({ orientation, buttonShape }) => {
+    return (jsxs(Box, { display: "inline-flex", flexDirection: orientation === Orientation.HORIZONTAL ? 'row' : 'column', alignItems: "center", gap: 1, children: [jsx(Skeleton, { variant: buttonShape === ShapeType.CIRCLE ? 'circular' : 'rectangular', width: FONT_SIZE_LOADING.large, height: FONT_SIZE_LOADING.large, sx: {
+                    borderRadius: buttonShape === ShapeType.CIRCLE ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                    maxHeight: FONT_SIZE_LOADING.large,
+                } }), jsx(Skeleton, { width: FONT_SIZE_LOADING.large, sx: {
+                    borderRadius: `${BORDER_TEXT_FIELD_LOADING}px`,
+                } }), jsx(Skeleton, { variant: buttonShape === ShapeType.CIRCLE ? 'circular' : 'rectangular', width: FONT_SIZE_LOADING.large, height: FONT_SIZE_LOADING.large, sx: {
+                    borderRadius: buttonShape === ShapeType.CIRCLE ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                    maxHeight: FONT_SIZE_LOADING.large,
+                } })] }));
+};
+
+const InputStepperComponent = ({ value: controlledValue, onChange, min, max, step = 1, disabled = false, readOnly = false, orientation = Orientation.HORIZONTAL, loading = false, sx = {}, sxTextField = {}, // style cho input chứa value
+sxButton = {}, // style cho 2 button
+buttonShape = ShapeType.SQUARE, buttonColor, textFieldShape = ShapeType.SQUARE, decrementIcon = jsx(RemoveIcon, {}), incrementIcon = jsx(AddIcon, {}), }) => {
+    const [internalValue, setInternalValue] = useState(controlledValue ?? min ?? 0);
+    const value = controlledValue !== undefined ? controlledValue : internalValue;
+    const updateValue = (newValue) => {
+        let finalValue = newValue;
+        if (min !== undefined && newValue < min)
+            finalValue = min;
+        if (max !== undefined && newValue > max)
+            finalValue = max;
+        if (controlledValue === undefined) {
+            setInternalValue(finalValue);
+        }
+        onChange?.(finalValue);
+    };
+    const handleIncrement = () => {
+        updateValue(Number(value) + step);
+    };
+    const handleDecrement = () => {
+        updateValue(Number(value) - step);
+    };
+    const handleInputChange = (event) => {
+        if (!readOnly) {
+            const newValue = event.target.value === '' ? min || 0 : Number(event.target.value);
+            if (!isNaN(newValue)) {
+                updateValue(newValue);
+            }
+        }
+    };
+    const isDecrementDisabled = disabled || (min !== undefined && Number(value) <= min);
+    const isIncrementDisabled = disabled || (max !== undefined && Number(value) >= max);
+    const buttonSize = ButtonSize.MEDIUM;
+    if (loading) {
+        return jsx(InputStepperSkeleton, { orientation: orientation, buttonShape: buttonShape });
+    }
+    return (jsxs(Box, { display: "inline-flex", flexDirection: orientation === 'horizontal' ? 'row' : 'column', alignItems: "center", gap: PADDING_GAP_ITEM, sx: {
+            opacity: disabled ? 0.5 : 1,
+            pointerEvents: disabled ? 'none' : 'auto',
+            ...sx,
+        }, children: [jsx(IconButton, { onClick: handleDecrement, disabled: isDecrementDisabled, sx: {
+                    borderRadius: buttonShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                    width: buttonSize,
+                    height: buttonSize,
+                    padding: PADDING_GAP_ITEM,
+                    border: isDecrementDisabled
+                        ? `1px solid ${Colors.BORDER_COLOR_DISABLE}`
+                        : `1px solid ${Colors.BORDER_COLOR_BUTTON}`,
+                    backgroundColor: Colors.BACKGROUND_COLOR,
+                    color: buttonColor || Colors.BORDER_COLOR_BUTTON,
+                    '&:hover': {
+                        backgroundColor: Colors.HOVER_BG_COLOR,
+                    },
+                    ...(isDecrementDisabled ? {} : sxButton),
+                }, children: decrementIcon }), jsx(TextField, { value: value, onChange: handleInputChange, disabled: disabled, inputProps: {
+                    min,
+                    max,
+                    step,
+                    readOnly,
+                }, type: "number", sx: {
+                    minWidth: buttonSize,
+                    width: sxTextField?.width || buttonSize,
+                    minHeight: buttonSize,
+                    height: sxTextField?.height || buttonSize,
+                    overflow: 'hidden',
+                    borderRadius: textFieldShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                    color: readOnly ? Colors.TEXT_COLOR_READONLY : '',
+                    backgroundColor: readOnly ? 'transparent !important' : sxTextField?.backgroundColor,
+                    '& .MuiOutlinedInput-root': {
+                        width: '100%',
+                        height: '100%',
+                        borderRadius: 'inherit',
+                        '& fieldset': {
+                            borderColor: readOnly || disabled ? 'transparent' : sxTextField?.borderColor || Colors.BORDER_COLOR_BUTTON,
+                            borderWidth: readOnly || disabled ? 0 : 1,
+                            borderRadius: textFieldShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                        },
+                        '&:hover fieldset': readOnly || disabled
+                            ? {}
+                            : {
+                                borderColor: sxTextField?.borderColorHover || Colors.BORDER_COLOR_BUTTON,
+                            },
+                        '&.Mui-focused fieldset': readOnly
+                            ? {
+                                borderColor: 'transparent',
+                                borderWidth: 0,
+                            }
+                            : {
+                                borderColor: sxTextField?.borderColorFocused || Colors.BORDER_COLOR_BUTTON,
+                                borderWidth: 1,
+                            },
+                        '&.Mui-disabled fieldset': {
+                            borderColor: Colors.BORDER_COLOR_DISABLE,
+                            backgroundColor: readOnly ? 'transparent' : Colors.BORDER_COLOR_DISABLE,
+                        },
+                    },
+                    '& input[type=number]::-webkit-outer-spin-button, & input[type=number]::-webkit-inner-spin-button': {
+                        WebkitAppearance: 'none',
+                        margin: 0,
+                    },
+                    '& input[type=number]': {
+                        MozAppearance: 'textfield',
+                    },
+                    '& .MuiInputBase-input': {
+                        textAlign: sxTextField?.textAlign || 'center',
+                        padding: sxTextField?.padding || '4px 8px',
+                        fontSize: readOnly ? '16px' : sxTextField?.fontSize || '1rem',
+                        cursor: readOnly ? 'not-allowed' : 'text',
+                        borderRadius: 'inherit',
+                        backgroundColor: readOnly ? 'transparent' : sxTextField?.backgroundColor || 'transparent',
+                        color: readOnly ? Colors.TEXT_COLOR_READONLY : sxTextField?.color || 'inherit',
+                        fontWeight: sxTextField?.fontWeight || (readOnly ? 700 : 'normal'),
+                    },
+                } }), jsx(IconButton, { onClick: handleIncrement, disabled: isIncrementDisabled, sx: {
+                    borderRadius: buttonShape === 'circle' ? BorderRadius.CIRCLE : BorderRadius.SQUARE,
+                    width: buttonSize,
+                    height: buttonSize,
+                    padding: PADDING_GAP_ITEM,
+                    border: isIncrementDisabled
+                        ? `1px solid ${Colors.BORDER_COLOR_DISABLE}`
+                        : `1px solid ${Colors.BORDER_COLOR_BUTTON}`,
+                    backgroundColor: Colors.BACKGROUND_COLOR,
+                    color: buttonColor || Colors.BORDER_COLOR_BUTTON,
+                    '&:hover': {
+                        backgroundColor: Colors.HOVER_BG_COLOR,
+                    },
+                    ...(isIncrementDisabled ? {} : sxButton),
+                }, children: incrementIcon })] }));
+};
+
+const LinkInternalElement = ({ content, onClick, sx = {} }) => {
+    return (jsx(Typography, { onClick: onClick, sx: {
+            color: 'inherit',
+            textDecorationColor: 'inherit',
+            cursor: 'pointer',
+            '&:hover': {
+                textDecoration: 'underline',
+            },
+            ...sx,
+        }, children: content }));
+};
+
+const LinkElement = ({ onClick, sx = {}, target = '_self', ...rest }) => {
+    return (jsx(Link, { target: target, rel: "noopener", sx: { textDecoration: 'none', color: 'unset', ...sx }, onClick: (event) => {
+            if (onClick) {
+                event.preventDefault();
+                onClick();
+            }
+        }, ...rest }));
+};
+
+const StyledTextField$3 = styled(MuiTextField)(({ theme }) => {
+    return {
+        '& .MuiOutlinedInput-root': {
+            '& 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[600], borderWidth: '1px' },
+            '&.Mui-error:hover fieldset': { borderColor: COLOR_ERROR[600] },
+            '&.Mui-error.Mui-focused fieldset': { borderColor: COLOR_ERROR[600], 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)',
+            },
+        },
+        '& .MuiInputBase-input': {
+            ...TYPOGRAPHY.text14Regular,
+            padding: '12px 8px',
+            color: COLOR_GRAY[900],
+            '&::placeholder': { color: COLOR_NEUTRAL[400], opacity: 0.7 },
+            '&:focus': { outline: 'none' },
+        },
+        '& .MuiInputLabel-root': {
+            ...TYPOGRAPHY.textFieldLabel,
+            color: COLOR_GRAY[800],
+            transform: 'translate(14px, -9px) scale(0.75)',
+            '&.Mui-focused': { color: COLOR_NEUTRAL[500] },
+            '&.Mui-error': { color: COLOR_ERROR[600] },
+        },
+        '& .MuiFormHelperText-root': {
+            ...TYPOGRAPHY.textFieldHelper,
+            margin: '4px 0 0 0',
+            '&.Mui-error': { color: COLOR_ERROR[600] },
+        },
+    };
+});
+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',
+    warning: '#F59E0B',
+    error: '#EF4444',
+    info: '#3B82F6',
+};
+const ModalTitle = ({ content }) => {
+    return jsx(Typography, { sx: { ...TYPOGRAPHY_STYLES.textLg.semiBold, color: '#101828' }, children: content });
+};
+const ModalDescription = ({ content }) => {
+    return (jsx(Typography, { sx: {
+            ...TYPOGRAPHY_STYLES.textSm.regular,
+            color: '#667085',
+        }, children: content }));
+};
+const ModalIcon = ({ type, size = 48, }) => {
+    return (jsx(Box, { sx: {
+            width: size,
+            height: size,
+            borderRadius: '28px',
+            bgcolor: `${MODAL_ICON_COLORS[type]}20`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: jsx(IconElement, { icon: type, sx: {
+                fontSize: size * 0.6,
+                color: MODAL_ICON_COLORS[type],
+                flex: 1,
+            } }) }));
+};
+const DialogWrapper = ({ isForm = false, children }) => {
+    return isForm ? jsx(Form, { noValidate: true, children: children }) : jsx(React.Fragment, { children: children });
+};
+
+const ModalComponent = ({ open, isForm = false, onClose, icon, avatars, title, nodeDescription, nodeContent, buttonLeft, buttonCenter, buttonRight, nodeBottomLeft, align = 'flex-start', direction = 'column', sx, sxContent, sxBottom, }) => {
+    const hasActions = buttonLeft || buttonCenter || buttonRight || nodeBottomLeft;
+    return (jsx(Dialog, { open: open, disableScrollLock: true, onClose: onClose, maxWidth: false, PaperProps: {
+            sx: {
+                borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
+                p: `calc(${PADDING_GAP_LAYOUT} + 8px)`,
+                minWidth: 350,
+                width: 'auto',
+                ...sx,
+            },
+        }, children: jsx(DialogWrapper, { isForm: isForm, children: jsx(DialogContent, { sx: { p: 0, ...sxContent }, children: jsxs(Stack, { sx: { gap: 0, alignItems: 'center' }, children: [jsxs(Stack, { direction: direction, sx: {
+                                justifyContent: direction === 'row' ? 'flex-start' : align,
+                                gap: PADDING_GAP_LAYOUT,
+                                alignItems: direction === 'row' ? (nodeDescription ? 'flex-start' : 'center') : align,
+                                width: '100%',
+                            }, children: [icon && jsx(ModalIcon, { type: icon }), avatars && jsx(AvatarGroupComponent, { avatars: avatars }), (title || nodeDescription) && (jsxs(Stack, { sx: {
+                                        gap: GAP_ICON_CONTENT_BY_SIZE.medium,
+                                        alignItems: direction === 'row' ? 'flex-start' : align,
+                                        width: '100%',
+                                    }, children: [title && jsx(ModalTitle, { content: title }), nodeDescription] }))] }), nodeContent && jsx(Box, { sx: { width: '100%' }, children: nodeContent }), hasActions && (jsx(DialogActions, { sx: {
+                                width: '100%',
+                                mt: `calc(${PADDING_GAP_LAYOUT} + 8px)`,
+                                gap: GAP_ICON_CONTENT_BY_SIZE.large,
+                                ...sxBottom,
+                            }, children: jsxs(StackRowAlignCenter, { sx: { width: '100%' }, children: [nodeBottomLeft && jsx(Box, { sx: { width: '100%' }, children: nodeBottomLeft }), (buttonLeft || buttonCenter || buttonRight) && (jsxs(StackRow, { sx: { width: '100%', gap: PADDING_GAP_LAYOUT }, children: [buttonLeft && (jsx(Box, { sx: { flex: 1 }, children: jsx(ButtonComponent, { ...buttonLeft, fullWidth: true }) })), buttonCenter && (jsx(Box, { sx: { flex: 1 }, children: jsx(ButtonComponent, { ...buttonCenter, fullWidth: true }) })), buttonRight && (jsx(Box, { sx: { flex: 1 }, children: jsx(ButtonComponent, { ...buttonRight, fullWidth: true }) }))] }))] }) }))] }) }) }) }));
+};
+
+const ModalCardComponent = ({ open, isForm = false, onClose, items, nodeContent, buttonLeft, buttonCenter, buttonRight, nodeBottomLeft, sx, sxContent, sxBottom, }) => {
+    const itemsArray = Array.isArray(items) ? items : [items];
+    const showSlider = itemsArray.length > 1;
+    const hasActions = buttonLeft || buttonCenter || buttonRight || nodeBottomLeft;
+    const sliderSettings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        arrows: false,
+    };
+    const renderCard = (item) => (jsxs(Stack, { sx: { gap: '20px', alignItems: 'center', textAlign: 'center' }, children: [jsx(ImageElement, { url: item?.image, sx: {
+                    borderRadius: BORDER_RADIUS_ELEMENT_MIDDLE,
+                    width: '100%',
+                    aspectRatio: 352 / 200,
+                    objectFit: 'cover',
+                    height: 'auto',
+                } }), jsxs(Stack, { sx: { gap: 1 }, children: [jsx(ModalTitle, { content: item?.title }), jsx(ModalDescription, { content: item?.description })] })] }));
+    return (jsx(Dialog, { open: open, onClose: onClose, PaperProps: {
+            sx: {
+                borderRadius: BORDER_RADIUS_ELEMENT_WRAPPER,
+                p: `calc(${PADDING_GAP_LAYOUT} + 8px)`,
+                minWidth: 350,
+                width: 'auto',
+                ...sx,
+            },
+        }, children: jsxs(DialogWrapper, { isForm: isForm, children: [jsx(DialogContent, { sx: { p: 0, ...sxContent }, children: jsxs(Stack, { sx: { gap: `calc(${PADDING_GAP_LAYOUT} + 8px)` }, children: [showSlider ? (jsx(Box, { sx: {
+                                    '& .slick-slider': {
+                                        position: 'relative',
+                                        paddingBottom: '40px',
+                                    },
+                                    '& .slick-dots': {
+                                        bottom: '0px',
+                                        position: 'absolute',
+                                    },
+                                    '& .slick-list': {
+                                        overflow: 'hidden',
+                                    },
+                                }, children: jsx(Slider, { ...sliderSettings, children: itemsArray.map((item, index) => (jsx("div", { children: renderCard(item) }, index))) }) })) : (renderCard(itemsArray[0])), nodeContent && jsx(Box, { sx: { width: '100%' }, children: nodeContent })] }) }), hasActions && (jsx(DialogActions, { sx: {
+                        width: '100%',
+                        mt: `calc(${PADDING_GAP_LAYOUT} + 8px)`,
+                        gap: GAP_ICON_CONTENT_BY_SIZE.large,
+                        ...sxBottom,
+                    }, children: jsxs(StackRowAlignCenter, { sx: { width: '100%' }, children: [nodeBottomLeft && jsx(Box, { sx: { width: '100%' }, children: nodeBottomLeft }), (buttonLeft || buttonCenter || buttonRight) && (jsxs(StackRow, { sx: { width: '100%', gap: PADDING_GAP_LAYOUT }, children: [buttonLeft && (jsx(Box, { sx: { flex: 1 }, children: jsx(ButtonComponent, { ...buttonLeft, fullWidth: true }) })), buttonCenter && (jsx(Box, { sx: { flex: 1 }, children: jsx(ButtonComponent, { ...buttonCenter, fullWidth: true }) })), buttonRight && (jsx(Box, { sx: { flex: 1 }, children: jsx(ButtonComponent, { ...buttonRight, fullWidth: true }) }))] }))] }) }))] }) }));
+};
+
+const CURRENCIES = ['USD', 'EUR', 'GBP', 'JPY', 'AUD', 'CAD', 'CHF', 'CNY', 'VND', 'INR'];
+// Format number with thousand separators
+const formatMoneyDisplay = (value) => {
+    if (!value)
+        return '';
+    const numericOnly = value.replace(/\D/g, '');
+    return numericOnly.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+const StyledTextField$2 = styled(MuiTextField)(({ theme }) => {
+    return {
+        '& .MuiOutlinedInput-root': {
+            '& 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[600], borderWidth: '1px' },
+            '&.Mui-error:hover fieldset': { borderColor: COLOR_ERROR[600] },
+            '&.Mui-error.Mui-focused fieldset': { borderColor: COLOR_ERROR[600], 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)',
+            },
+        },
+        '& .MuiInputBase-input': {
+            ...TYPOGRAPHY.text14Regular,
+            padding: '12px 8px',
+            color: COLOR_GRAY[900],
+            '&::placeholder': { color: COLOR_NEUTRAL[400], opacity: 0.7 },
+            '&:focus': { outline: 'none' },
+        },
+        '& .MuiInputLabel-root': {
+            ...TYPOGRAPHY.textFieldLabel,
+            color: COLOR_GRAY[800],
+            transform: 'translate(14px, -9px) scale(0.75)',
+            '&.Mui-focused': { color: COLOR_NEUTRAL[500] },
+            '&.Mui-error': { color: COLOR_ERROR[600] },
+        },
+        '& .MuiFormHelperText-root': {
+            ...TYPOGRAPHY.textFieldHelper,
+            margin: '4px 0 0 0',
+            '&.Mui-error': { color: COLOR_ERROR[600] },
+        },
+    };
+});
+const MoneyFieldComponent = ({ label = 'Sale amount', placeholder = '1,000.00', value, disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, helperText = 'This is a hint text to help user.', onChange, currency = 'USD', onCurrencyChange, iconBefore, optionCurrencies = CURRENCIES, sx, ...props }) => {
+    const [selectedCurrency, setSelectedCurrency] = useState(currency);
+    const handleCurrencyChange = (e) => {
+        const newCurrency = e.target.value;
+        setSelectedCurrency(newCurrency);
+        onCurrencyChange?.(newCurrency);
+    };
+    const handleMoneyChange = (e) => {
+        const rawValue = e.target.value.replace(/,/g, '');
+        onChange?.({ ...e, target: { ...e.target, value: rawValue } });
+    };
+    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
+                    display: 'block',
+                    ...TYPOGRAPHY.textFieldLabel,
+                    color: COLOR_GRAY[800],
+                    marginBottom: '4px',
+                }, children: label })), jsx(StyledTextField$2, { placeholder: placeholder, value: formatMoneyDisplay(value), disabled: disabled, error: error, helperText: error ? errorMessage : helperText, size: "small", fullWidth: true, onChange: handleMoneyChange, InputProps: {
+                    startAdornment: (jsx(InputAdornment, { position: "start", children: iconBefore ? iconBefore : jsx(AttachMoneyIcon, { sx: { fontSize: '18px', color: COLOR_GRAY[400], mr: 0.5 } }) })),
+                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [(success || error) && (jsx(IconElement, { icon: error ? 'info' : 'check_circle', sx: { color: error ? COLOR_ERROR[500] : COLOR_SUCCESS[500] } })), jsx(Select, { value: selectedCurrency, onChange: handleCurrencyChange, disabled: disabled, variant: "standard", sx: {
+                                        border: 'none',
+                                        outline: 'none',
+                                        '& .MuiSelect-standard': { border: 'none' },
+                                        '&.MuiInput-underline:before': { borderBottom: 'none' },
+                                        '&.MuiInput-underline:hover:before': { borderBottom: 'none' },
+                                        '&.MuiInput-underline:after': { borderBottom: 'none' },
+                                        minWidth: '70px',
+                                        fontSize: '14px',
+                                        color: COLOR_GRAY[500],
+                                    }, children: optionCurrencies.map((curr) => (jsx(MenuItem, { value: curr, children: curr }, curr))) })] }) })),
+                }, sx: {
+                    '& .MuiOutlinedInput-root': {
+                        borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
+                        ...(success && {
+                            '&.Mui-focused': {
+                                boxShadow: `0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 4px ${COLOR_SUCCESS[100]}`,
+                            },
+                        }),
+                    },
+                } }), success && !error && successMessage && (jsx(Typography, { sx: {
+                    ...TYPOGRAPHY.textFieldHelper,
+                    color: COLOR_SUCCESS[600],
+                    marginTop: '4px',
+                }, children: successMessage }))] }));
+};
+
+const COUNTRY_CODES = [
+    { code: 'US', name: 'United States', flag: '🇺🇸', value: '+1' },
+    { code: 'GB', name: 'United Kingdom', flag: '🇬🇧', value: '+44' },
+    { code: 'CA', name: 'Canada', flag: '🇨🇦', value: '+1' },
+    { code: 'AU', name: 'Australia', flag: '🇦🇺', value: '+61' },
+    { code: 'VN', name: 'Vietnam', flag: '🇻🇳', value: '+84' },
+    { code: 'JP', name: 'Japan', flag: '🇯🇵', value: '+81' },
+    { code: 'CN', name: 'China', flag: '🇨🇳', value: '+86' },
+    { code: 'IN', name: 'India', flag: '🇮🇳', value: '+91' },
+    { code: 'DE', name: 'Germany', flag: '🇩🇪', value: '+49' },
+    { code: 'FR', name: 'France', flag: '🇫🇷', value: '+33' },
+];
+const StyledTextField$1 = styled(MuiTextField)(({ theme }) => {
+    return {
+        '& .MuiOutlinedInput-root': {
+            '& 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[600], borderWidth: '1px' },
+            '&.Mui-error:hover fieldset': { borderColor: COLOR_ERROR[600] },
+            '&.Mui-error.Mui-focused fieldset': { borderColor: COLOR_ERROR[600], 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)',
+            },
+        },
+        '& .MuiInputBase-input': {
+            ...TYPOGRAPHY.text14Regular,
+            padding: '12px 8px',
+            color: COLOR_GRAY[900],
+            '&::placeholder': { color: COLOR_NEUTRAL[400], opacity: 0.7 },
+            '&:focus': { outline: 'none' },
+        },
+        '& .MuiInputLabel-root': {
+            ...TYPOGRAPHY.textFieldLabel,
+            color: COLOR_GRAY[800],
+            transform: 'translate(14px, -9px) scale(0.75)',
+            '&.Mui-focused': { color: COLOR_NEUTRAL[500] },
+            '&.Mui-error': { color: COLOR_ERROR[600] },
+        },
+        '& .MuiFormHelperText-root': {
+            ...TYPOGRAPHY.textFieldHelper,
+            margin: '4px 0 0 0',
+            '&.Mui-error': { color: COLOR_ERROR[600] },
+        },
+    };
+});
+const PhoneNumberFieldComponent = ({ label = 'Số điện thoại', placeholder = '0123 456 789', value, disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, helperText, onChange, countryCode = 'US', onCountryCodeChange, countries = COUNTRY_CODES, sx, ...props }) => {
+    const handleCountryChange = (e) => {
+        const newCode = e.target.value;
+        onCountryCodeChange?.(newCode);
+    };
+    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
+                    display: 'block',
+                    ...TYPOGRAPHY.textFieldLabel,
+                    color: COLOR_GRAY[800],
+                    marginBottom: '4px',
+                }, children: label })), jsx(StyledTextField$1, { placeholder: placeholder, value: value, disabled: disabled, error: error, helperText: error ? errorMessage : helperText, size: "small", fullWidth: true, onChange: onChange, InputProps: {
+                    startAdornment: (jsx(InputAdornment, { position: "start", sx: { mr: 0 }, children: jsx(Select, { value: countryCode, onChange: handleCountryChange, disabled: disabled, variant: "standard", sx: {
+                                border: 'none',
+                                outline: 'none',
+                                '& .MuiSelect-standard': { border: 'none' },
+                                '&.MuiInput-underline:before': { borderBottom: 'none' },
+                                '&.MuiInput-underline:hover:before': { borderBottom: 'none' },
+                                '&.MuiInput-underline:after': { borderBottom: 'none' },
+                                minWidth: '50px',
+                                fontSize: '14px',
+                                color: COLOR_GRAY[500],
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 0.5,
+                            }, children: countries.map((c) => (jsx(MenuItem, { value: c.code, children: c.code }, c.code))) }) })),
+                    endAdornment: (success || error) && (jsx(InputAdornment, { position: "end", children: jsx(IconElement, { icon: error ? 'info' : 'check_circle', sx: { color: error ? COLOR_ERROR[500] : COLOR_SUCCESS[500] } }) })),
+                }, sx: {
+                    '& .MuiOutlinedInput-root': {
+                        borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
+                        ...(success && {
+                            '&.Mui-focused': {
+                                boxShadow: `0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 4px ${COLOR_SUCCESS[100]}`,
+                            },
+                        }),
+                    },
+                } }), success && !error && successMessage && (jsx(Typography, { sx: {
+                    ...TYPOGRAPHY.textFieldHelper,
+                    color: COLOR_SUCCESS[600],
+                    marginTop: '4px',
+                }, children: successMessage }))] }));
+};
+
+const PIN_SIZES = {
+    sm: { width: 40, height: 40, fontSize: 18 },
+    md: { width: 48, height: 48, fontSize: 20 },
+    lg: { width: 56, height: 56, fontSize: 24 },
+};
+const PIN_SPACING = {
+    sm: 8,
+    md: 12,
+    lg: 16,
+};
+
+const PINComponent = ({ length = 6, value, onChange, label, error = false, errorMessage, type = 'text', disabled = false, autoFocus = false, onComplete, align = 'left', spacing = 'md', size = 'md', masked = false, borderFocusColor, sx, }) => {
+    const { palette } = useTheme();
+    const inputRefs = useRef([]);
+    useEffect(() => {
+        if (autoFocus && inputRefs.current[0]) {
+            inputRefs.current[0].focus();
+        }
+    }, [autoFocus]);
+    const handleChange = (index, val) => {
+        if (!/^\d*$/.test(val))
+            return;
+        const newValue = value.split('');
+        newValue[index] = val;
+        const updatedValue = newValue.join('').slice(0, length);
+        onChange(updatedValue);
+        if (val && index < length - 1) {
+            inputRefs.current[index + 1]?.focus();
+        }
+        if (updatedValue.length === length) {
+            onComplete?.(updatedValue);
+        }
+    };
+    const handleKeyDown = (index, e) => {
+        if (e.key === 'Backspace' && !value[index] && index > 0) {
+            inputRefs.current[index - 1]?.focus();
+        }
+    };
+    const renderPINDisplay = (index) => {
+        const inputValue = value[index] || '';
+        const isFilled = !!inputValue;
+        const sizeStyle = PIN_SIZES[size];
+        const borderColor = error ? palette.error.main : COLOR_GRAY[200];
+        const borderFocusColorValue = borderFocusColor || (error ? palette.error.main : COLOR_GRAY[900]);
+        if (type === 'bullet') {
+            return (jsxs(Box, { sx: { position: 'relative', width: sizeStyle.width, height: sizeStyle.height }, children: [jsx(TextField, { ref: (el) => {
+                            const input = el?.querySelector('input');
+                            if (input) {
+                                inputRefs.current[index] = input;
+                            }
+                        }, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), disabled: disabled, error: error, sx: {
+                            width: '100%',
+                            height: '100%',
+                            '& .MuiOutlinedInput-root': {
+                                height: '100%',
+                                padding: 0,
+                                '& input': {
+                                    textAlign: 'center',
+                                    fontSize: sizeStyle.fontSize,
+                                    fontWeight: 600,
+                                    padding: 0,
+                                    color: masked && isFilled ? 'transparent' : 'inherit',
+                                    WebkitTextFillColor: masked && isFilled ? 'transparent' : 'unset',
+                                    caretColor: palette.primary.main,
+                                    '&::placeholder': {
+                                        color: palette.action.disabled,
+                                        opacity: 1,
+                                    },
+                                },
+                                '& fieldset': {
+                                    borderColor: borderColor,
+                                    borderRadius: '8px',
+                                },
+                                '&:hover fieldset': {
+                                    borderColor: error ? palette.error.main : borderFocusColorValue,
+                                },
+                                '&.Mui-focused fieldset': {
+                                    borderColor: borderFocusColorValue,
+                                    borderWidth: 1,
+                                },
+                            },
+                            '& input': {
+                                maxLength: 1,
+                            },
+                        }, placeholder: "-" }), masked && isFilled && (jsx(Box, { sx: {
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            fontSize: sizeStyle.fontSize,
+                            fontWeight: 600,
+                            color: error ? palette.error.main : palette.text.primary,
+                            pointerEvents: 'none',
+                        }, children: "\u25CF" }))] }));
+        }
+        if (type === 'circle') {
+            return (jsxs(Box, { sx: { position: 'relative', width: sizeStyle.width, height: sizeStyle.height }, children: [jsx(TextField, { ref: (el) => {
+                            const input = el?.querySelector('input');
+                            if (input) {
+                                inputRefs.current[index] = input;
+                            }
+                        }, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), disabled: disabled, error: error, sx: {
+                            width: '100%',
+                            height: '100%',
+                            '& .MuiOutlinedInput-root': {
+                                height: '100%',
+                                padding: 0,
+                                borderRadius: '50%',
+                                '& input': {
+                                    textAlign: 'center',
+                                    fontSize: sizeStyle.fontSize,
+                                    fontWeight: 600,
+                                    padding: 0,
+                                    color: masked && isFilled ? 'transparent' : 'inherit',
+                                    WebkitTextFillColor: masked && isFilled ? 'transparent' : 'unset',
+                                    caretColor: palette.primary.main,
+                                    '&::placeholder': {
+                                        color: palette.action.disabled,
+                                        opacity: 1,
+                                    },
+                                },
+                                '& fieldset': {
+                                    borderColor: borderColor,
+                                    borderRadius: '50%',
+                                },
+                                '&:hover fieldset': {
+                                    borderColor: error ? palette.error.main : borderFocusColorValue,
+                                },
+                                '&.Mui-focused fieldset': {
+                                    borderColor: borderFocusColorValue,
+                                    borderWidth: 1,
+                                },
+                            },
+                            '& input': {
+                                maxLength: 1,
+                            },
+                        }, placeholder: "-" }), masked && isFilled && (jsx(Box, { sx: {
+                            position: 'absolute',
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            fontSize: sizeStyle.fontSize,
+                            fontWeight: 600,
+                            color: error ? palette.error.main : palette.text.primary,
+                            pointerEvents: 'none',
+                        }, children: "\u25CF" }))] }));
+        }
+        // Default text type
+        return (jsx(TextField, { ref: (el) => {
+                const input = el?.querySelector('input');
+                if (input) {
+                    inputRefs.current[index] = input;
+                }
+            }, type: "text", inputMode: "numeric", value: inputValue, onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(index, e), disabled: disabled, error: error, sx: {
+                width: sizeStyle.width,
+                '& .MuiOutlinedInput-root': {
+                    height: sizeStyle.height,
+                    padding: 0,
+                    '& input': {
+                        textAlign: 'center',
+                        fontSize: sizeStyle.fontSize,
+                        fontWeight: 600,
+                        padding: 0,
+                        '&::placeholder': {
+                            color: palette.action.disabled,
+                            opacity: 1,
+                        },
+                    },
+                    '& fieldset': {
+                        borderColor: borderColor,
+                    },
+                    '&:hover fieldset': {
+                        borderColor: error ? palette.error.main : borderFocusColorValue,
+                    },
+                    '&.Mui-focused fieldset': {
+                        borderColor: borderFocusColorValue,
+                        borderWidth: 1,
+                    },
+                },
+                '& input': {
+                    maxLength: 1,
+                },
+            }, placeholder: "-" }));
+    };
+    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Box, { sx: {
+                    mb: 1,
+                    fontSize: 14,
+                    fontWeight: 500,
+                    color: palette.text.primary,
+                }, children: label })), jsx(Box, { sx: {
+                    display: 'flex',
+                    gap: `${PIN_SPACING[spacing]}px`,
+                    justifyContent: align === 'center' ? 'center' : align === 'right' ? 'flex-end' : 'flex-start',
+                }, children: Array.from({ length }).map((_, index) => (jsx(Box, { children: renderPINDisplay(index) }, index))) }), error && errorMessage && (jsx(Box, { sx: {
+                    mt: 1,
+                    fontSize: 12,
+                    color: palette.error.main,
+                    textAlign: align,
+                }, children: errorMessage }))] }));
+};
+
+const StyledAutocomplete$1 = styled$1(Autocomplete)(({ theme }) => ({
+    '& .MuiOutlinedInput-root': {
+        padding: '8px !important',
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: '4px',
+        minHeight: '44px',
+        '& fieldset': {
+            borderColor: COLOR_NEUTRAL[300],
+        },
+        '&:hover fieldset': {
+            borderColor: COLOR_NEUTRAL[400],
+        },
+        '&.Mui-focused fieldset': {
+            borderColor: COLOR_NEUTRAL[300] + ' !important',
+            borderWidth: '1.5px',
+        },
+        '&.Mui-disabled': {
+            backgroundColor: COLOR_NEUTRAL[100],
+            '& fieldset': {
+                borderColor: COLOR_NEUTRAL[200],
+            },
+        },
+        '&.Mui-error fieldset': {
+            borderColor: COLOR_ERROR[500],
+        },
+        '&.Mui-success fieldset': {
+            borderColor: COLOR_SUCCESS[500],
+        },
+    },
+    '& .MuiInputBase-input': {
+        padding: '4px 4px !important',
+        fontSize: '14px',
+        flex: 1,
+        minWidth: '60px',
+        '&::placeholder': {
+            color: COLOR_NEUTRAL[400],
+            opacity: 1,
+        },
+        '&.Mui-disabled': {
+            color: COLOR_NEUTRAL[400],
+            WebkitTextFillColor: COLOR_NEUTRAL[400],
+        },
+    },
+    '& .MuiAutocomplete-endAdornment': {
+        paddingRight: '4px',
+    },
+    '& .MuiAutocomplete-tag': {
+        backgroundColor: COLOR_ACCENT[50],
+        border: `1px solid ${COLOR_ACCENT[200]}`,
+        color: COLOR_ACCENT[900],
+        fontSize: '12px',
+        margin: '2px',
+        '& .MuiChip-deleteIcon': {
+            color: COLOR_ACCENT[400],
+            '&:hover': {
+                color: COLOR_ACCENT[600],
+            },
+        },
+    },
+}));
+const SearchDropdownComponent = ({ value, onChange, onClear, onInputChange, onSearch, borderRadius = 6, disabled = false, multiple = false, label = '', placeholder = 'Search...', error = false, errorMessage, success = false, successMessage, helperText = '', options = [], loading = false, sx, }) => {
+    const DEBOUNCE_DELAY = 500;
+    const [inputValue, setInputValue] = useState('');
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [isLoading, setIsLoading] = useState(false);
+    const debounceTimerRef = useRef(null);
+    const onSearchRef = useRef(onSearch);
+    const onInputChangeRef = useRef(onInputChange);
+    const optionsRef = useRef(options);
+    // Update refs when props change
+    useEffect(() => {
+        onSearchRef.current = onSearch;
+        onInputChangeRef.current = onInputChange;
+        optionsRef.current = options;
+    }, [onSearch, onInputChange, options]);
+    // Normalize value to array for internal state
+    const selectedValues = useMemo(() => {
+        if (!value)
+            return [];
+        const values = Array.isArray(value) ? value : [value];
+        return values.map((v) => (typeof v === 'object' ? v : { label: String(v), value: v }));
+    }, [value]);
+    // Search logic with debounce
+    useEffect(() => {
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        // Reset to original options when input is empty
+        if (!inputValue.trim()) {
+            setFilteredOptions(optionsRef.current);
+            return;
+        }
+        debounceTimerRef.current = setTimeout(async () => {
+            const searchFn = onSearchRef.current;
+            if (searchFn) {
+                // Async search
+                setIsLoading(true);
+                try {
+                    const results = await searchFn(inputValue);
+                    setFilteredOptions(results);
+                }
+                catch (error) {
+                    console.error('Search error:', error);
+                    setFilteredOptions([]);
+                }
+                finally {
+                    setIsLoading(false);
+                }
+            }
+            else {
+                // Local filtering
+                const filtered = optionsRef.current.filter((opt) => opt.label.toLowerCase().includes(inputValue.toLowerCase()));
+                setFilteredOptions(filtered);
+            }
+            onInputChangeRef.current?.(inputValue);
+        }, DEBOUNCE_DELAY);
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, [inputValue]);
+    const handleInputChange = (event, newInputValue) => {
+        setInputValue(newInputValue);
+    };
+    const handleChange = (event, newValue) => {
+        if (multiple) {
+            const result = Array.isArray(newValue) ? newValue : newValue ? [newValue] : [];
+            onChange?.(result.length > 0 ? result : null);
+        }
+        else {
+            onChange?.(newValue || null);
+        }
+    };
+    const handleClear = () => {
+        setInputValue('');
+        setFilteredOptions(optionsRef.current);
+        onClear?.();
+    };
+    return (jsxs(Box, { sx: { width: '100%', ...sx }, children: [label && (jsx(Typography, { variant: "subtitle2", sx: {
+                    fontWeight: 500,
+                    color: COLOR_GRAY[900],
+                    marginBottom: '6px',
+                    display: 'block',
+                }, children: label })), jsx(StyledAutocomplete$1, { multiple: multiple, freeSolo: true, options: filteredOptions, getOptionLabel: (option) => {
+                    if (!option)
+                        return '';
+                    if (typeof option === 'object' && 'label' in option)
+                        return option.label;
+                    return String(option);
+                }, isOptionEqualToValue: (option, val) => {
+                    if (!option || !val)
+                        return false;
+                    if (typeof option === 'object' && typeof val === 'object' && 'value' in option && 'value' in val) {
+                        return option.value === val.value;
+                    }
+                    return false;
+                }, value: multiple ? selectedValues : selectedValues[0] || null, inputValue: inputValue, onInputChange: handleInputChange, onChange: handleChange, disabled: disabled || loading, loading: isLoading || loading, noOptionsText: inputValue ? 'No results found' : 'Type to search', sx: {
+                    '& .MuiOutlinedInput-root': {
+                        borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
+                        borderColor: error ? COLOR_ERROR[500] : success ? COLOR_SUCCESS[500] : undefined,
+                    },
+                }, renderInput: (params) => (jsx(TextField, { ...params, placeholder: placeholder, variant: "outlined", size: "small", error: error, InputProps: {
+                        ...params.InputProps,
+                        startAdornment: (jsxs(Fragment, { children: [jsx(InputAdornment, { position: "start", sx: { marginLeft: '4px', marginRight: '0px' }, children: jsx(SearchIcon, { sx: { color: '#999', fontSize: '18px' } }) }), params.InputProps?.startAdornment] })),
+                    } })), renderTags: (value, getTagProps) => value.map((option, index) => {
+                    const label = typeof option === 'object' && option && 'label' in option ? option.label : String(option);
+                    return jsx(Chip, { ...getTagProps({ index }), label: label, size: "small" });
+                }), renderOption: (props, option) => {
+                    const { key, ...otherProps } = props;
+                    const label = option?.label || '';
+                    return (jsx(Box, { ...otherProps, component: "li", children: label }, key));
+                }, componentsProps: {
+                    clearIndicator: {
+                        onClick: handleClear,
+                    },
+                } }), error && errorMessage && (jsx(Box, { sx: {
+                    fontSize: '12px',
+                    color: COLOR_ERROR[500],
+                    marginTop: '4px',
+                }, children: errorMessage })), success && successMessage && (jsx(Box, { sx: {
+                    fontSize: '12px',
+                    color: COLOR_SUCCESS[500],
+                    marginTop: '4px',
+                }, children: successMessage })), helperText && !error && !success && (jsx(Box, { sx: {
+                    fontSize: '12px',
+                    color: COLOR_NEUTRAL[500],
+                    marginTop: '4px',
+                }, children: helperText }))] }));
+};
+
+const StyledAutocomplete = styled$1(Autocomplete)(({ theme }) => ({
+    '& .MuiOutlinedInput-root': {
+        padding: '0 !important',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        '& fieldset': {
+            borderColor: COLOR_NEUTRAL[300],
+        },
+        '&:hover fieldset': {
+            borderColor: COLOR_NEUTRAL[400],
+        },
+        '&.Mui-focused fieldset': {
+            borderColor: COLOR_NEUTRAL[300] + ' !important',
+        },
+        '&.Mui-disabled': {
+            backgroundColor: COLOR_NEUTRAL[100],
+            '& fieldset': {
+                borderColor: COLOR_NEUTRAL[200],
+            },
+        },
+    },
+    '& .MuiInputBase-input': {
+        padding: '8px 8px 8px 0 !important',
+        fontSize: '14px',
+        flex: 1,
+        '&::placeholder': {
+            color: COLOR_NEUTRAL[400],
+            opacity: 1,
+        },
+        '&.Mui-disabled': {
+            color: COLOR_NEUTRAL[400],
+            WebkitTextFillColor: COLOR_NEUTRAL[400],
+        },
+    },
+    '& .MuiAutocomplete-endAdornment': {
+        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' },
+    medium: { width: '44px', height: '24px', thumbSize: '20px' },
+};
+const SWITCH_COLORS = {
+    dark: {
+        trackBackgroundColor: '#F2F4F7',
+        trackHoverColor: '#EAECF0',
+        trackCheckedColor: '#07554B',
+        thumbFocusColor: '#F4EBFF',
+    },
+    light: {
+        trackBackgroundColor: '#F9F5FF',
+        trackHoverColor: '#F4EBFF',
+        trackCheckedColor: '#E9D7FE',
+        thumbFocusColor: '#F4EBFF',
+    },
+};
+const StyledSwitch = styled$1(Switch, {
+    shouldForwardProp: (prop) => prop !== 'size',
+})(({ theme, size = 'medium' }) => {
+    const mode = theme.palette.mode;
+    const { width, height, thumbSize } = SWITCH_SIZE[size];
+    const { trackBackgroundColor, trackHoverColor, trackCheckedColor, thumbFocusColor } = SWITCH_COLORS[mode] || SWITCH_COLORS.light;
+    return {
+        width,
+        height,
+        padding: 0,
+        '& .MuiSwitch-switchBase': {
+            padding: 0,
+            margin: 2,
+            transitionDuration: '300ms',
+            '&.Mui-checked': {
+                transform: `translateX(${size === 'small' ? '16px' : '20px'})`,
+                color: '#FFFFFF',
+                '& + .MuiSwitch-track': {
+                    backgroundColor: trackCheckedColor,
+                    opacity: 1,
+                    border: 0,
+                },
+            },
+            '&.Mui-focusVisible .MuiSwitch-thumb': {
+                color: thumbFocusColor,
+                border: '6px solid #fff',
+                boxShadow: '0 0 0 4px #F4EBFF',
+            },
+            '&.Mui-disabled .MuiSwitch-thumb': {
+                color: '#FFFFFF',
+            },
+            '&.Mui-disabled + .MuiSwitch-track': {
+                backgroundColor: trackBackgroundColor,
+            },
+        },
+        '& .MuiSwitch-thumb': {
+            boxSizing: 'border-box',
+            width: thumbSize,
+            height: thumbSize,
+        },
+        '& .MuiSwitch-track': {
+            borderRadius: 26 / 2,
+            backgroundColor: trackBackgroundColor,
+            opacity: 1,
+            transition: theme.transitions.create(['background-color'], {
+                duration: 500,
+            }),
+            '&:hover': {
+                backgroundColor: trackHoverColor,
+            },
+        },
+    };
+});
+const SwitchComponent = ({ title, sx, ...switchProps }) => {
+    if (!title) {
+        return jsx(StyledSwitch, { disableRipple: true, ...switchProps });
+    }
+    return (jsxs(StackRowAlignCenterJustEnd, { sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '12px',
+            ...sx,
+        }, children: [jsx(StyledSwitch, { disableRipple: true, ...switchProps }), title] }));
+};
+
+const TAB_STYLES = {
+    position: 'relative',
+    padding: '18px 16px',
+    cursor: 'pointer',
+    minHeight: 44,
+    '&:hover': {
+        bgcolor: '#F3F4F6',
+    },
+};
+const TAB_UNDERLINE_STYLES = {
+    width: '1px',
+    alignSelf: 'stretch',
+    bgcolor: '#E5E7EB',
+};
+const TABS_CONTAINER_HORIZONTAL = {
+    display: 'flex',
+    alignItems: 'center',
+    borderBottom: '2px solid #E5E7EB',
+};
+const TAB_ACTIVE_BACKGROUND_HORIZONTAL = {
+    position: 'absolute',
+    bottom: -2,
+    left: 0,
+    right: 0,
+    height: '2px',
+    bgcolor: '#0F766E',
+};
+const TABS_CONTAINER_VERTICAL = {
+    position: 'relative',
+    padding: '10px',
+    cursor: 'pointer',
+    minHeight: 40,
+    '&:hover': {
+        bgcolor: '#F3F4F6',
+    },
+    width: '100%',
+};
+const TAB_ACTIVE_BACKGROUND_VERTICAL = {
+    position: 'absolute',
+    inset: 0,
+    bgcolor: '#E6EEED',
+    borderRadius: 1,
+};
+var TabColors;
+(function (TabColors) {
+    TabColors["ACTIVE_TEXT"] = "#0F766E";
+    TabColors["INACTIVE_TEXT"] = "#6B7280";
+    TabColors["HOVER_BACKGROUND"] = "#F3F4F6";
+    TabColors["MENU_ACTIVE_BACKGROUND"] = "#E0F2FE";
+})(TabColors || (TabColors = {}));
+
+const TabsComponent = ({ idSelect, tabs, size, direction = 'row', maxDisplay, onChange, sx, sxTabs, sxWrapper, }) => {
+    // state
+    const [selected, setSelected] = useState(idSelect);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const layoutGroupId = useId();
+    useEffect(() => {
+        setSelected(idSelect);
+    }, [idSelect]);
+    const isVertical = direction === 'column';
+    const showOverflow = !isVertical && maxDisplay && tabs.length > maxDisplay;
+    const visibleTabs = showOverflow ? tabs.slice(0, maxDisplay) : tabs;
+    const overflowTabs = showOverflow ? tabs.slice(maxDisplay) : [];
+    // function
+    const handleOpenDropdown = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleTabClick = (tab) => {
+        setSelected(tab.id);
+        onChange?.(tab.id);
+        if (tab.onClick) {
+            tab.onClick();
+        }
+    };
+    const handleOverflowItemClick = (tab) => {
+        handleTabClick(tab);
+        setAnchorEl(null);
+    };
+    return (jsx(React.Fragment, { children: isVertical ? (jsx(LayoutGroup, { id: layoutGroupId, children: jsx(Stack, { direction: "column", sx: { width: 'fit-content', gap: PADDING_GAP_ITEM_SMALL, ...sxWrapper }, children: tabs.map((tab) => {
+                    const isActive = tab.id === selected;
+                    return (jsx(LinkElement, { href: tab.href, onClick: tab.onClick, id: tab.id, children: jsxs(Box, { sx: { position: 'relative' }, children: [jsx(Stack, { component: motion.div, sx: {
+                                        ...TABS_CONTAINER_VERTICAL,
+                                        color: isActive ? TabColors.ACTIVE_TEXT : TabColors.INACTIVE_TEXT,
+                                    }, onTap: () => handleTabClick(tab), children: jsxs(Box, { sx: {
+                                            ...TYPOGRAPHY_STYLES.textMd.medium,
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: tab.icon ? 0.5 : 0,
+                                            position: 'relative',
+                                            zIndex: 1,
+                                            ...sx,
+                                        }, children: [tab.icon && jsx(IconElement, { size: size, icon: tab.icon }), tab.name] }) }), isActive && (jsx(Box, { component: motion.div, sx: { ...TAB_ACTIVE_BACKGROUND_VERTICAL }, layoutId: `${layoutGroupId}-background` }))] }) }, tab.id));
+                }) }) })) : (jsx(LayoutGroup, { id: layoutGroupId, children: jsxs(Box, { sx: { position: 'relative', display: 'flex', alignItems: 'center' }, children: [jsxs(Box, { sx: { ...TABS_CONTAINER_HORIZONTAL }, children: [visibleTabs.map((tab) => {
+                                const isActive = tab.id === selected;
+                                return (jsx(LinkElement, { href: tab.href, onClick: tab.onClick, id: tab.id, children: jsxs(Stack, { component: motion.div, sx: {
+                                            color: isActive ? TabColors.ACTIVE_TEXT : TabColors.INACTIVE_TEXT,
+                                            position: 'relative',
+                                            padding: '18px 16px',
+                                            cursor: 'pointer',
+                                            minHeight: 40,
+                                            '&:hover': {
+                                                bgcolor: TabColors.HOVER_BACKGROUND,
+                                            },
+                                            ...sxTabs,
+                                        }, onTap: () => handleTabClick(tab), children: [jsxs(Box, { sx: {
+                                                    ...TYPOGRAPHY_STYLES.textMd.medium,
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    gap: tab.icon ? 0.5 : 0,
+                                                    ...sx,
+                                                }, children: [tab.icon && jsx(IconElement, { size: size, icon: tab.icon }), tab.name] }), isActive && (jsx(Box, { component: motion.div, sx: { ...TAB_ACTIVE_BACKGROUND_HORIZONTAL }, layoutId: `${layoutGroupId}-underline` }))] }) }, tab.id));
+                            }), showOverflow && (jsxs(React.Fragment, { children: [jsx(Box, { sx: { ...TAB_UNDERLINE_STYLES } }), jsx(Stack, { sx: {
+                                            ...TAB_STYLES,
+                                        }, onClick: handleOpenDropdown, children: jsx(IconElement, { icon: "more_horiz", size: size }) })] }))] }), jsx(Menu, { disableScrollLock: true, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => setAnchorEl(null), anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'left',
+                        }, transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'left',
+                        }, children: overflowTabs.map((tab) => {
+                            const isActive = tab.id === selected;
+                            return (jsx(MenuItem, { onClick: () => handleOverflowItemClick(tab), sx: {
+                                    color: isActive ? TabColors.ACTIVE_TEXT : TabColors.INACTIVE_TEXT,
+                                    bgcolor: isActive ? TabColors.MENU_ACTIVE_BACKGROUND : 'transparent',
+                                    '&:hover': {
+                                        bgcolor: isActive ? TabColors.MENU_ACTIVE_BACKGROUND : TabColors.HOVER_BACKGROUND,
+                                    },
+                                }, children: jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: tab.icon ? 0.5 : 0,
+                                    }, children: [tab.icon && jsx(IconElement, { size: size, icon: tab.icon }), tab.name] }) }, tab.id));
+                        }) })] }) })) }));
+};
+
+const TextAreaComponent = ({ label = '', placeholder = '', value = '', disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, onChange, onBlur, helperText = '', rows = 4, maxLength, sx, }) => {
+    const borderRadiusValue = borderRadius === 'max' ? '100px' : `${borderRadius}px`;
+    const getHelperText = () => {
+        if (error && errorMessage)
+            return errorMessage;
+        if (success && successMessage)
+            return successMessage;
+        if (helperText)
+            return helperText;
+        return '';
+    };
+    const getHelperTextColor = () => {
+        if (error)
+            return COLOR_ERROR[500];
+        if (success)
+            return COLOR_SUCCESS[500];
+        return COLOR_NEUTRAL[400];
+    };
+    const getBorderColor = () => {
+        if (error)
+            return COLOR_ERROR[500];
+        if (success)
+            return COLOR_SUCCESS[500];
+        return COLOR_NEUTRAL[300];
+    };
+    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
+                    display: 'block',
+                    ...TYPOGRAPHY.textFieldLabel,
+                    color: COLOR_GRAY[800],
+                    marginBottom: '4px',
+                }, children: label })), jsxs(Box, { sx: { position: 'relative' }, children: [jsx(TextField, { fullWidth: true, multiline: true, rows: rows, placeholder: placeholder, value: value, disabled: disabled, onChange: (e) => onChange?.(e.target.value), onBlur: (e) => onBlur?.(e.target.value), inputProps: {
+                            maxLength: maxLength,
+                            style: {
+                                ...TYPOGRAPHY.text14Regular,
+                                paddingBottom: maxLength ? '24px' : '0px',
+                            },
+                        }, sx: {
+                            '& .MuiOutlinedInput-root': {
+                                borderRadius: borderRadiusValue,
+                                backgroundColor: disabled ? COLOR_NEUTRAL[100] : 'white',
+                                transition: 'all 0.2s ease',
+                                '& fieldset': {
+                                    borderColor: getBorderColor(),
+                                },
+                                '&:hover fieldset': {
+                                    borderColor: disabled ? getBorderColor() : error ? COLOR_ERROR[500] : COLOR_NEUTRAL[400],
+                                },
+                                '&.Mui-focused fieldset': {
+                                    borderColor: error ? COLOR_ERROR[500] : COLOR_NEUTRAL[400],
+                                    borderWidth: '1.5px',
+                                },
+                            },
+                            '& .MuiOutlinedInput-input': {
+                                color: value ? COLOR_GRAY[900] : COLOR_NEUTRAL[400],
+                                '&::placeholder': {
+                                    color: COLOR_NEUTRAL[400],
+                                    opacity: 1,
+                                },
+                                '&:disabled': {
+                                    color: COLOR_NEUTRAL[400],
+                                    WebkitTextFillColor: COLOR_NEUTRAL[400],
+                                },
+                            },
+                            '& .MuiOutlinedInput-notchedOutline': {
+                                borderColor: getBorderColor(),
+                            },
+                        } }), maxLength && (jsxs(Box, { sx: {
+                            position: 'absolute',
+                            bottom: '8px',
+                            right: '12px',
+                            fontSize: '12px',
+                            color: COLOR_NEUTRAL[400],
+                            pointerEvents: 'none',
+                        }, children: ["(", value?.length, "/", maxLength, ")"] }))] }), getHelperText() && (jsx(Box, { sx: {
+                    color: getHelperTextColor(),
+                    marginTop: '4px',
+                    ...TYPOGRAPHY.textFieldHelper,
+                }, children: getHelperText() }))] }));
+};
+
+const StyledTextField = styled(MuiTextField)(({ theme }) => {
+    return {
+        '& .MuiOutlinedInput-root': {
+            '& 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], borderWidth: '1px' },
+            '&.Mui-error:hover 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)',
+            },
+        },
+        '& .MuiInputBase-input': {
+            ...TYPOGRAPHY.text14Regular,
+            padding: '12px 16px',
+            color: COLOR_GRAY[900],
+            '&::placeholder': { color: COLOR_NEUTRAL[400], opacity: 0.7 },
+            '&:focus': { outline: 'none' },
+        },
+        '& .MuiInputLabel-root': {
+            ...TYPOGRAPHY.textFieldLabel,
+            color: COLOR_GRAY[800],
+            transform: 'translate(14px, -9px) scale(0.75)',
+            '&.Mui-focused': { color: COLOR_NEUTRAL[500] },
+            '&.Mui-error': { color: COLOR_ERROR[600] },
+        },
+        '& .MuiFormHelperText-root': {
+            ...TYPOGRAPHY.textFieldHelper,
+            margin: '4px 0 0 0',
+            '&.Mui-error': { color: COLOR_ERROR[600] },
+        },
+    };
+});
+const TextFieldComponent = ({ label, placeholder = 'Placeholder', value, disabled = false, error = false, success = false, errorMessage, successMessage, borderRadius = 6, helperText, onChange, iconBefore, iconAfter, sx, ...props }) => {
+    return (jsxs(Box, { sx: { ...sx }, children: [label && (jsx(Typography, { sx: {
+                    display: 'block',
+                    ...TYPOGRAPHY.textFieldLabel,
+                    color: COLOR_GRAY[800],
+                    marginBottom: '4px',
+                }, children: label })), jsx(StyledTextField, { placeholder: placeholder, value: value, disabled: disabled, error: error, helperText: error ? errorMessage : helperText, size: "small", fullWidth: true, onChange: onChange, InputProps: {
+                    startAdornment: iconBefore ? jsx(InputAdornment, { position: "start", children: iconBefore }) : undefined,
+                    endAdornment: iconAfter ? jsx(InputAdornment, { position: "end", children: iconAfter }) : undefined,
+                }, sx: {
+                    '& .MuiOutlinedInput-root': {
+                        borderRadius: borderRadius === 'max' ? '100px' : `${borderRadius}px`,
+                        ...(success && {
+                            '&.Mui-focused': {
+                                boxShadow: `0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 0 0 4px ${COLOR_SUCCESS[100]}`,
+                            },
+                        }),
+                    },
+                }, ...props }), success && !error && successMessage && (jsx(Typography, { sx: {
+                    ...TYPOGRAPHY.textFieldHelper,
+                    color: COLOR_SUCCESS[500],
+                    marginTop: '4px',
+                }, children: successMessage }))] }));
+};
+
+const SX_STYLES = {
+    progressBar: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        backgroundColor: COLOR_GRAY[200],
+        opacity: 0.8,
+        transition: 'width 0.3s ease, opacity 0.3s ease',
+        animation: 'wave 1.5s linear infinite',
+        '@keyframes wave': {
+            '0%': { backgroundPosition: '0% 0%' },
+            '50%': { backgroundPosition: '100% 0%' },
+            '100%': { backgroundPosition: '0% 0%' },
+        },
+    },
+    imageIcon: {
+        width: '40px',
+        height: '40px',
+        flexShrink: 0,
+        position: 'relative',
+        zIndex: 1,
+    },
+    contentBox: {
+        flexGrow: 1,
+        minWidth: 0,
+        position: 'relative',
+        zIndex: 1,
+    },
+    textBox: {
+        minWidth: 0,
+        flexGrow: 1,
+        mr: 2,
+    },
+    actionBox: {
+        flexShrink: 0,
+        display: 'flex',
+        alignItems: 'center',
+        position: 'relative',
+        zIndex: 1,
+    },
+    linearProgress: {
+        mt: 1,
+        width: '100%',
+    },
+};
+
+const VIDEO_EXTENSIONS = ['mp4', 'mov', 'avi', 'wmv', 'flv', 'mkv', 'webm'];
+const ICON_PATH = {
+    VIDEO: '/images/icon/film.svg',
+    FILE: '/images/icon/file.svg',
+};
+// ============================================================================
+// Helper Functions
+// ============================================================================
+const formatFileSize = (bytes) => {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+const getFileIcon = (fileName) => {
+    const ext = fileName.split('.').pop()?.toLowerCase();
+    return ext && VIDEO_EXTENSIONS.includes(ext) ? ICON_PATH.VIDEO : ICON_PATH.FILE;
+};
+// ============================================================================
+// Component
+// ============================================================================
+const UploaderItemComponent = ({ file, progress = 0, status = 'pending', onDelete, onRetry, isProcess = true, borderSuccess, borderError = COLOR_ERROR[600], sx, }) => {
+    // Memoize
+    const iconSrc = useMemo(() => getFileIcon(file.name), [file.name]);
+    // Status flags
+    const isCompleted = status === 'success';
+    const isFailed = status === 'failed';
+    const isUploading = status === 'uploading';
+    // Determine colors based on status
+    const borderColor = isFailed
+        ? String(borderError)
+        : isCompleted && borderSuccess
+            ? String(borderSuccess)
+            : '#e0e0e0';
+    const textColor = isFailed ? String(borderError) : '#737373';
+    const subtitleColor = isFailed ? String(borderError) : '#a3a3a3';
+    // Render progress info
+    const renderProgressInfo = () => {
+        if (isUploading && !isCompleted)
+            return ` • ${Math.round(progress)}% uploaded`;
+        if (isFailed)
+            return ' • Upload failed';
+        return '';
+    };
+    return (jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'flex-start',
+            padding: '16px',
+            border: '1px solid',
+            borderColor: borderColor,
+            borderRadius: '8px',
+            gap: '16px',
+            position: 'relative',
+            overflow: 'hidden',
+            transition: 'background-color 0.3s ease',
+            backgroundColor: 'background.paper',
+            ...sx,
+        }, children: [!isProcess && isUploading && !isCompleted && !isFailed && (jsx(Box, { sx: { ...SX_STYLES.progressBar, width: `${progress}%` } })), jsx(Box, { component: "img", src: iconSrc, alt: "file icon", sx: SX_STYLES.imageIcon }), jsxs(Box, { sx: SX_STYLES.contentBox, children: [jsxs(StackRowAlignCenterJustBetween, { children: [jsxs(Box, { sx: SX_STYLES.textBox, children: [jsx(Typography, { noWrap: true, title: file.name, sx: { ...TYPOGRAPHY.text14Medium, color: textColor }, children: file.name }), jsxs(Typography, { sx: { ...TYPOGRAPHY.text14Regular, color: subtitleColor }, children: [formatFileSize(file.size), renderProgressInfo()] })] }), jsxs(Box, { sx: SX_STYLES.actionBox, children: [!isProcess && isUploading && !isCompleted && (jsx(Box, { sx: { position: 'relative', display: 'inline-flex', mr: 1 }, children: jsx(CircularProgress, { variant: "determinate", value: progress, color: "success", size: 24 }) })), isCompleted && jsx(CheckCircleIcon, { color: "success", sx: { mr: 1 } }), isFailed && onRetry && (jsx(IconButton, { size: "small", onClick: onRetry, title: "Retry upload", children: jsx(RefreshIcon, { fontSize: "small", sx: { color: borderError } }) })), !isFailed && onDelete && (jsx(IconButton, { size: "small", onClick: onDelete, children: jsx(IconElement, { icon: "delete" }) }))] })] }), isProcess && isUploading && (jsx(Box, { sx: SX_STYLES.linearProgress, children: jsx(LinearProgress, { variant: "determinate", value: progress, color: "success", sx: { height: 8, borderRadius: 4 } }) }))] })] }));
+};
+
+const UploaderComponent = ({ onFilesSelected, accept = '*', multiple = true, children, sx, labelSx, uploadLabel = 'Click to upload', appearance, files: externalFiles, onDeleteFile, onRetryFile, borderError, }) => {
+    const fileInputRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    // Sử dụng external files nếu có, nếu không hiển thị rỗng
+    const displayFiles = externalFiles || [];
+    const handleClick = () => {
+        fileInputRef.current?.click();
+    };
+    const handleFileChange = (event) => {
+        const selectedFiles = event.target.files;
+        if (selectedFiles) {
+            const fileArray = Array.from(selectedFiles);
+            onFilesSelected(fileArray);
+        }
+        event.target.value = '';
+    };
+    const handleDeleteFile = (file) => {
+        if (onDeleteFile) {
+            onDeleteFile(file);
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        const files = e.dataTransfer.files;
+        if (files) {
+            onFilesSelected(Array.from(files));
+        }
+    };
+    return (jsxs(Box, { sx: {
+            border: '2px solid',
+            borderColor: appearance?.borderColor || 'action.selected',
+            borderRadius: '8px',
+            padding: '32px 24px',
+            textAlign: 'center',
+            cursor: 'pointer',
+            transition: 'all 0.3s ease',
+            backgroundColor: isDragging ? 'action.selected' : appearance?.background || 'background.paper',
+            '&:hover': {
+                borderColor: appearance?.borderColorHover || appearance?.borderColor || 'primary.main',
+                filter: 'brightness(0.92)',
+            },
+            ...sx,
+        }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [jsx("input", { ref: fileInputRef, type: "file", accept: accept, multiple: multiple, onChange: handleFileChange, style: { display: 'none' } }), displayFiles.length === 0 && (jsx(Fragment, { children: children ? (jsxs(Box, { children: [children, jsxs(Box, { component: "p", sx: {
+                                color: 'primary.main',
+                                textDecoration: 'underline',
+                                fontWeight: 500,
+                                fontSize: '14px',
+                                marginTop: '12px',
+                                margin: '12px 0 0 0',
+                                ...labelSx,
+                            }, children: [uploadLabel, " or drag and drop"] })] })) : (jsxs(Box, { children: [jsx(Box, { component: "img", src: "/images/icon/uploader.svg", alt: "Upload icon", sx: {
+                                width: '46px',
+                                height: '46px',
+                                marginBottom: '12px',
+                            } }), jsxs(Box, { component: "p", sx: {
+                                color: 'primary.main',
+                                textDecoration: 'underline',
+                                fontWeight: 500,
+                                fontSize: '14px',
+                                margin: 0,
+                                ...labelSx,
+                            }, children: [uploadLabel, " or drag and drop"] })] })) })), displayFiles && displayFiles.length > 0 && (jsx(Box, { sx: {
+                    marginTop: '24px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '12px',
+                    textAlign: 'left',
+                }, onClick: (e) => e.stopPropagation(), children: displayFiles.map((item, index) => (jsx(UploaderItemComponent, { file: item.file, progress: item.progress, status: item.status, isProcess: item.isProcess ?? true, onDelete: () => handleDeleteFile(item.file), onRetry: () => onRetryFile?.(item.id), borderSuccess: appearance?.borderSuccess, borderError: borderError }, item.id || index))) }))] }));
+};
+
+export { AVATAR_SIZES, AvatarColor, AvatarComponent, AvatarGroupComponent as AvatarGroup, AvatarLabelGroupComponent as AvatarLabelGroup, AvatarProfileComponent as AvatarProfile, AvatarUserComponent as AvatarUser, BADGE_FONT_SIZES, BADGE_SIZES, BadgeImage, BadgeLive, BadgeNumber, BadgeOnline, BreadcrumbsComponent as Breadcrumbs, ButtonBarComponent as ButtonBar, ButtonComponent, COLOR_ACCENT, COLOR_BRAND, COLOR_ERROR, COLOR_GRAY, COLOR_INFO, COLOR_NEUTRAL, COLOR_SUCCESS, COLOR_WARNING, CheckboxComponent as Checkbox, ChipComponent as Chip, DateFieldComponent as DateField, DateRangePickerComponent as DateRangePicker, DialogWrapper, DropdownFieldComponent as DropdownField, FONT_FAMILY, FONT_SIZE, FONT_STYLE, FONT_WEIGHT, GridComponent as Grid, IconElement, ImageElement, ImageSizeType, InputStepperComponent as InputStepper, LINE_HEIGHT, LinkElement, LinkFieldComponent as LinkField, LinkInternalElement, MAP_SIZE, ModalComponent as Modal, ModalCardComponent as ModalCard, ModalDescription, ModalIcon, ModalTitle, MoneyFieldComponent as MoneyField, PINComponent as PIN, PhoneNumberFieldComponent as PhoneField, SIZE_EXTRA_LARGE, style_constant as STYLE, SearchDropdownComponent as SearchDropdown, SearchFieldComponent as SearchField, SwitchComponent as Switch, TYPOGRAPHY, TYPOGRAPHY_STYLES, TabsComponent as Tabs, TextAreaComponent as TextArea, TextFieldComponent as TextField, TypographyOneLine, UploaderComponent as Uploader, createTypography, getBadgePosition };
+//# sourceMappingURL=index.js.map