@deepnoid/ui 0.0.111 → 0.1.0

package/dist/components/table/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/table/index.ts
 var table_exports = {};
 __export(table_exports, {
@@ -106,19 +177,226 @@ var import_react = 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",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h2: [
+    "34px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h3: [
+    "28px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h4: [
+    "24px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "700"
+    }
+  ],
+  h5: [
+    "20px",
+    {
+      letterSpacing: "-2%",
+      fontWeight: "600"
+    }
+  ],
+  sm: [
+    "12px",
+    {
+      lineHeight: "18px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  md: [
+    "14px",
+    {
+      lineHeight: "21px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  lg: [
+    "16px",
+    {
+      lineHeight: "24px",
+      letterSpacing: "-2%",
+      fontWeight: "400"
+    }
+  ],
+  xl: [
+    "18px",
+    {
+      lineHeight: "27px",
+      letterSpacing: "-2%",
+      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)] }]
     }
   }
 });
@@ -126,64 +404,63 @@ var tv = (0, import_tailwind_variants.createTV)({
 // src/components/checkbox/checkbox.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var CheckBox = (0, import_react.forwardRef)((originalProps, ref) => {
-  const [props, variantProps] = mapPropsVariants(originalProps, checkbox.variantKeys);
-  const { children, classNames, ...inputProps } = props;
-  const slots = (0, import_react.useMemo)(() => checkbox({ ...variantProps }), [...Object.values(variantProps)]);
-  const getBaseProps = (0, import_react.useCallback)(
-    () => ({
-      className: slots.base({ class: classNames == null ? void 0 : classNames.base })
-    }),
-    [slots, classNames]
+  var _a, _b;
+  const [props, variantProps] = mapPropsVariants(originalProps, checkboxStyle.variantKeys);
+  const { children, classNames, labelPosition = "end", ...inputProps } = props;
+  const slots = (0, import_react.useMemo)(() => checkboxStyle({ ...variantProps }), [variantProps]);
+  const isSelected = (_b = (_a = inputProps.checked) != null ? _a : inputProps.defaultChecked) != null ? _b : false;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "label",
+    {
+      className: clsx(
+        slots.base({ class: classNames == null ? void 0 : classNames.base }),
+        labelPosition === "start" && slots.labelReverse({ class: classNames == null ? void 0 : classNames.labelReverse })
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...inputProps, type: "checkbox", ref }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          CheckBoxIcon,
+          {
+            size: variantProps.size,
+            isSelected,
+            className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
+          }
+        ) }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: slots.label({ class: classNames == null ? void 0 : classNames.label }), children })
+      ]
+    }
   );
-  const getInputProps = (0, import_react.useCallback)(() => {
-    return {
-      ...inputProps,
-      type: "checkbox",
-      ref,
-      size: 0
-    };
-  }, [slots, classNames, inputProps]);
-  const getWrapperProps = (0, import_react.useCallback)(() => {
-    return {
-      className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper })
-    };
-  }, [slots, classNames]);
-  const getLabelProps = (0, import_react.useCallback)(() => {
-    return {
-      className: slots.label({ class: classNames == null ? void 0 : classNames.label })
-    };
-  }, [classNames == null ? void 0 : classNames.label, slots]);
-  const getIconProps = (0, import_react.useCallback)(() => {
-    return {
-      isSelected: true,
-      className: slots.icon({ class: classNames == null ? void 0 : classNames.icon })
-    };
-  }, [slots, classNames]);
-  const CheckBoxIcon = (props2) => {
-    const { isSelected, ...otherProps } = props2;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", role: "presentation", viewBox: "0 0 17 18", ...otherProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "polyline",
-      {
-        fill: "none",
-        points: "1 9 7 14 15 4",
-        stroke: "currentColor",
-        strokeLinecap: "round",
-        strokeWidth: 3,
-        style: isSelected ? {
-          transition: "stroke-dashoffset 250ms linear 0.2s"
-        } : {}
-      }
-    ) });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { ...getBaseProps(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...getInputProps() }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...getWrapperProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckBoxIcon, { ...getIconProps() }) }),
-    children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...getLabelProps(), children })
-  ] });
 });
 CheckBox.displayName = "CheckBox";
 var checkbox_default = CheckBox;
-var checkbox = tv({
+var CheckBoxIcon = ({ size, isSelected, className }) => {
+  const strokeWidth = (0, import_react.useMemo)(() => {
+    switch (size) {
+      case "sm":
+        return 1;
+      case "md":
+        return 1.25;
+      case "lg":
+        return 1.5;
+      case "xl":
+        return 1.75;
+      default:
+        return 1.25;
+    }
+  }, [size]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 13 13", fill: "none", className, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M2.16667 6.90123L5.63334 10.1111L10.8333 2.88889",
+      stroke: "white",
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: isSelected ? { transition: "stroke-dashoffset 250ms linear 0.2s" } : {}
+    }
+  ) });
+};
+var checkboxStyle = tv({
   slots: {
     base: ["group", "relative", "inline-flex", "items-center", "cursor-pointer"],
     wrapper: [
@@ -191,16 +468,14 @@ var checkbox = tv({
       "inline-flex",
       "items-center",
       "justify-center",
-      // before
       "before:content-['']",
+      "before:bg-body-background",
       "before:absolute",
       "before:inset-0",
-      "before:border-solid",
-      "before:border-[1px]",
+      "before:border",
+      "before:border-neutral-light",
       "before:box-border",
       "before:z-10",
-      "before:border-neutral-main",
-      // after
       "after:content-['']",
       "after:absolute",
       "after:inset-0",
@@ -208,53 +483,91 @@ var checkbox = tv({
       "after:opacity-0",
       "group-has-[:checked]:after:scale-100",
       "group-has-[:checked]:after:opacity-100",
-      // hover
-      "group-hover:before:bg-neutral-soft",
       "before:transition duration-200"
     ],
-    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-white"],
-    label: ["relative", "text-foreground", "select-none"]
+    icon: ["z-10", "opacity-0", "group-has-[:checked]:opacity-100", "text-neutral-light"],
+    labelReverse: ["flex-row-reverse"],
+    label: ["relative", "text-body-foreground", "select-none"]
   },
   variants: {
     color: {
       primary: {
-        wrapper: ["group-has-[:checked]:before:border-primary-main", "group-has-[:checked]:before:bg-primary-main"]
+        wrapper: [
+          "group-has-[:checked]:before:border-primary-main",
+          "group-has-[:checked]:before:bg-primary-main",
+          "group-hover:before:border-primary-light",
+          "group-hover:before:bg-primary-soft"
+        ]
       },
       secondary: {
-        wrapper: ["group-has-[:checked]:before:border-secondary-main", "group-has-[:checked]:before:bg-secondary-main"]
+        wrapper: [
+          "group-has-[:checked]:before:border-secondary-main",
+          "group-has-[:checked]:before:bg-secondary-main",
+          "group-hover:before:border-secondary-light",
+          "group-hover:before:bg-secondary-soft"
+        ]
+      },
+      neutral: {
+        wrapper: [
+          "group-has-[:checked]:before:border-neutral-main",
+          "group-has-[:checked]:before:bg-neutral-main",
+          "group-hover:before:border-neutral-light",
+          "group-hover:before:bg-neutral-soft"
+        ]
       }
     },
     size: {
       sm: {
-        wrapper: ["w-[15px]", "h-[15px]", "rounded-sm", "before:rounded-[3px]", "after:rounded-[3px]"],
-        label: ["text-sm", "ml-[6px]"],
+        base: ["gap-[8px]"],
+        wrapper: [
+          "w-[12px]",
+          "h-[12px]",
+          "rounded-[2px]",
+          "before:border-sm",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-sm"],
         icon: ["w-[10px]", "h-[10px]"]
       },
       md: {
-        wrapper: ["w-[17px]", "h-[17px]", "rounded-md", "before:rounded-[3px]", "after:rounded-[3px]"],
-        label: ["text-md", "ml-[8px]"],
-        icon: ["w-[12px]", "h-[12px]"]
+        base: ["gap-[8px]"],
+        wrapper: [
+          "w-[15px]",
+          "h-[15px]",
+          "rounded-[2px]",
+          "before:border-md",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-md"],
+        icon: ["w-[13px]", "h-[13px]"]
       },
       lg: {
-        wrapper: ["w-[20px]", "h-[20px]", "rounded-lg", "before:rounded-[4px]", "after:rounded-[4px]"],
-        label: ["text-lg", "ml-[10px]"],
-        icon: ["w-[15px]", "h-[15px]"]
-      }
-    },
-    lineThrough: {
-      true: {
-        label: [
-          "inline-flex",
-          "items-center",
-          "justify-center",
-          "before:content-['']",
-          "before:absolute",
-          "before:bg-black",
-          "before:w-0",
-          "before:h-0.5",
-          "group-has-[:checked]:opacity-60",
-          "group-has-[:checked]:before:w-full"
-        ]
+        base: ["gap-[10px]"],
+        wrapper: [
+          "w-[18px]",
+          "h-[18px]",
+          "rounded-[4px]",
+          "before:border-lg",
+          "before:rounded-[4px]",
+          "after:rounded-[4px]"
+        ],
+        label: ["text-lg"],
+        icon: ["w-[16px]", "h-[16px]"]
+      },
+      xl: {
+        base: ["gap-[10px]"],
+        wrapper: [
+          "w-[21px]",
+          "h-[21px]",
+          "rounded-[4px]",
+          "before:border-xl",
+          "before:rounded-[2px]",
+          "after:rounded-[2px]"
+        ],
+        label: ["text-xl"],
+        icon: ["w-[19px]", "h-[19px]"]
       }
     },
     isInvalid: {
@@ -262,52 +575,35 @@ var checkbox = tv({
         wrapper: [
           "before:border-danger-main",
           "group-has-[:checked]:before:bg-danger-main",
-          "group-has-[:checked]:before:border-danger-main"
+          "group-has-[:checked]:before:border-danger-main",
+          "group-hover:before:border-danger-light",
+          "group-hover:before:bg-danger-soft"
         ],
-        label: "text-danger-main"
+        label: ["text-danger-main"]
       }
     },
     isDisabled: {
       true: {
-        base: "opacity-disabled pointer-events-none text-neutral-light",
+        base: ["opacity-disabled", "cursor-not-allowed", "pointer-events-auto", "text-neutral-light"],
         wrapper: [
+          "cursor-not-allowed",
           "after:bg-neutral-soft",
           "before:border-neutral-light",
           "before:bg-neutral-soft",
           "group-has-[:checked]:before:bg-neutral-soft",
-          "group-has-[:checked]:before:border-neutral-light"
-        ],
-        label: "text-neutral-light",
-        icon: "text-neutral-light"
-      }
-    },
-    disableAnimation: {
-      true: {
-        wrapper: "transition-none",
-        icon: "transition-none",
-        label: "transition-none"
-      },
-      false: {
-        wrapper: [
-          "before:transition-colors",
-          "group-data-[pressed=true]:scale-95",
-          "transition-transform",
-          "after:transition-transform-opacity",
-          "after:!ease-linear",
-          "after:!duration-200",
-          "motion-reduce:transition-none"
+          "group-has-[:checked]:before:border-neutral-light",
+          "group-hover:before:border-neutral-light",
+          "group-hover:before:bg-neutral-soft"
         ],
-        icon: ["transition-opacity", "motion-reduce:transition-none"],
-        label: ["transition-colors-opacity", "before:transition-width", "motion-reduce:transition-none"]
+        label: ["text-neutral-light"],
+        icon: ["text-neutral-light", "opacity-0"]
       }
     }
   },
   defaultVariants: {
     color: "primary",
     size: "md",
-    isDisabled: false,
-    lineThrough: false,
-    disableAnimation: false
+    isDisabled: false
   }
 });
 
@@ -361,6 +657,137 @@ var import_react4 = __toESM(require("react"));
 // src/components/icon/template.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var template = {
+  "left-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("path", { d: "M11 13L7 9L11 5", strokeLinecap: "round", "stroke-linejoin": "round" })
+      }
+    );
+  },
+  "right-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("path", { d: "M7 5L11 9L7 13", strokeLinecap: "round", "stroke-linejoin": "round" })
+      }
+    );
+  },
+  "left-double-chevron": ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.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_runtime3.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_runtime3.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_runtime3.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_runtime3.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_runtime3.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_runtime3.jsx)("path", { d: "M6.5 4L11.5 9L6.5 14", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    );
+  },
+  // ----------------------------------- old ---------------------------------
+  // ** avatar icon **
+  avatar: ({ className }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("rect", { id: "Rectangle 6445", width: "50", height: "50", rx: "5", fill: "url(#pattern0_10_7240)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("defs", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("pattern", { id: "pattern0_10_7240", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("use", { xlinkHref: "#image0_10_7240", transform: "scale(0.00195312)" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(
@@ -1249,36 +1676,6 @@ var template = {
       }
     );
   },
-  star: ({ className, fill }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.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_runtime3.jsx)(
       "svg",
@@ -3909,14 +4306,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_runtime4.jsx)("div", { className: "w-fit h-fit", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-fit w-fit", onClick, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     SVGIcon,
     {
       fill,
@@ -4221,6 +4620,9 @@ var table = (0, import_tailwind_variants3.tv)({
       },
       lg: {
         tr: "h-[50px] text-lg"
+      },
+      xl: {
+        tr: "h-[50px] text-xl"
       }
     },
     color: {