@deepnoid/ui 0.0.112 → 0.1.1

package/dist/components/pagination/index.js

@@ -6,6 +6,9 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -28,6 +31,74 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// ../../node_modules/tailwindcss/lib/util/createPlugin.js
+var require_createPlugin = __commonJS({
+  "../../node_modules/tailwindcss/lib/util/createPlugin.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    function createPlugin(plugin2, config) {
+      return {
+        handler: plugin2,
+        config
+      };
+    }
+    createPlugin.withOptions = function(pluginFunction, configFunction = () => ({})) {
+      const optionsFunction = function(options) {
+        return {
+          __options: options,
+          handler: pluginFunction(options),
+          config: configFunction(options)
+        };
+      };
+      optionsFunction.__isOptionsFunction = true;
+      optionsFunction.__pluginFunction = pluginFunction;
+      optionsFunction.__configFunction = configFunction;
+      return optionsFunction;
+    };
+    var _default = createPlugin;
+  }
+});
+
+// ../../node_modules/tailwindcss/lib/public/create-plugin.js
+var require_create_plugin = __commonJS({
+  "../../node_modules/tailwindcss/lib/public/create-plugin.js"(exports2) {
+    "use strict";
+    Object.defineProperty(exports2, "__esModule", {
+      value: true
+    });
+    Object.defineProperty(exports2, "default", {
+      enumerable: true,
+      get: function() {
+        return _default;
+      }
+    });
+    var _createPlugin = /* @__PURE__ */ _interop_require_default(require_createPlugin());
+    function _interop_require_default(obj) {
+      return obj && obj.__esModule ? obj : {
+        default: obj
+      };
+    }
+    var _default = _createPlugin.default;
+  }
+});
+
+// ../../node_modules/tailwindcss/plugin.js
+var require_plugin = __commonJS({
+  "../../node_modules/tailwindcss/plugin.js"(exports2, module2) {
+    "use strict";
+    var createPlugin = require_create_plugin();
+    module2.exports = (createPlugin.__esModule ? createPlugin : { default: createPlugin }).default;
+  }
+});
+
 // src/components/pagination/index.ts
 var pagination_exports = {};
 __export(pagination_exports, {
@@ -40,19 +111,217 @@ var import_react3 = require("react");
 
 // src/utils/tailwind-variants.ts
 var import_tailwind_variants = require("tailwind-variants");
-var COMMON_SIZE = ["sm", "md", "lg"];
-var COMMON_RADIUS = ["xlg", "xxlg", "none", "full"];
-var COMMON_FONTSIZE = ["h1", "h2", "h3", "h4", "h5"];
-var COMMON_SHADOW = ["inner", "drop"];
+
+// ../tailwind-config/src/plugin.ts
+var import_plugin = __toESM(require_plugin());
+
+// ../tailwind-config/src/typography/font.ts
+var fontSize = {
+  h1: [
+    "40px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h2: [
+    "34px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h3: [
+    "28px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h4: [
+    "24px",
+    {
+      fontWeight: "700"
+    }
+  ],
+  h5: [
+    "20px",
+    {
+      fontWeight: "600"
+    }
+  ],
+  sm: [
+    "12px",
+    {
+      lineHeight: "18px",
+      fontWeight: "400"
+    }
+  ],
+  md: [
+    "14px",
+    {
+      lineHeight: "21px",
+      fontWeight: "400"
+    }
+  ],
+  lg: [
+    "16px",
+    {
+      lineHeight: "24px",
+      fontWeight: "400"
+    }
+  ],
+  xl: [
+    "18px",
+    {
+      lineHeight: "27px",
+      fontWeight: "400"
+    }
+  ]
+};
+
+// ../tailwind-config/src/animation/slide.ts
+var sliceAnimation = {
+  slideInFromTop: "slideInFromTop 0.5s ease-out",
+  slideInFromBottom: "slideInFromBottom 0.5s ease-out",
+  slideInFromLeft: "slideInFromLeft 0.5s ease-out",
+  slideInFromRight: "slideInFromRight 0.5s ease-out",
+  slideOutToTop: "slideOutToTop 0.5s ease-in",
+  slideOutToBottom: "slideOutToBottom 0.5s ease-in",
+  slideOutToLeft: "slideOutToLeft 0.5s ease-in",
+  slideOutToRight: "slideOutToRight 0.5s ease-in"
+};
+var sliceKeyframe = {
+  slideInFromTop: {
+    "0%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromBottom: {
+    "0%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromLeft: {
+    "0%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideInFromRight: {
+    "0%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    },
+    "100%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    }
+  },
+  slideOutToTop: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToBottom: {
+    "0%": {
+      transform: "translateY(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateY(10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToLeft: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(-10px)",
+      opacity: "0"
+    }
+  },
+  slideOutToRight: {
+    "0%": {
+      transform: "translateX(0)",
+      opacity: "1"
+    },
+    "100%": {
+      transform: "translateX(10px)",
+      opacity: "0"
+    }
+  }
+};
+
+// ../tailwind-config/src/animation/index.ts
+var animation = { ...sliceAnimation };
+var keyframes = { ...sliceKeyframe };
+
+// ../tailwind-config/src/shadow/index.ts
+var boxShadow = {
+  "border-1": "inner 0 0 0 1px inset",
+  "border-2": "inner 0 0 0 2px inset",
+  "border-3": "inner 0 0 0 3px inset",
+  "border-4": "inner 0 0 0 4px inset",
+  "border-5": "inner 0 0 0 5px inset",
+  "border-6": "inner 0 0 0 6px inset",
+  "border-7": "inner 0 0 0 7px inset",
+  "border-8": "inner 0 0 0 8px inset",
+  "border-9": "inner 0 0 0 9px inset",
+  "border-10": "inner 0 0 0 10px inset",
+  inner: "inset 0 4px 8px 0 rgba(36, 39, 44, 0.2)",
+  drop: "0 20px 40px 0 rgba(36, 39, 44, 0.2)"
+};
+
+// ../tailwind-config/src/border/radius.ts
+var borderRadius = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px",
+  none: "0",
+  full: "9999px"
+};
+
+// ../tailwind-config/src/space/gap.ts
+var gap = {
+  sm: "4px",
+  md: "6px",
+  lg: "8px",
+  xl: "10px"
+};
+
+// src/utils/tailwind-variants.ts
+function typedKeys(obj) {
+  return Object.keys(obj);
+}
+var COMMON_SIZE = ["sm", "md", "lg", "xl"];
 var tv = (0, import_tailwind_variants.createTV)({
-  // twMerge: false,
   twMergeConfig: {
     classGroups: {
-      fontSize: [{ text: [...COMMON_SIZE, ...COMMON_FONTSIZE] }],
-      borderRadius: [{ rounded: [...COMMON_RADIUS, ...COMMON_SIZE] }],
-      boxShadow: [{ shadow: [...COMMON_SHADOW] }],
+      fontSize: [{ text: [...typedKeys(fontSize)] }],
+      borderRadius: [{ rounded: [...typedKeys(borderRadius)] }],
+      boxShadow: [{ shadow: [...typedKeys(boxShadow)] }],
       padding: [{ p: [...COMMON_SIZE] }],
-      gap: [{ gap: [...COMMON_SIZE] }]
+      gap: [{ gap: [...typedKeys(gap)] }]
     }
   }
 });
@@ -108,6 +377,137 @@ var import_react2 = __toESM(require("react"));
 // src/components/icon/template.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var template = {
+  "left-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11 13L7 9L11 5", strokeLinecap: "round", "stroke-linejoin": "round" })
+      }
+    );
+  },
+  "right-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 5L11 9L7 13", strokeLinecap: "round", "stroke-linejoin": "round" })
+      }
+    );
+  },
+  "left-double-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 5L8.55556 9L13 13M9.44444 5L5 9L9.44444 13", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    );
+  },
+  "right-double-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 5L9.44444 9L5 13M8.55556 5L13 9L8.55556 13", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    );
+  },
+  star: ({ className, fill }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: fill ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.26603 3.51086C8.53733 2.82971 9.46267 2.82971 9.73397 3.51086L10.9948 6.67687L14.2674 6.95135C14.9723 7.01017 15.2582 7.92848 14.721 8.40913L12.2278 10.6398L12.989 13.9746C13.1531 14.6931 12.4052 15.2604 11.8021 14.8759L9 13.0886L6.19794 14.8759C5.59478 15.2604 4.84687 14.6925 5.01099 13.9746L5.77221 10.6398L3.27901 8.40913C2.74185 7.92848 3.02769 7.01017 3.73259 6.95135L7.00519 6.67687L8.26603 3.51086Z"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M8.65925 3.23957C8.68697 3.16871 8.73417 3.1081 8.79484 3.06544C8.85552 3.02278 8.92693 3 9 3C9.07306 3 9.14448 3.02278 9.20515 3.06544C9.26583 3.1081 9.31303 3.16871 9.34074 3.23957L10.7332 6.74977C10.7593 6.81546 10.8021 6.87233 10.857 6.91413C10.912 6.95594 10.9768 6.98105 11.0445 6.98672L14.6603 7.29028C14.9873 7.31775 15.1196 7.74563 14.8706 7.96883L12.1158 10.4427C12.0644 10.4888 12.026 10.5489 12.005 10.6164C11.984 10.6839 11.981 10.7561 11.9966 10.8252L12.8386 14.5236C12.8555 14.5978 12.8511 14.6756 12.8259 14.7471C12.8006 14.8187 12.7557 14.8808 12.6968 14.9257C12.6379 14.9705 12.5677 14.996 12.495 14.999C12.4222 15.002 12.3503 14.9824 12.2882 14.9425L9.19199 12.9611C9.13418 12.9241 9.06775 12.9045 9 12.9045C8.93225 12.9045 8.86581 12.9241 8.808 12.9611L5.71181 14.9432C5.64973 14.9831 5.57778 15.0027 5.50504 14.9997C5.43231 14.9967 5.36206 14.9712 5.30316 14.9263C5.24426 14.8815 5.19936 14.8194 5.17412 14.7478C5.14889 14.6763 5.14445 14.5985 5.16138 14.5243L6.00341 10.8252C6.01903 10.7561 6.01616 10.6838 5.99511 10.6164C5.97407 10.5489 5.93568 10.4888 5.88415 10.4427L3.12936 7.96883C3.07389 7.91927 3.03369 7.85357 3.01387 7.78005C2.99405 7.70652 2.9955 7.62849 3.01802 7.55583C3.04055 7.48317 3.08314 7.41915 3.1404 7.37188C3.19767 7.3246 3.26703 7.29621 3.33971 7.29028L6.95553 6.98672C7.02319 6.98105 7.08804 6.95594 7.14296 6.91413C7.19787 6.87233 7.24072 6.81546 7.26679 6.74977L8.65925 3.23957Z",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  },
+  right: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        className,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6.5 4L11.5 9L6.5 14", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    );
+  },
+  // ----------------------------------- old ---------------------------------
+  // ** avatar icon **
+  avatar: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        width: "50",
+        height: "50",
+        viewBox: "0 0 50 50",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        xmlnsXlink: "http://www.w3.org/1999/xlink",
+        className,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { id: "Rectangle 6445", width: "50", height: "50", rx: "5", fill: "url(#pattern0_10_7240)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pattern", { id: "pattern0_10_7240", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("use", { xlinkHref: "#image0_10_7240", transform: "scale(0.00195312)" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "image",
+              {
+                id: "image0_10_7240",
+                "data-name": "man.png",
+                width: "512",
+                height: "512",
+                preserveAspectRatio: "none",
+                xlinkHref: "data:image/png;base64,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"
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  },
   // ** Status **
   plus: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -996,36 +1396,6 @@ var template = {
       }
     );
   },
-  star: ({ className, fill }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "svg",
-      {
-        width: "24",
-        height: "24",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className,
-        children: fill ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            fillRule: "evenodd",
-            clipRule: "evenodd",
-            d: "M10.7875 3.21009C11.2355 2.13309 12.7635 2.13309 13.2115 3.21009L15.2935 8.21609L20.6975 8.65009C21.8615 8.74309 22.3335 10.1951 21.4465 10.9551L17.3295 14.4821L18.5865 19.7551C18.8575 20.8911 17.6225 21.7881 16.6265 21.1801L11.9995 18.3541L7.37251 21.1801C6.37651 21.7881 5.14151 20.8901 5.41251 19.7551L6.66951 14.4821L2.55251 10.9551C1.66551 10.1951 2.13751 8.74309 3.30151 8.65009L8.70551 8.21609L10.7875 3.21009Z",
-            fill: "currentColor"
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            d: "M11.4802 3.49921C11.5225 3.39605 11.5945 3.30779 11.6871 3.24567C11.7797 3.18356 11.8887 3.15039 12.0002 3.15039C12.1117 3.15039 12.2206 3.18356 12.3132 3.24567C12.4058 3.30779 12.4779 3.39605 12.5202 3.49921L14.6452 8.61021C14.6849 8.70585 14.7503 8.78866 14.8341 8.84953C14.9179 8.9104 15.0169 8.94697 15.1202 8.95521L20.6382 9.39721C21.1372 9.43721 21.3392 10.0602 20.9592 10.3852L16.7552 13.9872C16.6766 14.0544 16.6181 14.1419 16.586 14.2402C16.5539 14.3384 16.5494 14.4436 16.5732 14.5442L17.8582 19.9292C17.884 20.0373 17.8772 20.1505 17.8387 20.2547C17.8002 20.3589 17.7317 20.4494 17.6418 20.5146C17.5519 20.5799 17.4447 20.6171 17.3337 20.6214C17.2227 20.6258 17.1129 20.5972 17.0182 20.5392L12.2932 17.6542C12.2049 17.6003 12.1036 17.5718 12.0002 17.5718C11.8968 17.5718 11.7954 17.6003 11.7072 17.6542L6.98216 20.5402C6.88742 20.5982 6.77762 20.6268 6.66662 20.6224C6.55562 20.6181 6.44841 20.5809 6.35853 20.5156C6.26865 20.4504 6.20013 20.3599 6.16162 20.2557C6.12311 20.1515 6.11634 20.0383 6.14216 19.9302L7.42716 14.5442C7.451 14.4436 7.44661 14.3384 7.4145 14.2401C7.38239 14.1418 7.3238 14.0543 7.24516 13.9872L3.04116 10.3852C2.95651 10.313 2.89517 10.2174 2.86492 10.1103C2.83468 10.0033 2.83688 9.88966 2.87125 9.78386C2.90563 9.67807 2.97062 9.58485 3.05802 9.51602C3.14541 9.44719 3.25126 9.40584 3.36216 9.39721L8.88016 8.95521C8.98341 8.94697 9.08239 8.9104 9.16619 8.84953C9.25 8.78866 9.31539 8.70585 9.35516 8.61021L11.4802 3.49921Z",
-            stroke: "currentColor",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      }
-    );
-  },
   heart: ({ className, fill }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
@@ -3656,14 +4026,16 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
   const getInputIconSize = (size2) => {
     switch (size2) {
       case "sm":
-        return "size-[15px]";
+        return "size-[18px]";
       case "md":
-        return "size-[17px] stroke-[1.25px]";
+        return "size-[21px] stroke-[1.25px]";
       case "lg":
-        return "size-[20px] stroke-[1.5px]";
+        return "size-[24px] stroke-[1.5px]";
+      case "xl":
+        return "size-[27px] stroke-[1.5px]";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-fit h-fit", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "h-fit w-fit", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     SVGIcon,
     {
       fill,
@@ -3674,46 +4046,53 @@ var Icon = ({ name, size = "md", fill = false, className, onClick, ...props }) =
 };
 var Icon_default = Icon;
 
+// src/utils/clsx.ts
+function clsx(...args) {
+  var i = 0, tmp, x, str = "";
+  while (i < args.length) {
+    if (tmp = args[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      var len = mix.length;
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ");
+          str += y;
+        }
+      }
+    }
+  }
+  return str;
+}
+
 // src/components/input/input.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Input = (0, import_react2.forwardRef)((originalProps, ref) => {
   const [props, variantProps] = mapPropsVariants(originalProps, inputStyle.variantKeys);
-  const { classNames, label, errorMessage, startContent, endContent, ...inputProps } = props;
+  const { classNames, label, helperText, errorText, startContent, endContent, ...inputProps } = props;
   const inputRef = (0, import_react2.useRef)(null);
   const slots = (0, import_react2.useMemo)(() => inputStyle({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
-  );
-  const getLabelProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    }),
-    [slots, classNames]
-  );
-  const getInnerWrapperProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getInputWrapperProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper })
-    }),
-    [slots, classNames]
-  );
-  const getInputProps = (0, import_react2.useCallback)(
-    () => ({
-      ...inputProps,
-      ref: ref || inputRef,
-      className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
-      size: 0
-    }),
-    [slots, classNames, inputProps, ref]
-  );
   const getContentProps = (0, import_react2.useCallback)(
     () => ({
       className: slots.content({ class: classNames == null ? void 0 : classNames.content }),
@@ -3721,12 +4100,6 @@ var Input = (0, import_react2.forwardRef)((originalProps, ref) => {
     }),
     [slots, classNames, originalProps.size]
   );
-  const getErrorMessageProps = (0, import_react2.useCallback)(
-    () => ({
-      className: slots.errorMessage({ class: classNames == null ? void 0 : classNames.errorMessage })
-    }),
-    [slots, classNames]
-  );
   const renderStartContent = () => {
     if (import_react2.default.isValidElement(startContent)) {
       const existingProps = startContent.props;
@@ -3760,7 +4133,7 @@ var Input = (0, import_react2.forwardRef)((originalProps, ref) => {
         className: `${getContentProps().className || ""} ${existingProps.className || ""}`.trim()
       };
       return import_react2.default.cloneElement(endContent, mergedProps);
-    } else if (errorMessage) {
+    } else if (errorText) {
       const iconProps = { ...getContentProps(), className: getContentProps().className };
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ...iconProps, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon_default, { name: "exclamation-circle", fill: true, size: originalProps.size }) });
     } else {
@@ -3779,146 +4152,210 @@ var Input = (0, import_react2.forwardRef)((originalProps, ref) => {
         return renderContentWithIcon();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getBaseProps(), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { ...getLabelProps(), children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getInnerWrapperProps(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ...getInputWrapperProps(), children: [
-        startContent && renderStartContent(),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ...getInputProps() }),
-        renderEndContent()
-      ] }),
-      errorMessage && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { ...getErrorMessageProps(), children: errorMessage })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        variantProps.direction === "vertical" ? slots.vertical({ class: classNames == null ? void 0 : classNames.vertical }) : slots.horizon({ class: classNames == null ? void 0 : classNames.horizon })
+      ),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: slots.innerWrapper({ class: classNames == null ? void 0 : classNames.innerWrapper }), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: clsx(
+                slots.inputWrapper({ class: classNames == null ? void 0 : classNames.inputWrapper }),
+                inputProps.readOnly ? slots.readonly({ class: classNames == null ? void 0 : classNames.readonly }) : ""
+              ),
+              children: [
+                startContent && renderStartContent(),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { ...inputProps, ref: ref || inputRef, className: slots.input({ class: classNames == null ? void 0 : classNames.input }), size: 0 }),
+                renderEndContent()
+              ]
+            }
+          ),
+          helperText && !errorText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: slots.helperText({ class: classNames == null ? void 0 : classNames.helperText }), children: helperText }),
+          errorText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: clsx("error", slots.errorText({ class: classNames == null ? void 0 : classNames.errorText })), children: errorText })
+        ] })
+      ]
+    }
+  );
 });
 Input.displayName = "Input";
 var input_default = Input;
 var inputStyle = tv({
   slots: {
-    base: ["group/input", "flex", "flex-col"],
-    label: ["flex", "items-center"],
+    base: ["group/input", "flex"],
+    vertical: ["flex-col"],
+    horizon: ["flex-row", "gap-0"],
+    label: ["flex", "items-center", "font-bold", "text-body-foreground", "w-[80px]"],
     innerWrapper: ["flex", "flex-col"],
-    inputWrapper: [
+    inputWrapper: ["flex", "items-center", "transition", "duration-200", "group-has-[p.error]/input:bg-danger-soft"],
+    input: [
+      "w-full",
+      "h-full",
+      "bg-transparent",
+      "text-neutral-main",
+      "placeholder:text-neutral-main",
+      "focus:outline-none",
+      "focus:ring-0",
+      "group-has-[:hover]/input:text-neutral-dark",
+      "group-has-[:hover]/input:placeholder:text-neutral-dark",
+      "group-has-[:focus]/input:text-neutral-dark",
+      "group-has-[:focus]/input:placeholder:text-neutral-dark",
+      "group-has-[p.error]/input:text-danger-main",
+      "group-has-[p.error]/input:placeholder:text-danger-main"
+    ],
+    content: [
       "flex",
       "items-center",
-      "transition",
-      "duration-200",
-      "group-has-[p]/input:border-danger-main",
-      "group-has-[p]/input:bg-danger-soft"
+      "select-none",
+      "text-neutral-main",
+      "group-has-[:hover]/input:text-neutral-dark",
+      "group-has-[p.error]/input:text-danger-main"
     ],
-    input: ["w-full", "h-full", "bg-transparent", "placeholder:text-neutral-main", "focus-visible:outline-none"],
-    content: ["flex", "items-center", "select-none", "group-has-[p]/input:text-danger-main"],
-    errorMessage: ["text-danger-main"]
+    helperText: ["text-neutral-main", "group-has-[:hover]/input:text-neutral-dark"],
+    errorText: ["text-danger-main"],
+    readonly: ["pointer-events-none"]
   },
   variants: {
     variant: {
       solid: {
-        inputWrapper: ["bg-trans-soft", "hover:bg-trans-light", "has-[:focus]:bg-trans-light"]
+        inputWrapper: ["!border-transparent", "bg-trans-soft", "group-has-[:focus]/input:text-body-foreground"],
+        readonly: ["!bg-trans-light"]
       },
-      normal: {
+      outline: {
         inputWrapper: [
-          "bg-transparent",
-          "border",
-          "border-neutral-main",
-          "hover:bg-trans-soft",
-          "has-[:focus]:bg-trans-soft"
-        ]
+          "border-neutral-light",
+          "group-has-[:hover]/input:bg-trans-soft",
+          "group-has-[:focus]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonly: ["!bg-trans-soft"]
       },
-      line: {
+      underline: {
         inputWrapper: [
           "bg-transparent",
-          "border-b",
-          "border-neutral-main",
           "!rounded-none",
-          "hover:bg-trans-soft",
-          "has-[:focus]:bg-trans-soft"
-        ]
+          "!border-t-transparent",
+          "!border-l-transparent",
+          "!border-r-transparent",
+          "group-has-[:hover]/input:bg-trans-soft",
+          "group-has-[:focus]/input:bg-body-background",
+          "group-has-[p.error]/input:border-danger-main"
+        ],
+        readonly: ["!bg-trans-soft"]
       }
     },
     color: {
       primary: {
-        inputWrapper: ["has-[:focus]:border-primary-main"],
-        content: ["text-primary-main"]
+        content: [
+          "group-has-[:focus]/input:text-primary-main",
+          "!group-has-[p.error]:not(input:focus):hover/input:text-primary-main"
+        ],
+        helperText: [
+          "group-has-[:focus]/input:text-primary-main",
+          "group-has-[:focus:hover]/input:text-primary-main",
+          "group-has-[:focus]/input:hover:text-primary-main"
+        ]
       },
       secondary: {
-        inputWrapper: ["has-[:focus]:border-secondary-main"],
-        content: ["text-secondary-main"]
+        content: [
+          "group-has-[:focus]/input:text-secondary-main",
+          "!group-has-[p.error]:not(input:focus):hover/input:text-secondary-main"
+        ],
+        helperText: [
+          "group-has-[:focus]/input:text-secondary-main",
+          "group-has-[:focus:hover]/input:text-secondary-main",
+          "group-has-[:focus]/input:hover:text-secondary-main"
+        ]
       }
     },
     size: {
       sm: {
-        base: ["text-sm", "gap-[6px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[6px]"],
-        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[6px]", "py-[4.5px]", "gap-[6px]"],
-        errorMessage: ["text-sm"]
+        base: ["text-sm", "gap-[4px]"],
+        label: ["text-sm"],
+        innerWrapper: ["gap-[4px]"],
+        inputWrapper: ["w-[240px]", "h-[24px]", "rounded-sm", "px-[4px]", "border-sm"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       md: {
-        base: ["text-md", "gap-[8px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[8px]"],
-        inputWrapper: ["w-[240px]", "h-[30px]", "rounded-md", "px-[8px]", "py-[6.5px]", "gap-[8px]"],
-        errorMessage: ["text-md"]
+        base: ["text-md", "gap-[6px]"],
+        label: ["text-md"],
+        innerWrapper: ["gap-[6px]"],
+        inputWrapper: ["w-[240px]", "h-[32px]", "rounded-md", "px-[6px]", "border-md"],
+        helperText: ["text-sm"],
+        errorText: ["text-sm"]
       },
       lg: {
-        base: ["text-lg", "gap-[10px]"],
-        innerWrapper: ["group-has-[p]/input:gap-[10px]"],
-        inputWrapper: ["w-[240px]", "h-[36px]", "rounded-lg", "px-[10px]", "py-[8px]", "gap-[10px]"],
-        errorMessage: ["text-lg"]
-      }
-    },
-    radius: {
-      default: "",
-      none: {
-        inputWrapper: ["rounded-none"]
+        base: ["text-lg", "gap-[8px]"],
+        label: ["text-lg"],
+        innerWrapper: ["gap-[8px]"],
+        inputWrapper: ["w-[240px]", "h-[40px]", "rounded-lg", "px-[8px]", "border-lg"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       },
-      full: {
-        inputWrapper: ["rounded-full"]
+      xl: {
+        base: ["text-xl", "gap-[10px]"],
+        label: ["text-xl"],
+        innerWrapper: ["gap-[10px]"],
+        inputWrapper: ["w-[240px]", "h-[50px]", "rounded-lg", "px-[10px]", "border-xl"],
+        helperText: ["text-md"],
+        errorText: ["text-md"]
       }
     },
-    fullWidth: {
+    direction: {
+      vertical: "",
+      horizon: ""
+    },
+    full: {
       true: {
         base: ["w-full"],
         innerWrapper: ["flex-1"],
         inputWrapper: ["w-full"]
       }
     },
-    isDisabled: {
+    disabled: {
       true: {
-        label: ["text-neutral-light"],
-        inputWrapper: ["bg-neutral-soft", "border-neutral-light", "pointer-events-none"],
-        input: ["text-neutral-light", "placeholder:text-neutral-light"],
-        content: ["text-neutral-light", "group-has-[p]/input:text-danger-light"],
-        errorMessage: ["text-danger-light"]
-      }
-    },
-    isRequired: {
-      true: {
-        label: ["after:content-['*']", "after:text-danger-main", "after:ml-0.5"]
+        inputWrapper: ["!bg-neutral-soft", "pointer-events-none", "!group-has-[p.error]/input:text-danger-light"],
+        input: [
+          "text-neutral-light",
+          "placeholder:text-neutral-light",
+          "group-has-[p.error]/input:text-danger-light",
+          "group-has-[p.error]/input:placeholder:text-danger-light"
+        ],
+        content: ["text-neutral-light", "group-has-[p.error]/input:text-danger-light"],
+        helperText: ["!text-neutral-light"],
+        errorText: ["!text-danger-light"]
       }
     }
   },
-  defaultVariants: {
-    variant: "solid",
-    color: "primary",
-    size: "md",
-    fullWidth: false,
-    isDisabled: false,
-    isRequired: false
-  },
   compoundVariants: [
     {
-      isDisabled: true,
-      isRequired: true,
+      disabled: true,
+      variant: ["outline", "underline"],
       class: {
-        label: ["after:text-danger-light"]
+        inputWrapper: ["!bg-body-background", "group-has-[p.error]/input:border-danger-light"]
       }
     }
-  ]
+  ],
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "md",
+    direction: "vertical",
+    disabled: false,
+    readonly: false
+  }
 });
 
 // src/components/pagination/pagination.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, pagination.variantKeys);
+  const [props, variantProps] = mapPropsVariants(originalProps, paginationStyle.variantKeys);
   const {
     classNames,
     currentPage,
@@ -3926,74 +4363,37 @@ var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
     totalPage,
     showPageNumber = true,
     showPageLabel,
-    showPageInput,
     showFirstLastButtons,
-    handleChangePage
-  } = props;
-  const { startPage, endPage, pageList, handleClickMovePage } = usePagination_default({
+    handleChangePage,
+    variant,
+    size
+  } = { ...props, ...variantProps };
+  const [inputPage, setInputPage] = (0, import_react3.useState)(currentPage);
+  const slots = (0, import_react3.useMemo)(() => paginationStyle(variantProps), [variantProps]);
+  const { pageList, handleClickMovePage } = usePagination_default({
     currentPage,
     totalPage,
     groupSize,
     handleChangePage
   });
-  const slots = (0, import_react3.useMemo)(() => pagination({ ...variantProps }), [variantProps]);
-  const getBaseProps = (0, import_react3.useCallback)(() => ({ className: slots.base({ class: classNames == null ? void 0 : classNames.base }) }), [slots, classNames]);
-  const getLabelProps = (0, import_react3.useCallback)(
-    () => ({ className: `${slots.label({ class: classNames == null ? void 0 : classNames.label })} + ${showPageInput && " !min-w-[55px]"}` }),
-    [slots, classNames, showPageInput]
-  );
-  const getWrapperProps = (0, import_react3.useCallback)(
-    () => ({ className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }) }),
-    [slots, classNames]
-  );
-  const getIconProps = (0, import_react3.useCallback)(() => ({ className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }) }), [slots, classNames]);
-  const getButtonProps = (0, import_react3.useCallback)(
-    () => ({ className: slots.button({ class: classNames == null ? void 0 : classNames.button }) }),
-    [slots, classNames]
-  );
-  const getLabelWrapperProps = (0, import_react3.useCallback)(
-    () => ({
-      className: "flex shrink-0",
-      onSubmit: (e) => {
-        e.preventDefault();
-        if (showPageInput && handleChangePage) {
-          const formData = new FormData(e.target);
-          const page = formData.get("pagination-input");
-          if (page) handleChangePage(+page);
-        }
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      const parsed = Number(inputPage);
+      if (!isNaN(parsed) && parsed >= 1 && parsed <= totalPage) {
+        handleChangePage == null ? void 0 : handleChangePage(parsed);
       }
-    }),
-    [handleChangePage, showPageInput]
-  );
-  const getInputProps = (0, import_react3.useCallback)(
-    () => ({
-      defaultValue: currentPage,
-      size: "sm",
-      name: "pagination-input",
-      type: "number",
-      max: totalPage,
-      min: 1,
-      classNames: { inputWrapper: "!w-[48px] h-[20px] px-[6px]", input: "input-arrow-hide" }
-    }),
-    [currentPage, totalPage]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ...getBaseProps(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { ...getLabelWrapperProps(), children: [
-      showPageInput && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(input_default, { ...getInputProps() }, `${currentPage}+pagination-input`),
-      showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { ...getLabelProps(), children: [
-        !showPageInput && currentPage,
-        ` of ${totalPage}`
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { ...getWrapperProps(), children: [
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: slots.base({ class: classNames == null ? void 0 : classNames.base }), ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: [
       showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
           "aria-label": "firstPage",
           "data-is-active": currentPage > 1,
-          ...getIconProps(),
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage > 1 ? handleClickMovePage(1) : void 0,
-          children: "<<"
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "left-double-chevron" })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -4001,15 +4401,15 @@ var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
         {
           "aria-label": "prevPage",
           "data-is-active": currentPage > 1,
-          ...getIconProps(),
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage > 1 ? handleClickMovePage(currentPage - 1) : void 0,
-          children: "<"
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "left-chevron" })
         }
       ),
       showPageNumber && pageList.map((page, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
         {
-          ...getButtonProps(),
+          className: slots.button({ class: classNames == null ? void 0 : classNames.button }),
           "data-selected": currentPage === page,
           onClick: handleClickMovePage(page),
           children: page
@@ -4021,9 +4421,9 @@ var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
         {
           "aria-label": "nextPage",
           "data-is-active": currentPage < totalPage,
-          ...getIconProps(),
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage < totalPage ? handleClickMovePage(currentPage + 1) : void 0,
-          children: ">"
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "right-chevron" })
         }
       ),
       showFirstLastButtons && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -4031,141 +4431,179 @@ var Pagination = (0, import_react3.forwardRef)((originalProps, ref) => {
         {
           "aria-label": "lastPage",
           "data-is-active": currentPage < totalPage,
-          ...getIconProps(),
+          className: slots.icon({ class: classNames == null ? void 0 : classNames.icon }),
           onClick: currentPage < totalPage ? handleClickMovePage(totalPage) : void 0,
-          children: ">>"
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon_default, { name: "right-double-chevron" })
         }
       )
+    ] }),
+    showPageLabel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        input_default,
+        {
+          value: inputPage || 1,
+          onChange: (e) => setInputPage(Number(e.target.value)),
+          onKeyDown: handleKeyDown,
+          width: 50,
+          height: 24,
+          size: "sm",
+          classNames: {
+            inputWrapper: clsx(
+              "w-[50px] h-[24px] rounded-sm",
+              variant === "solid" ? "" : "bg-body-background border border-neutral-light"
+            )
+          }
+        }
+      ),
+      ` of ${totalPage.toLocaleString("ko-kr")}`
     ] })
   ] });
 });
 Pagination.displayName = "Pagination";
 var pagination_default = Pagination;
-var pagination = tv(
+var paginationStyle = tv(
   {
     slots: {
-      base: "flex items-center select-none",
-      label: "text-primary-main text-right whitespace-nowrap",
-      wrapper: "flex overflow-hidden",
-      icon: "flex items-center justify-center cursor-pointer",
-      button: "flex items-center justify-center cursor-pointer data-[selected=true]:font-[600] transition duration-200"
+      base: ["flex", "items-center", "select-none", "gap-[20px]"],
+      wrapper: ["flex", "items-center", "overflow-hidden", "gap-[5px]"],
+      icon: [
+        "flex",
+        "items-center",
+        "justify-center",
+        "cursor-pointer",
+        "stroke-neutral-main",
+        "data-[is-active=false]:stroke-neutral-light",
+        "data-[is-active=false]:cursor-default"
+      ],
+      button: [
+        "flex",
+        "items-center",
+        "justify-center",
+        "cursor-pointer",
+        "transition",
+        "duration-200",
+        "px-[6px]",
+        "py-[4px]",
+        "text-neutral-main",
+        "data-[selected=true]:font-bold"
+      ],
+      label: ["whitespace-nowrap", "text-neutral-main", "flex", "items-center", "gap-[5px]", "text-sm"]
     },
     variants: {
       variant: {
         solid: {
-          button: ["text-neutral-dark"],
-          icon: "text-neutral-dark data-[is-active=false]:text-neutral-light data-[is-active=false]:cursor-default"
+          button: ["rounded-[5px]", "border-transparent"]
         },
-        line: {
-          wrapper: "!gap-0",
-          button: ["text-foreground"],
-          icon: "text-foreground data-[is-active=false]:text-neutral-light data-[is-active=false]:cursor-default first-of-type:border-l-0"
+        underline: {
+          button: ["rounded-0", "border-transparent"]
         }
       },
       size: {
         sm: {
-          wrapper: "gap-[6px]",
-          label: "min-w-[85px] text-sm mr-[10px]",
-          icon: ["h-[15px] text-sm"],
-          button: ["min-w-[28px] h-[15px] text-sm"]
+          button: ["text-sm", "data-[selected=true]:border-sm"]
         },
         md: {
-          wrapper: "gap-[8px]",
-          label: "min-w-[95px] text-md mr-[12px]",
-          icon: ["h-[17px] text-md"],
-          button: ["min-w-[32px] h-[17px] text-md"]
+          button: ["text-md", "data-[selected=true]:border-md"]
         },
         lg: {
-          wrapper: "gap-[10px]",
-          label: "min-w-[105px] text-lg mr-[14px]",
-          icon: ["h-[20px] text-lg"],
-          button: ["min-w-[37px] h-[20px] text-lg"]
+          button: ["text-lg", "data-[selected=true]:border-lg"]
+        },
+        xl: {
+          button: ["text-xl", "data-[selected=true]:border-xl"]
         }
       },
       color: {
-        primary: {
-          label: "text-primary-main"
-        },
-        secondary: {
-          label: "text-secondary-main"
-        }
+        primary: {},
+        secondary: {},
+        neutral: {}
       },
       isDisabled: {
         true: {
-          icon: "!text-neutral-light !cursor-default",
-          button: "!text-neutral-light !cursor-default"
+          icon: ["!text-neutral-light", "!cursor-default"],
+          button: ["!text-neutral-light", "!cursor-default"]
         }
       }
     },
-    defaultVariants: {
-      variant: "solid",
-      color: "primary",
-      size: "md",
-      isDisabled: false
-    },
     compoundVariants: [
       {
         variant: "solid",
         color: "primary",
         class: {
-          button: "hover:text-primary-main data-[selected=true]:text-primary-main data-[selected=true]:border-primary-main",
-          icon: "hover:text-primary-main"
+          button: [
+            "hover:text-primary-main",
+            "data-[selected=true]:text-primary-main",
+            "data-[selected=true]:bg-primary-soft"
+          ],
+          icon: ["hover:stroke-primary-main"]
         }
       },
       {
         variant: "solid",
         color: "secondary",
         class: {
-          button: "hover:text-secondary-main data-[selected=true]:text-secondary-main data-[selected=true]:border-secondary-main",
-          icon: "hover:text-secondary-main"
+          button: [
+            "hover:text-secondary-main",
+            "data-[selected=true]:text-secondary-main",
+            "data-[selected=true]:bg-secondary-soft"
+          ],
+          icon: ["hover:stroke-secondary-main"]
         }
       },
       {
-        variant: "line",
-        size: "sm",
-        class: {
-          wrapper: "border rounded-sm gap-0",
-          button: "!min-w-[40px] h-[20px] border-l",
-          icon: "min-w-[40px] h-[20px] border-l"
-        }
-      },
-      {
-        variant: "line",
-        size: "md",
+        variant: "solid",
+        color: "neutral",
         class: {
-          wrapper: "border rounded-md gap-0",
-          button: "!min-w-[45px] h-[22px] border-l",
-          icon: "min-w-[45px] h-[22px] border-l"
+          button: [
+            "hover:text-neutral-dark",
+            "data-[selected=true]:text-neutral-dark",
+            "data-[selected=true]:bg-neutral-soft"
+          ],
+          icon: ["hover:stroke-neutral-main"]
         }
       },
       {
-        variant: "line",
-        size: "lg",
+        variant: "underline",
+        color: "primary",
         class: {
-          wrapper: "border rounded-lg gap-0",
-          button: "!min-w-[50px] h-[24px] border-l",
-          icon: "min-w-[50px] h-[24px] border-l"
+          button: [
+            "hover:text-primary-main",
+            "data-[selected=true]:text-primary-main",
+            "data-[selected=true]:border-b-primary-main"
+          ],
+          icon: ["hover:stroke-primary-main"]
         }
       },
       {
-        variant: "line",
-        color: "primary",
+        variant: "underline",
+        color: "secondary",
         class: {
-          wrapper: "border-primary-main",
-          button: "border-primary-main hover:bg-primary-soft hover:text-primary-main data-[selected=true]:bg-primary-soft data-[selected=true]:text-primary-main",
-          icon: "border-primary-main data-[selected=true]:bg-primary-soft data-[selected=true]:text-primary-main data-[is-active=true]:hover:text-primary-main data-[is-active=true]:hover:bg-primary-soft"
+          button: [
+            "hover:text-secondary-main",
+            "data-[selected=true]:text-secondary-main",
+            "data-[selected=true]:border-b-secondary-main"
+          ],
+          icon: ["hover:stroke-secondary-main"]
         }
       },
       {
-        variant: "line",
-        color: "secondary",
+        variant: "underline",
+        color: "neutral",
         class: {
-          wrapper: "border-secondary-main",
-          button: "border-secondary-main hover:bg-secondary-soft hover:text-secondary-main data-[selected=true]:bg-secondary-soft data-[selected=true]:text-secondary-main",
-          icon: "border-secondary-main data-[selected=true]:bg-secondary-soft data-[selected=true]:text-secondary-main data-[is-active=true]:hover:text-secondary-main data-[is-active=true]:hover:bg-secondary-soft"
+          button: [
+            "hover:text-neutral-dark",
+            "data-[selected=true]:text-neutral-dark",
+            "data-[selected=true]:border-b-neutral-main"
+          ],
+          icon: ["hover:stroke-neutral-main"]
         }
       }
-    ]
+    ],
+    defaultVariants: {
+      variant: "solid",
+      color: "primary",
+      size: "md",
+      isDisabled: false
+    }
   },
   {
     twMerge: false