@deepnoid/ui 0.1.223 → 1.0.0

package/dist/components/button/button.js

@@ -113,6 +113,352 @@ 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 = {
+  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: "" }
+  }
+};
+
 // ../tailwind-config/src/typography/font.ts
 var fontSize = {
   h1: [
@@ -316,7 +662,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
@@ -325,8 +671,19 @@ 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
+var borderWidth = {
+  sm: "1px",
+  md: "1.25px",
+  lg: "1.5px",
+  xl: "1.75px"
 };
 
 // ../tailwind-config/src/space/gap.ts
@@ -334,7 +691,11 @@ var gap = {
   sm: "4px",
   md: "6px",
   lg: "8px",
-  xl: "10px"
+  xl: "10px",
+  5: "5px",
+  10: "10px",
+  20: "20px",
+  30: "30px"
 };
 
 // src/utils/tailwind-variants.ts
@@ -349,11 +710,464 @@ 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)] }]
     }
   }
 });
 
+// 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"]
+      }
+    },
+    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"
+        ]
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      color: "primary",
+      class: {
+        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:[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:[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:[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:[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:[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:[background:linear-gradient(0deg,var(--dn-trans-light)_0%,var(--dn-trans-light)_100%),var(--dn-danger-main)]",
+          "active:bg-danger-dark"
+        ]
+      }
+    },
+    // soft & color
+    {
+      variant: "soft",
+      color: "primary",
+      class: {
+        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",
+          "active:bg-secondary-light"
+        ]
+      }
+    },
+    {
+      variant: "soft",
+      color: "neutral",
+      class: {
+        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", "active:bg-info-light"]
+      }
+    },
+    {
+      variant: "soft",
+      color: "success",
+      class: {
+        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",
+          "active:bg-warning-light"
+        ]
+      }
+    },
+    {
+      variant: "soft",
+      color: "danger",
+      class: {
+        base: [
+          "text-danger-main",
+          "bg-danger-soft",
+          "border-danger-soft",
+          "hover:border-danger-light",
+          "active:bg-danger-light"
+        ]
+      }
+    },
+    // outline & color
+    {
+      variant: "outline",
+      color: "primary",
+      class: {
+        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",
+          "active:bg-secondary-light"
+        ]
+      }
+    },
+    {
+      variant: "outline",
+      color: "neutral",
+      class: {
+        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",
+          "active:bg-info-light"
+        ]
+      }
+    },
+    {
+      variant: "outline",
+      color: "success",
+      class: {
+        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",
+          "active:bg-warning-light"
+        ]
+      }
+    },
+    {
+      variant: "outline",
+      color: "danger",
+      class: {
+        base: [
+          "bg-body-background",
+          "border-danger-main",
+          "text-danger-main",
+          "hover:bg-danger-soft",
+          "active:bg-danger-light"
+        ]
+      }
+    },
+    // ghost & color
+    {
+      variant: "ghost",
+      color: "primary",
+      class: {
+        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",
+          "active:bg-secondary-main",
+          "active:text-common-white"
+        ]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "neutral",
+      class: {
+        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",
+          "active:bg-info-main",
+          "active:text-common-white"
+        ]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "success",
+      class: {
+        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",
+          "active:bg-warning-main",
+          "active:text-common-white"
+        ]
+      }
+    },
+    {
+      variant: "ghost",
+      color: "danger",
+      class: {
+        base: [
+          "text-danger-main",
+          "border-transparent",
+          "hover:bg-danger-soft",
+          "active:bg-danger-main",
+          "active:text-common-white"
+        ]
+      }
+    },
+    // variant && size
+    {
+      variant: ["soft", "outline"],
+      size: "sm",
+      class: {
+        base: ["border-sm"]
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "md",
+      class: {
+        base: ["border-md"]
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "lg",
+      class: {
+        base: ["border-lg"]
+      }
+    },
+    {
+      variant: ["soft", "outline"],
+      size: "xl",
+      class: {
+        base: ["border-xl"]
+      }
+    },
+    // variant && disabled
+    {
+      variant: ["soft", "ghost"],
+      disabled: true,
+      class: {
+        base: ["!border-neutral-soft"]
+      }
+    },
+    {
+      variant: ["outline"],
+      disabled: true,
+      class: {
+        base: ["!border-neutral-light"]
+      }
+    }
+  ]
+});
+
 // src/utils/props.ts
 var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
   if (!variantKeys) {
@@ -377,6 +1191,98 @@ var mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
 // src/components/icon/template.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var template = {
+  left: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime.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_runtime.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_runtime.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_runtime.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_runtime.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_runtime.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_runtime.jsx)(
       "svg",
@@ -1739,64 +2645,24 @@ var template = {
             {
               d: "M9.5625 9.5625C9.5625 9.71168 9.50324 9.85476 9.39775 9.96025C9.29226 10.0657 9.14918 10.125 9 10.125C8.85082 10.125 8.70774 10.0657 8.60225 9.96025C8.49676 9.85476 8.4375 9.71168 8.4375 9.5625C8.4375 9.41332 8.49676 9.27024 8.60225 9.16475C8.70774 9.05926 8.85082 9 9 9C9.14918 9 9.29226 9.05926 9.39775 9.16475C9.50324 9.27024 9.5625 9.41332 9.5625 9.5625ZM5.625 11.8125C5.77418 11.8125 5.91726 11.7532 6.02275 11.6477C6.12824 11.5423 6.1875 11.3992 6.1875 11.25C6.1875 11.1008 6.12824 10.9577 6.02275 10.8523C5.91726 10.7468 5.77418 10.6875 5.625 10.6875C5.47582 10.6875 5.33274 10.7468 5.22725 10.8523C5.12176 10.9577 5.0625 11.1008 5.0625 11.25C5.0625 11.3992 5.12176 11.5423 5.22725 11.6477C5.33274 11.7532 5.47582 11.8125 5.625 11.8125ZM6.1875 12.9375C6.1875 13.0867 6.12824 13.2298 6.02275 13.3352C5.91726 13.4407 5.77418 13.5 5.625 13.5C5.47582 13.5 5.33274 13.4407 5.22725 13.3352C5.12176 13.2298 5.0625 13.0867 5.0625 12.9375C5.0625 12.7883 5.12176 12.6452 5.22725 12.5398C5.33274 12.4343 5.47582 12.375 5.625 12.375C5.77418 12.375 5.91726 12.4343 6.02275 12.5398C6.12824 12.6452 6.1875 12.7883 6.1875 12.9375ZM7.3125 11.8125C7.46168 11.8125 7.60476 11.7532 7.71025 11.6477C7.81574 11.5423 7.875 11.3992 7.875 11.25C7.875 11.1008 7.81574 10.9577 7.71025 10.8523C7.60476 10.7468 7.46168 10.6875 7.3125 10.6875C7.16332 10.6875 7.02024 10.7468 6.91475 10.8523C6.80926 10.9577 6.75 11.1008 6.75 11.25C6.75 11.3992 6.80926 11.5423 6.91475 11.6477C7.02024 11.7532 7.16332 11.8125 7.3125 11.8125ZM7.875 12.9375C7.875 13.0867 7.81574 13.2298 7.71025 13.3352C7.60476 13.4407 7.46168 13.5 7.3125 13.5C7.16332 13.5 7.02024 13.4407 6.91475 13.3352C6.80926 13.2298 6.75 13.0867 6.75 12.9375C6.75 12.7883 6.80926 12.6452 6.91475 12.5398C7.02024 12.4343 7.16332 12.375 7.3125 12.375C7.46168 12.375 7.60476 12.4343 7.71025 12.5398C7.81574 12.6452 7.875 12.7883 7.875 12.9375ZM9 11.8125C9.14918 11.8125 9.29226 11.7532 9.39775 11.6477C9.50324 11.5423 9.5625 11.3992 9.5625 11.25C9.5625 11.1008 9.50324 10.9577 9.39775 10.8523C9.29226 10.7468 9.14918 10.6875 9 10.6875C8.85082 10.6875 8.70774 10.7468 8.60225 10.8523C8.49676 10.9577 8.4375 11.1008 8.4375 11.25C8.4375 11.3992 8.49676 11.5423 8.60225 11.6477C8.70774 11.7532 8.85082 11.8125 9 11.8125ZM9.5625 12.9375C9.5625 13.0867 9.50324 13.2298 9.39775 13.3352C9.29226 13.4407 9.14918 13.5 9 13.5C8.85082 13.5 8.70774 13.4407 8.60225 13.3352C8.49676 13.2298 8.4375 13.0867 8.4375 12.9375C8.4375 12.7883 8.49676 12.6452 8.60225 12.5398C8.70774 12.4343 8.85082 12.375 9 12.375C9.14918 12.375 9.29226 12.4343 9.39775 12.5398C9.50324 12.6452 9.5625 12.7883 9.5625 12.9375ZM10.6875 11.8125C10.8367 11.8125 10.9798 11.7532 11.0852 11.6477C11.1907 11.5423 11.25 11.3992 11.25 11.25C11.25 11.1008 11.1907 10.9577 11.0852 10.8523C10.9798 10.7468 10.8367 10.6875 10.6875 10.6875C10.5383 10.6875 10.3952 10.7468 10.2898 10.8523C10.1843 10.9577 10.125 11.1008 10.125 11.25C10.125 11.3992 10.1843 11.5423 10.2898 11.6477C10.3952 11.7532 10.5383 11.8125 10.6875 11.8125ZM11.25 12.9375C11.25 13.0867 11.1907 13.2298 11.0852 13.3352C10.9798 13.4407 10.8367 13.5 10.6875 13.5C10.5383 13.5 10.3952 13.4407 10.2898 13.3352C10.1843 13.2298 10.125 13.0867 10.125 12.9375C10.125 12.7883 10.1843 12.6452 10.2898 12.5398C10.3952 12.4343 10.5383 12.375 10.6875 12.375C10.8367 12.375 10.9798 12.4343 11.0852 12.5398C11.1907 12.6452 11.25 12.7883 11.25 12.9375ZM12.375 11.8125C12.5242 11.8125 12.6673 11.7532 12.7727 11.6477C12.8782 11.5423 12.9375 11.3992 12.9375 11.25C12.9375 11.1008 12.8782 10.9577 12.7727 10.8523C12.6673 10.7468 12.5242 10.6875 12.375 10.6875C12.2258 10.6875 12.0827 10.7468 11.9773 10.8523C11.8718 10.9577 11.8125 11.1008 11.8125 11.25C11.8125 11.3992 11.8718 11.5423 11.9773 11.6477C12.0827 11.7532 12.2258 11.8125 12.375 11.8125ZM11.25 9.5625C11.25 9.71168 11.1907 9.85476 11.0852 9.96025C10.9798 10.0657 10.8367 10.125 10.6875 10.125C10.5383 10.125 10.3952 10.0657 10.2898 9.96025C10.1843 9.85476 10.125 9.71168 10.125 9.5625C10.125 9.41332 10.1843 9.27024 10.2898 9.16475C10.3952 9.05926 10.5383 9 10.6875 9C10.8367 9 10.9798 9.05926 11.0852 9.16475C11.1907 9.27024 11.25 9.41332 11.25 9.5625ZM12.375 10.125C12.5242 10.125 12.6673 10.0657 12.7727 9.96025C12.8782 9.85476 12.9375 9.71168 12.9375 9.5625C12.9375 9.41332 12.8782 9.27024 12.7727 9.16475C12.6673 9.05926 12.5242 9 12.375 9C12.2258 9 12.0827 9.05926 11.9773 9.16475C11.8718 9.27024 11.8125 9.41332 11.8125 9.5625C11.8125 9.71168 11.8718 9.85476 11.9773 9.96025C12.0827 10.0657 12.2258 10.125 12.375 10.125Z",
               fill: "currentColor"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "path",
-            {
-              fillRule: "evenodd",
-              clipRule: "evenodd",
-              d: "M5.0625 1.6875C5.21168 1.6875 5.35476 1.74676 5.46025 1.85225C5.56574 1.95774 5.625 2.10082 5.625 2.25V3.375H12.375V2.25C12.375 2.10082 12.4343 1.95774 12.5398 1.85225C12.6452 1.74676 12.7883 1.6875 12.9375 1.6875C13.0867 1.6875 13.2298 1.74676 13.3352 1.85225C13.4407 1.95774 13.5 2.10082 13.5 2.25V3.375H14.0625C14.6592 3.375 15.2315 3.61205 15.6535 4.03401C16.0754 4.45597 16.3125 5.02826 16.3125 5.625V14.0625C16.3125 14.6592 16.0754 15.2315 15.6535 15.6535C15.2315 16.0754 14.6592 16.3125 14.0625 16.3125H3.9375C3.34076 16.3125 2.76847 16.0754 2.34651 15.6535C1.92455 15.2315 1.6875 14.6592 1.6875 14.0625V5.625C1.6875 5.02826 1.92455 4.45597 2.34651 4.03401C2.76847 3.61205 3.34076 3.375 3.9375 3.375H4.5V2.25C4.5 2.10082 4.55926 1.95774 4.66475 1.85225C4.77024 1.74676 4.91332 1.6875 5.0625 1.6875ZM15.1875 8.4375C15.1875 8.13913 15.069 7.85298 14.858 7.642C14.647 7.43103 14.3609 7.3125 14.0625 7.3125H3.9375C3.63913 7.3125 3.35298 7.43103 3.142 7.642C2.93103 7.85298 2.8125 8.13913 2.8125 8.4375V14.0625C2.8125 14.3609 2.93103 14.647 3.142 14.858C3.35298 15.069 3.63913 15.1875 3.9375 15.1875H14.0625C14.3609 15.1875 14.647 15.069 14.858 14.858C15.069 14.647 15.1875 14.3609 15.1875 14.0625V8.4375Z",
-              fill: "currentColor"
-            }
-          )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            d: "M5.0625 2.25V3.9375M12.9375 2.25V3.9375M2.25 14.0625V5.625C2.25 5.17745 2.42779 4.74823 2.74426 4.43176C3.06072 4.11529 3.48995 3.9375 3.9375 3.9375H14.0625C14.5101 3.9375 14.9393 4.11529 15.2557 4.43176C15.5722 4.74823 15.75 5.17745 15.75 5.625V14.0625M2.25 14.0625C2.25 14.5101 2.42779 14.9393 2.74426 15.2557C3.06072 15.5722 3.48995 15.75 3.9375 15.75H14.0625C14.5101 15.75 14.9393 15.5722 15.2557 15.2557C15.5722 14.9393 15.75 14.5101 15.75 14.0625M2.25 14.0625V8.4375C2.25 7.98995 2.42779 7.56073 2.74426 7.24426C3.06072 6.92779 3.48995 6.75 3.9375 6.75H14.0625C14.5101 6.75 14.9393 6.92779 15.2557 7.24426C15.5722 7.56073 15.75 7.98995 15.75 8.4375V14.0625M9 9.5625H9.006V9.5685H9V9.5625ZM9 11.25H9.006V11.256H9V11.25ZM9 12.9375H9.006V12.9435H9V12.9375ZM7.3125 11.25H7.3185V11.256H7.3125V11.25ZM7.3125 12.9375H7.3185V12.9435H7.3125V12.9375ZM5.625 11.25H5.631V11.256H5.625V11.25ZM5.625 12.9375H5.631V12.9435H5.625V12.9375ZM10.6875 9.5625H10.6935V9.5685H10.6875V9.5625ZM10.6875 11.25H10.6935V11.256H10.6875V11.25ZM10.6875 12.9375H10.6935V12.9435H10.6875V12.9375ZM12.375 9.5625H12.381V9.5685H12.375V9.5625ZM12.375 11.25H12.381V11.256H12.375V11.25Z",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    );
-  },
-  left: ({ className }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime.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_runtime.jsx)(
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "path",
+            {
+              fillRule: "evenodd",
+              clipRule: "evenodd",
+              d: "M5.0625 1.6875C5.21168 1.6875 5.35476 1.74676 5.46025 1.85225C5.56574 1.95774 5.625 2.10082 5.625 2.25V3.375H12.375V2.25C12.375 2.10082 12.4343 1.95774 12.5398 1.85225C12.6452 1.74676 12.7883 1.6875 12.9375 1.6875C13.0867 1.6875 13.2298 1.74676 13.3352 1.85225C13.4407 1.95774 13.5 2.10082 13.5 2.25V3.375H14.0625C14.6592 3.375 15.2315 3.61205 15.6535 4.03401C16.0754 4.45597 16.3125 5.02826 16.3125 5.625V14.0625C16.3125 14.6592 16.0754 15.2315 15.6535 15.6535C15.2315 16.0754 14.6592 16.3125 14.0625 16.3125H3.9375C3.34076 16.3125 2.76847 16.0754 2.34651 15.6535C1.92455 15.2315 1.6875 14.6592 1.6875 14.0625V5.625C1.6875 5.02826 1.92455 4.45597 2.34651 4.03401C2.76847 3.61205 3.34076 3.375 3.9375 3.375H4.5V2.25C4.5 2.10082 4.55926 1.95774 4.66475 1.85225C4.77024 1.74676 4.91332 1.6875 5.0625 1.6875ZM15.1875 8.4375C15.1875 8.13913 15.069 7.85298 14.858 7.642C14.647 7.43103 14.3609 7.3125 14.0625 7.3125H3.9375C3.63913 7.3125 3.35298 7.43103 3.142 7.642C2.93103 7.85298 2.8125 8.13913 2.8125 8.4375V14.0625C2.8125 14.3609 2.93103 14.647 3.142 14.858C3.35298 15.069 3.63913 15.1875 3.9375 15.1875H14.0625C14.3609 15.1875 14.647 15.069 14.858 14.858C15.069 14.647 15.1875 14.3609 15.1875 14.0625V8.4375Z",
+              fill: "currentColor"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.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"
+            d: "M5.0625 2.25V3.9375M12.9375 2.25V3.9375M2.25 14.0625V5.625C2.25 5.17745 2.42779 4.74823 2.74426 4.43176C3.06072 4.11529 3.48995 3.9375 3.9375 3.9375H14.0625C14.5101 3.9375 14.9393 4.11529 15.2557 4.43176C15.5722 4.74823 15.75 5.17745 15.75 5.625V14.0625M2.25 14.0625C2.25 14.5101 2.42779 14.9393 2.74426 15.2557C3.06072 15.5722 3.48995 15.75 3.9375 15.75H14.0625C14.5101 15.75 14.9393 15.5722 15.2557 15.2557C15.5722 14.9393 15.75 14.5101 15.75 14.0625M2.25 14.0625V8.4375C2.25 7.98995 2.42779 7.56073 2.74426 7.24426C3.06072 6.92779 3.48995 6.75 3.9375 6.75H14.0625C14.5101 6.75 14.9393 6.92779 15.2557 7.24426C15.5722 7.56073 15.75 7.98995 15.75 8.4375V14.0625M9 9.5625H9.006V9.5685H9V9.5625ZM9 11.25H9.006V11.256H9V11.25ZM9 12.9375H9.006V12.9435H9V12.9375ZM7.3125 11.25H7.3185V11.256H7.3125V11.25ZM7.3125 12.9375H7.3185V12.9435H7.3125V12.9375ZM5.625 11.25H5.631V11.256H5.625V11.25ZM5.625 12.9375H5.631V12.9435H5.625V12.9375ZM10.6875 9.5625H10.6935V9.5685H10.6875V9.5625ZM10.6875 11.25H10.6935V11.256H10.6875V11.25ZM10.6875 12.9375H10.6935V12.9435H10.6875V12.9375ZM12.375 9.5625H12.381V9.5685H12.375V9.5625ZM12.375 11.25H12.381V11.256H12.375V11.25Z",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
           }
         )
       }
@@ -2111,6 +2977,20 @@ var template = {
       }
     );
   },
+  polygon: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.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_runtime.jsxs)(
       "svg",
@@ -5224,25 +6104,26 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 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_runtime2.jsx)("div", { className: "h-fit w-fit", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    SVGIcon,
-    {
-      fill,
-      className: className ? `${getInputIconSize(size)} ${className}` : `${getInputIconSize(size)}`,
-      ...props
-    }
-  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: `m-0 flex items-center justify-center p-0 ${className}`, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SVGIcon, { fill, className: getInputIconSize(size), ...props }) });
 };
 var Icon_default = Icon;
 
@@ -5446,68 +6327,44 @@ var Button = (0, import_react2.forwardRef)((originalProps, ref) => {
 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 border border-transparent",
-    content: ""
+    base: ["w-fit"],
+    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"
+        base: ["h-[24px]", "px-[8px]", "py-[3px]", "text-sm", "font-bold", "rounded-sm", "gap-sm"]
       },
       md: {
-        base: "h-[32px] px-[12px] py-[5.5px] text-md font-[700] rounded-md gap-md"
+        base: ["h-[32px]", "px-[12px]", "py-[5.5px]", "text-md", "font-bold", "rounded-md", "gap-md"]
       },
       lg: {
-        base: "h-[40px] px-[16px] py-[8px] text-lg font-[700] rounded-lg gap-lg"
+        base: ["h-[40px]", "px-[16px]", "py-[8px]", "text-lg", "font-bold", "rounded-lg", "gap-lg"]
       },
       xl: {
-        base: "h-[50px] px-[20px] py-[11.5px] text-xl font-[700] rounded-xl gap-xl"
+        base: ["h-[50px]", "px-[20px]", "py-[11.5px]", "text-xl", "font-bold", "rounded-xl", "gap-xl"]
       }
     },
     radius: {
       default: {
-        base: ""
+        base: []
       },
       full: {
-        base: "rounded-full"
+        base: ["rounded-full"]
       },
       none: {
-        base: "rounded-none"
+        base: ["rounded-none"]
       }
     },
     full: {
       true: {
-        base: "w-full"
+        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"
-      }
     }
   },
   defaultVariants: {
@@ -5518,251 +6375,5 @@ var buttonStyle = tv({
     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"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "secondary",
-      class: {
-        base: ["text-white", "bg-secondary-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "neutral",
-      class: {
-        base: ["text-white", "bg-neutral-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "info",
-      class: {
-        base: ["text-white", "bg-info-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "success",
-      class: {
-        base: ["text-white", "bg-success-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "warning",
-      class: {
-        base: ["text-white", "bg-warning-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    {
-      variant: "solid",
-      color: "danger",
-      class: {
-        base: ["text-white", "bg-danger-main", "hover:bg-gradient-to-r", "hover:from-white/20", "hover:to-white/20"]
-      }
-    },
-    // soft & color
-    {
-      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 & color
-    {
-      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-main", "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 & color
-    {
-      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"]
-      }
-    },
-    // variant && size
-    {
-      variant: ["soft", "outline"],
-      size: "sm",
-      class: {
-        base: "border-[1px]"
-      }
-    },
-    {
-      variant: ["soft", "outline"],
-      size: "md",
-      class: {
-        base: "border-[1.25px]"
-      }
-    },
-    {
-      variant: ["soft", "outline"],
-      size: "lg",
-      class: {
-        base: "border-[1.5px]"
-      }
-    },
-    {
-      variant: ["soft", "outline"],
-      size: "xl",
-      class: {
-        base: "border-[1.75px]"
-      }
-    },
-    // variant && disabled
-    {
-      variant: ["soft", "ghost"],
-      disabled: true,
-      class: {
-        base: "!border-neutral-soft"
-      }
-    },
-    {
-      variant: ["outline"],
-      disabled: true,
-      class: {
-        base: "!border-neutral-light"
-      }
-    }
-  ]
+  }
 });