@scglab/admin-ui 0.1.3 → 0.1.5

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,12 +17,46 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BorderRadiusBox: () => BorderRadiusBox_default,
+  BulletText: () => BulletText_default,
+  Button: () => Button_default,
+  Checkbox: () => Checkbox_default,
+  CommonTable: () => CommonTable_default,
+  Divider: () => Divider_default,
+  EmailInput: () => EmailInput_default,
+  Input: () => Input_default,
+  Label: () => Label_default,
+  MultiSelectCheckbox: () => MultiSelectCheckbox_default,
+  Paging: () => Paging,
+  Radio: () => Radio_default,
+  RequiredDot: () => RequiredDot_default,
+  SelectBox: () => SelectBox_default,
+  Stack: () => Stack_default,
+  Table: () => Table_default,
+  TableTop: () => TableTop_default,
+  Tag: () => Tag,
+  TagInput: () => TagInput_default,
   Text: () => Text,
+  TextArea: () => TextArea_default,
+  TextButton: () => TextButton_default,
+  Toggle: () => Toggle_default,
+  ToolTipBox: () => ToolTipBox_default,
+  Tooltip: () => Tooltip_default,
+  TooltipInfo: () => TooltipInfo_default,
+  WarningBox: () => WarningBox_default,
   alignSelfs: () => alignSelfs,
   aligns: () => aligns,
   colors: () => colors,
@@ -189,9 +225,3385 @@ function Text({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id, style: styles, className, ...props, children });
 }
+
+// src/utils/helperUtils.ts
+var import_moment = __toESM(require("moment"), 1);
+var toRemFunction2 = (px) => {
+  return `${px / 14}rem`;
+};
+var formatNumberWithComma = (num) => {
+  if (!num) return "0";
+  const numStr = num.toString().replace(/[^\d]/g, "");
+  return numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+};
+var formatDate = (date) => {
+  return date ? (0, import_moment.default)(date).format("YYYY.MM.DD") : "";
+};
+var formatDateTime = (date) => {
+  return date ? (0, import_moment.default)(date).format("YYYY-MM-DD HH:mm:ss") : "";
+};
+
+// src/components/ui/BorderRadiusBox/BorderRadiusBox.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function BorderRadiusBox({
+  active = false,
+  paddingX = 22,
+  paddingY = 20,
+  radius = 12,
+  children,
+  onClick,
+  className,
+  fullWidth = false,
+  bgColor = "white",
+  borderColor = "line"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: `border ${fullWidth ? "w-full" : ""} ${active ? "border-primary bg-primary10" : `border-${borderColor} bg-${bgColor}`} ${onClick ? "cursor-pointer" : ""} ${className}`,
+      style: {
+        paddingLeft: toRemFunction2(paddingX),
+        paddingRight: toRemFunction2(paddingX),
+        paddingTop: toRemFunction2(paddingY),
+        paddingBottom: toRemFunction2(paddingY),
+        borderRadius: toRemFunction2(radius)
+      },
+      onClick,
+      children
+    }
+  );
+}
+var BorderRadiusBox_default = BorderRadiusBox;
+
+// src/components/ui/Tooltip/Tooltip.tsx
+var import_react = require("react");
+
+// src/assets/colorIcon/ColorIcTagClose.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function ColorIcTagClose({
+  width = 10,
+  height = 10,
+  color = "text"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 10 10",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { color: `var(--color-${color})` },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { clipPath: "url(#clip0_848_3903)", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "path",
+          {
+            d: "M5.5 5L9.3125 1.1875C9.45312 1.04688 9.45312 0.828125 9.3125 0.6875C9.17188 0.546875 8.95312 0.546875 8.8125 0.6875L5 4.5L1.1875 0.6875C1.04687 0.546875 0.828125 0.546875 0.6875 0.6875C0.546875 0.828125 0.546875 1.04688 0.6875 1.1875L4.5 5L0.6875 8.8125C0.546875 8.95313 0.546875 9.17188 0.6875 9.3125C0.75 9.375 0.84375 9.42188 0.9375 9.42188C1.03125 9.42188 1.125 9.39063 1.1875 9.3125L5 5.5L8.8125 9.3125C8.875 9.375 8.96875 9.42188 9.0625 9.42188C9.15625 9.42188 9.25 9.39063 9.3125 9.3125C9.45312 9.17188 9.45312 8.95313 9.3125 8.8125L5.5 5Z",
+            fill: "currentColor"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("clipPath", { id: "clip0_848_3903", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "10", height: "10", fill: "white" }) }) })
+      ]
+    }
+  );
+}
+var ColorIcTagClose_default = ColorIcTagClose;
+
+// src/assets/colorIcon/ColorIcTooltip.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ColorIcTooltip({
+  width = 14,
+  height = 14,
+  color = "text"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { color: `var(--color-${color})` },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M6.97882 4.26364H6.95761C6.70306 4.26364 6.46973 4.47576 6.46973 4.75152C6.46973 5.02728 6.68185 5.2394 6.95761 5.2394H6.97882C7.23336 5.2394 7.4667 5.02728 7.4667 4.75152C7.4667 4.47576 7.25458 4.26364 6.97882 4.26364Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M6.97872 5.93941C6.72418 5.93941 6.49084 6.15153 6.49084 6.42729V9.69395C6.49084 9.9485 6.70297 10.1818 6.97872 10.1818C7.23327 10.1818 7.4666 9.96971 7.4666 9.69395V6.40607C7.4666 6.15153 7.25448 5.93941 6.97872 5.93941Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "path",
+          {
+            d: "M6.97866 0.593945C3.43624 0.593945 0.551392 3.45758 0.551392 7.00001C0.551392 10.5424 3.43624 13.4273 6.97866 13.4273C10.5211 13.4273 13.3847 10.5424 13.3847 7.00001C13.3847 3.45758 10.5211 0.593945 6.97866 0.593945ZM6.97866 12.4727C3.96654 12.4727 1.50594 10.0121 1.50594 7.00001C1.50594 3.98788 3.96654 1.52728 6.97866 1.52728C9.99079 1.52728 12.4302 3.98788 12.4302 7.00001C12.4302 10.0121 9.99079 12.4727 6.97866 12.4727Z",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
+}
+var ColorIcTooltip_default = ColorIcTooltip;
+
+// src/components/ui/Tooltip/Tooltip.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Tooltip({ tooltipInfo, position = "right" }) {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (isOpen) {
+    }
+  }, [isOpen]);
+  const positionStyle = {
+    left: position === "right" ? "17px" : "50%",
+    top: position === "right" ? "50%" : "17px",
+    transform: position === "right" ? "translate(0, -50%)" : "translate(-62%, 0)"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "tooltip relative ml-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: "relative",
+        onClick: (e) => {
+          e.stopPropagation();
+          setIsOpen(!isOpen);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColorIcTooltip_default, { width: 14, height: 14 })
+      }
+    ),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className: `absolute z-10 rounded-md`,
+        style: {
+          ...positionStyle
+        },
+        children: [
+          tooltipInfo,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "absolute top-10 right-10 cursor-pointer", onClick: (e) => {
+            e.stopPropagation();
+            setIsOpen(false);
+          }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColorIcTagClose_default, { width: 10, height: 10, color: "text" }) })
+        ]
+      }
+    )
+  ] });
+}
+var Tooltip_default = Tooltip;
+
+// src/components/ui/BulletText/BulletText.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var BulletText = ({
+  label,
+  bulletColor = "secondaryText",
+  tooltip,
+  textColor = "text",
+  textSize = "body14",
+  fontWeight: fontWeight2 = "bold"
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex flex-none relative label-mobile`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        className: `inline-block w-3 h-3 bg-${bulletColor} mr-4 ${textSize === "body12" ? "mt-7" : "mt-9"}`
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Text, { size: textSize, color: textColor, fontWeight: fontWeight2, children: label }),
+    tooltip && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tooltip_default, { tooltipInfo: tooltip })
+  ] });
+};
+var BulletText_default = BulletText;
+
+// src/components/ui/Button/Button.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Button = ({
+  children,
+  variant = "primary",
+  size = "large",
+  fontWeight: fontWeight2 = "bold",
+  isLoading = false,
+  disabled,
+  className = "",
+  alignSelf = "center",
+  justifySelf = "center",
+  cornerStyle = "square",
+  icon,
+  iconPosition = "right",
+  type = "button",
+  customWidth,
+  wFull = false,
+  ...props
+}) => {
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "primary":
+        return `bg-primary text-white border border-primary hover:bg-blue-600 ${cornerStyle === "round" ? "rounded-full" : "rounded-md"}`;
+      case "secondary":
+        return `bg-primary10 border border-primary10 text-primary ${cornerStyle === "round" ? "rounded-full" : "rounded-md"}`;
+      case "danger":
+        return `bg-warningLight border border-warningLight text-warning hover:bg-warningLight ${cornerStyle === "round" ? "rounded-full" : "rounded-md"}`;
+      case "lower":
+        return `bg-gray2 text-dark5 border border-gray2 hover:bg-gray3 ${cornerStyle === "round" ? "rounded-full" : "rounded-md"}`;
+      case "neutral":
+        return `bg-white border border-primary text-primary ${cornerStyle === "round" ? "rounded-full" : "rounded-md"}`;
+      case "neutralGray":
+        return `bg-white border border-line text-text ${cornerStyle === "round" ? "rounded-full" : "rounded-md"}`;
+      case "blue":
+        return `bg-blueLight text-blue border border-blueLight ${cornerStyle === "round" ? "rounded-full" : "rounded-md"}`;
+      case "orange":
+        return `bg-orangeLight text-orange border border-orangeLight ${cornerStyle === "round" ? "rounded-full" : "rounded-md"}`;
+      case "green":
+        return `bg-greenLight text-green border border-greenLight ${cornerStyle === "round" ? "rounded-full" : "rounded-md"}`;
+    }
+  };
+  const getSizeStyles = () => {
+    switch (size) {
+      case "small":
+        return "px-10 py-1 text-sm";
+      case "medium":
+        return `px-16 pt-7 pb-8 text-body14 font-${fontWeight2}`;
+      case "large":
+        return `px-28 py-13 text-body16 font-${fontWeight2} min-w-[140px]`;
+    }
+  };
+  const baseStyles = "flex items-center justify-center transition-colors whitespace-nowrap cursor-pointer focus:outline-none";
+  const disabledStyles = `bg-gray1 text-dark7 cursor-not-allowed border border-gray1 ${cornerStyle === "round" ? "rounded-full" : "rounded-md"}`;
+  const buttonStyles = `
+    ${baseStyles} 
+    ${getSizeStyles()} 
+    ${disabled || isLoading ? disabledStyles : getVariantStyles()}
+    ${alignSelfs[alignSelf]}
+    ${justifySelfs[justifySelf]}
+  `;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "button",
+    {
+      className: `${buttonStyles} ${className}`,
+      disabled: disabled || isLoading,
+      type,
+      style: {
+        width: wFull ? "100%" : customWidth ? `${customWidth}px` : ""
+      },
+      ...props,
+      children: [
+        icon && iconPosition === "left" && (typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: icon, alt: "icon", className: "w-16 h-16 mr-4" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mr-4", children: icon })),
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            "svg",
+            {
+              className: "animate-spin -ml-1 mr-2 h-14 w-14 text-current",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  }
+                )
+              ]
+            }
+          ),
+          "\uCC98\uB9AC \uC911..."
+        ] }) : children,
+        icon && iconPosition === "right" && (typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: icon, alt: "icon", className: "w-16 h-16 ml-3" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mr-4", children: icon }))
+      ]
+    }
+  );
+};
+var Button_default = Button;
+
+// src/components/ui/Checkbox/Checkbox.tsx
+var import_react2 = require("react");
+
+// src/assets/colorIcon/ColorIcCheckDim.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ColorIcCheckDim({
+  width = 21,
+  height = 20,
+  fillColor = "gray3",
+  strokeColor = "stroke",
+  iconColor = "white"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 21 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "rect",
+          {
+            x: "1",
+            y: "0.5",
+            width: "19",
+            height: "19",
+            rx: "3.5",
+            fill: `var(--color-${fillColor})`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "rect",
+          {
+            x: "1",
+            y: "0.5",
+            width: "19",
+            height: "19",
+            rx: "3.5",
+            stroke: `var(--color-${strokeColor})`
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "path",
+          {
+            d: "M13.9658 5.92676C14.1349 5.75801 14.4042 5.75793 14.5732 5.92676C14.7212 6.07465 14.74 6.29972 14.6289 6.4668L14.5732 6.53418L11.1133 10.001L14.5596 13.4688C14.7286 13.6376 14.7293 13.9071 14.5605 14.0762C14.4836 14.153 14.367 14.2002 14.2627 14.2002C14.1584 14.2002 14.0427 14.153 13.9658 14.0762H13.9648L10.5059 10.6084L7.03418 14.0762C6.95726 14.153 6.84163 14.2002 6.7373 14.2002C6.63295 14.2002 6.5164 14.153 6.43945 14.0762C6.27071 13.9072 6.27047 13.6376 6.43945 13.4688L9.89746 10.002L6.42676 6.54785V6.54688C6.25778 6.37786 6.25763 6.10837 6.42676 5.93945C6.59574 5.77069 6.8651 5.77085 7.03418 5.93945L10.5059 9.39453L13.9648 5.92676H13.9658Z",
+            fill: `var(--color-${iconColor})`,
+            stroke: `var(--color-${iconColor})`,
+            strokeWidth: "0.4"
+          }
+        )
+      ]
+    }
+  );
+}
+var ColorIcCheckDim_default = ColorIcCheckDim;
+
+// src/components/ui/Checkbox/Checkbox.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Checkbox = (0, import_react2.forwardRef)(
+  ({
+    label,
+    error,
+    className = "",
+    id,
+    type = "filled",
+    checked,
+    checkboxWidth,
+    disabled = false,
+    ...props
+  }, ref) => {
+    const checkboxId = id || `checkbox-${Math.random().toString(36).substring(2, 9)}`;
+    const [isChecked, setIsChecked] = (0, import_react2.useState)(checked || false);
+    (0, import_react2.useEffect)(() => {
+      setIsChecked(checked || false);
+    }, [checked]);
+    const handleInputChange = (e) => {
+      setIsChecked(e.target.checked);
+      if (props.onChange) {
+        props.onChange(e);
+      }
+    };
+    const handleCheckboxClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled) {
+        return;
+      }
+      const newChecked = !isChecked;
+      setIsChecked(newChecked);
+      const event = {
+        target: {
+          checked: newChecked,
+          value: props.value || "",
+          name: props.name || "",
+          type: "checkbox"
+        },
+        currentTarget: {
+          checked: newChecked,
+          value: props.value || "",
+          name: props.name || "",
+          type: "checkbox"
+        }
+      };
+      if (props.onChange) {
+        props.onChange(event);
+      }
+    };
+    const handleLabelClick = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled) {
+        return;
+      }
+      const newChecked = !isChecked;
+      setIsChecked(newChecked);
+      const event = {
+        target: {
+          checked: newChecked,
+          value: props.value || "",
+          name: props.name || "",
+          type: "checkbox"
+        },
+        currentTarget: {
+          checked: newChecked,
+          value: props.value || "",
+          name: props.name || "",
+          type: "checkbox"
+        }
+      };
+      if (props.onChange) {
+        props.onChange(event);
+      }
+    };
+    const getTypeNoneCheckedClass = () => {
+      if (type === "filled") {
+        return "border border-line rounded";
+      }
+      if (type === "outline") {
+        return "bg-white";
+      }
+    };
+    const getTypeCheckedClass = () => {
+      if (type === "filled") {
+        if (isChecked) {
+          return "bg-primary border-primary";
+        }
+        return "bg-white";
+      }
+      if (type === "outline") {
+        return "bg-white";
+      }
+    };
+    const getTypeCheckedIconClass = () => {
+      if (type === "filled") {
+        return "text-white";
+      }
+      if (type === "outline") {
+        if (isChecked) {
+          return "text-primary";
+        }
+        return "text-line";
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: `flex items-center py-1 px-1 ${checkboxWidth}`,
+        style: {
+          width: checkboxWidth ? `${toRemFunction2(checkboxWidth)}` : ""
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center h-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "input",
+              {
+                ref,
+                id: checkboxId,
+                type: "checkbox",
+                checked: isChecked,
+                onChange: handleInputChange,
+                disabled,
+                className: "sr-only",
+                ...props
+              }
+            ),
+            disabled ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ColorIcCheckDim_default, { width: 18, height: 18 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              "div",
+              {
+                className: `
+                  h-18 w-18 
+                  ${getTypeNoneCheckedClass()}
+                  transition-all duration-200
+                  flex items-center justify-center
+                  ${getTypeCheckedClass()}
+                  ${error ? "border-red" : ""}
+                  ${className}
+                `,
+                onClick: handleCheckboxClick,
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${getTypeCheckedIconClass()} flex items-center justify-center`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "svg",
+                  {
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "path",
+                      {
+                        d: "M15.292 5.93848C15.5167 5.687 15.8864 5.68757 16.1104 5.94043L16.1172 5.94727L16.123 5.95508C16.2977 6.1856 16.3012 6.54196 16.0713 6.77832L16.0723 6.7793L9.55078 13.9229L9.55176 13.9238C9.36406 14.1357 9.1186 14.25 8.84668 14.25C8.59606 14.25 8.33167 14.1383 8.1416 13.9238V13.9229L4.90918 10.373L4.90625 10.3701C4.69767 10.1343 4.69773 9.77005 4.90625 9.53418C5.12992 9.2815 5.49974 9.28064 5.72461 9.53125L8.86426 12.9795L15.292 5.9375V5.93848Z",
+                        fill: "currentColor",
+                        stroke: "currentColor",
+                        strokeWidth: "0.5"
+                      }
+                    )
+                  }
+                ) })
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `text-sm ${type === "outline" ? "ml-4" : "ml-8"}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "label",
+            {
+              htmlFor: checkboxId,
+              onClick: handleLabelClick,
+              className: ` text-body14 ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} select-none ${type === "outline" ? "text-primaryText " : "text-primaryText"}`,
+              children: label
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
+
+// src/components/ui/Divider/Divider.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Divider({
+  className = "",
+  orientation = "horizontal",
+  variant = "solid",
+  width
+}) {
+  const baseClasses = orientation === "horizontal" ? "w-full border-t" : "h-full border-l";
+  const variantClasses = {
+    solid: "border-solid",
+    dashed: "border-dashed",
+    dotted: "border-dotted"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      className: `${baseClasses} ${variantClasses[variant]} border-line ${className}`,
+      style: { width: width ? toRemFunction2(width) : "100%" },
+      role: "separator"
+    }
+  );
+}
+var Divider_default = Divider;
+
+// src/components/ui/EmailInput/EmailInput.tsx
+var import_react5 = require("react");
+
+// src/components/ui/Stack/Stack.tsx
+var import_clsx = __toESM(require("clsx"), 1);
+var import_react3 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Stack = (0, import_react3.forwardRef)(
+  ({
+    direction = "col",
+    justify,
+    align,
+    even = false,
+    className = "",
+    children,
+    gap,
+    rowGap = 0,
+    columnGap = 0,
+    wFull = false,
+    hFull = false,
+    onClick,
+    childSizes,
+    flexWrap = false
+  }, ref) => {
+    const classes = (0, import_clsx.default)(
+      "flex",
+      flexWrap && "flex-wrap",
+      directions[direction],
+      justify && justifies[justify],
+      align && aligns[align],
+      {
+        even,
+        "w-full": wFull,
+        "h-full": hFull
+      },
+      className
+    );
+    const renderChildren = () => {
+      if (!childSizes) return children;
+      const childrenArray = import_react3.Children.toArray(children);
+      const result = [];
+      const maxLength = Math.max(childSizes.length, childrenArray.length);
+      for (let index = 0; index < maxLength; index++) {
+        const size = childSizes[index];
+        const child = childrenArray[index];
+        if (!child) {
+          if (size !== void 0 && size !== null && size !== -1) {
+            let sizeValue;
+            if (typeof size === "string") {
+              if (/^\d+$/.test(size)) {
+                sizeValue = `${size}px`;
+              } else {
+                sizeValue = size;
+              }
+            } else if (typeof size === "number" && size > 0) {
+              sizeValue = `${size}px`;
+            } else {
+              continue;
+            }
+            const sizeStyle2 = {
+              flexBasis: sizeValue,
+              flexShrink: 0,
+              flexGrow: 0
+            };
+            result.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: sizeStyle2 }, `spacer-${index}`));
+          }
+          continue;
+        }
+        if (!(0, import_react3.isValidElement)(child)) {
+          result.push(child);
+          continue;
+        }
+        let sizeStyle;
+        if (size === -1 || size === void 0 || size === null) {
+          sizeStyle = {
+            flex: 1
+          };
+        } else {
+          let sizeValue;
+          if (typeof size === "string") {
+            if (/^\d+$/.test(size)) {
+              sizeValue = `${size}px`;
+            } else {
+              sizeValue = size;
+            }
+          } else {
+            sizeValue = `${size}px`;
+          }
+          sizeStyle = {
+            flexBasis: sizeValue,
+            flexShrink: 0,
+            flexGrow: 0
+          };
+        }
+        result.push(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: sizeStyle, children: child }, index)
+        );
+      }
+      return result;
+    };
+    const gapStyle = gap ? { gap: toRemFunction2(gap) } : { rowGap: toRemFunction2(rowGap), columnGap: toRemFunction2(columnGap) };
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        ref,
+        className: classes,
+        style: gapStyle ? gapStyle : void 0,
+        onClick,
+        children: renderChildren()
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+var Stack_default = Stack;
+
+// src/components/ui/RequiredDot/RequiredDot.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function RequiredDot() {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "inline-block w-6 h-6 bg-red rounded-full bg-warning ml-4" });
+}
+var RequiredDot_default = RequiredDot;
+
+// src/components/ui/Label/Label.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Label = ({
+  isDot = true,
+  label,
+  required = false,
+  inputId,
+  width,
+  tooltip,
+  labelHidden = false,
+  subText,
+  fontWeight: fontWeight2 = "bold",
+  align
+}) => {
+  if (!label || labelHidden) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "label",
+    {
+      htmlFor: inputId ? inputId : "",
+      className: `leading-none flex items-center flex-none relative label-mobile ${align === "end" ? "justify-end" : ""}`,
+      style: { width: width ? toRemFunction2(width) : "auto" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { size: "body14", color: "primaryText", fontWeight: fontWeight2, children: label }),
+        subText,
+        tooltip && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Tooltip_default, { tooltipInfo: tooltip }),
+        required && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RequiredDot_default, {})
+      ]
+    }
+  );
+};
+var Label_default = Label;
+
+// src/components/ui/Input/Input.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Input = ({
+  isDot = true,
+  label,
+  type = "text",
+  error,
+  fullWidth = false,
+  id,
+  className = "",
+  originRef,
+  direction = "row",
+  textAlign = "left",
+  value,
+  description,
+  onChange,
+  customWidth,
+  tooltip,
+  labelWidth,
+  disabled,
+  onlyData = false,
+  labelHidden,
+  rightIcon,
+  onRightIconClick,
+  ...props
+}) => {
+  const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
+  const displayValue = type === "number" && value ? formatNumberWithComma(value) : value;
+  const handleChange = (e) => {
+    if (type === "number") {
+      const rawValue = e.target.value.replace(/[^\d]/g, "");
+      if (onChange) {
+        const newEvent = {
+          ...e,
+          target: {
+            ...e.target,
+            value: rawValue
+            // 숫자값만 전달
+          }
+        };
+        onChange(newEvent);
+      }
+    } else if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    Stack_default,
+    {
+      direction,
+      wFull: fullWidth,
+      gap: direction === "row" ? 14 : 4,
+      align: direction === "row" ? "center" : "start",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Label_default,
+          {
+            label,
+            isDot,
+            width: labelWidth,
+            required: props.required,
+            inputId,
+            tooltip,
+            labelHidden
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          Stack_default,
+          {
+            gap: 5,
+            className: `${fullWidth ? "flex-auto" : ""} relative`,
+            wFull: direction === "row" ? false : fullWidth,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative w-full", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "input",
+                  {
+                    id: inputId,
+                    ref: originRef,
+                    type: type === "number" ? "text" : type,
+                    value: displayValue,
+                    onChange: handleChange,
+                    autoComplete: props.autoComplete || "off",
+                    className: `
+              px-12 h-36 border rounded-md leading-[36px]
+            ${error ? "border-red" : "border-line"}
+             focus:border-primary
+            ${fullWidth && "w-full"}
+            ${className}
+            ${type === "number" ? "no-spinner" : ""}
+            ${disabled ? "bg-gray1 border-line" : ""}
+            ${onlyData && "bg-white"}
+            ${rightIcon ? "pr-40" : ""}
+          `,
+                    style: {
+                      textAlign,
+                      // autofill 배경색 제거를 위한 강력한 스타일
+                      // WebkitBoxShadow: "0 0 0 1000px white inset",
+                      WebkitTextFillColor: "inherit",
+                      // transition: "background-color 5000s ease-in-out 0s",
+                      width: customWidth ? `${toRemFunction2(customWidth)}` : "100%"
+                      // backgroundColor: disabled ? "var(--gray)" : "white",
+                    },
+                    disabled: disabled || onlyData,
+                    ...props,
+                    "aria-required": props.required
+                  }
+                ),
+                rightIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "div",
+                  {
+                    className: `absolute inset-y-0 right-0 flex items-center pr-12 ${onRightIconClick ? "cursor-pointer" : "pointer-events-none"}`,
+                    onClick: onRightIconClick,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("img", { src: rightIcon, alt: "icon", width: 16, height: 16 })
+                  }
+                )
+              ] }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { size: "body12", color: "gray", children: description })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Input_default = Input;
+
+// src/components/ui/SelectBox/SelectBox.tsx
+var import_react4 = require("react");
+
+// src/assets/colorIcon/ColorIcArrow.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function ColorIcArrow({
+  isOpen = false,
+  rotate = 0,
+  width = 14,
+  height = 14,
+  color = "primary"
+}) {
+  const rotateAngle = isOpen ? 90 : 0;
+  const finalRotate = rotate + rotateAngle;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "span",
+    {
+      className: "cursor-pointer",
+      style: {
+        color: `var(--color-${color})`,
+        transform: `rotate(${finalRotate}deg)`,
+        transition: "transform 200ms",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: "0 0 14 14",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            "path",
+            {
+              d: "M4.38402 1.8246C4.46631 1.74231 4.58724 1.74171 4.67015 1.82264V1.82362L9.61351 6.85487L9.61546 6.85585C9.69844 6.93882 9.69844 7.06096 9.61546 7.14393L9.61351 7.14589L4.6721 12.1752C4.62893 12.2184 4.56875 12.2424 4.52855 12.2426C4.47778 12.2426 4.43387 12.2297 4.37425 12.1849C4.30224 12.1026 4.30507 11.9888 4.38402 11.9096L4.38695 11.9066L8.9807 7.2035L9.17992 6.9994L8.97972 6.7953L4.38597 2.11464L4.38402 2.11268L4.35765 2.07948C4.30316 1.99948 4.3114 1.89721 4.38402 1.8246Z",
+              fill: "currentColor",
+              stroke: "currentColor",
+              strokeWidth: "0.583333"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var ColorIcArrow_default = ColorIcArrow;
+
+// src/components/ui/SelectBox/SelectBox.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var SelectBox = (0, import_react4.forwardRef)(
+  ({
+    isDot = true,
+    label,
+    error,
+    fullWidth = false,
+    options,
+    id,
+    direction = "row",
+    className = "",
+    placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
+    value,
+    onChange,
+    onFocus,
+    onBlur,
+    onEmptyClick,
+    disabled = false,
+    required = false,
+    customWidth,
+    labelHidden,
+    emptyMessage = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
+    labelWidth,
+    tooltip
+  }, ref) => {
+    const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
+    const [dropdownPosition, setDropdownPosition] = (0, import_react4.useState)(
+      "bottom"
+    );
+    const dropdownRef = (0, import_react4.useRef)(null);
+    const selectButtonRef = (0, import_react4.useRef)(null);
+    const selectId = id || `select-${Math.random().toString(36).substring(2, 9)}`;
+    const selectedOption = options.find((option) => option.value === value);
+    const calculateMinWidth = () => {
+      if (!options.length) return "auto";
+      const maxLength = Math.max(
+        ...options.map((option) => option.label.length),
+        placeholder.length
+      );
+      const calculatedWidth = Math.min(Math.max(maxLength * 8 + 80, 120), 400);
+      return `${calculatedWidth}px`;
+    };
+    const minWidth = calculateMinWidth();
+    const calculateDropdownPosition = () => {
+      if (!selectButtonRef.current) return "bottom";
+      const selectRect = selectButtonRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const dropdownHeight = Math.min(240, options.length * 40 + 20);
+      const spaceBelow = viewportHeight - selectRect.bottom;
+      const spaceAbove = selectRect.top;
+      if (spaceBelow >= dropdownHeight) {
+        return "bottom";
+      } else if (spaceAbove >= dropdownHeight) {
+        return "top";
+      } else {
+        return spaceBelow > spaceAbove ? "bottom" : "top";
+      }
+    };
+    (0, import_react4.useEffect)(() => {
+      if (isOpen) {
+        const position = calculateDropdownPosition();
+        setDropdownPosition(position);
+      }
+    }, [isOpen, options.length]);
+    (0, import_react4.useEffect)(() => {
+      const handleClickOutside = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, []);
+    const handleSelect = (optionValue) => {
+      setIsOpen(false);
+      onChange?.(optionValue);
+    };
+    const handleButtonClick = () => {
+      if (disabled) return;
+      if (!options || options.length === 0) {
+        onEmptyClick?.();
+      } else {
+        setIsOpen(!isOpen);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      switch (event.key) {
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          handleButtonClick();
+          break;
+        case "Escape":
+          setIsOpen(false);
+          break;
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      Stack_default,
+      {
+        ref,
+        direction,
+        wFull: fullWidth,
+        gap: direction === "row" ? 14 : 4,
+        align: direction === "row" ? "center" : "start",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Label_default,
+            {
+              isDot,
+              label,
+              required,
+              inputId: selectId,
+              labelHidden,
+              width: labelWidth,
+              tooltip
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Stack_default,
+            {
+              gap: 10,
+              className: "flex-auto relative",
+              wFull: direction === "row" ? false : fullWidth,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                "div",
+                {
+                  ref: dropdownRef,
+                  className: `relative ${fullWidth ? "w-full" : ""}`,
+                  style: !fullWidth ? {
+                    minWidth,
+                    width: customWidth ? `${toRemFunction2(customWidth)}` : "100%"
+                  } : {},
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      "div",
+                      {
+                        ref: selectButtonRef,
+                        id: selectId,
+                        className: `
+                relative w-full px-12 h-36 text-left border  rounded-md cursor-pointer
+                 content-center leading-none
+                ${error ? "border-red" : "border-line"}
+                ${disabled ? "text-dark5 cursor-not-allowed bg-gray1 border-line" : "focus:border-primary  bg-white"}
+                ${className}
+              `,
+                        onClick: handleButtonClick,
+                        onKeyDown: handleKeyDown,
+                        onFocus,
+                        onBlur,
+                        tabIndex: disabled ? -1 : 0,
+                        role: "combobox",
+                        "aria-haspopup": "listbox",
+                        "aria-expanded": isOpen,
+                        "aria-labelledby": label ? `${selectId}-label` : void 0,
+                        "aria-required": required,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between h-full", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center space-x-2 h-full", children: [
+                            selectedOption?.icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "flex-shrink-0", children: selectedOption.icon }),
+                            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                              "span",
+                              {
+                                className: `block truncate leading-36 ${!value && selectedOption?.label !== "\uC804\uCCB4" ? "text-secondaryText" : "text-primaryText"}`,
+                                children: selectedOption?.label || placeholder
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                            ColorIcArrow_default,
+                            {
+                              isOpen,
+                              rotate: isOpen ? 270 : 90,
+                              color: "text"
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    isOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      "div",
+                      {
+                        className: `absolute z-50 w-full bg-white border border-line rounded-md shadow-sm max-h-200 overflow-auto
+                  ${dropdownPosition === "bottom" ? "mt-2" : "mb-2 bottom-full"}
+                `,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { className: "py-4", role: "listbox", children: options.map((option, index) => {
+                          if (option.divider) {
+                            return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Divider_default, { className: "my-10" }, index);
+                          }
+                          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                            "li",
+                            {
+                              className: `
+                        relative cursor-pointer select-none py-7 px-16
+                        ${option.disabled ? "text-text cursor-not-allowed bg-gray-50" : "text-text hover:bg-primary hover:text-white"}
+                        ${value === option.value ? "bg-primary10 text-primary" : ""}
+                      `,
+                              onClick: () => !option.disabled && handleSelect(option.value),
+                              role: "option",
+                              "aria-selected": value === option.value,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center space-x-2", children: [
+                                option.icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "flex-shrink-0", children: option.icon }),
+                                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex-1", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "font-medium", children: option.label }),
+                                  option.description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-sm text-gray", children: option.description })
+                                ] })
+                              ] })
+                            },
+                            option.value
+                          );
+                        }) })
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SelectBox.displayName = "SelectBox";
+var SelectBox_default = SelectBox;
+
+// src/components/ui/EmailInput/EmailInput.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var EmailInput = ({
+  value,
+  onChange,
+  error,
+  label = "\uC774\uBA54\uC77C",
+  placeholder = "\uC774\uBA54\uC77C \uC8FC\uC18C",
+  required = false,
+  direction = "row",
+  fullWidth = false,
+  onBlur,
+  triggerValidation,
+  labelHidden = false,
+  className,
+  customWidth
+}) => {
+  const [localPart, setLocalPart] = (0, import_react5.useState)("");
+  const [domain, setDomain] = (0, import_react5.useState)("");
+  const [selectedDomain, setSelectedDomain] = (0, import_react5.useState)("");
+  const [isCustomDomain, setIsCustomDomain] = (0, import_react5.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react5.useState)(false);
+  const domainOptions = [
+    { value: "", label: "\uC120\uD0DD" },
+    { value: "gmail.com", label: "gmail.com" },
+    { value: "naver.com", label: "naver.com" },
+    { value: "daum.net", label: "daum.net" },
+    { value: "custom", label: "\uC9C1\uC811 \uC785\uB825" }
+  ];
+  (0, import_react5.useEffect)(() => {
+    if (value) {
+      const parts = value.split("@");
+      if (parts.length === 2) {
+        setLocalPart(parts[0]);
+        setDomain(parts[1]);
+        const domainOption = domainOptions.find(
+          (option) => option.value === parts[1] && option.value !== "custom"
+        );
+        if (domainOption) {
+          setSelectedDomain(parts[1]);
+          setIsCustomDomain(false);
+        } else {
+          setSelectedDomain("custom");
+          setIsCustomDomain(true);
+        }
+      } else {
+        setLocalPart(value);
+        setSelectedDomain("");
+        setDomain("");
+      }
+    }
+  }, [value]);
+  const handleValueChange = (newValue) => {
+    onChange(newValue);
+    if (triggerValidation) {
+      triggerValidation();
+    }
+  };
+  const handleLocalPartChange = (e) => {
+    const newLocalPart = e.target.value;
+    setLocalPart(newLocalPart);
+    updateEmail(newLocalPart, domain);
+  };
+  const handleDomainSelect = (selectedValue) => {
+    setSelectedDomain(selectedValue);
+    if (selectedValue === "custom") {
+      setIsCustomDomain(true);
+      updateEmail(localPart, domain);
+    } else {
+      setIsCustomDomain(false);
+      setDomain(selectedValue);
+      updateEmail(localPart, selectedValue || "");
+    }
+  };
+  const handleCustomDomainChange = (e) => {
+    const newDomain = e.target.value;
+    const cleanDomain = newDomain.replace(/@/g, "");
+    setDomain(cleanDomain);
+    updateEmail(localPart, cleanDomain);
+  };
+  const updateEmail = (local, dmn) => {
+    if (local && dmn) {
+      handleValueChange(`${local}@${dmn}`);
+    } else if (local) {
+      handleValueChange(local);
+    } else {
+      handleValueChange("");
+    }
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (onBlur) {
+      onBlur();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `${fullWidth ? "w-full" : ""}`, "aria-required": required, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    Stack_default,
+    {
+      direction,
+      wFull: fullWidth,
+      gap: direction === "row" ? 14 : 4,
+      align: direction === "row" ? "center" : "start",
+      className,
+      children: [
+        !labelHidden && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label_default, { label, required }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          Stack_default,
+          {
+            gap: 10,
+            className: "flex-auto relative",
+            wFull: direction === "row" ? false : fullWidth,
+            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              "div",
+              {
+                className: `flex items-center border rounded-md ${error ? "border-red" : isFocused ? "border-primary" : "border-line"}`,
+                style: !fullWidth ? {
+                  width: customWidth ? `${toRemFunction2(customWidth)}` : "100%"
+                } : {},
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    Input_default,
+                    {
+                      value: localPart,
+                      onChange: handleLocalPartChange,
+                      onFocus: handleFocus,
+                      onBlur: handleBlur,
+                      placeholder,
+                      className: `border-0 border-r rounded-r-none ${isFocused && "border-primary"}`,
+                      error: "",
+                      fullWidth: true
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: `px-10 flex items-center`, children: "@" }),
+                  isCustomDomain && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    Input_default,
+                    {
+                      value: domain,
+                      onChange: handleCustomDomainChange,
+                      onFocus: handleFocus,
+                      onBlur: handleBlur,
+                      placeholder: "\uB3C4\uBA54\uC778 \uC785\uB825",
+                      className: `border-0 border-l rounded-l-none ${isFocused && "border-primary"}`,
+                      error: "",
+                      fullWidth: true
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    SelectBox_default,
+                    {
+                      value: selectedDomain,
+                      onChange: handleDomainSelect,
+                      onFocus: handleFocus,
+                      onBlur: handleBlur,
+                      options: domainOptions,
+                      className: `border-0 border-l rounded-l-none ${isFocused && "border-primary"}`,
+                      fullWidth: true
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+};
+var EmailInput_default = EmailInput;
+
+// src/components/ui/MultiSelectCheckbox/MultiSelectCheckbox.tsx
+var import_react6 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var MultiSelectCheckbox = (0, import_react6.forwardRef)(
+  ({
+    isDot = true,
+    label,
+    error,
+    fullWidth = false,
+    options,
+    id,
+    direction = "row",
+    className = "",
+    placeholder = "\uC120\uD0DD\uD558\uC138\uC694",
+    value = [],
+    onChange,
+    onConfirm,
+    onFocus,
+    onBlur,
+    onEmptyClick,
+    disabled = false,
+    required = false,
+    customWidth,
+    labelHidden,
+    emptyMessage = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4",
+    labelWidth,
+    tooltip,
+    confirmButtonText = "\uC120\uD0DD \uC644\uB8CC"
+  }, ref) => {
+    const toSafeArray = (val) => {
+      if (Array.isArray(val)) return val;
+      if (typeof val === "string" && val.length > 0) {
+        return val.split(",").map((v) => v.trim()).filter((v) => v !== "");
+      }
+      return [];
+    };
+    const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+    const [tempSelectedValues, setTempSelectedValues] = (0, import_react6.useState)(toSafeArray(value));
+    const [originalValues, setOriginalValues] = (0, import_react6.useState)(
+      toSafeArray(value)
+    );
+    const [dropdownPosition, setDropdownPosition] = (0, import_react6.useState)(
+      "bottom"
+    );
+    const dropdownRef = (0, import_react6.useRef)(null);
+    const selectButtonRef = (0, import_react6.useRef)(null);
+    const selectId = id || `multi-select-${Math.random().toString(36).substring(2, 9)}`;
+    (0, import_react6.useEffect)(() => {
+      const safeValue = toSafeArray(value);
+      setTempSelectedValues(safeValue);
+      setOriginalValues(safeValue);
+    }, [value]);
+    const getDisplayText = () => {
+      if (!tempSelectedValues || tempSelectedValues.length === 0) {
+        return placeholder;
+      }
+      if (tempSelectedValues.length === options.length) {
+        return "\uC804\uCCB4";
+      }
+      if (tempSelectedValues.length === 1) {
+        const selectedOption = options.find(
+          (opt) => opt.value === tempSelectedValues[0]
+        );
+        return selectedOption?.label || placeholder;
+      }
+      return `${tempSelectedValues.length}\uAC1C \uC120\uD0DD\uB428`;
+    };
+    const calculateMinWidth = () => {
+      if (!options.length) return "auto";
+      const maxLength = Math.max(
+        ...options.map((option) => option.label.length),
+        placeholder.length
+      );
+      const calculatedWidth = Math.min(Math.max(maxLength * 8 + 80, 120), 400);
+      return `${calculatedWidth}px`;
+    };
+    const minWidth = calculateMinWidth();
+    const calculateDropdownPosition = () => {
+      if (!selectButtonRef.current) return "bottom";
+      const selectRect = selectButtonRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const dropdownHeight = Math.min(320, options.length * 40 + 100);
+      const spaceBelow = viewportHeight - selectRect.bottom;
+      const spaceAbove = selectRect.top;
+      if (spaceBelow >= dropdownHeight) {
+        return "bottom";
+      } else if (spaceAbove >= dropdownHeight) {
+        return "top";
+      } else {
+        return spaceBelow > spaceAbove ? "bottom" : "top";
+      }
+    };
+    (0, import_react6.useEffect)(() => {
+      if (isOpen) {
+        const position = calculateDropdownPosition();
+        setDropdownPosition(position);
+      }
+    }, [isOpen, options.length]);
+    (0, import_react6.useEffect)(() => {
+      const handleClickOutside = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setTempSelectedValues(originalValues);
+          onChange?.(originalValues);
+          setIsOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+      };
+    }, [originalValues, onChange]);
+    const handleButtonClick = () => {
+      if (disabled) return;
+      if (!options || options.length === 0) {
+        onEmptyClick?.();
+      } else {
+        if (!isOpen) {
+          setOriginalValues(tempSelectedValues);
+        }
+        setIsOpen(!isOpen);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (disabled) return;
+      switch (event.key) {
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          handleButtonClick();
+          break;
+        case "Escape":
+          setTempSelectedValues(originalValues);
+          onChange?.(originalValues);
+          setIsOpen(false);
+          break;
+      }
+    };
+    const handleSelectAll = () => {
+      const enabledOptions2 = options.filter((opt) => !opt.disabled);
+      const allEnabledValues = enabledOptions2.map((opt) => opt.value);
+      const allEnabledSelected = enabledOptions2.every(
+        (opt) => tempSelectedValues.includes(opt.value)
+      );
+      if (allEnabledSelected) {
+        setTempSelectedValues([]);
+        onChange?.([]);
+      } else {
+        setTempSelectedValues(allEnabledValues);
+        onChange?.(allEnabledValues);
+      }
+    };
+    const handleCheckboxChange = (optionValue) => {
+      const newValues = tempSelectedValues.includes(optionValue) ? tempSelectedValues.filter((v) => v !== optionValue) : [...tempSelectedValues, optionValue];
+      setTempSelectedValues(newValues);
+      onChange?.(newValues);
+    };
+    const handleConfirm = () => {
+      setOriginalValues(tempSelectedValues);
+      setIsOpen(false);
+      onConfirm?.(tempSelectedValues);
+    };
+    const enabledOptions = options.filter((opt) => !opt.disabled);
+    const isAllSelected = enabledOptions.length > 0 && enabledOptions.every((opt) => tempSelectedValues.includes(opt.value));
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      Stack_default,
+      {
+        ref,
+        direction,
+        wFull: fullWidth,
+        gap: direction === "row" ? 14 : 4,
+        align: direction === "row" ? "center" : "start",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Label_default,
+            {
+              isDot,
+              label,
+              required,
+              inputId: selectId,
+              labelHidden,
+              width: labelWidth,
+              tooltip
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Stack_default,
+            {
+              gap: 10,
+              className: "flex-auto relative",
+              wFull: direction === "row" ? false : fullWidth,
+              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                "div",
+                {
+                  ref: dropdownRef,
+                  className: `relative ${fullWidth ? "w-full" : ""}`,
+                  style: !fullWidth ? {
+                    minWidth,
+                    width: customWidth ? `${toRemFunction2(customWidth)}` : "100%"
+                  } : {},
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                      "div",
+                      {
+                        ref: selectButtonRef,
+                        id: selectId,
+                        className: `
+                relative w-full px-12 h-36 text-left border rounded-md cursor-pointer
+                content-center leading-none
+                ${error ? "border-red" : "border-line"}
+                ${disabled ? "text-dark5 cursor-not-allowed bg-gray1 border-line" : "focus:border-primary bg-white"}
+                ${className}
+              `,
+                        onClick: handleButtonClick,
+                        onKeyDown: handleKeyDown,
+                        onFocus,
+                        onBlur,
+                        tabIndex: disabled ? -1 : 0,
+                        role: "combobox",
+                        "aria-haspopup": "listbox",
+                        "aria-expanded": isOpen,
+                        "aria-labelledby": label ? `${selectId}-label` : void 0,
+                        "aria-required": required,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between h-full", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            "span",
+                            {
+                              className: `block truncate leading-36 ${tempSelectedValues.length === 0 ? "text-secondaryText" : "text-primaryText"}`,
+                              children: getDisplayText()
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            ColorIcArrow_default,
+                            {
+                              isOpen,
+                              rotate: isOpen ? 270 : 90,
+                              color: "text"
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    isOpen && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+                      "div",
+                      {
+                        className: `absolute z-50 w-full bg-white border border-line rounded-md shadow-sm
+                  ${dropdownPosition === "bottom" ? "mt-2" : "mb-2 bottom-full"}
+                `,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            "div",
+                            {
+                              className: " py-8 px-16 cursor-pointer hover:bg-gray1",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleSelectAll();
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-8 pointer-events-none", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Checkbox_default, { checked: isAllSelected, onChange: () => {
+                                } }),
+                                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: "\uC804\uCCB4" })
+                              ] })
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-10", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Divider_default, {}) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "max-h-200 overflow-auto py-4", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { role: "listbox", children: options.map((option) => {
+                            const isChecked = tempSelectedValues.includes(
+                              option.value
+                            );
+                            return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                              "li",
+                              {
+                                className: `
+                            relative select-none py-7 px-16
+                            ${option.disabled ? "text-text cursor-not-allowed bg-gray-50" : "text-text hover:bg-gray1 cursor-pointer"}
+                          `,
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  if (!option.disabled) {
+                                    handleCheckboxChange(option.value);
+                                  }
+                                },
+                                role: "option",
+                                "aria-selected": isChecked,
+                                children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-8 pointer-events-none", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                                    Checkbox_default,
+                                    {
+                                      checked: isChecked,
+                                      onChange: () => {
+                                      },
+                                      disabled: option.disabled
+                                    }
+                                  ),
+                                  option.color && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                                    "div",
+                                    {
+                                      className: `w-16 h-16 rounded-full flex-shrink-0 bg-${option.color}`
+                                    }
+                                  ),
+                                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Text, { children: option.label })
+                                ] })
+                              },
+                              option.value
+                            );
+                          }) }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "px-10", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Divider_default, {}) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: " p-9", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Stack_default, { direction: "row", align: "end", justify: "end", wFull: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                            Button_default,
+                            {
+                              variant: "lower",
+                              size: "medium",
+                              onClick: handleConfirm,
+                              children: confirmButtonText
+                            }
+                          ) }) })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MultiSelectCheckbox.displayName = "MultiSelectCheckbox";
+var MultiSelectCheckbox_default = MultiSelectCheckbox;
+
+// src/assets/colorIcon/ColorIcFormArrow.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ColorIcFormArrow({
+  isOpen = false,
+  rotate = 0,
+  width = 16,
+  height = 16,
+  color = "secondaryText"
+}) {
+  const rotateAngle = isOpen ? 180 : 0;
+  const finalRotate = rotate + rotateAngle;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "span",
+    {
+      className: "cursor-pointer",
+      style: {
+        color: `var(--color-${color})`,
+        transform: `rotate(${finalRotate}deg)`,
+        transition: "transform 200ms",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "path",
+            {
+              d: "M13.5854 4.9856C13.6683 4.90272 13.7851 4.89236 13.8765 4.95435L13.9146 4.9856C14.0086 5.07977 14.0094 5.21801 13.9165 5.31274L8.1665 10.9622L8.16455 10.9641C8.06824 11.0604 8.02264 11.0667 7.99951 11.0667C7.93967 11.0666 7.88852 11.0508 7.81689 10.9954L2.0835 5.36255C2.0024 5.2798 1.9927 5.16414 2.0542 5.07349L2.08545 5.0354C2.16829 4.95264 2.28515 4.94226 2.37646 5.00415L2.41455 5.0354L2.41748 5.03833L7.76709 10.2639L8.00146 10.4924L8.23389 10.262L13.5835 4.98755L13.5854 4.9856Z",
+              fill: "currentColor",
+              stroke: "currentColor",
+              strokeWidth: "0.666667"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var ColorIcFormArrow_default = ColorIcFormArrow;
+
+// src/components/ui/Paging/Paging.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function getPagination(current, total) {
+  const pages = [];
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) pages.push(i);
+    return pages;
+  }
+  if (current <= 4) {
+    pages.push(1, 2, 3, 4, 5, "...", total);
+  } else if (current >= total - 3) {
+    pages.push(1, "...", total - 4, total - 3, total - 2, total - 1, total);
+  } else {
+    pages.push(1, "...", current - 1, current, current + 1, "...", total);
+  }
+  return pages;
+}
+function Paging({
+  page,
+  total,
+  limit,
+  onPageChange
+}) {
+  const totalPages = Math.ceil(total / limit);
+  const pages = getPagination(page, totalPages);
+  if (!total) return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-center gap-2 mt-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "span",
+      {
+        onClick: () => {
+          if (page === 1) return;
+          onPageChange(page - 2);
+        },
+        className: `rounded flex p-6 ${page === 1 ? "opacity-0 " : "cursor-pointer "} hover:bg-gray2`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorIcFormArrow_default, { rotate: 90 })
+      }
+    ),
+    pages.map(
+      (p, i) => typeof p === "number" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "span",
+        {
+          onClick: () => onPageChange(p - 1),
+          className: `inline-block rounded h-24 w-24 pt-5 text-center leading-none text-body16 ${page === p ? "bg-primary text-white cursor-not-allowed" : "text-text cursor-pointer"}`,
+          children: p
+        },
+        p
+      ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "span",
+        {
+          className: "px-10 inline-block text-gray-400 text-lg",
+          children: "..."
+        },
+        `ellipsis-${i}`
+      )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      "span",
+      {
+        onClick: () => {
+          if (page === totalPages) return;
+          onPageChange(page);
+        },
+        className: `rounded flex p-6 ${page === totalPages ? "opacity-0 " : "cursor-pointer"} hover:bg-gray2`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ColorIcFormArrow_default, { rotate: 270 })
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Radio/Radio.tsx
+var import_react7 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Radio = (0, import_react7.forwardRef)(
+  ({ label, error, className = "", id, radioWidth, checked, ...props }, ref) => {
+    const radioId = id || `radio-${Math.random().toString(36).substring(2, 9)}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        className: "flex items-center h-36",
+        style: {
+          width: radioWidth ? `${toRemFunction2(radioWidth)}` : "auto"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative flex items-center gap-10", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "input",
+              {
+                ref,
+                id: radioId,
+                type: "radio",
+                className: "sr-only",
+                checked,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+              "label",
+              {
+                htmlFor: radioId,
+                className: `
+                relative flex items-center justify-center w-20 h-20  rounded-full cursor-pointer
+                border transition-all duration-100
+                ${checked ? "bg-primary border-primary" : "bg-line border-line"}
+                ${error ? "border-red" : ""}
+                ${props.disabled ? "opacity-50 cursor-not-allowed" : ""}
+                ${className}
+              `,
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                  "div",
+                  {
+                    className: ` bg-white rounded-full items-center ${checked ? "w-10 h-10 border-primary" : "w-18 h-18 border-line"}`
+                  }
+                )
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            "label",
+            {
+              htmlFor: radioId,
+              className: "text-body14 text-primaryText cursor-pointer",
+              children: label
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+var Radio_default = Radio;
+
+// src/components/ui/Table/Table.tsx
+var import_react8 = require("react");
+
+// src/assets/common/ic-sort-arrow-up.svg
+var ic_sort_arrow_up_default = "./ic-sort-arrow-up-DJQRDWHQ.svg";
+
+// src/assets/common/ic-sort-arrow-down.svg
+var ic_sort_arrow_down_default = "./ic-sort-arrow-down-H56K6AN4.svg";
+
+// src/components/ui/Table/Table.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Table({
+  columns,
+  datas = [],
+  footers,
+  isRadioOption = false,
+  isCheckboxOption = false,
+  isModify = false,
+  overWidth,
+  emptyMessage = "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4.",
+  disabledCheckboxCondition,
+  onButtonClick,
+  onLinkClick,
+  onChangeInput,
+  onChangeCheckbox,
+  onChangeToggle,
+  onCheckboxOption,
+  onRadioOption,
+  onMoveUp,
+  onMoveDown,
+  onSort
+}) {
+  const headersKeys = columns.map((col) => col.key);
+  const linkKeys = columns.filter((col) => col.type === "link").map((col) => col.key);
+  const dateKeys = columns.filter((col) => col.type === "date").map((col) => col.key);
+  const dateTimeKeys = columns.filter((col) => col.type === "dateTime").map((col) => col.key);
+  const amountKeys = columns.filter((col) => col.type === "amount").map((col) => col.key);
+  const persentKeys = columns.filter((col) => col.type === "percent").map((col) => col.key);
+  const inputKeys = columns.filter((col) => col.type === "input").map((col) => col.key);
+  const checkboxKeys = columns.filter((col) => col.type === "checkbox").map((col) => col.key);
+  const thAlignLeftKeys = columns.filter((col) => (col.thAlign || col.align) === "left").map((col) => col.key);
+  const thAlignRightKeys = columns.filter((col) => (col.thAlign || col.align) === "right").map((col) => col.key);
+  const tdAlignLeftKeys = columns.filter((col) => (col.tdAlign || col.align) === "left").map((col) => col.key);
+  const tdAlignRightKeys = columns.filter((col) => (col.tdAlign || col.align) === "right").map((col) => col.key);
+  const textBoldKeys = columns.filter((col) => col.bold).map((col) => col.key);
+  const noWrapKeys = columns.filter((col) => col.noWrap).map((col) => col.key);
+  const requiredKeys = columns.filter((col) => col.required).map((col) => col.key);
+  const importantColorKeys = columns.filter((col) => col.important).map((col) => col.key);
+  const sortKeys = columns.filter((col) => col.sortable).map((col) => col.key);
+  const mergeDuplicateKeys = columns.filter((col) => col.mergeDuplicate).map((col) => col.key);
+  const [selectedIds, setSelectedIds] = (0, import_react8.useState)([]);
+  const [sortState, setSortState] = (0, import_react8.useState)(null);
+  const enabledDatas = datas.filter(
+    (data) => !disabledCheckboxCondition?.(data)
+  );
+  const isAllSelected = enabledDatas.length > 0 && selectedIds.length === enabledDatas.length;
+  const getCellSpan = (rowIndex, colIndex, headerKey) => {
+    if (!mergeDuplicateKeys.includes(headerKey)) return 1;
+    const currentRow = datas[rowIndex];
+    const currentOrderNo = currentRow["orderNo"];
+    const currentValue = JSON.stringify(currentRow[headerKey]);
+    let span = 1;
+    for (let i = rowIndex + 1; i < datas.length; i++) {
+      const nextRow = datas[i];
+      const nextOrderNo = nextRow["orderNo"];
+      const nextValue = JSON.stringify(nextRow[headerKey]);
+      if (JSON.stringify(nextOrderNo) !== JSON.stringify(currentOrderNo)) {
+        break;
+      }
+      if (nextValue !== currentValue) {
+        break;
+      }
+      span++;
+    }
+    return span;
+  };
+  const getMergedCellClassName = (rowSpan) => {
+    if (rowSpan <= 1) return "border-b border-line px-20 py-8";
+    return "border-b border-r border-line px-20 py-8";
+  };
+  const shouldRenderCell = (rowIndex, colIndex, headerKey) => {
+    if (!mergeDuplicateKeys.includes(headerKey)) return true;
+    if (rowIndex > 0) {
+      const currentRow = datas[rowIndex];
+      const previousRow = datas[rowIndex - 1];
+      const currentOrderNo = currentRow["orderNo"];
+      const previousOrderNo = previousRow["orderNo"];
+      const currentValue = JSON.stringify(currentRow[headerKey]);
+      const previousValue = JSON.stringify(previousRow[headerKey]);
+      if (JSON.stringify(currentOrderNo) === JSON.stringify(previousOrderNo) && currentValue === previousValue) {
+        return false;
+      }
+    }
+    return true;
+  };
+  const handleSelectAll = () => {
+    if (isAllSelected) {
+      setSelectedIds([]);
+      onCheckboxOption?.([]);
+    } else {
+      const enabledIds = enabledDatas.map((data) => data.id).filter(Boolean);
+      setSelectedIds(enabledIds.map(String));
+      onCheckboxOption?.(enabledIds.map(String));
+    }
+  };
+  const handleSelectItem = (id) => {
+    const data = datas.find((item) => String(item.id) === id);
+    if (data && disabledCheckboxCondition?.(data)) {
+      return;
+    }
+    const newSelectedIds = selectedIds.includes(id) ? selectedIds.filter((selectedId) => selectedId !== id) : [...selectedIds, id];
+    setSelectedIds(newSelectedIds);
+    onCheckboxOption?.(newSelectedIds);
+  };
+  const handleSelectRadioItem = (id) => {
+    setSelectedIds([id]);
+    onRadioOption?.(id);
+  };
+  const handleMoveUp = (id) => {
+    onMoveUp?.(id);
+  };
+  const handleMoveDown = (id) => {
+    onMoveDown?.(id);
+  };
+  const handleSort = (key) => {
+    if (!sortKeys.includes(key)) return;
+    let newDirection;
+    if (sortState?.key === key) {
+      if (sortState.direction === "asc") {
+        newDirection = "desc";
+      } else if (sortState.direction === "desc") {
+        newDirection = "none";
+      } else {
+        newDirection = "asc";
+      }
+    } else {
+      newDirection = "asc";
+    }
+    if (newDirection === "none") {
+      setSortState(null);
+    } else {
+      setSortState({ key, direction: newDirection });
+    }
+    onSort?.(key, newDirection);
+  };
+  const getSortedData = (data, sortKey, direction) => {
+    if (!sortKey || direction === "none") return data;
+    return [...data].sort((a, b) => {
+      const aValue = a[sortKey];
+      const bValue = b[sortKey];
+      if (aValue === null || aValue === void 0)
+        return direction === "asc" ? -1 : 1;
+      if (bValue === null || bValue === void 0)
+        return direction === "asc" ? 1 : -1;
+      if (typeof aValue === "number" && typeof bValue === "number") {
+        return direction === "asc" ? aValue - bValue : bValue - aValue;
+      }
+      if (dateKeys.includes(sortKey)) {
+        const aDate = new Date(String(aValue)).getTime();
+        const bDate = new Date(String(bValue)).getTime();
+        return direction === "asc" ? aDate - bDate : bDate - aDate;
+      }
+      if (dateTimeKeys.includes(sortKey)) {
+        const aDate = new Date(String(aValue)).getTime();
+        const bDate = new Date(String(bValue)).getTime();
+        return direction === "asc" ? aDate - bDate : bDate - aDate;
+      }
+      const aString = String(aValue).toLowerCase();
+      const bString = String(bValue).toLowerCase();
+      if (aString < bString) return direction === "asc" ? -1 : 1;
+      if (aString > bString) return direction === "asc" ? 1 : -1;
+      return 0;
+    });
+  };
+  const sortedData = sortState ? getSortedData(datas, sortState.key, sortState.direction) : datas;
+  (0, import_react8.useEffect)(() => {
+    const currentIds = sortedData.map((data) => String(data.id)).filter(Boolean);
+    const validSelectedIds = selectedIds.filter(
+      (id) => currentIds.includes(id)
+    );
+    if (validSelectedIds.length !== selectedIds.length) {
+      setSelectedIds(validSelectedIds);
+      onCheckboxOption?.(validSelectedIds);
+    }
+  }, [sortedData, selectedIds, onCheckboxOption]);
+  const cellData = (data, headerKey, rowIndex, colIndex) => {
+    const value = data[headerKey];
+    if (!shouldRenderCell(rowIndex, colIndex, headerKey)) {
+      return null;
+    }
+    const rowSpan = getCellSpan(rowIndex, colIndex, headerKey);
+    const column = columns.find((col) => col.key === headerKey);
+    if (column?.render) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "td",
+        {
+          className: `${getMergedCellClassName(rowSpan)} ${tdAlignLeftKeys?.includes(headerKey) ? "text-left" : tdAlignRightKeys?.includes(headerKey) ? "text-right" : "text-center"} ${noWrapKeys?.includes(headerKey) ? "whitespace-nowrap" : ""} ${textBoldKeys?.includes(headerKey) ? "font-bold" : ""} ${column.tdClassName || ""}`,
+          rowSpan: rowSpan > 1 ? rowSpan : void 0,
+          children: column.render(value, data, rowIndex)
+        },
+        `${rowIndex}-${colIndex}`
+      );
+    }
+    if (inputKeys?.includes(headerKey)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "td",
+        {
+          className: `${getMergedCellClassName(rowSpan)} ${tdAlignLeftKeys?.includes(headerKey) ? "text-left" : tdAlignRightKeys?.includes(headerKey) ? "text-right" : "text-center"} ${noWrapKeys?.includes(headerKey) ? "whitespace-nowrap" : ""}`,
+          rowSpan: rowSpan > 1 ? rowSpan : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Stack_default, { direction: "row", gap: 4, align: "center", justify: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              Input_default,
+              {
+                type: "number",
+                textAlign: "right",
+                direction: "row",
+                value: String(value),
+                customWidth: 120,
+                onChange: (e) => {
+                  onChangeInput?.(
+                    data.id,
+                    String(e.target.value),
+                    headerKey
+                  );
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Text, { children: "\uC6D0" })
+          ] })
+        },
+        `${rowIndex}-${colIndex}`
+      );
+    }
+    if (checkboxKeys?.includes(headerKey)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "td",
+        {
+          className: `${getMergedCellClassName(rowSpan)} ${noWrapKeys?.includes(headerKey) ? "whitespace-nowrap" : ""}`,
+          rowSpan: rowSpan > 1 ? rowSpan : void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Stack_default, { direction: "row", gap: 4, align: "center", justify: "start", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Checkbox_default,
+            {
+              checked: value,
+              onChange: (e) => onChangeCheckbox?.(
+                data.id,
+                e.target.checked,
+                headerKey
+              )
+            }
+          ) })
+        },
+        `${rowIndex}-${colIndex}`
+      );
+    }
+    if (amountKeys?.includes(headerKey)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        "td",
+        {
+          className: `${getMergedCellClassName(rowSpan)} ${tdAlignLeftKeys?.includes(headerKey) ? "text-left" : tdAlignRightKeys?.includes(headerKey) ? "text-right" : "text-center"} ${noWrapKeys?.includes(headerKey) ? "whitespace-nowrap" : ""}`,
+          rowSpan: rowSpan > 1 ? rowSpan : void 0,
+          children: [
+            formatNumberWithComma(String(value)),
+            "\uC6D0"
+          ]
+        },
+        `${rowIndex}-${colIndex}`
+      );
+    }
+    if (dateKeys?.includes(headerKey)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "td",
+        {
+          className: `${getMergedCellClassName(rowSpan)} ${tdAlignLeftKeys?.includes(headerKey) ? "text-left" : tdAlignRightKeys?.includes(headerKey) ? "text-right" : "text-center"} ${noWrapKeys?.includes(headerKey) ? "whitespace-nowrap" : ""}`,
+          rowSpan: rowSpan > 1 ? rowSpan : void 0,
+          children: formatDate(String(value))
+        },
+        `${rowIndex}-${colIndex}`
+      );
+    }
+    if (dateTimeKeys?.includes(headerKey)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "td",
+        {
+          className: `${getMergedCellClassName(rowSpan)} ${tdAlignLeftKeys?.includes(headerKey) ? "text-left" : tdAlignRightKeys?.includes(headerKey) ? "text-right" : "text-center"} ${noWrapKeys?.includes(headerKey) ? "whitespace-nowrap" : ""}`,
+          rowSpan: rowSpan > 1 ? rowSpan : void 0,
+          children: value ? formatDateTime(String(value)) : "-"
+        },
+        `${rowIndex}-${colIndex}`
+      );
+    }
+    if (import_react9.default.isValidElement(value)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "td",
+        {
+          className: `${getMergedCellClassName(rowSpan)} ${tdAlignLeftKeys?.includes(headerKey) ? "text-left" : tdAlignRightKeys?.includes(headerKey) ? "text-right" : "text-center"} ${noWrapKeys?.includes(headerKey) ? "whitespace-nowrap" : ""}`,
+          rowSpan: rowSpan > 1 ? rowSpan : void 0,
+          children: value
+        },
+        `${rowIndex}-${colIndex}`
+      );
+    }
+    let cellContent = value?.toString() || "";
+    if (persentKeys?.includes(headerKey)) {
+      cellContent = `${formatNumberWithComma(String(value))}%`;
+    }
+    if (typeof value === "object" && value !== null) {
+      cellContent = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Stack_default, { direction: "row", gap: 8, align: "center", children: Object.entries(value).map(
+        ([key, val], index) => {
+          if (key === "image" && val) {
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "img",
+              {
+                src: String(val),
+                alt: "\uC0C1\uD488 \uC774\uBBF8\uC9C0",
+                className: "w-40 h-40 object-cover rounded border border-line"
+              },
+              `${key}-${index}`
+            );
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "span",
+            {
+              className: `${key === "name" || key === "title" ? "" : ""} `,
+              children: val?.toString() || ""
+            },
+            `${key}-${index}`
+          );
+        }
+      ) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      "td",
+      {
+        className: `${getMergedCellClassName(rowSpan)} 
+            ${linkKeys?.includes(headerKey) && "text-primary underline cursor-pointer"}
+            ${tdAlignLeftKeys?.includes(headerKey) ? "text-left" : tdAlignRightKeys?.includes(headerKey) ? "text-right" : "text-center"}
+            ${noWrapKeys?.includes(headerKey) ? "whitespace-nowrap" : ""}
+            ${textBoldKeys?.includes(headerKey) ? "font-bold" : ""}
+            `,
+        rowSpan: rowSpan > 1 ? rowSpan : void 0,
+        onClick: () => {
+          if (!linkKeys?.includes(headerKey)) {
+            return;
+          }
+          onLinkClick?.(data.id, String(value), headerKey);
+        },
+        children: cellContent
+      },
+      `${rowIndex}-${colIndex}`
+    );
+  };
+  const renderTableBody = () => {
+    if (sortedData.length === 0) {
+      const colSpanCount = headersKeys.length + (isCheckboxOption ? 1 : 0) + (isRadioOption ? 1 : 0) + (isModify ? 1 : 0);
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "td",
+        {
+          colSpan: colSpanCount,
+          className: "text-center border-b border-line px-20 py-8",
+          children: emptyMessage
+        }
+      ) });
+    }
+    return sortedData.map((data, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "tr",
+      {
+        className: `${mergeDuplicateKeys.length === 0 ? "hover:bg-gray1" : ""} ${isCheckboxOption && mergeDuplicateKeys.length === 0 && selectedIds.includes(String(data.id)) && "bg-primary5"}`,
+        children: [
+          isCheckboxOption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "border-b border-line px-20 py-8 text-center w-30 ", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Checkbox_default,
+            {
+              checked: selectedIds.includes(String(data.id)),
+              disabled: disabledCheckboxCondition?.(data) || false,
+              onChange: () => handleSelectItem(String(data.id))
+            }
+          ) }),
+          isRadioOption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "border-b border-line px-20 py-8 text-center w-50", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Radio_default,
+            {
+              checked: selectedIds.includes(String(data.id)),
+              onChange: () => handleSelectRadioItem(String(data.id))
+            }
+          ) }),
+          isModify && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "border-b border-line px-20 py-8 text-center w-60", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex justify-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "img",
+              {
+                src: ic_sort_arrow_up_default,
+                alt: "\uC704\uB85C \uC774\uB3D9",
+                className: `w-16 h-16 cursor-pointer ${rowIndex === 0 ? "opacity-30 cursor-not-allowed" : "hover:opacity-70"}`,
+                onClick: () => {
+                  if (rowIndex > 0) {
+                    handleMoveUp(String(data.id));
+                  }
+                }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "img",
+              {
+                src: ic_sort_arrow_down_default,
+                alt: "\uC544\uB798\uB85C \uC774\uB3D9",
+                className: `w-16 h-16 cursor-pointer ${rowIndex === sortedData.length - 1 ? "opacity-30 cursor-not-allowed" : "hover:opacity-70"}`,
+                onClick: () => {
+                  if (rowIndex < sortedData.length - 1) {
+                    handleMoveDown(String(data.id));
+                  }
+                }
+              }
+            )
+          ] }) }),
+          headersKeys.map((headerKey, colIndex) => {
+            const cell = cellData(data, headerKey, rowIndex, colIndex);
+            return cell;
+          }).filter(Boolean)
+        ]
+      },
+      data.id ? String(data.id) : rowIndex
+    ));
+  };
+  (0, import_react8.useEffect)(() => {
+    if (selectedIds.length > 0) {
+      setSelectedIds([]);
+    }
+  }, [datas]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: `${overWidth ? "overflow-x-auto" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "table",
+    {
+      className: "border-collapse border-line border-t w-full table",
+      style: {
+        minWidth: overWidth ? toRemFunction2(overWidth) : "100%"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { children: [
+          isCheckboxOption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "border-b border-line px-20 py-8 bg-gray1 text-center w-30 vertical-middle", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            Checkbox_default,
+            {
+              checked: isAllSelected,
+              onChange: handleSelectAll
+            }
+          ) }),
+          isRadioOption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "border-b border-line px-20 py-8 bg-gray1 text-center w-30", children: "\uC120\uD0DD" }),
+          isModify && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { className: "border-b border-line px-20 py-8 bg-gray1 text-center w-60 whitespace-nowrap", children: "\uD3B8\uC9D1" }),
+          columns.map((column, index) => {
+            const title = column.header;
+            const colSpan = column.colSpan;
+            const headerKey = column.key;
+            const isSortable = sortKeys.includes(headerKey);
+            const isCurrentSort = sortState?.key === headerKey;
+            const isImportantColor = importantColorKeys.includes(headerKey);
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              "th",
+              {
+                colSpan,
+                className: `border-b border-line px-20 py-7 bg-gray1 whitespace-nowrap text-body14 text-text font-medium ${thAlignLeftKeys?.includes(headerKey) ? "text-left" : thAlignRightKeys?.includes(headerKey) ? "text-right" : "text-center"} ${isSortable ? "cursor-pointer hover:bg-gray-200" : ""}
+                    ${isImportantColor ? "text-primary bg-primary10" : ""}
+                    ${column.thClassName || ""}`,
+                onClick: () => isSortable && handleSort(headerKey),
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+                  typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: title }) : title,
+                  requiredKeys?.includes(headerKey) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    "span",
+                    {
+                      className: "inline-block -mt-2",
+                      style: { verticalAlign: "top" },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RequiredDot_default, {})
+                    }
+                  ),
+                  isSortable && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col inline-block ml-5 vertical-middle", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      "img",
+                      {
+                        src: ic_sort_arrow_up_default,
+                        alt: "\uC624\uB984\uCC28\uC21C",
+                        className: `w-12 h-12 ${isCurrentSort && sortState.direction === "asc" ? "opacity-100" : "opacity-30"}`
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      "img",
+                      {
+                        src: ic_sort_arrow_down_default,
+                        alt: "\uB0B4\uB9BC\uCC28\uC21C",
+                        className: `w-12 h-12 ${isCurrentSort && sortState.direction === "desc" ? "opacity-100" : "opacity-30"}`
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              index
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { children: renderTableBody() }),
+        footers && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tfoot", { children: footers })
+      ]
+    }
+  ) }) });
+}
+var Table_default = Table;
+
+// src/constants/common.ts
+var LIST_PAGE_SIZE = 10;
+
+// src/components/ui/Table/TableTop.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function TableTop({
+  type = "search",
+  count,
+  pageSize = LIST_PAGE_SIZE,
+  countText = "\uAC1C \uC0C1\uD488 \uC870\uD68C",
+  leftButtons,
+  rightButtons,
+  registText = "\uC0C1\uD488 \uB4F1\uB85D",
+  sortOptionValue,
+  sortOptions,
+  useDivider = true,
+  isPageCount = true,
+  useCountOption = true,
+  deleteText = "\uC120\uD0DD \uC0AD\uC81C",
+  onChangeSort,
+  onChangePageSize,
+  onDelete,
+  onExcelDownload,
+  onSelectExcelDownload,
+  handleRegist
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Stack_default, { direction: "col", gap: 6, children: [
+    (sortOptions || useCountOption || isPageCount) && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Stack_default, { direction: "row", gap: 10, justify: "between", align: "end", children: [
+      isPageCount && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Stack_default, { direction: "row", gap: 10, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Text, { size: "body14", fontWeight: "bold", children: [
+        "\uCD1D",
+        "\xA0",
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { size: "body14", fontWeight: "bold", color: "primary", children: count }),
+        countText
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Stack_default, { direction: "row", gap: 10, align: "center", children: [
+        rightButtons,
+        sortOptions && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          SelectBox_default,
+          {
+            value: sortOptionValue,
+            options: sortOptions,
+            customWidth: 160,
+            onChange: (value) => {
+              if (onChangeSort) {
+                onChangeSort(value);
+              }
+            }
+          }
+        ),
+        useCountOption && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          SelectBox_default,
+          {
+            value: pageSize,
+            options: [
+              { label: "10 \uAC74\uC529 \uBCF4\uAE30", value: 10 },
+              { label: "20 \uAC74\uC529 \uBCF4\uAE30", value: 20 },
+              { label: "30 \uAC74\uC529 \uBCF4\uAE30", value: 30 },
+              { label: "50 \uAC74\uC529 \uBCF4\uAE30", value: 50 },
+              { label: "100 \uAC74\uC529 \uBCF4\uAE30", value: 100 }
+            ],
+            customWidth: 160,
+            onChange: (value) => {
+              if (onChangePageSize) {
+                onChangePageSize(value);
+              }
+            }
+          }
+        )
+      ] })
+    ] }),
+    type === "search" && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+      useDivider && isPageCount && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Divider_default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Stack_default, { direction: "row", gap: 10, justify: "between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Stack_default, { direction: "row", gap: 4, children: leftButtons }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Stack_default, { direction: "row", gap: 4, children: handleRegist && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          Button_default,
+          {
+            size: "medium",
+            variant: "primary",
+            onClick: () => {
+              handleRegist?.();
+            },
+            children: registText
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+var TableTop_default = TableTop;
+
+// src/components/ui/Table/CommonTable.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function CommonTable({ tableTop, tableBody, pagination }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Stack_default, { direction: "col", gap: 20, wFull: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Stack_default, { direction: "col", gap: 7, children: [
+    tableTop && tableTop,
+    tableBody && tableBody,
+    pagination && pagination
+  ] }) });
+}
+var CommonTable_default = CommonTable;
+
+// src/components/ui/Tag/Tag.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Tag({
+  id,
+  children,
+  color = "text",
+  bgColor,
+  size = "body12",
+  fontWeight: fontWeightProp = "bold",
+  className = "",
+  variant = "filled",
+  style,
+  ...props
+}) {
+  const getVariantStyles = () => {
+    if (variant === "outlined") {
+      return {
+        backgroundColor: colors.white,
+        color: colors[color],
+        border: `1px solid ${colors.line}`
+      };
+    }
+    const bgColorKey = bgColor || `${color}Light`;
+    return {
+      backgroundColor: colors[bgColorKey] || colors[`${color}Light`] || colors.textLight,
+      color: colors[color]
+    };
+  };
+  const styles = {
+    display: "inline-block",
+    fontSize: fontSize[size],
+    fontWeight: fontWeight[fontWeightProp],
+    paddingLeft: "6px",
+    paddingRight: "6px",
+    height: "26px",
+    borderRadius: "6px",
+    touchAction: "none",
+    lineHeight: "26px",
+    whiteSpace: "nowrap",
+    ...getVariantStyles(),
+    ...style
+    // 사용자 정의 style을 마지막에 배치하여 오버라이드 가능하게
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { id, style: styles, className, ...props, children });
+}
+
+// src/components/ui/TagInput/TagInput.tsx
+var import_react10 = require("react");
+var import_core = require("@dnd-kit/core");
+var import_sortable = require("@dnd-kit/sortable");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var SimpleTag = ({
+  tag,
+  index,
+  onRemove,
+  disabled
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center justify-center gap-8 bg-primary3 text-text text-body14 font-medium px-12 h-36 rounded-md border border-line leading-[36px]", children: [
+    !disabled && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "cursor-pointer", onClick: () => onRemove(index), children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ColorIcTagClose_default, { width: 10, height: 10, color: "text" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: tag })
+  ] });
+};
+var SortableTag = ({
+  tag,
+  index,
+  onRemove,
+  disabled
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = (0, import_sortable.useSortable)({ id: tag });
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : void 0,
+    transition,
+    opacity: isDragging ? 0 : 1
+    // 드래그 중인 원본 항목은 투명하게 처리
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      ...attributes,
+      ...listeners,
+      className: "flex items-center justify-center gap-8 bg-primary3 text-text text-body14 font-medium px-12 h-36 rounded-md touch-none border border-line leading-[36px]",
+      children: [
+        !disabled && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "span",
+          {
+            onPointerDown: (e) => {
+              e.stopPropagation();
+              onRemove(index);
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ColorIcTagClose_default, { width: 10, height: 10, color: "text" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: tag })
+      ]
+    }
+  );
+};
+var TagInput = (0, import_react10.forwardRef)(
+  ({
+    label,
+    labelHidden,
+    tags,
+    onChange,
+    placeholder = "\uC785\uB825 \uD6C4 Enter",
+    disabled = false,
+    className = "",
+    id,
+    required = false,
+    error,
+    tooltip,
+    onlyView = true,
+    draggable = true,
+    // 기본값: 드래그 가능
+    onDuplicateTag
+  }, ref) => {
+    const [inputValue, setInputValue] = (0, import_react10.useState)("");
+    const [activeId, setActiveId] = (0, import_react10.useState)(null);
+    const [draggedWidth, setDraggedWidth] = (0, import_react10.useState)(null);
+    const activeTag = (0, import_react10.useMemo)(
+      () => tags.find((tag) => tag === activeId),
+      [activeId, tags]
+    );
+    const inputId = id || `tag-input-${Math.random().toString(36).substring(2, 9)}`;
+    const sensors = (0, import_core.useSensors)(
+      (0, import_core.useSensor)(import_core.PointerSensor),
+      (0, import_core.useSensor)(import_core.KeyboardSensor, {
+        coordinateGetter: import_sortable.sortableKeyboardCoordinates
+      })
+    );
+    const handleInputChange = (e) => {
+      setInputValue(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.nativeEvent.isComposing) {
+        e.preventDefault();
+        const newTag = inputValue.trim();
+        if (newTag && !tags.includes(newTag)) {
+          onChange([...tags, newTag]);
+          setInputValue("");
+        } else if (newTag && onDuplicateTag) {
+          onDuplicateTag(newTag);
+        }
+      }
+    };
+    const removeTag = (indexToRemove) => {
+      if (disabled) return;
+      onChange(tags.filter((_, index) => index !== indexToRemove));
+    };
+    const handleDragStart = (event) => {
+      setActiveId(event.active.id);
+      if (event.active.rect.current.initial) {
+        setDraggedWidth(event.active.rect.current.initial.width);
+      }
+    };
+    const handleDragEnd = (event) => {
+      const { active, over } = event;
+      if (over && active.id !== over.id) {
+        const oldIndex = tags.findIndex((tag) => tag === active.id);
+        const newIndex = tags.findIndex((tag) => tag === over.id);
+        onChange((0, import_sortable.arrayMove)(tags, oldIndex, newIndex));
+      }
+      setActiveId(null);
+      setDraggedWidth(null);
+    };
+    const handleDragCancel = () => {
+      setActiveId(null);
+      setDraggedWidth(null);
+    };
+    if (!draggable) {
+      return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Stack_default, { direction: "col", gap: 4, className, wFull: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          Label_default,
+          {
+            label,
+            required,
+            tooltip,
+            inputId,
+            labelHidden
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          "div",
+          {
+            className: `
+              flex items-center flex-wrap gap-8 rounded-md
+              min-h-36
+              ${error ? "border-red" : "border-line"}
+              ${disabled ? "bg-gray1" : "bg-white"}
+            `,
+            children: tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+              SimpleTag,
+              {
+                tag,
+                index,
+                onRemove: removeTag,
+                disabled
+              },
+              tag
+            ))
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Stack_default, { direction: "col", gap: 4, className, wFull: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        Label_default,
+        {
+          label,
+          required,
+          tooltip,
+          inputId,
+          labelHidden
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+        import_core.DndContext,
+        {
+          sensors,
+          collisionDetection: import_core.closestCenter,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+          onDragCancel: handleDragCancel,
+          measuring: {
+            droppable: {
+              strategy: import_core.MeasuringStrategy.Always
+            }
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_sortable.SortableContext, { items: tags, strategy: import_sortable.rectSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              "div",
+              {
+                className: `
+                flex items-center flex-wrap gap-8 rounded-md
+                min-h-36
+                ${error ? "border-red" : "border-line"}
+                ${disabled ? "bg-gray1" : "bg-white"}
+              `,
+                children: [
+                  tags.map((tag, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    SortableTag,
+                    {
+                      tag,
+                      index,
+                      onRemove: removeTag,
+                      disabled
+                    },
+                    tag
+                  )),
+                  !onlyView && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                    "input",
+                    {
+                      ref,
+                      id: inputId,
+                      type: "text",
+                      value: inputValue,
+                      onChange: handleInputChange,
+                      onKeyDown: handleKeyDown,
+                      placeholder: tags.length === 0 ? placeholder : "",
+                      disabled,
+                      className: " text-text text-body14 font-medium px-12 h-36 rounded-md text-text "
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_core.DragOverlay, { dropAnimation: null, adjustScale: false, children: activeTag ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              "div",
+              {
+                className: "flex items-center justify-center gap-8 bg-primary3 text-text text-body14 font-medium px-12 h-36 rounded-md border border-line leading-[36px] shadow-lg",
+                style: {
+                  width: draggedWidth ? `${draggedWidth}px` : "auto"
+                },
+                children: [
+                  !disabled && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ColorIcTagClose_default, { width: 10, height: 10, color: "text" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: activeTag })
+                ]
+              }
+            ) : null })
+          ]
+        }
+      )
+    ] });
+  }
+);
+TagInput.displayName = "TagInput";
+var TagInput_default = TagInput;
+
+// src/components/ui/TextArea/TextArea.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var TextArea = ({
+  label,
+  labelHidden,
+  labelWidth,
+  error,
+  fullWidth = false,
+  required = false,
+  direction = "row",
+  id,
+  className = "",
+  rows = 5,
+  areaHeight = 80,
+  maxLength,
+  ...props
+}) => {
+  const textareaId = id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    Stack_default,
+    {
+      direction,
+      wFull: fullWidth,
+      gap: direction === "row" ? 14 : 4,
+      align: direction === "row" ? "center" : "start",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          Label_default,
+          {
+            label,
+            required,
+            width: labelWidth,
+            labelHidden
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          Stack_default,
+          {
+            gap: 0,
+            className: "flex-auto relative",
+            wFull: direction === "row" ? false : fullWidth,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                "textarea",
+                {
+                  id: textareaId,
+                  rows,
+                  className: `
+            px-12 py-10 border rounded-md w-full
+            ${error ? "border-red" : "border-line"}
+            focus:border-primary
+            resize-vertical
+            ${className}
+          `,
+                  style: { height: `${toRemFunction2(areaHeight)}` },
+                  ...props,
+                  maxLength
+                }
+              ),
+              maxLength && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Text, { color: "primaryText", justify: "end", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { color: "red", children: props.value?.toString().length || 0 }),
+                "/",
+                maxLength
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var TextArea_default = TextArea;
+
+// src/components/ui/TextButton/TextButton.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function TextButton({
+  text,
+  isOpen = false,
+  onClick,
+  color = "primaryText",
+  type = "arrow",
+  size = "body14"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    Stack_default,
+    {
+      direction: "row",
+      align: "center",
+      justify: "center",
+      onClick,
+      className: "cursor-pointer",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          Text,
+          {
+            size,
+            fontWeight: "bold",
+            color,
+            textDecoration: type === "underline" ? "underline" : "none",
+            className: "leading-none",
+            children: text
+          }
+        ),
+        type === "arrow" && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ColorIcArrow_default, { isOpen, color })
+      ]
+    }
+  );
+}
+var TextButton_default = TextButton;
+
+// src/components/ui/Toggle/Toggle.tsx
+var import_react11 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var Toggle = (0, import_react11.forwardRef)(
+  ({
+    checked = false,
+    onChange,
+    label,
+    disabled = false,
+    size = "medium",
+    textToggleSize = 76,
+    className = "",
+    id,
+    required = false,
+    error,
+    tooltip,
+    onText,
+    offText,
+    labelWidth,
+    isDot = false
+  }, ref) => {
+    const toggleId = id || `toggle-${Math.random().toString(36).substring(2, 9)}`;
+    const onRef = (0, import_react11.useRef)(null);
+    const offRef = (0, import_react11.useRef)(null);
+    const [sliderStyle, setSliderStyle] = (0, import_react11.useState)({});
+    const handleToggle = () => {
+      if (!disabled && onChange) {
+        onChange(!checked);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleToggle();
+      }
+    };
+    (0, import_react11.useEffect)(() => {
+      if (!onText || !offText) return;
+      const targetRef = checked ? onRef : offRef;
+      if (targetRef.current) {
+        setSliderStyle({
+          width: targetRef.current.offsetWidth,
+          transform: `translateX(${targetRef.current.offsetLeft - 4}px)`
+        });
+      }
+    }, [checked, onText, offText]);
+    if (onText && offText) {
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Stack_default, { direction: "row", align: "center", gap: 14, className, children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          Label_default,
+          {
+            label,
+            width: labelWidth,
+            required,
+            tooltip,
+            isDot
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Stack_default, { direction: "col", gap: 4, className: "flex-auto", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+            "button",
+            {
+              ref,
+              id: toggleId,
+              type: "button",
+              role: "switch",
+              "aria-checked": checked,
+              disabled,
+              onClick: handleToggle,
+              onKeyDown: handleKeyDown,
+              className: `
+                relative flex items-center rounded-full h-36 p-4
+                bg-gray1 border border-line
+                w-fit
+                ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"}
+              `,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  "div",
+                  {
+                    className: "absolute h-[calc(100%-6px)] top-[3px] bg-primary rounded-full transition-all duration-300 ease-in-out",
+                    style: sliderStyle
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  "span",
+                  {
+                    ref: onRef,
+                    className: `relative  text-center leading-none text-body14  ${checked ? "text-white font-bold" : "font-semibold text-text"}`,
+                    style: { width: `${toRemFunction2(textToggleSize)}` },
+                    children: onText
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  "span",
+                  {
+                    ref: offRef,
+                    className: `relative  text-body14 leading-none  ${!checked ? "text-white font-bold" : "font-semibold text-text"}`,
+                    style: { width: `${toRemFunction2(textToggleSize)}` },
+                    children: offText
+                  }
+                )
+              ]
+            }
+          ),
+          error && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-red text-body12", children: error })
+        ] })
+      ] });
+    }
+    const getSizeClasses = () => {
+      switch (size) {
+        case "small":
+          return "w-32 h-18";
+        case "large":
+          return "w-56 h-32";
+        default:
+          return "w-44 h-24";
+      }
+    };
+    const getSliderSizeClasses = () => {
+      switch (size) {
+        case "small":
+          return "w-14 h-14";
+        case "large":
+          return "w-28 h-28";
+        default:
+          return "w-20 h-20";
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Stack_default, { direction: "row", gap: 10, align: "center", className, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Label_default, { label, required, tooltip }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Stack_default, { direction: "col", gap: 4, className: "flex-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            ref,
+            id: toggleId,
+            type: "button",
+            role: "switch",
+            "aria-checked": checked,
+            "aria-labelledby": label ? `${toggleId}-label` : void 0,
+            disabled,
+            onClick: handleToggle,
+            onKeyDown: handleKeyDown,
+            className: `
+              relative inline-flex items-center rounded-full transition-colors duration-200 ease-in-out
+              focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2
+              ${getSizeClasses()}
+              ${checked ? "bg-primary" : "bg-gray3 "}
+              ${disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer hover:opacity-80"}
+            `,
+            tabIndex: disabled ? -1 : 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              "span",
+              {
+                className: `
+                inline-block rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out
+                ${getSliderSizeClasses()}
+                ${checked ? "translate-x-22" : "translate-x-2"}
+                ${size === "large" ? "translate-x-8" : ""}
+                ${size === "small" ? "translate-x-4" : ""}
+              `
+              }
+            )
+          }
+        ),
+        error && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-red text-body12", children: error })
+      ] })
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
+var Toggle_default = Toggle;
+
+// src/components/ui/ToolTipBox/ToolTipBox.tsx
+var import_react12 = require("react");
+
+// src/assets/colorIcon/ColorIcTooltipArrow.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function ColorIcTooltipArrow({
+  width = 14,
+  height = 14,
+  color = "primary"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { color: `var(--color-${color})` },
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        "path",
+        {
+          d: "M12.0309 9.9748C11.8996 9.9748 11.7902 9.93106 11.6809 9.84356L6.99961 5.22793L2.31836 9.82168C2.12148 10.0186 1.81523 10.0186 1.61836 9.82168C1.42148 9.62481 1.42148 9.31856 1.61836 9.12168L6.64961 4.17793C6.84648 3.98105 7.15273 3.98105 7.34961 4.17793L12.3809 9.12168C12.5777 9.31856 12.5777 9.62481 12.3809 9.82168C12.2934 9.90918 12.1621 9.9748 12.0309 9.9748Z",
+          fill: "currentColor"
+        }
+      )
+    }
+  );
+}
+var ColorIcTooltipArrow_default = ColorIcTooltipArrow;
+
+// src/assets/colorIcon/ColorIcTooltipBlue.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function ColorIcTooltipBlue({
+  width = 16,
+  height = 16,
+  color = "primary"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { color: `var(--color-${color})` },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("g", { clipPath: "url(#clip0_175_11783)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "path",
+            {
+              d: "M7.9744 4.87305H7.95015C7.65924 4.87305 7.39258 5.11547 7.39258 5.43062C7.39258 5.74577 7.635 5.9882 7.95015 5.9882H7.9744C8.26531 5.9882 8.53197 5.74577 8.53197 5.43062C8.53197 5.11547 8.28955 4.87305 7.9744 4.87305Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "path",
+            {
+              d: "M7.97554 6.78809C7.68464 6.78809 7.41797 7.03051 7.41797 7.34566V11.079C7.41797 11.3699 7.66039 11.6366 7.97554 11.6366C8.26645 11.6366 8.53312 11.3941 8.53312 11.079V7.32142C8.53312 7.03051 8.2907 6.78809 7.97554 6.78809Z",
+              fill: "currentColor"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "path",
+            {
+              d: "M7.97631 0.678711C3.92783 0.678711 0.630859 3.95144 0.630859 7.99992C0.630859 12.0484 3.92783 15.3454 7.97631 15.3454C12.0248 15.3454 15.2975 12.0484 15.2975 7.99992C15.2975 3.95144 12.0248 0.678711 7.97631 0.678711ZM7.97631 14.2545C4.53389 14.2545 1.72177 11.4423 1.72177 7.99992C1.72177 4.5575 4.53389 1.74538 7.97631 1.74538C11.4187 1.74538 14.2066 4.5575 14.2066 7.99992C14.2066 11.4423 11.4187 14.2545 7.97631 14.2545Z",
+              fill: "currentColor"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("clipPath", { id: "clip0_175_11783", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+      ]
+    }
+  );
+}
+var ColorIcTooltipBlue_default = ColorIcTooltipBlue;
+
+// src/components/ui/ToolTipBox/ToolTipBox.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function ToolTipBox({ title, children }) {
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const contentRef = (0, import_react12.useRef)(null);
+  const [contentHeight, setContentHeight] = (0, import_react12.useState)(0);
+  (0, import_react12.useEffect)(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    BorderRadiusBox_default,
+    {
+      borderColor: "primary3Border",
+      bgColor: "primary3",
+      paddingX: 20,
+      paddingY: 12,
+      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Stack_default, { direction: "col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          Stack_default,
+          {
+            direction: "row",
+            gap: 3,
+            align: "center",
+            justify: "between",
+            onClick: () => {
+              setIsOpen(!isOpen);
+            },
+            className: "cursor-pointer",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(Stack_default, { direction: "row", gap: 3, align: "center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorIcTooltipBlue_default, { width: 14, height: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Text, { size: "body14", fontWeight: "bold", color: "primary", children: title })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: `w-16 h-16 cursor-pointer transition-transform duration-300 ${isOpen ? "" : "rotate-180"}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ColorIcTooltipArrow_default, { width: 14, height: 14, color: "primary" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "div",
+          {
+            className: "overflow-hidden transition-all duration-300 ease-in-out",
+            style: {
+              height: isOpen ? `${contentHeight}px` : "0px",
+              opacity: isOpen ? 1 : 0
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: contentRef, className: "grid grid-cols-2 gap-2 mt-4", children: children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              BulletText_default,
+              {
+                label: child,
+                textColor: "primary",
+                textSize: "body12",
+                fontWeight: "regular",
+                bulletColor: "dark6"
+              },
+              index
+            )) })
+          }
+        )
+      ] })
+    }
+  );
+}
+var ToolTipBox_default = ToolTipBox;
+
+// src/components/ui/TooltipInfo/TooltipInfo.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function TooltipInfo({ title, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    BorderRadiusBox_default,
+    {
+      radius: 6,
+      paddingX: 0,
+      paddingY: 0,
+      className: " border-none overflow-hidden",
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { backgroundColor: "#4B5563E5" }, className: "px-12 py-10", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(Stack_default, { gap: 5, direction: "col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          Text,
+          {
+            size: "body14",
+            fontWeight: "bold",
+            color: "white",
+            className: "whitespace-nowrap",
+            style: {
+              lineHeight: "1.4"
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Stack_default, { gap: 2, direction: "col", children: children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+          "div",
+          {
+            className: `whitespace-nowrap flex items-baseline flex-none relative w-full`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                "span",
+                {
+                  className: "inline-block w-3 h-3 bg-dark6 mr-4 ",
+                  style: {
+                    verticalAlign: "top",
+                    position: "relative",
+                    top: "-2px"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+                Text,
+                {
+                  size: "body12",
+                  color: "white",
+                  fontWeight: "regular",
+                  style: {
+                    lineHeight: "1.4"
+                  },
+                  children: child
+                },
+                "tooltipInfoText" + index
+              )
+            ]
+          },
+          "tooltipInfo" + index
+        )) })
+      ] }) })
+    },
+    "tooltipInfo"
+  );
+}
+var TooltipInfo_default = TooltipInfo;
+
+// src/assets/colorIcon/ColorIcInfo.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function ColorIcInfo({
+  width = 12,
+  height = 12,
+  color = "gray"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    "span",
+    {
+      style: {
+        color: `var(--color-${color})`,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: "0 0 12 12",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { width: "12", height: "12", rx: "6", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("g", { clipPath: "url(#clip0_603_10414)", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                "path",
+                {
+                  d: "M6.81978 8.68161H6.09194V4.57706C6.09194 4.24297 5.81751 3.98047 5.49535 3.98047H4.82717C4.68398 3.98047 4.55273 4.09979 4.55273 4.2549C4.55273 4.41001 4.67205 4.52933 4.82717 4.52933H5.49535C5.53114 4.52933 5.55501 4.5532 5.55501 4.58899V8.68161H4.82717C4.68398 8.68161 4.55273 8.80092 4.55273 8.95604C4.55273 9.11115 4.67205 9.23047 4.82717 9.23047H6.83171C6.97489 9.23047 7.10614 9.11115 7.10614 8.95604C7.10614 8.80092 6.96296 8.68161 6.81978 8.68161Z",
+                  fill: "white"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+                "path",
+                {
+                  d: "M5.75835 3.3956C5.95604 3.3956 6.1163 3.23533 6.1163 3.03764C6.1163 2.83995 5.95604 2.67969 5.75835 2.67969C5.56065 2.67969 5.40039 2.83995 5.40039 3.03764C5.40039 3.23533 5.56065 3.3956 5.75835 3.3956Z",
+                  fill: "white"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("clipPath", { id: "clip0_603_10414", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "rect",
+              {
+                width: "7.63636",
+                height: "7.63636",
+                fill: "white",
+                transform: "translate(2 2)"
+              }
+            ) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+var ColorIcInfo_default = ColorIcInfo;
+
+// src/assets/colorIcon/ColorIcWarning.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function ColorIcWarning({
+  width = 16,
+  height = 16,
+  color = "warning"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "span",
+    {
+      style: {
+        color: `var(--color-${color})`,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("rect", { width: "16", height: "16", rx: "8", fill: "currentColor" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "path",
+              {
+                d: "M12.5343 9.47947L9.1297 4.00144C8.85925 3.63553 8.44561 3.42871 8.00016 3.42871C7.53879 3.42871 7.12516 3.63553 6.87061 4.00144L3.46607 9.47947C3.14789 9.90901 3.10016 10.4658 3.3388 10.9431C3.57743 11.4204 4.0547 11.7227 4.59561 11.7227H11.4047C11.9456 11.7227 12.4229 11.4204 12.6615 10.9431C12.9002 10.4817 12.8524 9.90901 12.5343 9.47947ZM12.0252 10.6249C11.8979 10.8636 11.6752 11.0067 11.4047 11.0067H4.59561C4.32516 11.0067 4.10243 10.8636 3.97516 10.6249C3.8638 10.3863 3.8797 10.1158 4.0388 9.90901L7.44334 4.43098C7.57061 4.25598 7.77743 4.14462 8.00016 4.14462C8.22289 4.14462 8.4297 4.24007 8.55698 4.43098L11.9615 9.90901C12.1206 10.1158 12.1365 10.3863 12.0252 10.6249Z",
+                fill: "white"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "path",
+              {
+                d: "M8.00067 6.3877C7.80977 6.3877 7.63477 6.54679 7.63477 6.7536V8.4877C7.63477 8.6786 7.79386 8.8536 8.00067 8.8536C8.20749 8.8536 8.36658 8.69451 8.36658 8.4877V6.7377C8.36658 6.54679 8.19158 6.3877 8.00067 6.3877Z",
+                fill: "white"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              "path",
+              {
+                d: "M8.00067 9.27246C7.80977 9.27246 7.63477 9.43155 7.63477 9.63837V9.71792C7.63477 9.90882 7.79386 10.0838 8.00067 10.0838C8.20749 10.0838 8.36658 9.92473 8.36658 9.71792V9.62246C8.36658 9.43155 8.19158 9.27246 8.00067 9.27246Z",
+                fill: "white"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var ColorIcWarning_default = ColorIcWarning;
+
+// src/components/ui/WarningBox/WarningBox.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var WarningBox = ({
+  children,
+  color = "warning"
+}) => {
+  const colorClass = `bg-${color}Light text-${color} `;
+  const iconSize = color === "text" ? 14 : 16;
+  const icon = color === "text" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ColorIcInfo_default, { width: iconSize, height: iconSize }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ColorIcWarning_default, { width: iconSize, height: iconSize });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "div",
+    {
+      className: `opacity-80 relative ${colorClass} rounded-sm pl-2 before:content-[''] before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[50px] ${color === "text" ? "before:bg-text" : "before:bg-warning"} before:rounded-tl-warnOut before:rounded-bl-warnOut `,
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "div",
+        {
+          className: `relative ${colorClass} inline-block text-body12 font-bold px-12 py-8 rounded-warn touch-none`,
+          children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(Stack_default, { direction: "row", align: "start", gap: 4, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: `${color === "text" ? "mt-4" : "mt-3"}`, children: icon }),
+            children
+          ] })
+        }
+      )
+    }
+  );
+};
+var WarningBox_default = WarningBox;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BorderRadiusBox,
+  BulletText,
+  Button,
+  Checkbox,
+  CommonTable,
+  Divider,
+  EmailInput,
+  Input,
+  Label,
+  MultiSelectCheckbox,
+  Paging,
+  Radio,
+  RequiredDot,
+  SelectBox,
+  Stack,
+  Table,
+  TableTop,
+  Tag,
+  TagInput,
   Text,
+  TextArea,
+  TextButton,
+  Toggle,
+  ToolTipBox,
+  Tooltip,
+  TooltipInfo,
+  WarningBox,
   alignSelfs,
   aligns,
   colors,