@deepnoid/ui 0.1.223 → 1.0.0

package/dist/index.js

@@ -135,6 +135,7 @@ __export(index_exports, {
   Select: () => select_default,
   SimpleBarChart: () => simpleBarChart_default,
   Skeleton: () => skeleton_default,
+  Slider: () => slider_default,
   StarRating: () => starRating_default,
   Switch: () => switch_default,
   Table: () => table_default,
@@ -163,141 +164,349 @@ var import_tailwind_variants = require("tailwind-variants");
 // ../tailwind-config/src/plugin.ts
 var import_plugin = __toESM(require_plugin());
 
+// ../tailwind-config/src/colors/primitive-palette.ts
+var primitivePalette = {
+  bg: {
+    "01": "#040811",
+    "02": "#040811",
+    "03": "#14161E",
+    "04": "#070414",
+    "05": "#070C12",
+    "06": "#202123"
+  },
+  gray: {
+    cool: {
+      50: "#F7F7F8",
+      100: "#EEEEF0",
+      200: "#D8D9DF",
+      300: "#B6B8C3",
+      400: "#999CA9",
+      500: "#717486",
+      600: "#5B5E6E",
+      700: "#4A4C5A",
+      800: "#40424C",
+      900: "#36373F",
+      950: "#25252C"
+    },
+    warm: {
+      50: "#F6F6F6",
+      100: "#E7E7E7",
+      200: "#D1D1D1",
+      300: "#B0B0B0",
+      400: "#888888",
+      500: "#6D6D6D",
+      600: "#5D5D5D",
+      700: "#525252",
+      800: "#454545",
+      900: "#3D3D3D",
+      950: "#25252C"
+    }
+  },
+  opacity: {
+    white: {
+      "0": "#FFFFFF, 0",
+      5: "#FFFFFF, 5",
+      10: "#FFFFFF, 10",
+      20: "#FFFFFF, 20",
+      30: "#FFFFFF, 30",
+      40: "#FFFFFF, 40",
+      50: "#FFFFFF, 50",
+      60: "#FFFFFF, 60",
+      70: "#FFFFFF, 70",
+      80: "#FFFFFF, 80",
+      90: "#FFFFFF, 90"
+    },
+    black: {
+      "0": "#000000, 0",
+      5: "#000000, 5",
+      10: "#000000, 10",
+      20: "#000000, 20",
+      30: "#000000, 30",
+      40: "#000000, 40",
+      50: "#000000, 50",
+      60: "#000000, 60",
+      70: "#000000, 70",
+      80: "#000000, 80",
+      90: "#000000, 90"
+    }
+  },
+  red: {
+    50: "#FEF2F2",
+    100: "#FEE9E9",
+    200: "#FCCFD2",
+    300: "#F9A8AC",
+    400: "#F57780",
+    500: "#EC4757",
+    600: "#D82640",
+    700: "#B71934",
+    800: "#991832",
+    900: "#831831",
+    950: "#831831"
+  },
+  rose: {
+    50: "#FDF4F6",
+    100: "#F9E9EC",
+    200: "#F4D8DD",
+    300: "#E9B8C2",
+    400: "#DF96A6",
+    500: "#CB6881",
+    600: "#B54969",
+    700: "#973957",
+    800: "#7F324D",
+    900: "#6A2740",
+    950: "#3C1523"
+  },
+  hotPink: {
+    50: "#FDF2F7",
+    100: "#FDE6F0",
+    200: "#FCCEE3",
+    300: "#FBA6CA",
+    400: "#F76FA6",
+    500: "#F04485",
+    600: "#E2326C",
+    700: "#C21448",
+    800: "#A1133C",
+    900: "#861535",
+    950: "#52051B"
+  },
+  sepia: {
+    50: "#FCF5F4",
+    100: "#FAE9E9",
+    200: "#F5D6D7",
+    300: "#EDB4B6",
+    400: "#E28A8F",
+    500: "#D45F69",
+    600: "#BE4051",
+    700: "#9F3142",
+    800: "#862B3C",
+    900: "#6B2433",
+    950: "#320E15"
+  },
+  orange: {
+    50: "#FEF7EE",
+    100: "#FDEDD7",
+    200: "#F9D8AF",
+    300: "#F5BB7C",
+    400: "#F09447",
+    500: "#EC7723",
+    600: "#E15F19",
+    700: "#E15F19",
+    800: "#92391A",
+    900: "#763118",
+    950: "#40160A"
+  },
+  yellow: {
+    50: "#F9F2E5",
+    100: "#F5E6BC",
+    200: "#FFE9BC",
+    300: "#FFD174",
+    400: "#F8BE4A",
+    500: "#EAAD30",
+    600: "#D77908",
+    700: "#B2550B",
+    800: "#91420F",
+    900: "#773610",
+    950: "#441B04"
+  },
+  tree: {
+    50: "#F5F3F1",
+    100: "#E5E1DC",
+    200: "#CCC5BC",
+    300: "#AFA395",
+    400: "#978878",
+    500: "#907E6F",
+    600: "#756459",
+    700: "#5F4F49",
+    800: "#524541",
+    900: "#483D3B",
+    950: "#282120"
+  },
+  brown: {
+    50: "#F6F3F0",
+    100: "#F4EDEC",
+    200: "#EBDFDD",
+    300: "#DCC9C5",
+    400: "#C6A9A3",
+    500: "#B08983",
+    600: "#A27E77",
+    700: "#7F5D56",
+    800: "#6A4F4A",
+    900: "#5B4541",
+    950: "#2C1E1C"
+  },
+  lime: {
+    50: "#F7FFE5",
+    100: "#ECFFC7",
+    200: "#D9FF95",
+    300: "#BDFE58",
+    400: "#A1F524",
+    500: "#82DC06",
+    600: "#63B000",
+    700: "#4B8506",
+    800: "#3E690B",
+    900: "#34580F",
+    950: "#193102"
+  },
+  green: {
+    50: "#E7F3EB",
+    100: "#DFF9EA",
+    200: "#CEECDA",
+    300: "#9CD4B3",
+    400: "#6EC092",
+    500: "#3FA46B",
+    600: "#209754",
+    700: "#1E7745",
+    800: "#1D5E3A",
+    900: "#194E32",
+    950: "#082B19"
+  },
+  timberGreen: {
+    50: "#F1FCF5",
+    100: "#DFF9EA",
+    200: "#B5DACD",
+    300: "#8ABFAF",
+    400: "#60A18F",
+    500: "#468675",
+    600: "#366B5F",
+    700: "#2E574D",
+    800: "#2A4641",
+    900: "#1D2F2B",
+    950: "#11221E"
+  },
+  teal: {
+    50: "#E2F1F0",
+    100: "#C9EBE8",
+    200: "#C7E8E5",
+    300: "#8AD0D0",
+    400: "#67C4C4",
+    500: "#39A6A7",
+    600: "#258386",
+    700: "#1B666A",
+    800: "#1A5255",
+    900: "#1A4447",
+    950: "#09272A"
+  },
+  lightBlue: {
+    50: "#F2F8FD",
+    100: "#E3EFFB",
+    200: "#C1E0F6",
+    300: "#8BC6EE",
+    400: "#3DA2E1",
+    500: "#258FD2",
+    600: "#1771B2",
+    700: "#145A90",
+    800: "#154D77",
+    900: "#174163",
+    950: "#062C2D"
+  },
+  sea: {
+    50: "#F4F6FC",
+    100: "#E8EDF6",
+    200: "#CBD9EB",
+    300: "#9FB9DA",
+    400: "#6A93C5",
+    500: "#446FA4",
+    600: "#375D92",
+    700: "#2D4B77",
+    800: "#294163",
+    900: "#263954",
+    950: "#1A2537"
+  },
+  blue: {
+    50: "#F0F6FE",
+    100: "#DDEAFC",
+    200: "#C2DBFB",
+    300: "#98C5F8",
+    400: "#68A7F2",
+    500: "#377CEB",
+    600: "#2F68E1",
+    700: "#2754CE",
+    800: "#20429E",
+    900: "#1C2A52",
+    950: "#061132"
+  },
+  lightPurple: {
+    50: "#F6F5FD",
+    100: "#EEEDFA",
+    200: "#DDDCFD",
+    300: "#BDB9EC",
+    400: "#AAA1E4",
+    500: "#826CE3",
+    600: "#7250D7",
+    700: "#623DC4",
+    800: "#5133A4",
+    900: "#442B87",
+    950: "#291A5B"
+  }
+};
+
 // ../tailwind-config/src/colors/semantic-palette.ts
 var semanticPalette = {
-  light: {
-    primary: {
-      soft: "#EFF8FF",
-      light: "#C7E5FA",
-      main: "#3F9CF2",
-      dark: "#2980E7",
-      strong: "#204A88"
-    },
-    secondary: {
-      soft: "#F8F1FF",
-      light: "#DEC1FA",
-      main: "#9B3FF2",
-      dark: "#7E27CF",
-      strong: "#3E0C6D"
-    },
-    body: {
-      foreground: "#333333",
-      background: "#FFFFFF"
-    },
-    neutral: {
-      soft: "#F2F3F4",
-      light: "#DFE2E7",
-      main: "#808488",
-      dark: "#5B5E62",
-      strong: "#383A3E"
-    },
-    trans: {
-      soft: "#000000, 0.05",
-      light: "#000000, 0.1",
-      main: "#000000, 0.2",
-      dark: "#000000, 0.3",
-      strong: "#000000, 0.6"
-    },
-    common: {
-      black: "#333333",
-      white: "#FFFFFF",
-      transparent: "#FFFFFF, 0"
-    },
-    info: {
-      soft: "#F3FBFB",
-      light: "#B5F0F0",
-      main: "#1FAFAF",
-      dark: "#189494",
-      strong: ""
-    },
-    success: {
-      soft: "#F0FBF0",
-      light: "#92DCB2",
-      main: "#24A25B",
-      dark: "#137F42",
-      strong: ""
-    },
-    warning: {
-      soft: "#FEF8EB",
-      light: "#F9C967",
-      main: "#EDA410",
-      dark: "#C8890A",
-      strong: ""
-    },
-    danger: {
-      soft: "#FFF3F7",
-      light: "#FFBAD1",
-      main: "#FF4684",
-      dark: "#C62F62",
-      strong: ""
-    }
-  },
-  dark: {
-    primary: {
-      soft: "#EFF8FF",
-      light: "#C7E5FA",
-      main: "#3F9CF2",
-      dark: "#2980E7",
-      strong: "#204A88"
-    },
-    secondary: {
-      soft: "#F8F1FF",
-      light: "#DEC1FA",
-      main: "#9B3FF2",
-      dark: "#7E27CF",
-      strong: "#3E0C6D"
-    },
-    body: {
-      foreground: "#333333",
-      background: "#FFFFFF"
-    },
-    neutral: {
-      soft: "#F2F3F4",
-      light: "#DFE2E7",
-      main: "#808488",
-      dark: "#5B5E62",
-      strong: "#383A3E"
-    },
-    trans: {
-      soft: "#000000, 0.05",
-      light: "#000000, 0.1",
-      main: "#000000, 0.2",
-      dark: "#000000, 0.3",
-      strong: "#000000, 0.6"
-    },
-    common: {
-      black: "#333333",
-      white: "#FFFFFF",
-      transparent: "#FFFFFF, 0"
-    },
-    info: {
-      soft: "#F3FBFB",
-      light: "#B5F0F0",
-      main: "#1FAFAF",
-      dark: "#189494",
-      strong: ""
-    },
-    success: {
-      soft: "#F0FBF0",
-      light: "#92DCB2",
-      main: "#24A25B",
-      dark: "#137F42",
-      strong: ""
-    },
-    warning: {
-      soft: "#FEF8EB",
-      light: "#F9C967",
-      main: "#EDA410",
-      dark: "#C8890A",
-      strong: ""
-    },
-    danger: {
-      soft: "#FFF3F7",
-      light: "#FFBAD1",
-      main: "#FF4684",
-      dark: "#C62F62",
-      strong: ""
-    }
+  primary: {
+    soft: { light: primitivePalette.blue[100], dark: primitivePalette.blue[950] },
+    light: { light: primitivePalette.blue[200], dark: primitivePalette.blue[900] },
+    main: { light: primitivePalette.blue[600], dark: primitivePalette.blue[600] },
+    dark: { light: primitivePalette.blue[800], dark: primitivePalette.blue[500] },
+    strong: { light: primitivePalette.blue[900], dark: primitivePalette.blue[200] }
+  },
+  secondary: {
+    soft: { light: primitivePalette.lightPurple[100], dark: primitivePalette.lightPurple[950] },
+    light: { light: primitivePalette.lightPurple[200], dark: primitivePalette.lightPurple[900] },
+    main: { light: primitivePalette.lightPurple[600], dark: primitivePalette.lightPurple[500] },
+    dark: { light: primitivePalette.lightPurple[800], dark: primitivePalette.lightPurple[700] },
+    strong: { light: primitivePalette.lightPurple[950], dark: primitivePalette.lightPurple[950] }
+  },
+  body: {
+    foreground: { light: primitivePalette.gray.cool[950], dark: primitivePalette.gray.cool[50] },
+    background: { light: primitivePalette.gray.cool[50], dark: primitivePalette.bg["06"] }
+  },
+  neutral: {
+    soft: { light: primitivePalette.gray.cool[100], dark: primitivePalette.gray.cool[900] },
+    light: { light: primitivePalette.gray.cool[200], dark: primitivePalette.gray.cool[700] },
+    main: { light: primitivePalette.gray.cool[400], dark: primitivePalette.gray.cool[400] },
+    dark: { light: primitivePalette.gray.cool[500], dark: primitivePalette.gray.cool[300] },
+    strong: { light: primitivePalette.gray.cool[700], dark: primitivePalette.gray.cool[200] }
+  },
+  trans: {
+    soft: { light: primitivePalette.opacity.black[5], dark: primitivePalette.opacity.white[5] },
+    light: { light: primitivePalette.opacity.black[10], dark: primitivePalette.opacity.white[10] },
+    main: { light: primitivePalette.opacity.black[20], dark: primitivePalette.opacity.white[20] },
+    dark: { light: primitivePalette.opacity.black[30], dark: primitivePalette.opacity.white[30] },
+    strong: { light: primitivePalette.opacity.black[60], dark: primitivePalette.opacity.black[60] }
+  },
+  common: {
+    black: { light: primitivePalette.gray.cool[950], dark: primitivePalette.gray.cool[950] },
+    white: { light: primitivePalette.gray.cool[50], dark: primitivePalette.gray.cool[50] },
+    transparent: { light: primitivePalette.opacity.white["0"], dark: primitivePalette.opacity.black["0"] },
+    hover: { light: primitivePalette.opacity.black[5], dark: primitivePalette.opacity.white[5] }
+  },
+  info: {
+    soft: { light: primitivePalette.teal[50], dark: primitivePalette.teal[950] },
+    light: { light: primitivePalette.teal[100], dark: primitivePalette.teal[900] },
+    main: { light: primitivePalette.teal[500], dark: primitivePalette.teal[500] },
+    dark: { light: primitivePalette.teal[600], dark: primitivePalette.teal[700] },
+    strong: { light: "", dark: "" }
+  },
+  success: {
+    soft: { light: primitivePalette.green[50], dark: primitivePalette.green[950] },
+    light: { light: primitivePalette.green[200], dark: primitivePalette.green[900] },
+    main: { light: primitivePalette.green[500], dark: primitivePalette.green[600] },
+    dark: { light: primitivePalette.green[600], dark: primitivePalette.green[700] },
+    strong: { light: "", dark: "" }
+  },
+  warning: {
+    soft: { light: primitivePalette.yellow[50], dark: primitivePalette.yellow[950] },
+    light: { light: primitivePalette.yellow[100], dark: primitivePalette.yellow[900] },
+    main: { light: primitivePalette.yellow[500], dark: primitivePalette.yellow[600] },
+    dark: { light: primitivePalette.yellow[600], dark: primitivePalette.yellow[700] },
+    strong: { light: "", dark: "" }
+  },
+  danger: {
+    soft: { light: primitivePalette.hotPink[50], dark: primitivePalette.hotPink[950] },
+    light: { light: primitivePalette.hotPink[200], dark: primitivePalette.hotPink[900] },
+    main: { light: primitivePalette.hotPink[500], dark: primitivePalette.hotPink[500] },
+    dark: { light: primitivePalette.hotPink[600], dark: primitivePalette.hotPink[700] },
+    strong: { light: "", dark: "" }
   }
 };
 
@@ -504,7 +713,7 @@ var boxShadow = {
   "drop-sm": "0 4px 12px 0 rgba(0, 0, 0, 0.1)",
   "drop-md": "0 6px 18px 0 rgba(0, 0, 0, 0.1)",
   "drop-lg": "0 8px 24px 0 rgba(0, 0, 0, 0.1)",
-  "drop-xl": "0 10px 30px 0 rgba(0, 0, 0, 0.1)"
+  "drop-xl": "0 0px 60px 0 rgba(0, 0, 0, 0.2)"
 };
 
 // ../tailwind-config/src/border/radius.ts
@@ -513,8 +722,11 @@ var borderRadius = {
   md: "6px",
   lg: "8px",
   xl: "10px",
+  "2xl": "20px",
   none: "0",
-  full: "9999px"
+  full: "9999px",
+  2: "2px",
+  5: "5px"
 };
 
 // ../tailwind-config/src/border/width.ts
@@ -525,12 +737,38 @@ var borderWidth = {
   xl: "1.75px"
 };
 
+// ../tailwind-config/src/border/ringWidth.ts
+var ringWidth = {
+  sm: "1px",
+  md: "1.25px",
+  lg: "1.5px",
+  xl: "1.75px",
+  2: "2px",
+  3: "3px",
+  4: "4px",
+  5: "5px"
+};
+
 // ../tailwind-config/src/space/gap.ts
 var gap = {
   sm: "4px",
   md: "6px",
   lg: "8px",
-  xl: "10px"
+  xl: "10px",
+  5: "5px",
+  10: "10px",
+  20: "20px",
+  30: "30px"
+};
+
+// ../tailwind-config/src/space/padding.ts
+var padding = {
+  xs: "4px",
+  sm: "6px",
+  md: "8px",
+  lg: "10px",
+  xl: "12px",
+  20: "20px"
 };
 
 // ../tailwind-config/src/utils/color.ts
@@ -617,18 +855,24 @@ var resolveConfig = (themes = {}, defaultTheme, prefix = "dn") => {
       if (!colorValue) continue;
       try {
         const ColorVariable = `--${prefix}-${colorName}`;
-        resolved.utilities[cssSelector][ColorVariable] = colorValue;
         if (colorValue.includes(",")) {
           const [hex, alpha] = colorValue.split(",").map((s) => s.trim());
           if ((hex == null ? void 0 : hex.startsWith("#")) && alpha !== void 0) {
-            resolved.colors[colorName] = () => {
-              return getTransColor(hex, parseFloat(alpha) || 1);
+            const parsedAlpha = parseFloat(alpha);
+            const finalAlpha = isNaN(parsedAlpha) ? 1 : parsedAlpha / 100;
+            const rgbaColor = getTransColor(hex, finalAlpha);
+            resolved.utilities[cssSelector] = {
+              ...resolved.utilities[cssSelector] || {},
+              [ColorVariable]: rgbaColor
             };
+            resolved.colors[colorName] = () => `var(${ColorVariable})`;
           }
         } else {
-          resolved.colors[colorName] = () => {
-            return `var(${ColorVariable})`;
+          resolved.utilities[cssSelector] = {
+            ...resolved.utilities[cssSelector] || {},
+            [ColorVariable]: colorValue
           };
+          resolved.colors[colorName] = () => `var(${ColorVariable})`;
         }
       } catch (error) {
         console.error("error", error == null ? void 0 : error.message);
@@ -669,13 +913,31 @@ var flattenThemeObject = (theme) => {
   return result;
 };
 var deepnoidUi = (colorChip = {}, defaultTheme = "light") => {
-  const lightPalette = structuredClone(semanticPalette.light);
-  const darkPalette = structuredClone(semanticPalette.dark);
-  const mergedLight = { ...lightPalette, ...colorChip.light };
-  const mergedDark = { ...darkPalette, ...colorChip.dark };
+  const lightPalette = {};
+  const darkPalette = {};
+  Object.entries(semanticPalette).forEach(([role, levels]) => {
+    const lightGroup = {};
+    const darkGroup = {};
+    Object.entries(levels).forEach(([level, value]) => {
+      if (value == null ? void 0 : value.light) lightGroup[level] = value.light;
+      if (value == null ? void 0 : value.dark) darkGroup[level] = value.dark;
+    });
+    lightPalette[role] = lightGroup;
+    darkPalette[role] = darkGroup;
+  });
+  Object.entries(colorChip).forEach(([role, levels]) => {
+    const lightGroup = lightPalette[role] || (lightPalette[role] = {});
+    const darkGroup = darkPalette[role] || (darkPalette[role] = {});
+    if (levels) {
+      Object.entries(levels).forEach(([level, value]) => {
+        if (value == null ? void 0 : value.light) lightGroup[level] = value.light;
+        if (value == null ? void 0 : value.dark) darkGroup[level] = value.dark;
+      });
+    }
+  });
   const themes = {
-    light: { extend: "light", colors: mergedLight },
-    dark: { extend: "dark", colors: mergedDark }
+    light: { extend: "light", colors: lightPalette },
+    dark: { extend: "dark", colors: darkPalette }
   };
   const resolved = resolveConfig(themes, defaultTheme);
   return (0, import_plugin.default)(
@@ -716,12 +978,14 @@ var deepnoidUi = (colorChip = {}, defaultTheme = "light") => {
             ]
           },
           // @ts-ignore
-          colors: { ...resolved == null ? void 0 : resolved.colors },
+          colors: { ...primitivePalette, ...resolved == null ? void 0 : resolved.colors },
           borderRadius,
           borderWidth,
           fontSize,
           boxShadow,
           gap,
+          padding,
+          ringWidth,
           keyframes,
           animation
         }
@@ -742,7 +1006,8 @@ var tv = (0, import_tailwind_variants.createTV)({
       borderRadius: [{ rounded: [...typedKeys(borderRadius)] }],
       boxShadow: [{ shadow: [...typedKeys(boxShadow)] }],
       padding: [{ p: [...COMMON_SIZE] }],
-      gap: [{ gap: [...typedKeys(gap)] }]
+      gap: [{ gap: [...typedKeys(gap)] }],
+      borderWidth: [{ border: [...typedKeys(borderWidth)] }]
     }
   }
 });
@@ -1062,6 +1327,98 @@ var import_react3 = require("react");
 // src/components/icon/template.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var template = {
+  left: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "21",
+        height: "21",
+        viewBox: "0 0 21 21",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M12.8333 15.1667L8.16667 10.5L12.8333 5.83334",
+            stroke: "currentColor",
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
+  "left-double": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "21",
+        height: "21",
+        viewBox: "0 0 21 21",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M15.1667 5.83334L9.98148 10.5L15.1667 15.1667M11.0185 5.83334L5.83334 10.5L11.0185 15.1667",
+            stroke: "currentColor",
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
+  right: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "21",
+        height: "21",
+        viewBox: "0 0 21 21",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M8.16666 5.83334L12.8333 10.5L8.16666 15.1667",
+            stroke: "currentColor",
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
+  "right-double": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "21",
+        height: "21",
+        viewBox: "0 0 21 21",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M5.83334 5.83334L11.0185 10.5L5.83334 15.1667M9.98149 5.83334L15.1667 10.5L9.98149 15.1667",
+            stroke: "currentColor",
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
   "left-chevron": ({ className }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "svg",
@@ -2447,46 +2804,6 @@ var template = {
       }
     );
   },
-  left: ({ className }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "22",
-        height: "22",
-        viewBox: "0 0 22 22",
-        fill: "none",
-        className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "path",
-          {
-            d: "M14.4955 7.21404C14.4957 7.26442 14.4957 7.26442 14.4959 7.31582C14.4962 7.40882 14.4962 7.50182 14.496 7.59482C14.496 7.69521 14.4962 7.79559 14.4965 7.89598C14.4969 8.09257 14.497 8.28915 14.4969 8.48574C14.4968 8.64555 14.4969 8.80536 14.497 8.96516C14.4971 8.98791 14.4971 9.01066 14.4971 9.0341C14.4971 9.08032 14.4972 9.12653 14.4972 9.17275C14.4976 9.60613 14.4975 10.0395 14.4973 10.4729C14.4971 10.8692 14.4975 11.2656 14.4981 11.6619C14.4988 12.069 14.499 12.4761 14.4989 12.8832C14.4989 13.1117 14.4989 13.3402 14.4994 13.5687C14.4998 13.7633 14.4998 13.9578 14.4994 14.1524C14.4992 14.2516 14.4992 14.3508 14.4996 14.45C14.4999 14.5577 14.4997 14.6653 14.4993 14.7729C14.4995 14.8042 14.4997 14.8354 14.5 14.8676C14.4981 15.094 14.4635 15.2952 14.2769 15.4694C14.0633 15.6269 13.8501 15.6664 13.574 15.6667C13.3359 15.6312 13.1607 15.5177 12.9847 15.381C12.9446 15.3506 12.9044 15.3202 12.8642 15.2898C12.8338 15.2666 12.8338 15.2666 12.8028 15.2429C12.7059 15.1692 12.6076 15.0969 12.5094 15.0246C12.4807 15.0034 12.4807 15.0034 12.4515 14.9819C12.3238 14.8875 12.1955 14.7936 12.0669 14.7C11.8604 14.5497 11.6552 14.3982 11.4501 14.2465C11.3539 14.1754 11.2577 14.1043 11.1615 14.0332C11.1231 14.0048 11.0847 13.9765 11.0462 13.9481C11.0177 13.927 11.0177 13.927 10.9886 13.9055C10.1627 13.2955 9.33686 12.6854 8.51098 12.0753C8.49194 12.0613 8.47291 12.0472 8.45329 12.0328C8.41508 12.0045 8.37691 11.9762 8.33878 11.9479C8.23994 11.8746 8.14044 11.8021 8.03961 11.7309C7.56492 11.3929 7.56492 11.3929 7.50676 11.139C7.48169 10.8947 7.5218 10.7077 7.70431 10.5165C7.82684 10.4027 7.96443 10.3072 8.1052 10.2107C8.19396 10.1488 8.27857 10.0845 8.36282 10.0181C8.5044 9.90695 8.65122 9.80273 8.80011 9.69893C8.88704 9.63693 8.97086 9.57289 9.05425 9.50739C9.19583 9.3962 9.34265 9.29198 9.49154 9.18818C9.57847 9.12618 9.6623 9.06214 9.74569 8.99664C9.88726 8.88544 10.0341 8.78123 10.183 8.67742C10.2699 8.61542 10.3537 8.55139 10.4371 8.48589C10.5787 8.37469 10.7255 8.27048 10.8744 8.16667C10.9613 8.10467 11.0452 8.04064 11.1286 7.97514C11.2379 7.88937 11.3491 7.80701 11.464 7.72686C11.676 7.57888 11.881 7.42428 12.0868 7.26992C12.2036 7.18255 12.321 7.09588 12.4386 7.00934C12.5366 6.93723 12.6341 6.8648 12.7311 6.7917C13.3456 6.32986 13.3456 6.32986 13.7814 6.33404C13.9843 6.35117 14.1418 6.41415 14.2854 6.53943C14.4816 6.75169 14.4966 6.95069 14.4955 7.21404Z",
-            fill: "currentColor"
-          }
-        )
-      }
-    );
-  },
-  right: ({ className }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        width: "22",
-        height: "22",
-        viewBox: "0 0 22 22",
-        fill: "none",
-        className,
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "path",
-          {
-            d: "M7.50447 7.21404C7.50428 7.26442 7.50428 7.26442 7.50409 7.31582C7.50381 7.40882 7.50383 7.50182 7.50397 7.59482C7.50405 7.69521 7.50375 7.79559 7.5035 7.89598C7.50308 8.09257 7.50303 8.28915 7.5031 8.48574C7.50316 8.64555 7.5031 8.80536 7.50296 8.96516C7.50294 8.98791 7.50292 9.01066 7.5029 9.0341C7.50286 9.08032 7.50282 9.12653 7.50278 9.17275C7.50243 9.60613 7.5025 10.0395 7.5027 10.4729C7.50287 10.8692 7.5025 11.2656 7.50187 11.6619C7.50123 12.069 7.50096 12.4761 7.50109 12.8832C7.50115 13.1117 7.50107 13.3402 7.5006 13.5687C7.50021 13.7633 7.50016 13.9578 7.50056 14.1524C7.50076 14.2516 7.50079 14.3508 7.5004 14.45C7.50005 14.5577 7.50032 14.6653 7.50074 14.7729C7.50049 14.8042 7.50025 14.8354 7.5 14.8676C7.50185 15.094 7.53645 15.2952 7.72309 15.4694C7.93671 15.6269 8.14985 15.6664 8.42597 15.6667C8.66414 15.6312 8.8393 15.5177 9.01528 15.381C9.05544 15.3506 9.09561 15.3202 9.13579 15.2898C9.16617 15.2666 9.16617 15.2666 9.19716 15.2429C9.29408 15.1692 9.39237 15.0969 9.49064 15.0246C9.51926 15.0034 9.51926 15.0034 9.54847 14.9819C9.67623 14.8875 9.80451 14.7936 9.93307 14.7C10.1396 14.5497 10.3448 14.3982 10.5499 14.2465C10.6461 14.1754 10.7423 14.1043 10.8385 14.0332C10.8769 14.0048 10.9153 13.9765 10.9538 13.9481C10.9823 13.927 10.9823 13.927 11.0114 13.9055C11.8373 13.2955 12.6631 12.6854 13.489 12.0753C13.5081 12.0613 13.5271 12.0472 13.5467 12.0328C13.5849 12.0045 13.6231 11.9762 13.6612 11.9479C13.7601 11.8746 13.8596 11.8021 13.9604 11.7309C14.4351 11.3929 14.4351 11.3929 14.4932 11.139C14.5183 10.8947 14.4782 10.7077 14.2957 10.5165C14.1732 10.4027 14.0356 10.3072 13.8948 10.2107C13.806 10.1488 13.7214 10.0845 13.6372 10.0181C13.4956 9.90695 13.3488 9.80273 13.1999 9.69893C13.113 9.63693 13.0291 9.57289 12.9457 9.50739C12.8042 9.3962 12.6573 9.29198 12.5085 9.18818C12.4215 9.12618 12.3377 9.06214 12.2543 8.99664C12.1127 8.88544 11.9659 8.78123 11.817 8.67742C11.7301 8.61542 11.6463 8.55139 11.5629 8.48589C11.4213 8.37469 11.2745 8.27048 11.1256 8.16667C11.0387 8.10467 10.9548 8.04064 10.8714 7.97514C10.7621 7.88937 10.6509 7.80701 10.536 7.72686C10.324 7.57888 10.119 7.42428 9.9132 7.26992C9.79643 7.18255 9.67897 7.09588 9.56138 7.00934C9.46343 6.93723 9.36586 6.8648 9.26891 6.7917C8.65441 6.32986 8.65441 6.32986 8.21864 6.33404C8.01565 6.35117 7.85817 6.41415 7.7146 6.53943C7.51841 6.75169 7.50343 6.95069 7.50447 7.21404Z",
-            fill: "currentColor"
-          }
-        )
-      }
-    );
-  },
   "brace-left": ({ className }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "svg",
@@ -2796,6 +3113,20 @@ var template = {
       }
     );
   },
+  polygon: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polygon", { points: "12 4 20 9 20 15 12 20 4 15 4 9", stroke: "currentColor", strokeWidth: "2" })
+      }
+    );
+  },
   "new-window": ({ className }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "svg",
@@ -6027,353 +6358,165 @@ var iconTemplate = template;
 var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) => {
   const SVGIcon = template[name];
   const getInputIconSize = (size2) => {
-    switch (size2) {
+    switch (String(size2)) {
       case "sm":
-        return "size-[18px]";
+        return "w-[18px] h-[18px]";
       case "md":
-        return "size-[21px] stroke-[1.25px]";
+        return "w-[21px] h-[21px] stroke-[1.25px]";
       case "lg":
-        return "size-[24px] stroke-[1.5px]";
+        return "w-[24px] h-[24px] stroke-[1.5px]";
       case "xl":
-        return "size-[27px] stroke-[1.5px]";
+        return "w-[27px] h-[27px] stroke-[1.5px]";
+      case "20":
+        return "w-[20px] h-[20px] stroke-[1.25px]";
+      case "30":
+        return "w-[30px] h-[30px] stroke-[1.5px]";
+      case "40":
+        return "w-[40px] h-[40px] stroke-[2px]";
+      default:
+        return "w-[21px] h-[21px] stroke-[1.25px]";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-fit w-fit", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    SVGIcon,
-    {
-      fill,
-      className: className ? `${getInputIconSize(size)} ${className}` : `${getInputIconSize(size)}`,
-      ...props
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `m-0 flex items-center justify-center p-0 ${className}`, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SVGIcon, { fill, className: getInputIconSize(size), ...props }) });
 };
 var Icon_default = Icon;
 
 // src/components/button/button.tsx
 var import_react6 = require("react");
 
-// src/components/ripple/ripple.tsx
-var import_framer_motion = require("framer-motion");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Ripple = (props) => {
-  const { ripples = [], motionProps, color = "currentColor", style, onClear } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: ripples.map((ripple) => {
-    const duration = (0, import_framer_motion.clamp)(ripple.size > 100 ? 0.75 : 0.5, 0.01 * ripple.size, 0.2);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_framer_motion.LazyMotion, { features: import_framer_motion.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_framer_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_framer_motion.m.span,
-      {
-        animate: { transform: "scale(2)", opacity: 0 },
-        className: "deepnoidui-ripple",
-        exit: { opacity: 0 },
-        initial: { transform: "scale(0)", opacity: 0.35 },
-        style: {
-          position: "absolute",
-          backgroundColor: color,
-          borderRadius: "100%",
-          transformOrigin: "center",
-          pointerEvents: "none",
-          overflow: "hidden",
-          inset: 0,
-          zIndex: 0,
-          top: ripple.y,
-          left: ripple.x,
-          width: `${ripple.size}px`,
-          height: `${ripple.size}px`,
-          ...style
-        },
-        transition: { duration },
-        onAnimationComplete: () => {
-          onClear(ripple.key);
-        },
-        ...motionProps
+// src/components/button/button.style.ts
+var buttonBaseStyle = tv({
+  slots: {
+    base: [
+      "relative",
+      "flex",
+      "items-center",
+      "justify-center",
+      "whitespace-nowrap",
+      "transition",
+      "duration-200",
+      "select-none",
+      "overflow-hidden",
+      "box-border",
+      "border",
+      "border-transparent"
+    ]
+  },
+  variants: {
+    variant: {
+      solid: [],
+      soft: [],
+      outline: [],
+      ghost: []
+    },
+    color: {
+      primary: [],
+      secondary: [],
+      neutral: [],
+      info: [],
+      success: [],
+      warning: [],
+      danger: []
+    },
+    disabled: {
+      true: {
+        base: ["!bg-neutral-soft", "!border-neutral-soft", "!text-neutral-light", "pointer-events-none"]
       }
-    ) }) }, ripple.key);
-  }) });
-};
-Ripple.displayName = "HeroUI.Ripple";
-var ripple_default = Ripple;
-
-// src/components/ripple/useRipple.ts
-var import_react5 = require("react");
-function useRipple(props = {}) {
-  const [ripples, setRipples] = (0, import_react5.useState)([]);
-  const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
-  const onPress = (0, import_react5.useCallback)((event) => {
-    const trigger = event.currentTarget;
-    const rect = trigger.getBoundingClientRect();
-    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
-    setRipples((prevRipples) => [
-      ...prevRipples,
-      {
-        key: getUniqueID(prevRipples.length.toString()),
-        size,
-        x: event.clientX - rect.left - size / 2,
-        y: event.clientY - rect.top - size / 2
-      }
-    ]);
-  }, []);
-  const onClear = (0, import_react5.useCallback)((key) => {
-    setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
-  }, []);
-  return { ripples, onClear, onPress, ...props };
-}
-
-// src/components/button/button.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var extractTextFromChildren = (children) => {
-  if (typeof children === "string") {
-    return children;
-  }
-  if (typeof children === "number") {
-    return String(children);
-  }
-  if ((0, import_react6.isValidElement)(children)) {
-    const childProps = children.props;
-    return extractTextFromChildren(childProps.children);
-  }
-  if (Array.isArray(children)) {
-    return children.map((child) => extractTextFromChildren(child)).join(" ");
-  }
-  return "";
-};
-var Button = (0, import_react6.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, buttonStyle.variantKeys);
-  const { classNames, startContent, endContent, disableRipple, asChild, children, ...buttonProps } = props;
-  const slots = (0, import_react6.useMemo)(() => buttonStyle({ ...variantProps }), [variantProps]);
-  const { onPress: onRipplePressHandler, onClear: onClearRipple, ripples } = useRipple();
-  const autoAriaLabel = (0, import_react6.useMemo)(() => {
-    if (originalProps["aria-label"] || originalProps["aria-labelledby"]) {
-      return void 0;
-    }
-    if (originalProps.isLoading) {
-      const baseText = extractTextFromChildren(children);
-      return baseText ? `${baseText} (loading)` : "loading";
-    }
-    const textContent = extractTextFromChildren(children);
-    return textContent || void 0;
-  }, [originalProps["aria-label"], originalProps["aria-labelledby"], originalProps.isLoading, children]);
-  const handlePress = (0, import_react6.useCallback)(
-    (e) => {
-      if (disableRipple || originalProps.disabled) return;
-      onRipplePressHandler(e);
-    },
-    [disableRipple, originalProps.disabled, onRipplePressHandler]
-  );
-  const mouseDownHandler = (0, import_react6.useCallback)(
-    (e) => {
-      var _a;
-      (_a = buttonProps.onMouseDown) == null ? void 0 : _a.call(buttonProps, e);
-      if (disableRipple || originalProps.disabled) return;
-      handlePress(e);
-    },
-    [buttonProps.onMouseDown, disableRipple, originalProps.disabled, handlePress]
-  );
-  const getRippleProps = (0, import_react6.useCallback)(
-    () => ({ ripples, onClear: onClearRipple }),
-    [ripples, onClearRipple]
-  );
-  const getBaseProps = (0, import_react6.useCallback)(
-    () => ({
-      ...buttonProps,
-      onMouseDown: mouseDownHandler,
-      ref,
-      disabled: originalProps.disabled || originalProps.isLoading,
-      "data-loading": originalProps.isLoading,
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
-      "aria-label": originalProps["aria-label"] || autoAriaLabel
-    }),
-    [
-      buttonProps,
-      mouseDownHandler,
-      ref,
-      originalProps.disabled,
-      originalProps.isLoading,
-      originalProps["aria-label"],
-      autoAriaLabel,
-      slots,
-      classNames == null ? void 0 : classNames.base
-    ]
-  );
-  const getContentProps = (0, import_react6.useCallback)(
-    () => ({
-      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
-      size: originalProps.size
-    }),
-    [slots, classNames, originalProps.size]
-  );
-  const renderContent = (content) => {
-    if ((0, import_react6.isValidElement)(content)) {
-      const _content = content;
-      const existingProps = _content.props;
-      const mergedProps = {
-        ...getContentProps(),
-        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
-      };
-      return (0, import_react6.cloneElement)(content, mergedProps);
-    } else {
-      const contentProps = getContentProps();
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...contentProps, children: content });
-    }
-  };
-  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    startContent && renderContent(startContent),
-    children,
-    endContent && renderContent(endContent),
-    !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ripple_default, { ...getRippleProps() })
-  ] }) });
-  if (asChild && (0, import_react6.isValidElement)(children)) {
-    const childElement = children;
-    const baseProps = getBaseProps();
-    const mergedProps = {
-      ...childElement.props,
-      ...baseProps,
-      className: `${baseProps.className || ""} ${childElement.props.className || ""}`.trim(),
-      onClick: (e) => {
-        var _a, _b, _c;
-        (_b = (_a = childElement.props).onClick) == null ? void 0 : _b.call(_a, e);
-        (_c = baseProps.onClick) == null ? void 0 : _c.call(baseProps, e);
-      },
-      onMouseDown: (e) => {
-        var _a, _b, _c;
-        (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
-        (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-        startContent && renderContent(startContent),
-        childElement.props.children,
-        endContent && renderContent(endContent),
-        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ripple_default, { ...getRippleProps() })
-      ] }) })
-    };
-    return (0, import_react6.cloneElement)(childElement, mergedProps);
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { ...getBaseProps(), children: buttonContent });
-});
-Button.displayName = "Button";
-var button_default = Button;
-var buttonStyle = tv({
-  slots: {
-    base: "relative flex items-center justify-center whitespace-nowrap transition duration-200 select-none overflow-hidden box-border border border-transparent",
-    content: ""
-  },
-  variants: {
-    variant: {
-      solid: "",
-      soft: "",
-      outline: "",
-      ghost: ""
-    },
-    color: {
-      primary: "",
-      secondary: "",
-      neutral: "",
-      info: "",
-      success: "",
-      warning: "",
-      danger: ""
-    },
-    size: {
-      sm: {
-        base: "h-[24px] px-[8px] py-[3px] text-sm font-[700] rounded-sm gap-sm"
-      },
-      md: {
-        base: "h-[32px] px-[12px] py-[5.5px] text-md font-[700] rounded-md gap-md"
-      },
-      lg: {
-        base: "h-[40px] px-[16px] py-[8px] text-lg font-[700] rounded-lg gap-lg"
-      },
-      xl: {
-        base: "h-[50px] px-[20px] py-[11.5px] text-xl font-[700] rounded-xl gap-xl"
-      }
-    },
-    radius: {
-      default: {
-        base: ""
-      },
-      full: {
-        base: "rounded-full"
-      },
-      none: {
-        base: "rounded-none"
-      }
-    },
-    full: {
-      true: {
-        base: "w-full"
-      }
-    },
-    isLoading: {
-      true: {}
-    },
-    disabled: {
-      true: {
-        base: "!bg-neutral-soft !border-neutral-soft !text-neutral-light pointer-events-none"
-      }
-    },
-    isInGroup: {
-      true: {
-        base: "[&:not(:first-child):not(:last-child)]:rounded-none first:rounded-r-none last:rounded-l-none [&:not(:first-child)]:border-l-0"
+    },
+    isInGroup: {
+      true: {
+        base: [
+          "[&:not(:first-child):not(:last-child)]:rounded-none",
+          "first:rounded-r-none",
+          "last:rounded-l-none",
+          "[&:not(:first-child)]:border-l-0"
+        ]
       }
     }
   },
-  defaultVariants: {
-    size: "md",
-    variant: "solid",
-    color: "primary",
-    full: false,
-    disabled: false,
-    isLoading: false,
-    isInGroup: false
-  },
   compoundVariants: [
-    // solid & color
     {
       variant: "solid",
       color: "primary",
       class: {
-        base: ["text-white", "bg-primary-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+        base: [
+          "text-white",
+          "bg-primary-main",
+          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-primary-main)]",
+          "active:bg-primary-dark"
+        ]
       }
     },
     {
       variant: "solid",
       color: "secondary",
       class: {
-        base: ["text-white", "bg-secondary-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+        base: [
+          "text-white",
+          "bg-secondary-main",
+          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-secondary-main)]",
+          "active:bg-secondary-dark"
+        ]
       }
     },
     {
       variant: "solid",
       color: "neutral",
       class: {
-        base: ["text-white", "bg-neutral-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+        base: [
+          "text-white",
+          "bg-neutral-main",
+          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-neutral-main)]",
+          "active:bg-neutral-dark"
+        ]
       }
     },
     {
       variant: "solid",
       color: "info",
       class: {
-        base: ["text-white", "bg-info-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+        base: [
+          "text-white",
+          "bg-info-main",
+          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-info-main)]",
+          "active:bg-info-dark"
+        ]
       }
     },
     {
       variant: "solid",
       color: "success",
       class: {
-        base: ["text-white", "bg-success-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+        base: [
+          "text-white",
+          "bg-success-main",
+          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-success-main)]",
+          "active:bg-success-dark"
+        ]
       }
     },
     {
       variant: "solid",
       color: "warning",
       class: {
-        base: ["text-white", "bg-warning-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+        base: [
+          "text-white",
+          "bg-warning-main",
+          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-warning-main)]",
+          "active:bg-warning-dark"
+        ]
       }
     },
     {
       variant: "solid",
       color: "danger",
       class: {
-        base: ["text-white", "bg-danger-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
+        base: [
+          "text-white",
+          "bg-danger-main",
+          "hover:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-danger-main)]",
+          "active:bg-danger-dark"
+        ]
       }
     },
     // soft & color
@@ -6381,49 +6524,85 @@ var buttonStyle = tv({
       variant: "soft",
       color: "primary",
       class: {
-        base: ["text-primary-main", "bg-primary-soft", "border-primary-soft", "hover:border-primary-light"]
+        base: [
+          "text-primary-main",
+          "bg-primary-soft",
+          "border-primary-soft",
+          "hover:border-primary-light",
+          "active:bg-primary-light"
+        ]
       }
     },
     {
       variant: "soft",
       color: "secondary",
       class: {
-        base: ["text-secondary-main", "bg-secondary-soft", "border-secondary-soft", "hover:border-secondary-light"]
+        base: [
+          "text-secondary-main",
+          "bg-secondary-soft",
+          "border-secondary-soft",
+          "hover:border-secondary-light",
+          "active:bg-secondary-light"
+        ]
       }
     },
     {
       variant: "soft",
       color: "neutral",
       class: {
-        base: ["text-neutral-main", "bg-neutral-soft", "border-neutral-soft", "hover:border-neutral-light"]
+        base: [
+          "text-neutral-main",
+          "bg-neutral-soft",
+          "border-neutral-soft",
+          "hover:border-neutral-light",
+          "active:bg-neutral-light"
+        ]
       }
     },
     {
       variant: "soft",
       color: "info",
       class: {
-        base: ["text-info-main", "bg-info-soft", "border-info-soft", "hover:border-info-light"]
+        base: ["text-info-main", "bg-info-soft", "border-info-soft", "hover:border-info-light", "active:bg-info-light"]
       }
     },
     {
       variant: "soft",
       color: "success",
       class: {
-        base: ["text-success-main", "bg-success-soft", "border-success-soft", "hover:border-success-light"]
+        base: [
+          "text-success-main",
+          "bg-success-soft",
+          "border-success-soft",
+          "hover:border-success-light",
+          "active:bg-success-light"
+        ]
       }
     },
     {
       variant: "soft",
       color: "warning",
       class: {
-        base: ["text-warning-main", "bg-warning-soft", "border-warning-soft", "hover:border-warning-light"]
+        base: [
+          "text-warning-main",
+          "bg-warning-soft",
+          "border-warning-soft",
+          "hover:border-warning-light",
+          "active:bg-warning-light"
+        ]
       }
     },
     {
       variant: "soft",
       color: "danger",
       class: {
-        base: ["text-danger-main", "bg-danger-soft", "border-danger-soft", "hover:border-danger-light"]
+        base: [
+          "text-danger-main",
+          "bg-danger-soft",
+          "border-danger-soft",
+          "hover:border-danger-light",
+          "active:bg-danger-light"
+        ]
       }
     },
     // outline & color
@@ -6431,49 +6610,91 @@ var buttonStyle = tv({
       variant: "outline",
       color: "primary",
       class: {
-        base: ["bg-body-background", "border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
+        base: [
+          "bg-body-background",
+          "border-primary-main",
+          "text-primary-main",
+          "hover:bg-primary-soft",
+          "active:bg-primary-light"
+        ]
       }
     },
     {
       variant: "outline",
       color: "secondary",
       class: {
-        base: ["bg-body-background", "border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
+        base: [
+          "bg-body-background",
+          "border-secondary-main",
+          "text-secondary-main",
+          "hover:bg-secondary-soft",
+          "active:bg-secondary-light"
+        ]
       }
     },
     {
       variant: "outline",
       color: "neutral",
       class: {
-        base: ["bg-body-background", "border-neutral-main", "text-neutral-main", "hover:bg-neutral-soft"]
+        base: [
+          "bg-body-background",
+          "border-neutral-main",
+          "text-neutral-main",
+          "hover:bg-neutral-soft",
+          "active:bg-neutral-light"
+        ]
       }
     },
     {
       variant: "outline",
       color: "info",
       class: {
-        base: ["bg-body-background", "border-info-main", "text-info-main", "hover:bg-info-soft"]
+        base: [
+          "bg-body-background",
+          "border-info-main",
+          "text-info-main",
+          "hover:bg-info-soft",
+          "active:bg-info-light"
+        ]
       }
     },
     {
       variant: "outline",
       color: "success",
       class: {
-        base: ["bg-body-background", "border-success-main", "text-success-main", "hover:bg-success-soft"]
+        base: [
+          "bg-body-background",
+          "border-success-main",
+          "text-success-main",
+          "hover:bg-success-soft",
+          "active:bg-success-light"
+        ]
       }
     },
     {
       variant: "outline",
       color: "warning",
       class: {
-        base: ["bg-body-background", "border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
+        base: [
+          "bg-body-background",
+          "border-warning-main",
+          "text-warning-main",
+          "hover:bg-warning-soft",
+          "active:bg-warning-light"
+        ]
       }
     },
     {
       variant: "outline",
       color: "danger",
       class: {
-        base: ["bg-body-background", "border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
+        base: [
+          "bg-body-background",
+          "border-danger-main",
+          "text-danger-main",
+          "hover:bg-danger-soft",
+          "active:bg-danger-light"
+        ]
       }
     },
     // ghost & color
@@ -6481,49 +6702,91 @@ var buttonStyle = tv({
       variant: "ghost",
       color: "primary",
       class: {
-        base: ["text-primary-main", "border-transparent", "hover:bg-primary-soft"]
+        base: [
+          "text-primary-main",
+          "border-transparent",
+          "hover:bg-primary-soft",
+          "active:bg-primary-main",
+          "active:text-common-white"
+        ]
       }
     },
     {
       variant: "ghost",
       color: "secondary",
       class: {
-        base: ["text-secondary-main", "border-transparent", "hover:bg-secondary-soft"]
+        base: [
+          "text-secondary-main",
+          "border-transparent",
+          "hover:bg-secondary-soft",
+          "active:bg-secondary-main",
+          "active:text-common-white"
+        ]
       }
     },
     {
       variant: "ghost",
       color: "neutral",
       class: {
-        base: ["text-neutral-main", "border-transparent", "hover:bg-neutral-soft"]
+        base: [
+          "text-neutral-main",
+          "border-transparent",
+          "hover:bg-neutral-soft",
+          "active:bg-neutral-main",
+          "active:text-common-white"
+        ]
       }
     },
     {
       variant: "ghost",
       color: "info",
       class: {
-        base: ["text-info-main", "border-transparent", "hover:bg-info-soft"]
+        base: [
+          "text-info-main",
+          "border-transparent",
+          "hover:bg-info-soft",
+          "active:bg-info-main",
+          "active:text-common-white"
+        ]
       }
     },
     {
       variant: "ghost",
       color: "success",
       class: {
-        base: ["text-success-main", "border-transparent", "hover:bg-success-soft"]
-      }
+        base: [
+          "text-success-main",
+          "border-transparent",
+          "hover:bg-success-soft",
+          "active:bg-success-main",
+          "active:text-common-white"
+        ]
+      }
     },
     {
       variant: "ghost",
       color: "warning",
       class: {
-        base: ["text-warning-main", "border-transparent", "hover:bg-warning-soft"]
+        base: [
+          "text-warning-main",
+          "border-transparent",
+          "hover:bg-warning-soft",
+          "active:bg-warning-main",
+          "active:text-common-white"
+        ]
       }
     },
     {
       variant: "ghost",
       color: "danger",
       class: {
-        base: ["text-danger-main", "border-transparent", "hover:bg-danger-soft"]
+        base: [
+          "text-danger-main",
+          "border-transparent",
+          "hover:bg-danger-soft",
+          "active:bg-danger-main",
+          "active:text-common-white"
+        ]
       }
     },
     // variant && size
@@ -6531,28 +6794,28 @@ var buttonStyle = tv({
       variant: ["soft", "outline"],
       size: "sm",
       class: {
-        base: "border-[1px]"
+        base: ["border-sm"]
       }
     },
     {
       variant: ["soft", "outline"],
       size: "md",
       class: {
-        base: "border-[1.25px]"
+        base: ["border-md"]
       }
     },
     {
       variant: ["soft", "outline"],
       size: "lg",
       class: {
-        base: "border-[1.5px]"
+        base: ["border-lg"]
       }
     },
     {
       variant: ["soft", "outline"],
       size: "xl",
       class: {
-        base: "border-[1.75px]"
+        base: ["border-xl"]
       }
     },
     // variant && disabled
@@ -6560,373 +6823,341 @@ var buttonStyle = tv({
       variant: ["soft", "ghost"],
       disabled: true,
       class: {
-        base: "!border-neutral-soft"
+        base: ["!border-neutral-soft"]
       }
     },
     {
       variant: ["outline"],
       disabled: true,
       class: {
-        base: "!border-neutral-light"
+        base: ["!border-neutral-light"]
       }
     }
   ]
 });
 
-// src/components/button/icon-button.tsx
-var import_react7 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var IconButton = (0, import_react7.forwardRef)((props, ref) => {
-  const [localProps, variantProps] = mapPropsVariants(props, iconButtonStyle.variantKeys);
-  const { classNames, name, disableRipple, disabled, isLoading, size, full, isInGroup, onMouseDown, ...buttonProps } = {
-    ...localProps,
-    ...variantProps
-  };
-  const slots = (0, import_react7.useMemo)(() => iconButtonStyle({ ...variantProps }), [variantProps]);
-  const { onPress, onClear, ripples } = useRipple();
-  const handleRipple = (0, import_react7.useCallback)(
-    (e) => {
-      if (!disableRipple && !disabled) {
-        onPress(e);
+// src/components/ripple/ripple.tsx
+var import_framer_motion = require("framer-motion");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Ripple = (props) => {
+  const { ripples = [], motionProps, color = "currentColor", style, onClear } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: ripples.map((ripple) => {
+    const duration = (0, import_framer_motion.clamp)(ripple.size > 100 ? 0.75 : 0.5, 0.01 * ripple.size, 0.2);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_framer_motion.LazyMotion, { features: import_framer_motion.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_framer_motion.AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_framer_motion.m.span,
+      {
+        animate: { transform: "scale(2)", opacity: 0 },
+        className: "deepnoidui-ripple",
+        exit: { opacity: 0 },
+        initial: { transform: "scale(0)", opacity: 0.35 },
+        style: {
+          position: "absolute",
+          backgroundColor: color,
+          borderRadius: "100%",
+          transformOrigin: "center",
+          pointerEvents: "none",
+          overflow: "hidden",
+          inset: 0,
+          zIndex: 0,
+          top: ripple.y,
+          left: ripple.x,
+          width: `${ripple.size}px`,
+          height: `${ripple.size}px`,
+          ...style
+        },
+        transition: { duration },
+        onAnimationComplete: () => {
+          onClear(ripple.key);
+        },
+        ...motionProps
+      }
+    ) }) }, ripple.key);
+  }) });
+};
+Ripple.displayName = "HeroUI.Ripple";
+var ripple_default = Ripple;
+
+// src/components/ripple/useRipple.ts
+var import_react5 = require("react");
+function useRipple(props = {}) {
+  const [ripples, setRipples] = (0, import_react5.useState)([]);
+  const getUniqueID = (key) => `${key}-${Math.random().toString(36).substr(2, 9)}`;
+  const onPress = (0, import_react5.useCallback)((event) => {
+    const trigger = event.currentTarget;
+    const rect = trigger.getBoundingClientRect();
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    setRipples((prevRipples) => [
+      ...prevRipples,
+      {
+        key: getUniqueID(prevRipples.length.toString()),
+        size,
+        x: event.clientX - rect.left - size / 2,
+        y: event.clientY - rect.top - size / 2
       }
+    ]);
+  }, []);
+  const onClear = (0, import_react5.useCallback)((key) => {
+    setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
+  }, []);
+  return { ripples, onClear, onPress, ...props };
+}
+
+// src/components/button/button.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var extractTextFromChildren = (children) => {
+  if (typeof children === "string") {
+    return children;
+  }
+  if (typeof children === "number") {
+    return String(children);
+  }
+  if ((0, import_react6.isValidElement)(children)) {
+    const childProps = children.props;
+    return extractTextFromChildren(childProps.children);
+  }
+  if (Array.isArray(children)) {
+    return children.map((child) => extractTextFromChildren(child)).join(" ");
+  }
+  return "";
+};
+var Button = (0, import_react6.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, buttonStyle.variantKeys);
+  const { classNames, startContent, endContent, disableRipple, asChild, children, ...buttonProps } = props;
+  const slots = (0, import_react6.useMemo)(() => buttonStyle({ ...variantProps }), [variantProps]);
+  const { onPress: onRipplePressHandler, onClear: onClearRipple, ripples } = useRipple();
+  const autoAriaLabel = (0, import_react6.useMemo)(() => {
+    if (originalProps["aria-label"] || originalProps["aria-labelledby"]) {
+      return void 0;
+    }
+    if (originalProps.isLoading) {
+      const baseText = extractTextFromChildren(children);
+      return baseText ? `${baseText} (loading)` : "loading";
+    }
+    const textContent = extractTextFromChildren(children);
+    return textContent || void 0;
+  }, [originalProps["aria-label"], originalProps["aria-labelledby"], originalProps.isLoading, children]);
+  const handlePress = (0, import_react6.useCallback)(
+    (e) => {
+      if (disableRipple || originalProps.disabled) return;
+      onRipplePressHandler(e);
     },
-    [disableRipple, disabled, onPress]
+    [disableRipple, originalProps.disabled, onRipplePressHandler]
   );
-  const handleMouseDown = (0, import_react7.useCallback)(
+  const mouseDownHandler = (0, import_react6.useCallback)(
     (e) => {
-      onMouseDown == null ? void 0 : onMouseDown(e);
-      handleRipple(e);
+      var _a;
+      (_a = buttonProps.onMouseDown) == null ? void 0 : _a.call(buttonProps, e);
+      if (disableRipple || originalProps.disabled) return;
+      handlePress(e);
     },
-    [onMouseDown, handleRipple]
+    [buttonProps.onMouseDown, disableRipple, originalProps.disabled, handlePress]
   );
-  const rippleProps = (0, import_react7.useMemo)(() => ({ ripples, onClear }), [ripples, onClear]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "button",
-    {
+  const getRippleProps = (0, import_react6.useCallback)(
+    () => ({ ripples, onClear: onClearRipple }),
+    [ripples, onClearRipple]
+  );
+  const getBaseProps = (0, import_react6.useCallback)(
+    () => ({
       ...buttonProps,
-      onMouseDown: handleMouseDown,
+      onMouseDown: mouseDownHandler,
       ref,
-      disabled: disabled || isLoading,
-      "data-loading": isLoading,
+      disabled: originalProps.disabled || originalProps.isLoading,
+      "data-loading": originalProps.isLoading,
       className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
-      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon_default, { name: "loading", size, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon_default, { name, size }),
-        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ripple_default, { ...rippleProps })
-      ] })
-    }
+      "aria-label": originalProps["aria-label"] || autoAriaLabel
+    }),
+    [
+      buttonProps,
+      mouseDownHandler,
+      ref,
+      originalProps.disabled,
+      originalProps.isLoading,
+      originalProps["aria-label"],
+      autoAriaLabel,
+      slots,
+      classNames == null ? void 0 : classNames.base
+    ]
   );
+  const getContentProps = (0, import_react6.useCallback)(
+    () => ({
+      className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
+      size: originalProps.size
+    }),
+    [slots, classNames, originalProps.size]
+  );
+  const renderContent = (content) => {
+    if ((0, import_react6.isValidElement)(content)) {
+      const _content = content;
+      const existingProps = _content.props;
+      const mergedProps = {
+        ...getContentProps(),
+        className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
+      };
+      return (0, import_react6.cloneElement)(content, mergedProps);
+    } else {
+      const contentProps = getContentProps();
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...contentProps, children: content });
+    }
+  };
+  const buttonContent = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    startContent && renderContent(startContent),
+    children,
+    endContent && renderContent(endContent),
+    !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ripple_default, { ...getRippleProps() })
+  ] }) });
+  if (asChild && (0, import_react6.isValidElement)(children)) {
+    const childElement = children;
+    const baseProps = getBaseProps();
+    const mergedProps = {
+      ...childElement.props,
+      ...baseProps,
+      className: `${baseProps.className || ""} ${childElement.props.className || ""}`.trim(),
+      onClick: (e) => {
+        var _a, _b, _c;
+        (_b = (_a = childElement.props).onClick) == null ? void 0 : _b.call(_a, e);
+        (_c = baseProps.onClick) == null ? void 0 : _c.call(baseProps, e);
+      },
+      onMouseDown: (e) => {
+        var _a, _b, _c;
+        (_b = (_a = childElement.props).onMouseDown) == null ? void 0 : _b.call(_a, e);
+        (_c = baseProps.onMouseDown) == null ? void 0 : _c.call(baseProps, e);
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: originalProps.isLoading ? renderContent(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon_default, { name: "loading", className: "animate-spin" })) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        startContent && renderContent(startContent),
+        childElement.props.children,
+        endContent && renderContent(endContent),
+        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ripple_default, { ...getRippleProps() })
+      ] }) })
+    };
+    return (0, import_react6.cloneElement)(childElement, mergedProps);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { ...getBaseProps(), children: buttonContent });
 });
-IconButton.displayName = "IconButton";
-var icon_button_default = IconButton;
-var iconButtonStyle = tv({
+Button.displayName = "Button";
+var button_default = Button;
+var buttonStyle = tv({
+  extend: buttonBaseStyle,
   slots: {
-    base: [
-      "relative",
-      "flex",
-      "items-center",
-      "justify-center",
-      "whitespace-nowrap",
-      "transition",
-      "duration-200",
-      "select-none",
-      "overflow-hidden",
-      "box-border"
-    ]
+    base: ["w-fit"],
+    content: []
   },
   variants: {
-    variant: {
-      solid: [],
-      soft: [],
-      outline: [],
-      ghost: []
-    },
-    color: {
-      primary: [],
-      secondary: [],
-      neutral: [],
-      info: [],
-      success: [],
-      warning: [],
-      danger: []
-    },
     size: {
       sm: {
-        base: ["w-[24px]", "h-[24px]", "rounded-sm"]
+        base: ["h-[24px]", "px-[8px]", "py-[3px]", "text-sm", "font-bold", "rounded-sm", "gap-sm"]
       },
       md: {
-        base: ["w-[32px]", "h-[32px]", "rounded-md"]
+        base: ["h-[32px]", "px-[12px]", "py-[5.5px]", "text-md", "font-bold", "rounded-md", "gap-md"]
       },
       lg: {
-        base: ["w-[40px]", "h-[40px]", "rounded-lg"]
+        base: ["h-[40px]", "px-[16px]", "py-[8px]", "text-lg", "font-bold", "rounded-lg", "gap-lg"]
       },
       xl: {
-        base: ["w-[50px]", "h-[50px]", "rounded-xl"]
+        base: ["h-[50px]", "px-[20px]", "py-[11.5px]", "text-xl", "font-bold", "rounded-xl", "gap-xl"]
       }
     },
-    isLoading: {
-      true: {}
-    },
-    disabled: {
-      true: {
-        base: ["!bg-neutral-soft", "!border-neutral-soft", "!text-neutral-light", "pointer-events-none"]
+    radius: {
+      default: {
+        base: []
+      },
+      full: {
+        base: ["rounded-full"]
+      },
+      none: {
+        base: ["rounded-none"]
       }
     },
-    isInGroup: {
+    full: {
       true: {
-        base: [
-          "[&:not(:first-child):not(:last-child)]:rounded-none",
-          "first:rounded-r-none",
-          "last:rounded-l-none",
-          "[&:not(:first-child)]:border-l-0"
-        ]
+        base: ["w-full"]
       }
+    },
+    isLoading: {
+      true: {}
     }
   },
-  compoundVariants: [
-    {
-      variant: "solid",
-      color: "primary",
-      class: {
-        base: ["text-white", "bg-primary-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "secondary",
-      class: {
-        base: ["text-white", "bg-secondary-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "neutral",
-      class: {
-        base: ["text-white", "bg-neutral-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "info",
-      class: {
-        base: ["text-white", "bg-info-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "success",
-      class: {
-        base: ["text-white", "bg-success-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "warning",
-      class: {
-        base: ["text-white", "bg-warning-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "danger",
-      class: {
-        base: ["text-white", "bg-danger-main", "hover:bg-gradient-to-t", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    // soft
-    {
-      variant: "soft",
-      color: "primary",
-      class: {
-        base: ["text-primary-main", "bg-primary-soft", "!border-primary-soft", "hover:!border-primary-light"]
-      }
-    },
-    {
-      variant: "soft",
-      color: "secondary",
-      class: {
-        base: ["text-secondary-main", "bg-secondary-soft", "!border-secondary-soft", "hover:!border-secondary-light"]
-      }
-    },
-    {
-      variant: "soft",
-      color: "neutral",
-      class: {
-        base: ["text-neutral-main", "bg-neutral-soft", "!border-neutral-soft", "hover:!border-neutral-light"]
-      }
-    },
-    {
-      variant: "soft",
-      color: "info",
-      class: {
-        base: ["text-info-main", "bg-info-soft", "!border-info-soft", "hover:!border-info-light"]
-      }
-    },
-    {
-      variant: "soft",
-      color: "success",
-      class: {
-        base: ["text-success-main", "bg-success-soft", "!border-success-soft", "hover:!border-success-light"]
-      }
-    },
-    {
-      variant: "soft",
-      color: "warning",
-      class: {
-        base: ["text-warning-main", "bg-warning-soft", "!border-warning-soft", "hover:!border-warning-light"]
-      }
-    },
-    {
-      variant: "soft",
-      color: "danger",
-      class: {
-        base: ["text-danger-main", "bg-danger-soft", "!border-danger-soft", "hover:!border-danger-light"]
-      }
-    },
-    // outline
-    {
-      variant: "outline",
-      color: "primary",
-      class: {
-        base: ["bg-body-background", "!border-primary-main", "text-primary-main", "hover:bg-primary-soft"]
-      }
-    },
-    {
-      variant: "outline",
-      color: "secondary",
-      class: {
-        base: ["bg-body-background", "!border-secondary-main", "text-secondary-main", "hover:bg-secondary-soft"]
-      }
-    },
-    {
-      variant: "outline",
-      color: "neutral",
-      class: {
-        base: ["bg-body-background", "!border-neutral-light", "text-neutral-main", "hover:bg-neutral-soft"]
-      }
-    },
-    {
-      variant: "outline",
-      color: "info",
-      class: {
-        base: ["bg-body-background", "!border-info-main", "text-info-main", "hover:bg-info-soft"]
-      }
-    },
-    {
-      variant: "outline",
-      color: "success",
-      class: {
-        base: ["bg-body-background", "!border-success-main", "text-success-main", "hover:bg-success-soft"]
-      }
-    },
-    {
-      variant: "outline",
-      color: "warning",
-      class: {
-        base: ["bg-body-background", "!border-warning-main", "text-warning-main", "hover:bg-warning-soft"]
-      }
-    },
-    {
-      variant: "outline",
-      color: "danger",
-      class: {
-        base: ["bg-body-background", "!border-danger-main", "text-danger-main", "hover:bg-danger-soft"]
-      }
-    },
-    // ghost
-    {
-      variant: "ghost",
-      color: "primary",
-      class: {
-        base: ["text-primary-main", "border-transparent", "hover:bg-primary-soft"]
-      }
-    },
-    {
-      variant: "ghost",
-      color: "secondary",
-      class: {
-        base: ["text-secondary-main", "border-transparent", "hover:bg-secondary-soft"]
-      }
-    },
-    {
-      variant: "ghost",
-      color: "neutral",
-      class: {
-        base: ["text-neutral-main", "border-transparent", "hover:bg-neutral-soft"]
-      }
-    },
-    {
-      variant: "ghost",
-      color: "info",
-      class: {
-        base: ["text-info-main", "border-transparent", "hover:bg-info-soft"]
-      }
-    },
-    {
-      variant: "ghost",
-      color: "success",
-      class: {
-        base: ["text-success-main", "border-transparent", "hover:bg-success-soft"]
-      }
-    },
-    {
-      variant: "ghost",
-      color: "warning",
-      class: {
-        base: ["text-warning-main", "border-transparent", "hover:bg-warning-soft"]
-      }
-    },
-    {
-      variant: "ghost",
-      color: "danger",
-      class: {
-        base: ["text-danger-main", "border-transparent", "hover:bg-danger-soft"]
-      }
-    },
-    // soft/outline + size
-    {
-      variant: ["soft", "outline"],
-      size: "sm",
-      class: {
-        base: ["border-sm"]
-      }
-    },
-    {
-      variant: ["soft", "outline"],
-      size: "md",
-      class: {
-        base: ["border-md"]
+  defaultVariants: {
+    size: "md",
+    variant: "solid",
+    color: "primary",
+    full: false,
+    disabled: false,
+    isLoading: false,
+    isInGroup: false
+  }
+});
+
+// src/components/button/icon-button.tsx
+var import_react7 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var IconButton = (0, import_react7.forwardRef)((props, ref) => {
+  const [localProps, variantProps] = mapPropsVariants(props, iconButtonStyle.variantKeys);
+  const { classNames, name, disableRipple, disabled, isLoading, size, isInGroup, onMouseDown, ...buttonProps } = {
+    ...localProps,
+    ...variantProps
+  };
+  const slots = (0, import_react7.useMemo)(() => iconButtonStyle({ ...variantProps }), [variantProps]);
+  const { onPress, onClear, ripples } = useRipple();
+  const handleRipple = (0, import_react7.useCallback)(
+    (e) => {
+      if (!disableRipple && !disabled) {
+        onPress(e);
       }
     },
-    {
-      variant: ["soft", "outline"],
-      size: "lg",
-      class: {
-        base: ["border-lg"]
-      }
+    [disableRipple, disabled, onPress]
+  );
+  const handleMouseDown = (0, import_react7.useCallback)(
+    (e) => {
+      onMouseDown == null ? void 0 : onMouseDown(e);
+      handleRipple(e);
     },
+    [onMouseDown, handleRipple]
+  );
+  const rippleProps = (0, import_react7.useMemo)(() => ({ ripples, onClear }), [ripples, onClear]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
     {
-      variant: ["soft", "outline"],
-      size: "xl",
-      class: {
-        base: ["border-xl"]
+      ...buttonProps,
+      onMouseDown: handleMouseDown,
+      ref,
+      disabled: disabled || isLoading,
+      "data-loading": isLoading,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon_default, { name: "loading", size, className: "animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon_default, { name, size }),
+        !disableRipple && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ripple_default, { ...rippleProps })
+      ] })
+    }
+  );
+});
+IconButton.displayName = "IconButton";
+var icon_button_default = IconButton;
+var iconButtonStyle = tv({
+  extend: buttonBaseStyle,
+  variants: {
+    size: {
+      sm: {
+        base: ["w-[24px]", "h-[24px]", "rounded-sm"]
+      },
+      md: {
+        base: ["w-[32px]", "h-[32px]", "rounded-md"]
+      },
+      lg: {
+        base: ["w-[40px]", "h-[40px]", "rounded-lg"]
+      },
+      xl: {
+        base: ["w-[50px]", "h-[50px]", "rounded-xl"]
       }
     },
-    // disabled + variant
-    {
-      variant: ["soft", "ghost"],
-      disabled: true,
-      class: {
-        base: ["!border-neutral-soft"]
+    full: {
+      true: {
+        base: ["w-full", "h-full"]
       }
     },
-    {
-      variant: ["outline"],
-      disabled: true,
-      class: {
-        base: ["!border-neutral-light"]
-      }
+    isLoading: {
+      true: {}
     }
-  ],
+  },
   defaultVariants: {
     size: "md",
     variant: "solid",
@@ -6988,10 +7219,11 @@ var TextButton = (0, import_react8.forwardRef)((originalProps, ref) => {
 TextButton.displayName = "TextButton";
 var text_button_default = TextButton;
 var textButtonStyle = tv({
+  extend: buttonBaseStyle,
   slots: {
-    base: ["flex", "items-center", "justify-center", "whitespace-nowrap", "overflow-hidden"],
+    base: ["!bg-transparent", "!border-transparent", "active:text-primary-strong", "font-bold"],
     content: [],
-    underline: ["underline", "decoration-skip-ink", "underline-offset-auto"]
+    underline: ["underline", "decoration-skip-ink"]
   },
   variants: {
     variant: {
@@ -7010,35 +7242,30 @@ var textButtonStyle = tv({
     size: {
       sm: {
         base: ["text-sm"],
-        underline: ["decoration-[1px]"]
+        underline: ["decoration-[0.6px]", "underline-offset-[2.4px]"]
       },
       md: {
         base: ["text-md"],
-        underline: ["decoration-[1.25px]"]
+        underline: ["decoration-[0.7px]", "underline-offset-[2.8px]"]
       },
       lg: {
         base: ["text-lg"],
-        underline: ["decoration-[1.5px]"]
+        underline: ["decoration-[0.8px]", "underline-offset-[3.2px]"]
       },
       xl: {
         base: ["text-xl"],
-        underline: ["decoration-[1.75px]"]
+        underline: ["decoration-[0.9px]", "underline-offset-[3.6px]"]
       }
     },
     disabled: {
       true: {
-        base: ["!text-neutral-light", "pointer-events-none"]
-      }
+        base: ["!bg-transparent", "!border-transparent", "!text-neutral-light", "pointer-events-none"]
+      },
+      false: {}
     },
     isInGroup: {
-      true: {
-        base: [
-          "[&:not(:first-child):not(:last-child)]:rounded-none",
-          "first:rounded-r-none",
-          "last:rounded-l-none",
-          "[&:not(:first-child)]:border-l-0"
-        ]
-      }
+      true: {},
+      false: {}
     }
   },
   compoundVariants: [
@@ -7057,7 +7284,7 @@ var textButtonStyle = tv({
     {
       color: "neutral",
       class: {
-        base: ["text-neutral-main", "hover:text-neutral-dark", "active:text-neutral-strong"]
+        base: ["text-body-foreground", "hover:text-neutral-dark", "active:text-neutral-strong"]
       }
     },
     {
@@ -7335,10 +7562,10 @@ var inputStyle = tv(
         "placeholder:text-neutral-main",
         "outline-none",
         "focus:ring-0",
-        "group-has-[:hover:not(:read-only):not(:focus)]/input:text-neutral-dark",
-        "group-has-[:hover:not(:read-only):not(:focus)]/input:placeholder:text-neutral-dark",
-        "group-has-[:focus:not(:read-only)]/input:text-neutral-dark",
-        "group-has-[:focus:not(:read-only)]/input:placeholder:text-neutral-dark",
+        "group-hover/input:text-neutral-dark",
+        "group-hover/input:placeholder:text-neutral-dark",
+        "focus:text-neutral-dark",
+        "focus:placeholder:text-neutral-dark",
         "read-only:!text-body-foreground",
         "read-only:placeholder:!text-body-foreground"
       ],
@@ -7347,10 +7574,10 @@ var inputStyle = tv(
         "items-center",
         "select-none",
         "text-neutral-main",
-        "group-has-[:hover:not(:read-only):not(:focus)]/input:text-neutral-dark",
-        "read-only:!text-body-foreground"
+        "transition-colors",
+        "group-hover/input:text-neutral-dark"
       ],
-      helperMessage: ["text-neutral-main", "group-has-[:hover:not(:read-only):not(:focus)]/input:text-neutral-dark"],
+      helperMessage: ["text-neutral-main", "group-hover/input:text-neutral-dark"],
       errorMessage: ["text-danger-main"],
       readonlyWrapper: [
         "pointer-events-none",
@@ -7389,46 +7616,46 @@ var inputStyle = tv(
       },
       color: {
         primary: {
-          content: ["group-has-[:focus:not(:read-only)]/input:text-primary-main", "read-only:!text-primary-main"],
-          helperMessage: ["group-has-[:focus:not(:read-only)]/input:text-primary-main"],
-          readonly: ["text-primary-main"]
+          content: ["group-focus-within/input:!text-primary-main"],
+          helperMessage: ["group-focus-within/input:!text-primary-main"],
+          readonly: ["!text-primary-main"]
         },
         secondary: {
-          content: ["group-has-[:focus:not(:read-only)]/input:text-secondary-main", "read-only:!text-secondary-main"],
-          helperMessage: ["group-has-[:focus:not(:read-only)]/input:text-secondary-main"],
-          readonly: ["text-secondary-main"]
+          content: ["group-focus-within/input:!text-secondary-main"],
+          helperMessage: ["group-focus-within/input:!text-secondary-main"],
+          readonly: ["!text-secondary-main"]
         }
       },
       size: {
         sm: {
-          base: ["text-sm", "gap-[4px]"],
+          base: ["text-sm", "gap-sm"],
           label: ["text-sm"],
-          innerWrapper: ["gap-[4px]"],
-          inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "gap-[4px]"],
+          innerWrapper: ["gap-sm"],
+          inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-xs", "gap-sm"],
           helperMessage: ["text-sm"],
           errorMessage: ["text-sm"]
         },
         md: {
-          base: ["text-md", "gap-[6px]"],
+          base: ["text-md", "gap-md"],
           label: ["text-md"],
-          innerWrapper: ["gap-[6px]"],
-          inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "gap-[6px]"],
+          innerWrapper: ["gap-md"],
+          inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-sm", "gap-md"],
           helperMessage: ["text-sm"],
           errorMessage: ["text-sm"]
         },
         lg: {
-          base: ["text-lg", "gap-[8px]"],
+          base: ["text-lg", "gap-lg"],
           label: ["text-lg"],
-          innerWrapper: ["gap-[8px]"],
-          inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "gap-[8px]"],
+          innerWrapper: ["gap-lg"],
+          inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-md", "gap-lg"],
           helperMessage: ["text-md"],
           errorMessage: ["text-md"]
         },
         xl: {
-          base: ["text-xl", "gap-[10px]"],
+          base: ["text-xl", "gap-xl"],
           label: ["text-xl"],
-          innerWrapper: ["gap-[10px]"],
-          inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "gap-[10px]"],
+          innerWrapper: ["gap-xl"],
+          inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-lg", "gap-xl"],
           helperMessage: ["text-md"],
           errorMessage: ["text-md"]
         }
@@ -7791,7 +8018,7 @@ var tabs = tv({
 
 // src/components/textarea/textarea.tsx
 var import_react13 = require("react");
-var import_tailwind_variants13 = require("tailwind-variants");
+var import_tailwind_variants14 = require("tailwind-variants");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var Textarea = (0, import_react13.forwardRef)((originalProps, ref) => {
   var _a, _b;
@@ -7889,7 +8116,7 @@ var Textarea = (0, import_react13.forwardRef)((originalProps, ref) => {
 });
 Textarea.displayName = "Textarea";
 var textarea_default = Textarea;
-var textareaStyle = (0, import_tailwind_variants13.tv)({
+var textareaStyle = (0, import_tailwind_variants14.tv)({
   slots: {
     base: ["group/textarea", "flex", "select-none"],
     vertical: ["flex-col"],
@@ -7904,17 +8131,17 @@ var textareaStyle = (0, import_tailwind_variants13.tv)({
       "outline-none",
       "resize-none",
       "focus:ring-0",
-      "group-has-[:hover]/textarea:!text-neutral-dark",
-      "group-has-[:hover]/textarea:placeholder:!text-neutral-dark",
-      "group-has-[:focus]/textarea:!text-neutral-dark",
-      "group-has-[:focus]/textarea:placeholder:!text-neutral-dark",
+      "group-hover/textarea:!text-neutral-dark",
+      "group-hover/textarea:placeholder:!text-neutral-dark",
+      "focus:!text-neutral-dark",
+      "focus:placeholder:!text-neutral-dark",
       "group-has-[p.error]/textarea:bg-danger-soft",
       "group-has-[p.error]/textarea:!text-danger-main",
       "group-has-[p.error]/textarea:placeholder:!text-danger-main"
     ],
     helperMessage: [
       "text-neutral-main",
-      "group-has-[:hover]/textarea:text-neutral-dark",
+      "group-hover/textarea:text-neutral-dark",
       "group-has-[p.error]/textarea:text-danger-main",
       "group-has-[p.error]/textarea:hover:text-danger-main",
       "group-has-[p.error]/textarea:focus:text-danger-main"
@@ -7937,8 +8164,8 @@ var textareaStyle = (0, import_tailwind_variants13.tv)({
       outline: {
         textarea: [
           "border-neutral-light",
-          "group-has-[:hover]/textarea:bg-trans-soft",
-          "group-has-[:focus]/textarea:bg-body-background",
+          "group-hover/textarea:bg-trans-soft",
+          "focus:bg-body-background",
           "group-has-[p.error]/textarea:border-danger-main"
         ],
         readonlyWrapper: ["[&>textarea]:!bg-trans-soft"]
@@ -7946,50 +8173,44 @@ var textareaStyle = (0, import_tailwind_variants13.tv)({
     },
     color: {
       primary: {
-        helperMessage: [
-          "group-has-[:focus]/textarea:text-primary-main",
-          "group-has-[:focus]/textarea:hover:text-primary-main"
-        ],
+        helperMessage: ["group-focus-within/textarea:!text-primary-main"],
         readonly: ["!text-primary-main"]
       },
       secondary: {
-        helperMessage: [
-          "group-has-[:focus]/textarea:text-secondary-main",
-          "group-has-[:focus]/textarea:hover:text-secondary-main"
-        ],
+        helperMessage: ["group-focus-within/textarea:!text-secondary-main"],
         readonly: ["!text-secondary-main"]
       }
     },
     size: {
       sm: {
-        base: ["text-sm", "gap-[4px]"],
+        base: ["text-sm", "gap-sm"],
         label: ["text-sm"],
-        wrapper: ["gap-[4px]"],
-        textarea: ["w-[240px]", "rounded-sm", "p-[8px]"],
+        wrapper: ["gap-sm"],
+        textarea: ["w-[240px]", "rounded-sm", "p-md"],
         helperMessage: ["text-sm"],
         errorMessage: ["text-sm"]
       },
       md: {
-        base: ["text-md", "gap-[6px]"],
+        base: ["text-md", "gap-md"],
         label: ["text-md"],
-        wrapper: ["gap-[6px]"],
-        textarea: ["w-[240px]", "rounded-md", "p-[8px]"],
+        wrapper: ["gap-md"],
+        textarea: ["w-[240px]", "rounded-md", "p-md"],
         helperMessage: ["text-sm"],
         errorMessage: ["text-sm"]
       },
       lg: {
-        base: ["text-lg", "gap-[8px]"],
+        base: ["text-lg", "gap-lg"],
         label: ["text-lg"],
-        wrapper: ["gap-[8px]"],
-        textarea: ["w-[240px]", "rounded-lg", "p-[10px]"],
+        wrapper: ["gap-lg"],
+        textarea: ["w-[240px]", "rounded-lg", "p-lg"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       },
       xl: {
-        base: ["text-xl", "gap-[10px]"],
+        base: ["text-xl", "gap-xl"],
         label: ["text-xl"],
-        wrapper: ["gap-[10px]"],
-        textarea: ["w-[240px]", "rounded-lg", "p-[10px]"],
+        wrapper: ["gap-xl"],
+        textarea: ["w-[240px]", "rounded-lg", "p-lg"],
         helperMessage: ["text-md"],
         errorMessage: ["text-md"]
       }
@@ -8005,18 +8226,17 @@ var textareaStyle = (0, import_tailwind_variants13.tv)({
         textarea: ["w-full"]
       }
     },
+    readonly: {
+      true: {
+        readonlyWrapper: ["pointer-events-none"],
+        textarea: ["!text-body-foreground", "placeholder:!text-body-foreground"],
+        helperMessage: ["!text-body-foreground"]
+      }
+    },
     disabled: {
       true: {
-        textarea: [
-          "bg-neutral-soft",
-          "pointer-events-none",
-          "text-neutral-light",
-          "placeholder:!text-neutral-light",
-          "group-has-[p.error]/textarea:text-danger-light",
-          "group-has-[p.error]/textarea:border-danger-light",
-          "group-has-[p.error]/textarea:placeholder:!text-danger-light"
-        ],
-        helperMessage: ["!text-neutral-light", "group-has-[p.error]/textarea:!text-danger-light"],
+        textarea: ["!bg-neutral-soft", "pointer-events-none", "!text-neutral-light", "placeholder:!text-neutral-light"],
+        helperMessage: ["!text-neutral-light"],
         errorMessage: ["!text-danger-light"]
       }
     }
@@ -8050,11 +8270,47 @@ var textareaStyle = (0, import_tailwind_variants13.tv)({
         textarea: ["border-xl"]
       }
     },
+    {
+      readonly: true,
+      color: "primary",
+      class: {
+        textarea: ["!text-primary-main", "placeholder:!text-primary-main"]
+      }
+    },
+    {
+      readonly: true,
+      color: "secondary",
+      class: {
+        textarea: ["!text-secondary-main", "placeholder:!text-secondary-main"]
+      }
+    },
+    {
+      disabled: true,
+      class: {
+        textarea: [
+          "group-has-[p.error]/textarea:!text-danger-light",
+          "group-has-[p.error]/textarea:placeholder:!text-danger-light"
+        ],
+        helperMessage: ["group-has-[p.error]/textarea:!text-danger-light"],
+        errorMessage: ["!text-danger-light"]
+      }
+    },
     {
       disabled: true,
       variant: ["outline"],
       class: {
-        textarea: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
+        textarea: ["!bg-body-background", "group-has-[p.error]/textarea:!border-danger-light"]
+      }
+    },
+    {
+      disabled: false,
+      class: {
+        textarea: [
+          "group-has-[p.error]/textarea:!text-danger-main",
+          "group-has-[p.error]/textarea:placeholder:!text-danger-main"
+        ],
+        helperMessage: ["group-has-[p.error]/textarea:!text-danger-main"],
+        errorMessage: ["!text-danger-main"]
       }
     }
   ],
@@ -8071,7 +8327,7 @@ var textareaStyle = (0, import_tailwind_variants13.tv)({
 
 // src/components/table/table.tsx
 var import_react19 = require("react");
-var import_tailwind_variants17 = require("tailwind-variants");
+var import_tailwind_variants18 = require("tailwind-variants");
 
 // src/components/table/table-head.tsx
 var import_react15 = require("react");
@@ -8128,7 +8384,7 @@ var CheckBoxIcon = ({ size, isSelected, className }) => {
     "path",
     {
       d: "M2.16667 6.90123L5.63334 10.1111L10.8333 2.88889",
-      stroke: "white",
+      stroke: "currentColor",
       strokeWidth,
       strokeLinecap: "round",
       strokeLinejoin: "round",
@@ -8161,7 +8417,7 @@ var checkboxStyle = tv({
       "group-has-[:checked]:after:opacity-100",
       "before:transition duration-200"
     ],
-    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-neutral-light"],
+    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-common-white"],
     labelReverse: ["flex-row-reverse"],
     label: ["relative", "text-body-foreground", "select-none"]
   },
@@ -8194,54 +8450,26 @@ var checkboxStyle = tv({
     },
     size: {
       sm: {
-        base: ["gap-[8px]"],
-        wrapper: [
-          "w-[12px]",
-          "h-[12px]",
-          "rounded-[2px]",
-          "before:border-sm",
-          "before:rounded-[2px]",
-          "after:rounded-[2px]"
-        ],
+        base: ["gap-lg"],
+        wrapper: ["w-[12px]", "h-[12px]", "rounded-2", "before:border-sm", "before:rounded-2", "after:rounded-2"],
         label: ["text-sm"],
         icon: ["w-[10px]", "h-[10px]"]
       },
       md: {
-        base: ["gap-[8px]"],
-        wrapper: [
-          "w-[15px]",
-          "h-[15px]",
-          "rounded-[2px]",
-          "before:border-md",
-          "before:rounded-[2px]",
-          "after:rounded-[2px]"
-        ],
+        base: ["gap-lg"],
+        wrapper: ["w-[15px]", "h-[15px]", "rounded-2", "before:border-md", "before:rounded-2", "after:rounded-2"],
         label: ["text-md"],
         icon: ["w-[13px]", "h-[13px]"]
       },
       lg: {
-        base: ["gap-[10px]"],
-        wrapper: [
-          "w-[18px]",
-          "h-[18px]",
-          "rounded-[4px]",
-          "before:border-lg",
-          "before:rounded-[4px]",
-          "after:rounded-[4px]"
-        ],
+        base: ["gap-xl"],
+        wrapper: ["w-[18px]", "h-[18px]", "rounded-sm", "before:border-lg", "before:rounded-sm", "after:rounded-sm"],
         label: ["text-lg"],
         icon: ["w-[16px]", "h-[16px]"]
       },
       xl: {
-        base: ["gap-[10px]"],
-        wrapper: [
-          "w-[21px]",
-          "h-[21px]",
-          "rounded-[4px]",
-          "before:border-xl",
-          "before:rounded-[2px]",
-          "after:rounded-[2px]"
-        ],
+        base: ["gap-xl"],
+        wrapper: ["w-[21px]", "h-[21px]", "rounded-sm", "before:border-xl", "before:rounded-sm", "after:rounded-sm"],
         label: ["text-xl"],
         icon: ["w-[19px]", "h-[19px]"]
       }
@@ -8300,12 +8528,17 @@ function TableHeaderCell({
       setShowTitle(el.scrollWidth > el.clientWidth);
     }
   }, [content, isCheckbox]);
-  const titleText = !isCheckbox && showTitle ? typeof content === "string" || typeof content === "number" ? String(content) : "" : void 0;
+  const isTextContent = ["string", "number"].includes(typeof content) || content === null || content === void 0;
+  const titleText = !isCheckbox && showTitle && isTextContent ? String(content) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "th",
     {
       ref: thRef,
-      className: clsx(slots.th({ class: classNames == null ? void 0 : classNames.th }), column == null ? void 0 : column.className, !isCheckbox && "truncate"),
+      className: clsx(
+        slots.th({ class: classNames == null ? void 0 : classNames.th }),
+        column == null ? void 0 : column.className,
+        !isCheckbox && isTextContent && "truncate"
+      ),
       style: isCheckbox ? {
         width: "40px",
         minWidth: "40px",
@@ -8314,11 +8547,19 @@ function TableHeaderCell({
         flexGrow: 0,
         boxSizing: "border-box"
       } : column ? {
-        ...getCellStyle(column),
-        textAlign: "center"
+        ...getCellStyle(column)
       } : void 0,
       title: titleText,
-      children: content
+      children: isTextContent ? content : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          className: clsx(
+            "flex w-full items-center",
+            isCheckbox ? "justify-center" : (column == null ? void 0 : column.align) === "right" ? "justify-end" : (column == null ? void 0 : column.align) === "left" ? "justify-start" : "justify-center"
+          ),
+          children: content
+        }
+      )
     }
   );
 }
@@ -8345,7 +8586,7 @@ var TableHead = ({
     rowCheckbox && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       TableHeaderCell,
       {
-        content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        content: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { "data-checkbox": true, className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           checkbox_default,
           {
             size,
@@ -8401,7 +8642,16 @@ function TableCell({
         textOverflow: isTextContent ? "ellipsis" : void 0
       },
       title: showTitle && isTextContent ? String(content != null ? content : "") : void 0,
-      children: content
+      children: isTextContent ? content : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          className: clsx(
+            "flex w-full items-center",
+            column.align === "right" ? "justify-end" : column.align === "left" ? "justify-start" : "justify-center"
+          ),
+          children: content
+        }
+      )
     },
     `${row.id}-${column.field}-${colIdx}-${rowIndex}`
   );
@@ -8426,7 +8676,7 @@ var TableBody = ({
     {
       className: clsx(slots.td({ class: classNames == null ? void 0 : classNames.td }), "text-center"),
       style: { width: "40px", minWidth: "40px", textAlign: "center" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "data-checkbox": true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { "data-checkbox": true, className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(checkbox_default, { size, checked: checkedRows.has(rowId), onChange: (e) => onCheckRow(rowId, e.target.checked) }) })
     },
     `checkbox-${rowId}-${rowIndex}`
   );
@@ -8534,32 +8784,34 @@ var Pagination = (0, import_react18.forwardRef)((originalProps, ref) => {
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-      showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "div",
-        {
-          "aria-label": "firstPage",
-          "data-disabled": isFirstPageDisabled,
-          className: slots.icon({
-            class: clsx(classNames == null ? void 0 : classNames.icon, isFirstPageDisabled && "!text-neutral-light !cursor-default")
-          }),
-          onClick: !isFirstPageDisabled ? handleClickMovePage(1) : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "left-double-chevron", size })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "div",
-        {
-          "aria-label": "prevPage",
-          "data-disabled": isPrevPageDisabled,
-          className: slots.icon({
-            class: clsx(classNames == null ? void 0 : classNames.icon, isPrevPageDisabled && "!text-neutral-light !cursor-default")
-          }),
-          onClick: !isPrevPageDisabled ? handleClickMovePage(currentPage - 1) : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "left-chevron", size })
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex", children: [
+        showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "div",
+          {
+            "aria-label": "firstPage",
+            "data-disabled": isFirstPageDisabled,
+            className: slots.icon({
+              class: clsx(classNames == null ? void 0 : classNames.icon, isFirstPageDisabled && "!text-neutral-light !cursor-default")
+            }),
+            onClick: !isFirstPageDisabled ? handleClickMovePage(1) : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "left-double", size })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "div",
+          {
+            "aria-label": "prevPage",
+            "data-disabled": isPrevPageDisabled,
+            className: slots.icon({
+              class: clsx(classNames == null ? void 0 : classNames.icon, isPrevPageDisabled && "!text-neutral-light !cursor-default")
+            }),
+            onClick: !isPrevPageDisabled ? handleClickMovePage(currentPage - 1) : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "left", size })
+          }
+        )
+      ] }),
       showPageNumber && pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "div",
         {
@@ -8570,30 +8822,32 @@ var Pagination = (0, import_react18.forwardRef)((originalProps, ref) => {
         },
         index
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "div",
-        {
-          "aria-label": "nextPage",
-          "data-disabled": isNextPageDisabled,
-          className: slots.icon({
-            class: clsx(classNames == null ? void 0 : classNames.icon, isNextPageDisabled && "!text-neutral-light !cursor-default")
-          }),
-          onClick: !isNextPageDisabled ? handleClickMovePage(currentPage + 1) : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "right-chevron", size })
-        }
-      ),
-      showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-        "div",
-        {
-          "aria-label": "lastPage",
-          "data-disabled": isLastPageDisabled,
-          className: slots.icon({
-            class: clsx(classNames == null ? void 0 : classNames.icon, isLastPageDisabled && "!text-neutral-light !cursor-default")
-          }),
-          onClick: !isLastPageDisabled ? handleClickMovePage(totalPage) : void 0,
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "right-double-chevron", size })
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "div",
+          {
+            "aria-label": "nextPage",
+            "data-disabled": isNextPageDisabled,
+            className: slots.icon({
+              class: clsx(classNames == null ? void 0 : classNames.icon, isNextPageDisabled && "!text-neutral-light !cursor-default")
+            }),
+            onClick: !isNextPageDisabled ? handleClickMovePage(currentPage + 1) : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "right", size })
+          }
+        ),
+        showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          "div",
+          {
+            "aria-label": "lastPage",
+            "data-disabled": isLastPageDisabled,
+            className: slots.icon({
+              class: clsx(classNames == null ? void 0 : classNames.icon, isLastPageDisabled && "!text-neutral-light !cursor-default")
+            }),
+            onClick: !isLastPageDisabled ? handleClickMovePage(totalPage) : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon_default, { name: "right-double", size })
+          }
+        )
+      ] })
     ] }),
     showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -8620,8 +8874,8 @@ var pagination_default = Pagination;
 var paginationStyle = tv(
   {
     slots: {
-      base: ["flex", "items-center", "select-none", "gap-[20px]"],
-      wrapper: ["flex", "items-center", "overflow-hidden", "gap-[5px]"],
+      base: ["flex", "items-center", "select-none", "gap-20"],
+      wrapper: ["flex", "items-center", "overflow-hidden", "gap-5"],
       icon: [
         "flex",
         "items-center",
@@ -8643,15 +8897,24 @@ var paginationStyle = tv(
         "text-neutral-main",
         "data-[selected=true]:font-bold"
       ],
-      label: ["whitespace-nowrap", "text-neutral-main", "flex", "items-center", "gap-[5px]", "text-sm"]
+      label: ["whitespace-nowrap", "text-neutral-main", "flex", "items-center", "gap-5", "text-sm"]
     },
     variants: {
       variant: {
         solid: {
-          button: ["rounded-[5px]"]
+          button: ["rounded-sm"]
         },
         underline: {
-          button: ["rounded-0", "bg-body-background"]
+          button: [
+            "rounded-0",
+            "relative",
+            "after:content-['']",
+            "after:absolute",
+            "after:inset-x-0",
+            "after:bottom-0",
+            "after:border-solid",
+            "after:border-transparent"
+          ]
         }
       },
       size: {
@@ -8676,165 +8939,109 @@ var paginationStyle = tv(
       disabled: {
         true: {
           icon: ["!text-neutral-light", "!cursor-default"],
-          button: ["!text-neutral-light", "!cursor-default"]
-        }
-      }
-    },
-    compoundVariants: [
-      {
-        variant: "solid",
-        color: "primary",
-        class: {
-          button: [
-            "hover:text-primary-main",
-            "data-[selected=true]:text-primary-main",
-            "data-[selected=true]:bg-primary-soft"
-          ],
-          icon: ["hover:text-primary-main", "data-[disabled=true]:hover:text-neutral-light"]
-        }
-      },
-      {
-        variant: "solid",
-        color: "secondary",
-        class: {
-          button: [
-            "hover:text-secondary-main",
-            "data-[selected=true]:text-secondary-main",
-            "data-[selected=true]:bg-secondary-soft"
-          ],
-          icon: ["hover:text-secondary-main", "data-[disabled=true]:hover:text-neutral-light"]
-        }
-      },
-      {
-        variant: "solid",
-        color: "neutral",
-        class: {
-          button: [
-            "hover:text-neutral-dark",
-            "data-[selected=true]:text-neutral-dark",
-            "data-[selected=true]:bg-neutral-soft"
-          ],
-          icon: ["hover:text-neutral-dark", "data-[disabled=true]:hover:text-neutral-light"]
-        }
-      },
-      {
-        variant: "underline",
-        color: "primary",
-        class: {
-          button: ["hover:text-primary-main", "data-[selected=true]:text-primary-main"],
-          icon: ["hover:text-primary-main", "data-[disabled=true]:hover:text-neutral-light"]
-        }
-      },
-      {
-        variant: "underline",
-        color: "primary",
-        size: "sm",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1px_0_0_var(--dn-primary-main)]"]
-        }
-      },
-      {
-        variant: "underline",
-        color: "primary",
-        size: "md",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.25px_0_0_var(--dn-primary-main)]"]
+          button: ["!text-neutral-light", "!cursor-default", "data-[selected=true]:after:border-neutral-light"]
         }
-      },
-      {
-        variant: "underline",
-        color: "primary",
-        size: "lg",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.5px_0_0_var(--dn-primary-main)]"]
-        }
-      },
+      }
+    },
+    compoundVariants: [
       {
-        variant: "underline",
+        variant: "solid",
         color: "primary",
-        size: "xl",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.75px_0_0_var(--dn-primary-main)]"]
+          button: [
+            "hover:text-primary-main",
+            "data-[selected=true]:text-primary-main",
+            "data-[selected=true]:bg-primary-soft"
+          ],
+          icon: ["hover:text-primary-main", "data-[disabled=true]:hover:text-neutral-light"]
         }
       },
       {
-        variant: "underline",
+        variant: "solid",
         color: "secondary",
         class: {
-          button: ["hover:text-secondary-main", "data-[selected=true]:text-secondary-main"],
+          button: [
+            "hover:text-secondary-main",
+            "data-[selected=true]:text-secondary-main",
+            "data-[selected=true]:bg-secondary-soft"
+          ],
           icon: ["hover:text-secondary-main", "data-[disabled=true]:hover:text-neutral-light"]
         }
       },
       {
-        variant: "underline",
-        color: "secondary",
-        size: "sm",
-        class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1px_0_0_var(--dn-secondary-main)]"]
-        }
-      },
-      {
-        variant: "underline",
-        color: "secondary",
-        size: "md",
+        variant: "solid",
+        color: "neutral",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.25px_0_0_var(--dn-secondary-main)]"]
+          button: [
+            "hover:text-neutral-dark",
+            "data-[selected=true]:text-neutral-dark",
+            "data-[selected=true]:bg-neutral-soft"
+          ],
+          icon: ["hover:text-neutral-dark", "data-[disabled=true]:hover:text-neutral-light"]
         }
       },
       {
         variant: "underline",
-        color: "secondary",
-        size: "lg",
+        color: "primary",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.5px_0_0_var(--dn-secondary-main)]"]
+          button: [
+            "hover:text-primary-main",
+            "data-[selected=true]:text-primary-main",
+            "data-[selected=true]:after:border-primary-main"
+          ],
+          icon: ["hover:text-primary-main", "data-[disabled=true]:hover:text-neutral-light"]
         }
       },
       {
         variant: "underline",
         color: "secondary",
-        size: "xl",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.75px_0_0_var(--dn-secondary-main)]"]
+          button: [
+            "hover:text-secondary-main",
+            "data-[selected=true]:text-secondary-main",
+            "data-[selected=true]:after:border-secondary-main"
+          ],
+          icon: ["hover:text-secondary-main", "data-[disabled=true]:hover:text-neutral-light"]
         }
       },
       {
         variant: "underline",
         color: "neutral",
         class: {
-          button: ["hover:text-neutral-dark", "data-[selected=true]:text-neutral-dark"],
+          button: [
+            "hover:text-neutral-dark",
+            "data-[selected=true]:text-neutral-dark",
+            "data-[selected=true]:after:border-neutral-main"
+          ],
           icon: ["hover:text-neutral-dark", "data-[disabled=true]:hover:text-neutral-light"]
         }
       },
       {
         variant: "underline",
-        color: "neutral",
         size: "sm",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1px_0_0_var(--dn-neutral-main)]"]
+          button: ["after:border-b-sm"]
         }
       },
       {
         variant: "underline",
-        color: "neutral",
         size: "md",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.25px_0_0_var(--dn-neutral-main)]"]
+          button: ["after:border-b-md"]
         }
       },
       {
         variant: "underline",
-        color: "neutral",
         size: "lg",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.5px_0_0_var(--dn-neutral-main)]"]
+          button: ["after:border-b-lg"]
         }
       },
       {
         variant: "underline",
-        color: "neutral",
         size: "xl",
         class: {
-          button: ["data-[selected=true]:shadow-[inset_0_-1.75px_0_0_var(--dn-neutral-main)]"]
+          button: ["after:border-b-xl"]
         }
       }
     ],
@@ -8851,14 +9058,14 @@ var paginationStyle = tv(
 );
 
 // src/components/scroll/scrollArea.tsx
-var import_tailwind_variants16 = require("tailwind-variants");
+var import_tailwind_variants17 = require("tailwind-variants");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var ScrollArea = ({ children, className, direction, size }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: clsx(scrollAreaStyle({ direction, size }), className), children });
 };
 ScrollArea.displayName = "ScrollArea";
 var scrollArea_default = ScrollArea;
-var scrollAreaStyle = (0, import_tailwind_variants16.tv)({
+var scrollAreaStyle = (0, import_tailwind_variants17.tv)({
   base: [
     "w-full",
     "scrollbar-thumb-trans-soft",
@@ -8922,17 +9129,26 @@ var Table = (0, import_react19.forwardRef)((originalProps, ref) => {
     const checkboxWidth = rowCheckbox ? 40 : 0;
     return columnsWidth + checkboxWidth;
   }, [columns, rowCheckbox]);
+  const prevCheckedRef = (0, import_react19.useRef)("");
   (0, import_react19.useEffect)(() => {
-    onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
+    const currentCheckedStr = Array.from(checkedRowIds).sort().join(",");
+    if (prevCheckedRef.current !== currentCheckedStr) {
+      prevCheckedRef.current = currentCheckedStr;
+      onCheckedRowsChange == null ? void 0 : onCheckedRowsChange(getCheckedRowData(checkedRowIds));
+    }
   }, [checkedRowIds]);
   (0, import_react19.useEffect)(() => {
     const currentRowIds = new Set(rows.map((row) => row.id));
     const ids = Array.from(checkedRowIds);
     const hasValidCheckedRows = ids.every((id) => currentRowIds.has(id));
     if (!hasValidCheckedRows) {
-      setCheckedRowIds(new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id)));
+      const newCheckedSet = new Set(checkedRows == null ? void 0 : checkedRows.map((row) => row.id));
+      const newCheckedStr = Array.from(newCheckedSet).sort().join(",");
+      if (prevCheckedRef.current !== newCheckedStr) {
+        setCheckedRowIds(newCheckedSet);
+      }
     }
-  }, [rows.map((row) => row.id).join(",")]);
+  }, [rows]);
   (0, import_react19.useImperativeHandle)(
     ref,
     () => ({
@@ -9026,7 +9242,7 @@ var Table = (0, import_react19.forwardRef)((originalProps, ref) => {
         color,
         size: "sm",
         currentPage: page,
-        totalPage: Math.ceil(totalData / perPage),
+        totalPage: Math.ceil(totalData / (perPage || 1)),
         groupSize: paginationGroupSize,
         showFirstLastButtons,
         showPageLabel,
@@ -9038,13 +9254,13 @@ var Table = (0, import_react19.forwardRef)((originalProps, ref) => {
 });
 Table.displayName = "Table";
 var table_default = Table;
-var tableStyle = (0, import_tailwind_variants17.tv)({
+var tableStyle = (0, import_tailwind_variants18.tv)({
   slots: {
-    base: ["flex", "flex-col", "relative", "select-none", "gap-[20px]", "h-full", "min-h-0"],
+    base: ["flex", "flex-col", "relative", "select-none", "gap-20", "h-full", "min-h-0"],
     scroll: [],
     table: ["w-full", "h-auto"],
-    thead: ["w-full"],
-    tbody: ["w-full"],
+    thead: ["w-full", "px-lg"],
+    tbody: ["w-full", "[&>tr:hover]:bg-common-hover"],
     tr: ["group/tr", "outline-none", "w-full", "h-full"],
     th: [
       "text-body-foreground",
@@ -9052,9 +9268,9 @@ var tableStyle = (0, import_tailwind_variants17.tv)({
       "whitespace-nowrap",
       "outline-none",
       "align-middle",
-      "px-[10px]",
+      "px-[5px]",
       "[&>div]:flex",
-      "[&>div]:gap-[10px]"
+      "[&>div]:gap-10"
     ],
     td: [
       "relative",
@@ -9064,8 +9280,8 @@ var tableStyle = (0, import_tailwind_variants17.tv)({
       "outline-none",
       "[&>*]:z-1",
       "[&>*]:relative",
-      "px-[10px]",
-      "gap-[10px]",
+      "px-[5px]",
+      "gap-10",
       "transition duration-200",
       "align-middle"
     ],
@@ -9083,17 +9299,10 @@ var tableStyle = (0, import_tailwind_variants17.tv)({
   },
   variants: {
     variant: {
-      solid: {
-        tbody: ["[&>tr]:border-b"]
-      },
-      outline: {
-        tbody: ["[&>td]:border"],
-        th: ["border"],
-        td: ["border"]
-      },
+      solid: {},
+      outline: {},
       underline: {
-        tbody: ["[&>tr]:border-b"],
-        th: ["border-t-[2px]", "border-b"]
+        th: ["bg-body-background", "border-t-[2px]", "border-b-[1px]"]
       }
     },
     size: {
@@ -9132,26 +9341,32 @@ var tableStyle = (0, import_tailwind_variants17.tv)({
     }
   },
   compoundVariants: [
+    { variant: "solid", size: "sm", class: { tbody: ["[&>tr]:border-b-sm"] } },
+    { variant: "solid", size: "md", class: { tbody: ["[&>tr]:border-b-md"] } },
+    { variant: "solid", size: "lg", class: { tbody: ["[&>tr]:border-b-lg"] } },
+    { variant: "solid", size: "xl", class: { tbody: ["[&>tr]:border-b-xl"] } },
+    { variant: "outline", size: "sm", class: { th: ["border-sm"], td: ["border-sm"] } },
+    { variant: "outline", size: "md", class: { th: ["border-md"], td: ["border-md"] } },
+    { variant: "outline", size: "lg", class: { th: ["border-lg"], td: ["border-lg"] } },
+    { variant: "outline", size: "xl", class: { th: ["border-xl"], td: ["border-xl"] } },
+    { variant: "underline", size: "sm", class: { tbody: ["[&>tr]:border-b-sm"], th: ["border-b-sm"] } },
+    { variant: "underline", size: "md", class: { tbody: ["[&>tr]:border-b-md"], th: ["border-b-md"] } },
+    { variant: "underline", size: "lg", class: { tbody: ["[&>tr]:border-b-lg"], th: ["border-b-lg"] } },
+    { variant: "underline", size: "xl", class: { tbody: ["[&>tr]:border-b-xl"], th: ["border-b-xl"] } },
     {
       variant: "solid",
       color: "primary",
-      class: {
-        th: ["bg-primary-soft"]
-      }
+      class: { th: ["bg-primary-soft"] }
     },
     {
       variant: "solid",
       color: "secondary",
-      class: {
-        th: ["bg-secondary-soft"]
-      }
+      class: { th: ["bg-secondary-soft"] }
     },
     {
       variant: "solid",
       color: "neutral",
-      class: {
-        th: ["bg-neutral-soft"]
-      }
+      class: { th: ["bg-neutral-soft"] }
     },
     {
       variant: "outline",
@@ -9181,21 +9396,21 @@ var tableStyle = (0, import_tailwind_variants17.tv)({
       variant: "underline",
       color: "primary",
       class: {
-        th: ["bg-body-background", "border-t-[2px]", "border-b", "border-primary-main"]
+        th: ["border-primary-light"]
       }
     },
     {
       variant: "underline",
       color: "secondary",
       class: {
-        th: ["bg-body-background", "border-t-[2px]", "border-b", "border-secondary-main"]
+        th: ["border-secondary-light"]
       }
     },
     {
       variant: "underline",
       color: "neutral",
       class: {
-        th: ["bg-body-background", "border-t-[2px]", "border-b", "border-neutral-main"]
+        th: ["border-neutral-light"]
       }
     },
     {
@@ -9969,6 +10184,16 @@ var chipStyle = tv({
       xl: {
         base: ["text-xl"]
       }
+    },
+    fill: {
+      true: {
+        base: ["w-full"]
+      }
+    },
+    fit: {
+      true: {
+        base: ["w-fit"]
+      }
     }
   },
   compoundVariants: [
@@ -10094,10 +10319,7 @@ var Radio = (0, import_react23.forwardRef)((originalProps, ref) => {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("input", { ...inputProps, type: "radio", ref }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: slots.radioWrapper({ class: classNames == null ? void 0 : classNames.radioWrapper }), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.outerDot({ class: classNames == null ? void 0 : classNames.outerDot }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.innerDot({ class: classNames == null ? void 0 : classNames.innerDot }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: slots.labelWrapper({ class: classNames == null ? void 0 : classNames.labelWrapper }), children: children && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children }) })
       ]
     }
@@ -10117,25 +10339,18 @@ var radioStyle = tv({
       "cursor-pointer",
       "tap-highlight-transparent"
     ],
-    radioWrapper: ["relative", "flex-shrink-0"],
-    outerDot: [
-      "absolute",
-      "top-1/2",
-      "left-1/2",
-      "-translate-x-1/2",
-      "-translate-y-1/2",
-      "z-[1]",
+    wrapper: [
+      "relative",
+      "flex",
+      "items-center",
+      "justify-center",
+      "flex-shrink-0",
       "rounded-full",
       "border",
-      "border-default",
-      "bg-white"
+      "border-neutral-light",
+      "bg-body-background"
     ],
     innerDot: [
-      "absolute",
-      "top-1/2",
-      "left-1/2",
-      "-translate-x-1/2",
-      "-translate-y-1/2",
       "z-[2]",
       "rounded-full",
       "bg-primary-main",
@@ -10150,7 +10365,7 @@ var radioStyle = tv({
   variants: {
     color: {
       primary: {
-        outerDot: [
+        wrapper: [
           "group-has-[:checked]/radio:border-primary-main",
           "group-hover/radio:border-primary-light",
           "group-hover/radio:bg-primary-soft"
@@ -10158,7 +10373,7 @@ var radioStyle = tv({
         innerDot: ["bg-primary-main"]
       },
       secondary: {
-        outerDot: [
+        wrapper: [
           "group-has-[:checked]/radio:border-secondary-main",
           "group-hover/radio:border-secondary-light",
           "group-hover/radio:bg-secondary-soft"
@@ -10166,7 +10381,7 @@ var radioStyle = tv({
         innerDot: ["bg-secondary-main"]
       },
       neutral: {
-        outerDot: [
+        wrapper: [
           "group-has-[:checked]/radio:border-neutral-main",
           "group-hover/radio:border-neutral-light",
           "group-hover/radio:bg-neutral-soft"
@@ -10176,37 +10391,33 @@ var radioStyle = tv({
     },
     size: {
       sm: {
-        base: ["gap-[8px]"],
-        radioWrapper: ["w-[12px]", "h-[12px]"],
-        outerDot: ["w-[12px]", "h-[12px]", "border-sm"],
+        base: ["gap-lg"],
+        wrapper: ["w-[12px]", "h-[12px]", "border-sm"],
         innerDot: ["w-[6px]", "h-[6px]"],
         label: ["text-sm"]
       },
       md: {
-        base: ["gap-[8px]"],
-        radioWrapper: ["w-[14px]", "h-[14px]"],
-        outerDot: ["w-[14px]", "h-[14px]", "border-md"],
+        base: ["gap-lg"],
+        wrapper: ["w-[16px]", "h-[16px]", "border-md"],
         innerDot: ["w-[8px]", "h-[8px]"],
         label: ["text-md"]
       },
       lg: {
-        base: ["gap-[10px]"],
-        radioWrapper: ["w-[18px]", "h-[18px]"],
-        outerDot: ["w-[18px]", "h-[18px]", "border-lg"],
+        base: ["gap-xl"],
+        wrapper: ["w-[18px]", "h-[18px]", "border-lg"],
         innerDot: ["w-[10px]", "h-[10px]"],
         label: ["text-lg"]
       },
       xl: {
-        base: ["gap-[10px]"],
-        radioWrapper: ["w-[22px]", "h-[22px]"],
-        outerDot: ["w-[22px]", "h-[22px]", "border-xl"],
+        base: ["gap-xl"],
+        wrapper: ["w-[22px]", "h-[22px]", "border-xl"],
         innerDot: ["w-[12px]", "h-[12px]"],
         label: ["text-xl"]
       }
     },
     isInvalid: {
       true: {
-        outerDot: [
+        wrapper: [
           "border-danger-main",
           "bg-danger-soft",
           "group-has-[:checked]/radio:border-danger-main",
@@ -10220,7 +10431,7 @@ var radioStyle = tv({
     disabled: {
       true: {
         base: ["opacity-disabled", "cursor-not-allowed", "pointer-events-auto", "text-neutral-light"],
-        outerDot: [
+        wrapper: [
           "cursor-not-allowed",
           "border-neutral-light",
           "bg-neutral-soft",
@@ -10236,7 +10447,7 @@ var radioStyle = tv({
     readOnly: {
       true: {
         base: ["cursor-not-allowed", "pointer-events-none"],
-        outerDot: ["cursor-not-allowed", "border-neutral-light", "bg-neutral-soft"],
+        wrapper: ["cursor-not-allowed", "border-neutral-light", "bg-neutral-soft"],
         label: ["text-neutral-light", "group-has-[:checked]/radio:text-body-foreground"]
       }
     }
@@ -10251,7 +10462,7 @@ var radioStyle = tv({
 
 // src/components/switch/switch.tsx
 var import_react24 = require("react");
-var import_tailwind_variants22 = require("tailwind-variants");
+var import_tailwind_variants23 = require("tailwind-variants");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var Switch = (0, import_react24.forwardRef)((originalProps, ref) => {
   const [rawProps, variantProps] = mapPropsVariants(originalProps, switchStyle.variantKeys);
@@ -10274,24 +10485,14 @@ var Switch = (0, import_react24.forwardRef)((originalProps, ref) => {
         onChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.outerWrapper({ class: classNames == null ? void 0 : classNames.outerWrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }) }) })
   ] });
 });
 Switch.displayName = "Switch";
 var switch_default = Switch;
-var switchStyle = (0, import_tailwind_variants22.tv)({
+var switchStyle = (0, import_tailwind_variants23.tv)({
   slots: {
     base: ["group/switch", "relative", "max-w-fit", "inline-flex", "items-center", "justify-start", "cursor-pointer"],
-    outerWrapper: [
-      "relative",
-      "inline-flex",
-      "items-center",
-      "justify-start",
-      "flex-shrink-0",
-      "bg-neutral-soft",
-      "overflow-hidden",
-      "rounded-full"
-    ],
     wrapper: [
       "relative",
       "inline-flex",
@@ -10300,6 +10501,7 @@ var switchStyle = (0, import_tailwind_variants22.tv)({
       "flex-shrink-0",
       "overflow-hidden",
       "bg-neutral-light",
+      "ring-neutral-soft",
       "rounded-full"
     ],
     thumb: [
@@ -10316,23 +10518,19 @@ var switchStyle = (0, import_tailwind_variants22.tv)({
   variants: {
     size: {
       sm: {
-        outerWrapper: ["w-[32px]", "h-[16px]", "p-[2px]"],
-        wrapper: ["w-[28px]", "h-[12px]", "p-[2px]"],
+        wrapper: ["w-[28px]", "h-[12px]", "p-[2px]", "ring-2"],
         thumb: ["w-[8px]", "h-[8px]", "group-has-[:checked]/switch:ml-[16px]"]
       },
       md: {
-        outerWrapper: ["w-[48px]", "h-[24px]", "px-[3px]"],
-        wrapper: ["w-[42px]", "h-[16px]", "px-[3px]"],
+        wrapper: ["w-[42px]", "h-[18px]", "p-[3px]", "ring-3"],
         thumb: ["w-[12px]", "h-[12px]", "group-has-[:checked]/switch:ml-[24px]"]
       },
       lg: {
-        outerWrapper: ["w-[64px]", "h-[32px]", "px-[4px]"],
-        wrapper: ["w-[56px]", "h-[24px]", "px-[4px]"],
+        wrapper: ["w-[56px]", "h-[24px]", "p-[4px]", "ring-4"],
         thumb: ["w-[16px]", "h-[16px]", "group-has-[:checked]/switch:ml-[32px]"]
       },
       xl: {
-        outerWrapper: ["w-[80px]", "h-[40px]", "px-[5px]"],
-        wrapper: ["w-[70px]", "h-[30px]", "px-[5px]"],
+        wrapper: ["w-[70px]", "h-[30px]", "p-[5px]", "ring-5"],
         thumb: ["w-[20px]", "h-[20px]", "group-has-[:checked]/switch:ml-[40px]"]
       }
     },
@@ -10343,8 +10541,12 @@ var switchStyle = (0, import_tailwind_variants22.tv)({
     disabled: {
       true: {
         base: ["!pointer-events-none"],
-        outerWrapper: ["!bg-neutral-soft"],
-        wrapper: ["!bg-neutral-light", "!group-has-[:checked]/switch:bg-neutral-light", "!hover:bg-neutral-light"],
+        wrapper: [
+          "!bg-neutral-light",
+          "!ring-neutral-soft",
+          "!group-has-[:checked]/switch:bg-neutral-light",
+          "!hover:bg-neutral-light"
+        ],
         thumb: ["!bg-trans-light"]
       }
     },
@@ -10363,15 +10565,21 @@ var switchStyle = (0, import_tailwind_variants22.tv)({
     {
       color: "primary",
       class: {
-        outerWrapper: ["group-has-[:checked]/switch:bg-primary-light"],
-        wrapper: ["group-has-[:checked]/switch:bg-primary-main", "hover:bg-primary-light"]
+        wrapper: [
+          "group-has-[:checked]/switch:bg-primary-main",
+          "group-has-[:checked]/switch:ring-primary-light",
+          "hover:bg-primary-light"
+        ]
       }
     },
     {
       color: "secondary",
       class: {
-        outerWrapper: ["group-has-[:checked]/switch:bg-secondary-light"],
-        wrapper: ["group-has-[:checked]/switch:bg-secondary-main", "hover:bg-secondary-light"]
+        wrapper: [
+          "group-has-[:checked]/switch:bg-secondary-main",
+          "group-has-[:checked]/switch:ring-secondary-light",
+          "hover:bg-secondary-light"
+        ]
       }
     }
   ],
@@ -10672,18 +10880,22 @@ var import_jsx_runtime28 = require("react/jsx-runtime");
 var Modal = (0, import_react27.forwardRef)((props, ref) => {
   const [localProps, variantProps] = mapPropsVariants(props, modal.variantKeys);
   const {
-    classNames,
     isOpen,
+    iconName,
     title,
     content,
     confirmButtonText,
     cancelButtonText,
     showCloseButton = true,
     isKeyboardDismissDisabled = false,
+    hasBackdrop = true,
     onConfirm,
     onCancel,
-    extraFooter
+    extraFooter,
+    classNames,
+    ...restProps
   } = localProps;
+  const variant = props.variant || "horizontal";
   const slots = (0, import_react27.useMemo)(() => modal(variantProps), [variantProps]);
   (0, import_react27.useEffect)(() => {
     document.body.classList.toggle("overflow-hidden", !!isOpen);
@@ -10700,29 +10912,30 @@ var Modal = (0, import_react27.forwardRef)((props, ref) => {
   if (!isOpen) return null;
   return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(backdrop_default, { open: true }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.modalWrapper({ class: classNames == null ? void 0 : classNames.modalWrapper }), children: [
-        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          Icon_default,
-          {
-            size: "xl",
-            name: "close",
-            className: slots.closeIcon({ class: classNames == null ? void 0 : classNames.closeIcon }),
-            onClick: onCancel
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title }),
-          typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children: content }) : content,
-          (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.footerWrapper({ class: classNames == null ? void 0 : classNames.footerWrapper }), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.footer({ class: classNames == null ? void 0 : classNames.footer }), children: [
-              cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(button_default, { variant: "soft", color: "neutral", full: true, onClick: onCancel, children: cancelButtonText }),
-              confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(button_default, { color: props.color, full: true, onClick: onConfirm, children: confirmButtonText })
-            ] }),
-            extraFooter
-          ] })
+      hasBackdrop && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(backdrop_default, { open: true }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref, className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ...restProps, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.titleWrapper({ class: classNames == null ? void 0 : classNames.titleWrapper }), children: [
+          iconName && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+            Icon_default,
+            {
+              name: iconName,
+              size: variant === "vertical" ? 40 : 30,
+              fill: true,
+              className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
+            }
+          ),
+          title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: slots.title({ class: classNames == null ? void 0 : classNames.title }), children: title })
+        ] }),
+        showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "close", className: slots.closeIcon({ class: classNames == null ? void 0 : classNames.closeIcon }), onClick: onCancel }),
+        typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: slots.content({ class: classNames == null ? void 0 : classNames.content }), children: content }) : content,
+        (cancelButtonText || confirmButtonText) && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.footerWrapper({ class: classNames == null ? void 0 : classNames.footerWrapper }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: slots.footer({ class: classNames == null ? void 0 : classNames.footer }), children: [
+            cancelButtonText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(button_default, { variant: "outline", color: props.color, full: true, onClick: onCancel, children: cancelButtonText }),
+            confirmButtonText && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(button_default, { color: props.color, full: true, onClick: onConfirm, children: confirmButtonText })
+          ] }),
+          extraFooter
         ] })
-      ] }) })
+      ] })
     ] }),
     document.body
   );
@@ -10736,52 +10949,48 @@ var modal = tv({
       "absolute",
       "fixed",
       "top-1/2",
-      "-translate-y-1/2",
       "left-1/2",
       "-translate-x-1/2",
+      "-translate-y-1/2",
       "z-[50]",
-      "bg-body-background"
-    ],
-    modalWrapper: [
-      "min-w-[450px]",
+      "rounded-2xl",
+      "min-w-[340px]",
       "flex",
       "flex-col",
       "justify-center",
-      "p-[30px]",
-      "bg-background",
+      "gap-20",
+      "p-20",
+      "bg-body-background",
       "shadow-drop",
       "shadow-foreground/20",
-      "rounded-xlg",
-      "overflow-hidden",
-      "group-data-[icon-visibility=true]/modal:mt-[0]",
-      "group-data-[icon-visibility=true]/modal:pt-[60px]"
+      "rounded-2xl",
+      "overflow-hidden"
     ],
-    wrapper: ["flex", "flex-col", "gap-[30px]"],
-    title: ["text-xl", "font-extrabold", "text-foreground"],
-    content: ["text-md", "font-bold", "text-center", "break-words", "bg-neutral-soft", "rounded-[5px]", "p-[10px]"],
-    footerWrapper: ["flex", "flex-col", "gap-[5px]"],
-    footer: ["flex", "gap-[10px]"],
-    closeIcon: [
-      "absolute",
-      "top-[30px]",
-      "right-[30px]",
-      "cursor-pointer",
-      "z-60",
-      "group-data-[icon-visibility=true]/modal:top-[80px]"
-    ]
+    icon: [],
+    titleWrapper: ["flex", "items-center", "gap-10"],
+    title: ["text-xl", "font-extrabold", "text-body-foreground"],
+    content: ["text-md", "text-center", "break-words", "bg-trans-soft", "rounded-5", "p-lg", "text-body-foreground"],
+    footerWrapper: ["flex", "flex-col", "gap-5"],
+    footer: ["flex", "gap-10"],
+    closeIcon: ["absolute", "top-[20px]", "right-[20px]", "cursor-pointer", "z-60", "text-neutral-dark"]
   },
   variants: {
+    variant: {
+      vertical: { titleWrapper: ["flex-col"] },
+      horizontal: { titleWrapper: ["flex-row"] }
+    },
     color: {
-      primary: {},
-      secondary: {},
-      neutral: {},
-      success: {},
-      info: {},
-      warning: {},
-      danger: {}
+      primary: { icon: ["text-primary-main"] },
+      secondary: { icon: ["text-secondary-main"] },
+      neutral: { icon: ["text-neutral-main"] },
+      success: { icon: ["text-success-main"] },
+      info: { icon: ["text-info-main"] },
+      warning: { icon: ["text-warning-main"] },
+      danger: { icon: ["text-danger-main"] }
     }
   },
   defaultVariants: {
+    variant: "horizontal",
     color: "primary"
   }
 });
@@ -12699,7 +12908,7 @@ var treeStyle = tv({
 
 // src/components/fileUpload/fileUpload.tsx
 var import_react43 = require("react");
-var import_tailwind_variants34 = require("tailwind-variants");
+var import_tailwind_variants35 = require("tailwind-variants");
 
 // src/components/progress/progress.tsx
 var import_react42 = require("react");
@@ -12764,7 +12973,7 @@ var Progress = (originalProps) => {
 var progress_default = Progress;
 var progressStyle = tv({
   slots: {
-    base: ["flex flex-col gap-2 w-full"],
+    base: ["flex", "flex-col", "gap-2", "w-full"],
     track: ["z-0", "relative", "bg-neutral-soft", "overflow-hidden", "rtl:rotate-180"],
     indicator: ["h-full"],
     value: ""
@@ -12772,54 +12981,55 @@ var progressStyle = tv({
   variants: {
     color: {
       primary: {
-        indicator: ["bg-gradient-to-r from-primary-light via-primary-light to-primary-main"]
+        indicator: ["bg-gradient-to-r", "from-primary-light", "via-primary-light", "to-primary-main"]
       },
       secondary: {
-        indicator: ["bg-gradient-to-r from-secondary-light via-secondary-light to-secondary-main"]
+        indicator: ["bg-gradient-to-r", "from-secondary-light", "via-secondary-light", "to-secondary-main"]
       },
       neutral: {
-        indicator: ["bg-gradient-to-r from-neutral-light via-neutral-light to-neutral-main"]
+        indicator: ["bg-gradient-to-r", "from-neutral-light", "via-neutral-light", "to-neutral-main"]
       },
       info: {
-        indicator: ["bg-gradient-to-r from-info-light via-info-light to-info-main"]
+        indicator: ["bg-gradient-to-r", "from-info-light", "via-info-light", "to-info-main"]
       },
       success: {
-        indicator: ["bg-gradient-to-r from-success-light via-success-light to-success-main"]
+        indicator: ["bg-gradient-to-r", "from-success-light", "via-success-light", "to-success-main"]
       },
       warning: {
-        indicator: ["bg-gradient-to-r from-warning-light via-warning-light to-warning-main"]
+        indicator: ["bg-gradient-to-r", "from-warning-light", "via-warning-light", "to-warning-main"]
       },
       danger: {
-        indicator: ["bg-gradient-to-r from-danger-light via-danger-light to-danger-main"]
+        indicator: ["bg-gradient-to-r", "from-danger-light", "via-danger-light", "to-danger-main"]
       }
     },
     size: {
       sm: {
         track: ["h-[4px]", "rounded-sm"],
-        indicator: "rounded-sm"
+        indicator: ["rounded-sm"]
       },
       md: {
         track: ["h-[6px]", "rounded-md"],
-        indicator: "rounded-md"
+        indicator: ["rounded-md"]
       },
       lg: {
         track: ["h-[8px]", "rounded-lg"],
-        indicator: "rounded-lg"
+        indicator: ["rounded-lg"]
       },
       xl: {
         track: ["h-[10px]", "rounded-xl"],
-        indicator: "rounded-xl"
+        indicator: ["rounded-xl"]
       }
     },
     disabled: {
       true: {
-        base: "opacity-disabled cursor-not-allowed"
+        base: ["opacity-disabled", "cursor-not-allowed"],
+        indicator: ["bg-neutral-light"]
       }
     },
     disableAnimation: {
       true: {},
       false: {
-        indicator: "transition-transform !duration-500"
+        indicator: ["transition-transform", "!duration-500"]
       }
     },
     isIndeterminate: {
@@ -12990,7 +13200,7 @@ function FileUpload({
 }
 FileUpload.displayName = "FileUpload";
 var fileUpload_default = FileUpload;
-var fileUploadStyle = (0, import_tailwind_variants34.tv)({
+var fileUploadStyle = (0, import_tailwind_variants35.tv)({
   slots: {
     base: ["flex", "flex-col", "gap-[5px]"],
     container: ["flex", "gap-[10px]"],
@@ -13002,7 +13212,7 @@ var fileUploadStyle = (0, import_tailwind_variants34.tv)({
 });
 
 // src/components/skeleton/skeleton.tsx
-var import_tailwind_variants35 = require("tailwind-variants");
+var import_tailwind_variants36 = require("tailwind-variants");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var Skeleton = ({ color = "primary", className, speed = "normal", rounded = "md" }) => {
   const speedMap = {
@@ -13032,7 +13242,7 @@ var Skeleton = ({ color = "primary", className, speed = "normal", rounded = "md"
 };
 Skeleton.displayName = "Skeleton";
 var skeleton_default = Skeleton;
-var skeletonStyle = (0, import_tailwind_variants35.tv)({
+var skeletonStyle = (0, import_tailwind_variants36.tv)({
   slots: {
     base: [
       "relative",
@@ -14091,6 +14301,219 @@ var starRatingStyle = tv({
     size: "xl"
   }
 });
+
+// src/components/slider/slider.tsx
+var import_react50 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var clampPercentage2 = (value) => {
+  return Math.min(100, Math.max(0, value));
+};
+var Slider = (0, import_react50.forwardRef)((originalProps, ref) => {
+  const [props, variantProps] = mapPropsVariants(originalProps, sliderStyle.variantKeys);
+  const {
+    children,
+    classNames,
+    value: controlledValue,
+    defaultValue = 0,
+    minValue = 0,
+    maxValue = 100,
+    step = 1,
+    onChange,
+    disabled = false,
+    ...restProps
+  } = props;
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react50.useState)(defaultValue);
+  const [isDragging, setIsDragging] = (0, import_react50.useState)(false);
+  const isControlled = controlledValue !== void 0;
+  const value = isControlled ? controlledValue : uncontrolledValue;
+  const innerRef = (0, import_react50.useRef)(null);
+  const calculateValue = (0, import_react50.useCallback)(
+    (clientX) => {
+      if (!innerRef.current) return value;
+      const { left, width } = innerRef.current.getBoundingClientRect();
+      const percent = Math.min(Math.max((clientX - left) / width, 0), 1);
+      const exactValue = percent * (maxValue - minValue) + minValue;
+      const stepRoundedValue = Math.round(exactValue / step) * step;
+      return Math.min(Math.max(stepRoundedValue, minValue), maxValue);
+    },
+    [minValue, maxValue, step, value]
+  );
+  const updateValue = (0, import_react50.useCallback)(
+    (newValue) => {
+      if (!isControlled) {
+        setUncontrolledValue(newValue);
+      }
+      if (onChange && value !== newValue) {
+        onChange(newValue);
+      }
+    },
+    [isControlled, onChange, value]
+  );
+  const handlePointerDown = (e) => {
+    var _a;
+    if (disabled) return;
+    (_a = innerRef.current) == null ? void 0 : _a.focus();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    setIsDragging(true);
+    const newValue = calculateValue(e.clientX);
+    updateValue(newValue);
+  };
+  const handlePointerMove = (e) => {
+    if (disabled || e.buttons === 0) return;
+    const newValue = calculateValue(e.clientX);
+    updateValue(newValue);
+  };
+  const handlePointerUp = (e) => {
+    if (disabled) return;
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    setIsDragging(false);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    let newValue = value;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      newValue = Math.min(value + step, maxValue);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      newValue = Math.max(value - step, minValue);
+    } else if (e.key === "Home") {
+      newValue = minValue;
+    } else if (e.key === "End") {
+      newValue = maxValue;
+    }
+    if (newValue !== value) {
+      e.preventDefault();
+      updateValue(newValue);
+    }
+  };
+  const setRefs = (0, import_react50.useCallback)(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  const percentage = clampPercentage2((value - minValue) / (maxValue - minValue) * 100);
+  const slots = (0, import_react50.useMemo)(() => sliderStyle({ ...variantProps }), [variantProps]);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+    "div",
+    {
+      ref: setRefs,
+      className: slots.base({ class: classNames == null ? void 0 : classNames.base }),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      tabIndex: disabled ? void 0 : 0,
+      role: "slider",
+      "aria-valuemin": minValue,
+      "aria-valuemax": maxValue,
+      "aria-valuenow": value,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: slots.track({ class: classNames == null ? void 0 : classNames.track }), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "div",
+          {
+            className: slots.indicator({ class: classNames == null ? void 0 : classNames.indicator }),
+            style: { width: `${percentage}%`, transitionDuration: isDragging ? "0ms" : void 0 }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          "div",
+          {
+            className: slots.thumb({ class: classNames == null ? void 0 : classNames.thumb }),
+            style: { left: `${percentage}%`, transitionDuration: isDragging ? "0ms" : void 0 }
+          }
+        )
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+var slider_default = Slider;
+var sliderStyle = tv({
+  slots: {
+    base: [
+      "relative",
+      "flex",
+      "flex-col",
+      "justify-center",
+      "w-full",
+      "touch-none",
+      "select-none",
+      "outline-none",
+      "cursor-pointer"
+    ],
+    track: ["z-0", "relative", "w-full", "bg-neutral-soft"],
+    indicator: ["absolute", "h-full", "top-0", "left-0", "border-none", "transition-all"],
+    thumb: [
+      "z-10",
+      "absolute",
+      "flex",
+      "items-center",
+      "justify-center",
+      "top-1/2",
+      "-translate-y-1/2",
+      "-translate-x-1/2",
+      "bg-white",
+      "shadow-small",
+      "rounded-full",
+      "transition-all",
+      "outline-none",
+      "cursor-grab",
+      "active:cursor-grabbing"
+    ]
+  },
+  variants: {
+    color: {
+      primary: {
+        indicator: ["bg-primary-light"],
+        thumb: ["bg-primary-main", "ring-[color-mix(in_srgb,var(--dn-primary-main)_20%,transparent)]"]
+      },
+      secondary: {
+        indicator: ["bg-secondary-light"],
+        thumb: ["bg-secondary-main", "ring-[color-mix(in_srgb,var(--dn-secondary-main)_20%,transparent)]"]
+      }
+    },
+    size: {
+      sm: {
+        track: ["h-[4px]", "rounded-sm"],
+        indicator: ["rounded-sm"],
+        thumb: ["w-[8px]", "h-[8px]", "hover:ring-2"]
+      },
+      md: {
+        track: ["h-[6px]", "rounded-md"],
+        indicator: ["rounded-md"],
+        thumb: ["w-[10px]", "h-[10px]", "hover:ring-3"]
+      },
+      lg: {
+        track: ["h-[8px]", "rounded-lg"],
+        indicator: ["rounded-lg"],
+        thumb: ["w-[12px]", "h-[12px]", "hover:ring-4"]
+      },
+      xl: {
+        track: ["h-[10px]", "rounded-xl"],
+        indicator: ["rounded-xl"],
+        thumb: ["w-[14px]", "h-[14px]", "hover:ring-5"]
+      }
+    },
+    disabled: {
+      true: {
+        base: ["opacity-disabled", "cursor-not-allowed", "!pointer-events-none"],
+        indicator: ["bg-neutral-light"],
+        thumb: ["bg-neutral-main", "cursor-not-allowed"]
+      }
+    }
+  },
+  defaultVariants: {
+    color: "primary",
+    size: "md",
+    disabled: false
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -14126,6 +14549,7 @@ var starRatingStyle = tv({
   Select,
   SimpleBarChart,
   Skeleton,
+  Slider,
   StarRating,
   Switch,
   Table,