@scglab/admin-ui 0.1.3 → 0.1.5

package/dist/index.js

@@ -154,8 +154,3399 @@ function Text({
   };
   return /* @__PURE__ */ jsx("div", { id, style: styles, className, ...props, children });
 }
+
+// src/utils/helperUtils.ts
+import moment from "moment";
+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 ? moment(date).format("YYYY.MM.DD") : "";
+};
+var formatDateTime = (date) => {
+  return date ? moment(date).format("YYYY-MM-DD HH:mm:ss") : "";
+};
+
+// src/components/ui/BorderRadiusBox/BorderRadiusBox.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function BorderRadiusBox({
+  active = false,
+  paddingX = 22,
+  paddingY = 20,
+  radius = 12,
+  children,
+  onClick,
+  className,
+  fullWidth = false,
+  bgColor = "white",
+  borderColor = "line"
+}) {
+  return /* @__PURE__ */ jsx2(
+    "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
+import { useEffect, useState } from "react";
+
+// src/assets/colorIcon/ColorIcTagClose.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function ColorIcTagClose({
+  width = 10,
+  height = 10,
+  color = "text"
+}) {
+  return /* @__PURE__ */ 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__ */ jsx3("g", { clipPath: "url(#clip0_848_3903)", children: /* @__PURE__ */ jsx3(
+          "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__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3("clipPath", { id: "clip0_848_3903", children: /* @__PURE__ */ jsx3("rect", { width: "10", height: "10", fill: "white" }) }) })
+      ]
+    }
+  );
+}
+var ColorIcTagClose_default = ColorIcTagClose;
+
+// src/assets/colorIcon/ColorIcTooltip.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ColorIcTooltip({
+  width = 14,
+  height = 14,
+  color = "text"
+}) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { color: `var(--color-${color})` },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(
+          "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__ */ jsx4(
+          "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
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Tooltip({ tooltipInfo, position = "right" }) {
+  const [isOpen, setIsOpen] = useState(false);
+  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__ */ jsxs3("div", { className: "tooltip relative ml-2", children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "relative",
+        onClick: (e) => {
+          e.stopPropagation();
+          setIsOpen(!isOpen);
+        },
+        children: /* @__PURE__ */ jsx5(ColorIcTooltip_default, { width: 14, height: 14 })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: `absolute z-10 rounded-md`,
+        style: {
+          ...positionStyle
+        },
+        children: [
+          tooltipInfo,
+          /* @__PURE__ */ jsx5("span", { className: "absolute top-10 right-10 cursor-pointer", onClick: (e) => {
+            e.stopPropagation();
+            setIsOpen(false);
+          }, children: /* @__PURE__ */ jsx5(ColorIcTagClose_default, { width: 10, height: 10, color: "text" }) })
+        ]
+      }
+    )
+  ] });
+}
+var Tooltip_default = Tooltip;
+
+// src/components/ui/BulletText/BulletText.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var BulletText = ({
+  label,
+  bulletColor = "secondaryText",
+  tooltip,
+  textColor = "text",
+  textSize = "body14",
+  fontWeight: fontWeight2 = "bold"
+}) => {
+  return /* @__PURE__ */ jsxs4("div", { className: `flex flex-none relative label-mobile`, children: [
+    /* @__PURE__ */ jsx6(
+      "span",
+      {
+        className: `inline-block w-3 h-3 bg-${bulletColor} mr-4 ${textSize === "body12" ? "mt-7" : "mt-9"}`
+      }
+    ),
+    /* @__PURE__ */ jsx6(Text, { size: textSize, color: textColor, fontWeight: fontWeight2, children: label }),
+    tooltip && /* @__PURE__ */ jsx6(Tooltip_default, { tooltipInfo: tooltip })
+  ] });
+};
+var BulletText_default = BulletText;
+
+// src/components/ui/Button/Button.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "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__ */ jsxs5(
+    "button",
+    {
+      className: `${buttonStyles} ${className}`,
+      disabled: disabled || isLoading,
+      type,
+      style: {
+        width: wFull ? "100%" : customWidth ? `${customWidth}px` : ""
+      },
+      ...props,
+      children: [
+        icon && iconPosition === "left" && (typeof icon === "string" ? /* @__PURE__ */ jsx7("img", { src: icon, alt: "icon", className: "w-16 h-16 mr-4" }) : /* @__PURE__ */ jsx7("div", { className: "mr-4", children: icon })),
+        isLoading ? /* @__PURE__ */ jsxs5("span", { className: "flex items-center justify-center", children: [
+          /* @__PURE__ */ jsxs5(
+            "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__ */ jsx7(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx7(
+                  "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__ */ jsx7("img", { src: icon, alt: "icon", className: "w-16 h-16 ml-3" }) : /* @__PURE__ */ jsx7("div", { className: "mr-4", children: icon }))
+      ]
+    }
+  );
+};
+var Button_default = Button;
+
+// src/components/ui/Checkbox/Checkbox.tsx
+import { forwardRef, useState as useState2, useEffect as useEffect2 } from "react";
+
+// src/assets/colorIcon/ColorIcCheckDim.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function ColorIcCheckDim({
+  width = 21,
+  height = 20,
+  fillColor = "gray3",
+  strokeColor = "stroke",
+  iconColor = "white"
+}) {
+  return /* @__PURE__ */ jsxs6(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 21 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx8(
+          "rect",
+          {
+            x: "1",
+            y: "0.5",
+            width: "19",
+            height: "19",
+            rx: "3.5",
+            fill: `var(--color-${fillColor})`
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "rect",
+          {
+            x: "1",
+            y: "0.5",
+            width: "19",
+            height: "19",
+            rx: "3.5",
+            stroke: `var(--color-${strokeColor})`
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "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
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var Checkbox = 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] = useState2(checked || false);
+    useEffect2(() => {
+      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__ */ jsx9(
+      "div",
+      {
+        className: `flex items-center py-1 px-1 ${checkboxWidth}`,
+        style: {
+          width: checkboxWidth ? `${toRemFunction2(checkboxWidth)}` : ""
+        },
+        children: /* @__PURE__ */ jsxs7("div", { className: "relative flex items-center", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-center h-5", children: [
+            /* @__PURE__ */ jsx9(
+              "input",
+              {
+                ref,
+                id: checkboxId,
+                type: "checkbox",
+                checked: isChecked,
+                onChange: handleInputChange,
+                disabled,
+                className: "sr-only",
+                ...props
+              }
+            ),
+            disabled ? /* @__PURE__ */ jsx9(ColorIcCheckDim_default, { width: 18, height: 18 }) : /* @__PURE__ */ jsx9(
+              "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__ */ jsx9("span", { className: `${getTypeCheckedIconClass()} flex items-center justify-center`, children: /* @__PURE__ */ jsx9(
+                  "svg",
+                  {
+                    width: "18",
+                    height: "18",
+                    viewBox: "0 0 20 20",
+                    fill: "none",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    children: /* @__PURE__ */ jsx9(
+                      "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__ */ jsx9("div", { className: `text-sm ${type === "outline" ? "ml-4" : "ml-8"}`, children: /* @__PURE__ */ jsx9(
+            "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
+import { jsx as jsx10 } from "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__ */ jsx10(
+    "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
+import { useState as useState4, useEffect as useEffect4 } from "react";
+
+// src/components/ui/Stack/Stack.tsx
+import clsx from "clsx";
+import { Children, isValidElement, forwardRef as forwardRef2 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Stack = forwardRef2(
+  ({
+    direction = "col",
+    justify,
+    align,
+    even = false,
+    className = "",
+    children,
+    gap,
+    rowGap = 0,
+    columnGap = 0,
+    wFull = false,
+    hFull = false,
+    onClick,
+    childSizes,
+    flexWrap = false
+  }, ref) => {
+    const classes = clsx(
+      "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 = 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__ */ jsx11("div", { style: sizeStyle2 }, `spacer-${index}`));
+          }
+          continue;
+        }
+        if (!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__ */ jsx11("div", { style: sizeStyle, children: child }, index)
+        );
+      }
+      return result;
+    };
+    const gapStyle = gap ? { gap: toRemFunction2(gap) } : { rowGap: toRemFunction2(rowGap), columnGap: toRemFunction2(columnGap) };
+    return /* @__PURE__ */ jsx11(
+      "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
+import { jsx as jsx12 } from "react/jsx-runtime";
+function RequiredDot() {
+  return /* @__PURE__ */ jsx12("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
+import { jsx as jsx13, jsxs as jsxs8 } from "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__ */ jsxs8(
+    "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__ */ jsx13(Text, { size: "body14", color: "primaryText", fontWeight: fontWeight2, children: label }),
+        subText,
+        tooltip && /* @__PURE__ */ jsx13(Tooltip_default, { tooltipInfo: tooltip }),
+        required && /* @__PURE__ */ jsx13(RequiredDot_default, {})
+      ]
+    }
+  );
+};
+var Label_default = Label;
+
+// src/components/ui/Input/Input.tsx
+import { jsx as jsx14, jsxs as jsxs9 } from "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__ */ jsxs9(
+    Stack_default,
+    {
+      direction,
+      wFull: fullWidth,
+      gap: direction === "row" ? 14 : 4,
+      align: direction === "row" ? "center" : "start",
+      children: [
+        /* @__PURE__ */ jsx14(
+          Label_default,
+          {
+            label,
+            isDot,
+            width: labelWidth,
+            required: props.required,
+            inputId,
+            tooltip,
+            labelHidden
+          }
+        ),
+        /* @__PURE__ */ jsxs9(
+          Stack_default,
+          {
+            gap: 5,
+            className: `${fullWidth ? "flex-auto" : ""} relative`,
+            wFull: direction === "row" ? false : fullWidth,
+            children: [
+              /* @__PURE__ */ jsxs9("div", { className: "relative w-full", children: [
+                /* @__PURE__ */ jsx14(
+                  "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__ */ jsx14(
+                  "div",
+                  {
+                    className: `absolute inset-y-0 right-0 flex items-center pr-12 ${onRightIconClick ? "cursor-pointer" : "pointer-events-none"}`,
+                    onClick: onRightIconClick,
+                    children: /* @__PURE__ */ jsx14("img", { src: rightIcon, alt: "icon", width: 16, height: 16 })
+                  }
+                )
+              ] }),
+              description && /* @__PURE__ */ jsx14(Text, { size: "body12", color: "gray", children: description })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var Input_default = Input;
+
+// src/components/ui/SelectBox/SelectBox.tsx
+import { forwardRef as forwardRef3, useState as useState3, useRef, useEffect as useEffect3 } from "react";
+
+// src/assets/colorIcon/ColorIcArrow.tsx
+import { jsx as jsx15 } from "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__ */ jsx15(
+    "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__ */ jsx15(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: "0 0 14 14",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx15(
+            "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
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var SelectBox = forwardRef3(
+  ({
+    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] = useState3(false);
+    const [dropdownPosition, setDropdownPosition] = useState3(
+      "bottom"
+    );
+    const dropdownRef = useRef(null);
+    const selectButtonRef = 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";
+      }
+    };
+    useEffect3(() => {
+      if (isOpen) {
+        const position = calculateDropdownPosition();
+        setDropdownPosition(position);
+      }
+    }, [isOpen, options.length]);
+    useEffect3(() => {
+      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__ */ jsxs10(
+      Stack_default,
+      {
+        ref,
+        direction,
+        wFull: fullWidth,
+        gap: direction === "row" ? 14 : 4,
+        align: direction === "row" ? "center" : "start",
+        children: [
+          /* @__PURE__ */ jsx16(
+            Label_default,
+            {
+              isDot,
+              label,
+              required,
+              inputId: selectId,
+              labelHidden,
+              width: labelWidth,
+              tooltip
+            }
+          ),
+          /* @__PURE__ */ jsx16(
+            Stack_default,
+            {
+              gap: 10,
+              className: "flex-auto relative",
+              wFull: direction === "row" ? false : fullWidth,
+              children: /* @__PURE__ */ jsxs10(
+                "div",
+                {
+                  ref: dropdownRef,
+                  className: `relative ${fullWidth ? "w-full" : ""}`,
+                  style: !fullWidth ? {
+                    minWidth,
+                    width: customWidth ? `${toRemFunction2(customWidth)}` : "100%"
+                  } : {},
+                  children: [
+                    /* @__PURE__ */ jsx16(
+                      "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__ */ jsxs10("div", { className: "flex items-center justify-between h-full", children: [
+                          /* @__PURE__ */ jsxs10("div", { className: "flex items-center space-x-2 h-full", children: [
+                            selectedOption?.icon && /* @__PURE__ */ jsx16("span", { className: "flex-shrink-0", children: selectedOption.icon }),
+                            /* @__PURE__ */ jsx16(
+                              "span",
+                              {
+                                className: `block truncate leading-36 ${!value && selectedOption?.label !== "\uC804\uCCB4" ? "text-secondaryText" : "text-primaryText"}`,
+                                children: selectedOption?.label || placeholder
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsx16(
+                            ColorIcArrow_default,
+                            {
+                              isOpen,
+                              rotate: isOpen ? 270 : 90,
+                              color: "text"
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    isOpen && /* @__PURE__ */ jsx16(
+                      "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__ */ jsx16("ul", { className: "py-4", role: "listbox", children: options.map((option, index) => {
+                          if (option.divider) {
+                            return /* @__PURE__ */ jsx16(Divider_default, { className: "my-10" }, index);
+                          }
+                          return /* @__PURE__ */ jsx16(
+                            "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__ */ jsxs10("div", { className: "flex items-center space-x-2", children: [
+                                option.icon && /* @__PURE__ */ jsx16("span", { className: "flex-shrink-0", children: option.icon }),
+                                /* @__PURE__ */ jsxs10("div", { className: "flex-1", children: [
+                                  /* @__PURE__ */ jsx16("div", { className: "font-medium", children: option.label }),
+                                  option.description && /* @__PURE__ */ jsx16("div", { className: "text-sm text-gray", children: option.description })
+                                ] })
+                              ] })
+                            },
+                            option.value
+                          );
+                        }) })
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SelectBox.displayName = "SelectBox";
+var SelectBox_default = SelectBox;
+
+// src/components/ui/EmailInput/EmailInput.tsx
+import { jsx as jsx17, jsxs as jsxs11 } from "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] = useState4("");
+  const [domain, setDomain] = useState4("");
+  const [selectedDomain, setSelectedDomain] = useState4("");
+  const [isCustomDomain, setIsCustomDomain] = useState4(false);
+  const [isFocused, setIsFocused] = useState4(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" }
+  ];
+  useEffect4(() => {
+    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__ */ jsx17("div", { className: `${fullWidth ? "w-full" : ""}`, "aria-required": required, children: /* @__PURE__ */ jsxs11(
+    Stack_default,
+    {
+      direction,
+      wFull: fullWidth,
+      gap: direction === "row" ? 14 : 4,
+      align: direction === "row" ? "center" : "start",
+      className,
+      children: [
+        !labelHidden && /* @__PURE__ */ jsx17(Label_default, { label, required }),
+        /* @__PURE__ */ jsx17(
+          Stack_default,
+          {
+            gap: 10,
+            className: "flex-auto relative",
+            wFull: direction === "row" ? false : fullWidth,
+            children: /* @__PURE__ */ jsxs11(
+              "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__ */ jsx17(
+                    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__ */ jsx17("span", { className: `px-10 flex items-center`, children: "@" }),
+                  isCustomDomain && /* @__PURE__ */ jsx17(
+                    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__ */ jsx17(
+                    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
+import { forwardRef as forwardRef4, useState as useState5, useRef as useRef2, useEffect as useEffect5 } from "react";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var MultiSelectCheckbox = forwardRef4(
+  ({
+    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] = useState5(false);
+    const [tempSelectedValues, setTempSelectedValues] = useState5(toSafeArray(value));
+    const [originalValues, setOriginalValues] = useState5(
+      toSafeArray(value)
+    );
+    const [dropdownPosition, setDropdownPosition] = useState5(
+      "bottom"
+    );
+    const dropdownRef = useRef2(null);
+    const selectButtonRef = useRef2(null);
+    const selectId = id || `multi-select-${Math.random().toString(36).substring(2, 9)}`;
+    useEffect5(() => {
+      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";
+      }
+    };
+    useEffect5(() => {
+      if (isOpen) {
+        const position = calculateDropdownPosition();
+        setDropdownPosition(position);
+      }
+    }, [isOpen, options.length]);
+    useEffect5(() => {
+      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__ */ jsxs12(
+      Stack_default,
+      {
+        ref,
+        direction,
+        wFull: fullWidth,
+        gap: direction === "row" ? 14 : 4,
+        align: direction === "row" ? "center" : "start",
+        children: [
+          /* @__PURE__ */ jsx18(
+            Label_default,
+            {
+              isDot,
+              label,
+              required,
+              inputId: selectId,
+              labelHidden,
+              width: labelWidth,
+              tooltip
+            }
+          ),
+          /* @__PURE__ */ jsx18(
+            Stack_default,
+            {
+              gap: 10,
+              className: "flex-auto relative",
+              wFull: direction === "row" ? false : fullWidth,
+              children: /* @__PURE__ */ jsxs12(
+                "div",
+                {
+                  ref: dropdownRef,
+                  className: `relative ${fullWidth ? "w-full" : ""}`,
+                  style: !fullWidth ? {
+                    minWidth,
+                    width: customWidth ? `${toRemFunction2(customWidth)}` : "100%"
+                  } : {},
+                  children: [
+                    /* @__PURE__ */ jsx18(
+                      "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__ */ jsxs12("div", { className: "flex items-center justify-between h-full", children: [
+                          /* @__PURE__ */ jsx18(
+                            "span",
+                            {
+                              className: `block truncate leading-36 ${tempSelectedValues.length === 0 ? "text-secondaryText" : "text-primaryText"}`,
+                              children: getDisplayText()
+                            }
+                          ),
+                          /* @__PURE__ */ jsx18(
+                            ColorIcArrow_default,
+                            {
+                              isOpen,
+                              rotate: isOpen ? 270 : 90,
+                              color: "text"
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    isOpen && /* @__PURE__ */ jsxs12(
+                      "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__ */ jsx18(
+                            "div",
+                            {
+                              className: " py-8 px-16 cursor-pointer hover:bg-gray1",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleSelectAll();
+                              },
+                              children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-8 pointer-events-none", children: [
+                                /* @__PURE__ */ jsx18(Checkbox_default, { checked: isAllSelected, onChange: () => {
+                                } }),
+                                /* @__PURE__ */ jsx18(Text, { children: "\uC804\uCCB4" })
+                              ] })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx18("div", { className: "px-10", children: /* @__PURE__ */ jsx18(Divider_default, {}) }),
+                          /* @__PURE__ */ jsx18("div", { className: "max-h-200 overflow-auto py-4", children: /* @__PURE__ */ jsx18("ul", { role: "listbox", children: options.map((option) => {
+                            const isChecked = tempSelectedValues.includes(
+                              option.value
+                            );
+                            return /* @__PURE__ */ jsx18(
+                              "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__ */ jsxs12("div", { className: "flex items-center gap-8 pointer-events-none", children: [
+                                  /* @__PURE__ */ jsx18(
+                                    Checkbox_default,
+                                    {
+                                      checked: isChecked,
+                                      onChange: () => {
+                                      },
+                                      disabled: option.disabled
+                                    }
+                                  ),
+                                  option.color && /* @__PURE__ */ jsx18(
+                                    "div",
+                                    {
+                                      className: `w-16 h-16 rounded-full flex-shrink-0 bg-${option.color}`
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx18(Text, { children: option.label })
+                                ] })
+                              },
+                              option.value
+                            );
+                          }) }) }),
+                          /* @__PURE__ */ jsx18("div", { className: "px-10", children: /* @__PURE__ */ jsx18(Divider_default, {}) }),
+                          /* @__PURE__ */ jsx18("div", { className: " p-9", children: /* @__PURE__ */ jsx18(Stack_default, { direction: "row", align: "end", justify: "end", wFull: true, children: /* @__PURE__ */ jsx18(
+                            Button_default,
+                            {
+                              variant: "lower",
+                              size: "medium",
+                              onClick: handleConfirm,
+                              children: confirmButtonText
+                            }
+                          ) }) })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MultiSelectCheckbox.displayName = "MultiSelectCheckbox";
+var MultiSelectCheckbox_default = MultiSelectCheckbox;
+
+// src/assets/colorIcon/ColorIcFormArrow.tsx
+import { jsx as jsx19 } from "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__ */ jsx19(
+    "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__ */ jsx19(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: /* @__PURE__ */ jsx19(
+            "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
+import { Fragment, jsx as jsx20, jsxs as jsxs13 } from "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__ */ jsx20(Fragment, {});
+  return /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-center gap-2 mt-8", children: [
+    /* @__PURE__ */ jsx20(
+      "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__ */ jsx20(ColorIcFormArrow_default, { rotate: 90 })
+      }
+    ),
+    pages.map(
+      (p, i) => typeof p === "number" ? /* @__PURE__ */ jsx20(
+        "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__ */ jsx20(
+        "span",
+        {
+          className: "px-10 inline-block text-gray-400 text-lg",
+          children: "..."
+        },
+        `ellipsis-${i}`
+      )
+    ),
+    /* @__PURE__ */ jsx20(
+      "span",
+      {
+        onClick: () => {
+          if (page === totalPages) return;
+          onPageChange(page);
+        },
+        className: `rounded flex p-6 ${page === totalPages ? "opacity-0 " : "cursor-pointer"} hover:bg-gray2`,
+        children: /* @__PURE__ */ jsx20(ColorIcFormArrow_default, { rotate: 270 })
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Radio/Radio.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var Radio = forwardRef5(
+  ({ label, error, className = "", id, radioWidth, checked, ...props }, ref) => {
+    const radioId = id || `radio-${Math.random().toString(36).substring(2, 9)}`;
+    return /* @__PURE__ */ jsx21(
+      "div",
+      {
+        className: "flex items-center h-36",
+        style: {
+          width: radioWidth ? `${toRemFunction2(radioWidth)}` : "auto"
+        },
+        children: /* @__PURE__ */ jsxs14("div", { className: "relative flex items-center gap-10", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx21(
+              "input",
+              {
+                ref,
+                id: radioId,
+                type: "radio",
+                className: "sr-only",
+                checked,
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsx21(
+              "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__ */ jsx21(
+                  "div",
+                  {
+                    className: ` bg-white rounded-full items-center ${checked ? "w-10 h-10 border-primary" : "w-18 h-18 border-line"}`
+                  }
+                )
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ jsx21("div", { className: "text-sm", children: /* @__PURE__ */ jsx21(
+            "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
+import { useState as useState6, useEffect as useEffect6 } from "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
+import React6 from "react";
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs15 } from "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] = useState6([]);
+  const [sortState, setSortState] = useState6(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;
+  useEffect6(() => {
+    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__ */ jsx22(
+        "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__ */ jsx22(
+        "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__ */ jsxs15(Stack_default, { direction: "row", gap: 4, align: "center", justify: "center", children: [
+            /* @__PURE__ */ jsx22(
+              Input_default,
+              {
+                type: "number",
+                textAlign: "right",
+                direction: "row",
+                value: String(value),
+                customWidth: 120,
+                onChange: (e) => {
+                  onChangeInput?.(
+                    data.id,
+                    String(e.target.value),
+                    headerKey
+                  );
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx22(Text, { children: "\uC6D0" })
+          ] })
+        },
+        `${rowIndex}-${colIndex}`
+      );
+    }
+    if (checkboxKeys?.includes(headerKey)) {
+      return /* @__PURE__ */ jsx22(
+        "td",
+        {
+          className: `${getMergedCellClassName(rowSpan)} ${noWrapKeys?.includes(headerKey) ? "whitespace-nowrap" : ""}`,
+          rowSpan: rowSpan > 1 ? rowSpan : void 0,
+          children: /* @__PURE__ */ jsx22(Stack_default, { direction: "row", gap: 4, align: "center", justify: "start", children: /* @__PURE__ */ jsx22(
+            Checkbox_default,
+            {
+              checked: value,
+              onChange: (e) => onChangeCheckbox?.(
+                data.id,
+                e.target.checked,
+                headerKey
+              )
+            }
+          ) })
+        },
+        `${rowIndex}-${colIndex}`
+      );
+    }
+    if (amountKeys?.includes(headerKey)) {
+      return /* @__PURE__ */ jsxs15(
+        "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__ */ jsx22(
+        "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__ */ jsx22(
+        "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 (React6.isValidElement(value)) {
+      return /* @__PURE__ */ jsx22(
+        "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__ */ jsx22(Stack_default, { direction: "row", gap: 8, align: "center", children: Object.entries(value).map(
+        ([key, val], index) => {
+          if (key === "image" && val) {
+            return /* @__PURE__ */ jsx22(
+              "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__ */ jsx22(
+            "span",
+            {
+              className: `${key === "name" || key === "title" ? "" : ""} `,
+              children: val?.toString() || ""
+            },
+            `${key}-${index}`
+          );
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsx22(
+      "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__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22(
+        "td",
+        {
+          colSpan: colSpanCount,
+          className: "text-center border-b border-line px-20 py-8",
+          children: emptyMessage
+        }
+      ) });
+    }
+    return sortedData.map((data, rowIndex) => /* @__PURE__ */ jsxs15(
+      "tr",
+      {
+        className: `${mergeDuplicateKeys.length === 0 ? "hover:bg-gray1" : ""} ${isCheckboxOption && mergeDuplicateKeys.length === 0 && selectedIds.includes(String(data.id)) && "bg-primary5"}`,
+        children: [
+          isCheckboxOption && /* @__PURE__ */ jsx22("td", { className: "border-b border-line px-20 py-8 text-center w-30 ", children: /* @__PURE__ */ jsx22(
+            Checkbox_default,
+            {
+              checked: selectedIds.includes(String(data.id)),
+              disabled: disabledCheckboxCondition?.(data) || false,
+              onChange: () => handleSelectItem(String(data.id))
+            }
+          ) }),
+          isRadioOption && /* @__PURE__ */ jsx22("td", { className: "border-b border-line px-20 py-8 text-center w-50", children: /* @__PURE__ */ jsx22(
+            Radio_default,
+            {
+              checked: selectedIds.includes(String(data.id)),
+              onChange: () => handleSelectRadioItem(String(data.id))
+            }
+          ) }),
+          isModify && /* @__PURE__ */ jsx22("td", { className: "border-b border-line px-20 py-8 text-center w-60", children: /* @__PURE__ */ jsxs15("div", { className: "flex justify-center gap-1", children: [
+            /* @__PURE__ */ jsx22(
+              "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__ */ jsx22(
+              "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
+    ));
+  };
+  useEffect6(() => {
+    if (selectedIds.length > 0) {
+      setSelectedIds([]);
+    }
+  }, [datas]);
+  return /* @__PURE__ */ jsx22("div", { className: "w-full", children: /* @__PURE__ */ jsx22("div", { className: `${overWidth ? "overflow-x-auto" : ""}`, children: /* @__PURE__ */ jsxs15(
+    "table",
+    {
+      className: "border-collapse border-line border-t w-full table",
+      style: {
+        minWidth: overWidth ? toRemFunction2(overWidth) : "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsxs15("tr", { children: [
+          isCheckboxOption && /* @__PURE__ */ jsx22("th", { className: "border-b border-line px-20 py-8 bg-gray1 text-center w-30 vertical-middle", children: /* @__PURE__ */ jsx22(
+            Checkbox_default,
+            {
+              checked: isAllSelected,
+              onChange: handleSelectAll
+            }
+          ) }),
+          isRadioOption && /* @__PURE__ */ jsx22("th", { className: "border-b border-line px-20 py-8 bg-gray1 text-center w-30", children: "\uC120\uD0DD" }),
+          isModify && /* @__PURE__ */ jsx22("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__ */ jsx22(
+              "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__ */ jsxs15(Fragment2, { children: [
+                  typeof title === "string" ? /* @__PURE__ */ jsx22("span", { children: title }) : title,
+                  requiredKeys?.includes(headerKey) && /* @__PURE__ */ jsx22(
+                    "span",
+                    {
+                      className: "inline-block -mt-2",
+                      style: { verticalAlign: "top" },
+                      children: /* @__PURE__ */ jsx22(RequiredDot_default, {})
+                    }
+                  ),
+                  isSortable && /* @__PURE__ */ jsxs15("div", { className: "flex flex-col inline-block ml-5 vertical-middle", children: [
+                    /* @__PURE__ */ jsx22(
+                      "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__ */ jsx22(
+                      "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__ */ jsx22("tbody", { children: renderTableBody() }),
+        footers && /* @__PURE__ */ jsx22("tfoot", { children: footers })
+      ]
+    }
+  ) }) });
+}
+var Table_default = Table;
+
+// src/constants/common.ts
+var LIST_PAGE_SIZE = 10;
+
+// src/components/ui/Table/TableTop.tsx
+import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs16 } from "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__ */ jsxs16(Stack_default, { direction: "col", gap: 6, children: [
+    (sortOptions || useCountOption || isPageCount) && /* @__PURE__ */ jsxs16(Stack_default, { direction: "row", gap: 10, justify: "between", align: "end", children: [
+      isPageCount && /* @__PURE__ */ jsx23(Stack_default, { direction: "row", gap: 10, children: /* @__PURE__ */ jsxs16(Text, { size: "body14", fontWeight: "bold", children: [
+        "\uCD1D",
+        "\xA0",
+        /* @__PURE__ */ jsx23(Text, { size: "body14", fontWeight: "bold", color: "primary", children: count }),
+        countText
+      ] }) }),
+      /* @__PURE__ */ jsxs16(Stack_default, { direction: "row", gap: 10, align: "center", children: [
+        rightButtons,
+        sortOptions && /* @__PURE__ */ jsx23(
+          SelectBox_default,
+          {
+            value: sortOptionValue,
+            options: sortOptions,
+            customWidth: 160,
+            onChange: (value) => {
+              if (onChangeSort) {
+                onChangeSort(value);
+              }
+            }
+          }
+        ),
+        useCountOption && /* @__PURE__ */ jsx23(
+          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__ */ jsxs16(Fragment3, { children: [
+      useDivider && isPageCount && /* @__PURE__ */ jsx23(Divider_default, {}),
+      /* @__PURE__ */ jsxs16(Stack_default, { direction: "row", gap: 10, justify: "between", children: [
+        /* @__PURE__ */ jsx23(Stack_default, { direction: "row", gap: 4, children: leftButtons }),
+        /* @__PURE__ */ jsx23(Stack_default, { direction: "row", gap: 4, children: handleRegist && /* @__PURE__ */ jsx23(
+          Button_default,
+          {
+            size: "medium",
+            variant: "primary",
+            onClick: () => {
+              handleRegist?.();
+            },
+            children: registText
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+var TableTop_default = TableTop;
+
+// src/components/ui/Table/CommonTable.tsx
+import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+function CommonTable({ tableTop, tableBody, pagination }) {
+  return /* @__PURE__ */ jsx24(Stack_default, { direction: "col", gap: 20, wFull: true, children: /* @__PURE__ */ jsxs17(Stack_default, { direction: "col", gap: 7, children: [
+    tableTop && tableTop,
+    tableBody && tableBody,
+    pagination && pagination
+  ] }) });
+}
+var CommonTable_default = CommonTable;
+
+// src/components/ui/Tag/Tag.tsx
+import { jsx as jsx25 } from "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__ */ jsx25("div", { id, style: styles, className, ...props, children });
+}
+
+// src/components/ui/TagInput/TagInput.tsx
+import { useState as useState7, forwardRef as forwardRef6, useMemo } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragOverlay,
+  MeasuringStrategy
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  rectSortingStrategy
+} from "@dnd-kit/sortable";
+import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
+var SimpleTag = ({
+  tag,
+  index,
+  onRemove,
+  disabled
+}) => {
+  return /* @__PURE__ */ jsxs18("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__ */ jsx26("span", { className: "cursor-pointer", onClick: () => onRemove(index), children: /* @__PURE__ */ jsx26(ColorIcTagClose_default, { width: 10, height: 10, color: "text" }) }),
+    /* @__PURE__ */ jsx26("span", { children: tag })
+  ] });
+};
+var SortableTag = ({
+  tag,
+  index,
+  onRemove,
+  disabled
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: tag });
+  const style = {
+    transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : void 0,
+    transition,
+    opacity: isDragging ? 0 : 1
+    // 드래그 중인 원본 항목은 투명하게 처리
+  };
+  return /* @__PURE__ */ jsxs18(
+    "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__ */ jsx26(
+          "span",
+          {
+            onPointerDown: (e) => {
+              e.stopPropagation();
+              onRemove(index);
+            },
+            children: /* @__PURE__ */ jsx26(ColorIcTagClose_default, { width: 10, height: 10, color: "text" })
+          }
+        ),
+        /* @__PURE__ */ jsx26("span", { children: tag })
+      ]
+    }
+  );
+};
+var TagInput = forwardRef6(
+  ({
+    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] = useState7("");
+    const [activeId, setActiveId] = useState7(null);
+    const [draggedWidth, setDraggedWidth] = useState7(null);
+    const activeTag = useMemo(
+      () => tags.find((tag) => tag === activeId),
+      [activeId, tags]
+    );
+    const inputId = id || `tag-input-${Math.random().toString(36).substring(2, 9)}`;
+    const sensors = useSensors(
+      useSensor(PointerSensor),
+      useSensor(KeyboardSensor, {
+        coordinateGetter: 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(arrayMove(tags, oldIndex, newIndex));
+      }
+      setActiveId(null);
+      setDraggedWidth(null);
+    };
+    const handleDragCancel = () => {
+      setActiveId(null);
+      setDraggedWidth(null);
+    };
+    if (!draggable) {
+      return /* @__PURE__ */ jsxs18(Stack_default, { direction: "col", gap: 4, className, wFull: true, children: [
+        /* @__PURE__ */ jsx26(
+          Label_default,
+          {
+            label,
+            required,
+            tooltip,
+            inputId,
+            labelHidden
+          }
+        ),
+        /* @__PURE__ */ jsx26(
+          "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__ */ jsx26(
+              SimpleTag,
+              {
+                tag,
+                index,
+                onRemove: removeTag,
+                disabled
+              },
+              tag
+            ))
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs18(Stack_default, { direction: "col", gap: 4, className, wFull: true, children: [
+      /* @__PURE__ */ jsx26(
+        Label_default,
+        {
+          label,
+          required,
+          tooltip,
+          inputId,
+          labelHidden
+        }
+      ),
+      /* @__PURE__ */ jsxs18(
+        DndContext,
+        {
+          sensors,
+          collisionDetection: closestCenter,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+          onDragCancel: handleDragCancel,
+          measuring: {
+            droppable: {
+              strategy: MeasuringStrategy.Always
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx26(SortableContext, { items: tags, strategy: rectSortingStrategy, children: /* @__PURE__ */ jsxs18(
+              "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__ */ jsx26(
+                    SortableTag,
+                    {
+                      tag,
+                      index,
+                      onRemove: removeTag,
+                      disabled
+                    },
+                    tag
+                  )),
+                  !onlyView && /* @__PURE__ */ jsx26(
+                    "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__ */ jsx26(DragOverlay, { dropAnimation: null, adjustScale: false, children: activeTag ? /* @__PURE__ */ jsxs18(
+              "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__ */ jsx26("span", { children: /* @__PURE__ */ jsx26(ColorIcTagClose_default, { width: 10, height: 10, color: "text" }) }),
+                  /* @__PURE__ */ jsx26("span", { children: activeTag })
+                ]
+              }
+            ) : null })
+          ]
+        }
+      )
+    ] });
+  }
+);
+TagInput.displayName = "TagInput";
+var TagInput_default = TagInput;
+
+// src/components/ui/TextArea/TextArea.tsx
+import { jsx as jsx27, jsxs as jsxs19 } from "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__ */ jsxs19(
+    Stack_default,
+    {
+      direction,
+      wFull: fullWidth,
+      gap: direction === "row" ? 14 : 4,
+      align: direction === "row" ? "center" : "start",
+      children: [
+        /* @__PURE__ */ jsx27(
+          Label_default,
+          {
+            label,
+            required,
+            width: labelWidth,
+            labelHidden
+          }
+        ),
+        /* @__PURE__ */ jsxs19(
+          Stack_default,
+          {
+            gap: 0,
+            className: "flex-auto relative",
+            wFull: direction === "row" ? false : fullWidth,
+            children: [
+              /* @__PURE__ */ jsx27(
+                "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__ */ jsxs19(Text, { color: "primaryText", justify: "end", children: [
+                /* @__PURE__ */ jsx27(Text, { color: "red", children: props.value?.toString().length || 0 }),
+                "/",
+                maxLength
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var TextArea_default = TextArea;
+
+// src/components/ui/TextButton/TextButton.tsx
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+function TextButton({
+  text,
+  isOpen = false,
+  onClick,
+  color = "primaryText",
+  type = "arrow",
+  size = "body14"
+}) {
+  return /* @__PURE__ */ jsxs20(
+    Stack_default,
+    {
+      direction: "row",
+      align: "center",
+      justify: "center",
+      onClick,
+      className: "cursor-pointer",
+      children: [
+        /* @__PURE__ */ jsx28(
+          Text,
+          {
+            size,
+            fontWeight: "bold",
+            color,
+            textDecoration: type === "underline" ? "underline" : "none",
+            className: "leading-none",
+            children: text
+          }
+        ),
+        type === "arrow" && /* @__PURE__ */ jsx28(ColorIcArrow_default, { isOpen, color })
+      ]
+    }
+  );
+}
+var TextButton_default = TextButton;
+
+// src/components/ui/Toggle/Toggle.tsx
+import { forwardRef as forwardRef7, useRef as useRef3, useState as useState8, useEffect as useEffect7 } from "react";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+var Toggle = forwardRef7(
+  ({
+    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 = useRef3(null);
+    const offRef = useRef3(null);
+    const [sliderStyle, setSliderStyle] = useState8({});
+    const handleToggle = () => {
+      if (!disabled && onChange) {
+        onChange(!checked);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleToggle();
+      }
+    };
+    useEffect7(() => {
+      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__ */ jsxs21(Stack_default, { direction: "row", align: "center", gap: 14, className, children: [
+        label && /* @__PURE__ */ jsx29(
+          Label_default,
+          {
+            label,
+            width: labelWidth,
+            required,
+            tooltip,
+            isDot
+          }
+        ),
+        /* @__PURE__ */ jsxs21(Stack_default, { direction: "col", gap: 4, className: "flex-auto", children: [
+          /* @__PURE__ */ jsxs21(
+            "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__ */ jsx29(
+                  "div",
+                  {
+                    className: "absolute h-[calc(100%-6px)] top-[3px] bg-primary rounded-full transition-all duration-300 ease-in-out",
+                    style: sliderStyle
+                  }
+                ),
+                /* @__PURE__ */ jsx29(
+                  "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__ */ jsx29(
+                  "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__ */ jsx29("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__ */ jsxs21(Stack_default, { direction: "row", gap: 10, align: "center", className, children: [
+      label && /* @__PURE__ */ jsx29(Label_default, { label, required, tooltip }),
+      /* @__PURE__ */ jsxs21(Stack_default, { direction: "col", gap: 4, className: "flex-auto", children: [
+        /* @__PURE__ */ jsx29(
+          "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__ */ jsx29(
+              "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__ */ jsx29("span", { className: "text-red text-body12", children: error })
+      ] })
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
+var Toggle_default = Toggle;
+
+// src/components/ui/ToolTipBox/ToolTipBox.tsx
+import { useState as useState9, useRef as useRef4, useEffect as useEffect8 } from "react";
+
+// src/assets/colorIcon/ColorIcTooltipArrow.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function ColorIcTooltipArrow({
+  width = 14,
+  height = 14,
+  color = "primary"
+}) {
+  return /* @__PURE__ */ jsx30(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { color: `var(--color-${color})` },
+      children: /* @__PURE__ */ jsx30(
+        "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
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+function ColorIcTooltipBlue({
+  width = 16,
+  height = 16,
+  color = "primary"
+}) {
+  return /* @__PURE__ */ jsxs22(
+    "svg",
+    {
+      width,
+      height,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { color: `var(--color-${color})` },
+      children: [
+        /* @__PURE__ */ jsxs22("g", { clipPath: "url(#clip0_175_11783)", children: [
+          /* @__PURE__ */ jsx31(
+            "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__ */ jsx31(
+            "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__ */ jsx31(
+            "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__ */ jsx31("defs", { children: /* @__PURE__ */ jsx31("clipPath", { id: "clip0_175_11783", children: /* @__PURE__ */ jsx31("rect", { width: "16", height: "16", fill: "white" }) }) })
+      ]
+    }
+  );
+}
+var ColorIcTooltipBlue_default = ColorIcTooltipBlue;
+
+// src/components/ui/ToolTipBox/ToolTipBox.tsx
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+function ToolTipBox({ title, children }) {
+  const [isOpen, setIsOpen] = useState9(false);
+  const contentRef = useRef4(null);
+  const [contentHeight, setContentHeight] = useState9(0);
+  useEffect8(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [children]);
+  return /* @__PURE__ */ jsx32(
+    BorderRadiusBox_default,
+    {
+      borderColor: "primary3Border",
+      bgColor: "primary3",
+      paddingX: 20,
+      paddingY: 12,
+      children: /* @__PURE__ */ jsxs23(Stack_default, { direction: "col", children: [
+        /* @__PURE__ */ jsxs23(
+          Stack_default,
+          {
+            direction: "row",
+            gap: 3,
+            align: "center",
+            justify: "between",
+            onClick: () => {
+              setIsOpen(!isOpen);
+            },
+            className: "cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsxs23(Stack_default, { direction: "row", gap: 3, align: "center", children: [
+                /* @__PURE__ */ jsx32(ColorIcTooltipBlue_default, { width: 14, height: 14 }),
+                /* @__PURE__ */ jsx32(Text, { size: "body14", fontWeight: "bold", color: "primary", children: title })
+              ] }),
+              /* @__PURE__ */ jsx32("span", { className: `w-16 h-16 cursor-pointer transition-transform duration-300 ${isOpen ? "" : "rotate-180"}`, children: /* @__PURE__ */ jsx32(ColorIcTooltipArrow_default, { width: 14, height: 14, color: "primary" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx32(
+          "div",
+          {
+            className: "overflow-hidden transition-all duration-300 ease-in-out",
+            style: {
+              height: isOpen ? `${contentHeight}px` : "0px",
+              opacity: isOpen ? 1 : 0
+            },
+            children: /* @__PURE__ */ jsx32("div", { ref: contentRef, className: "grid grid-cols-2 gap-2 mt-4", children: children.map((child, index) => /* @__PURE__ */ jsx32(
+              BulletText_default,
+              {
+                label: child,
+                textColor: "primary",
+                textSize: "body12",
+                fontWeight: "regular",
+                bulletColor: "dark6"
+              },
+              index
+            )) })
+          }
+        )
+      ] })
+    }
+  );
+}
+var ToolTipBox_default = ToolTipBox;
+
+// src/components/ui/TooltipInfo/TooltipInfo.tsx
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+function TooltipInfo({ title, children }) {
+  return /* @__PURE__ */ jsx33(
+    BorderRadiusBox_default,
+    {
+      radius: 6,
+      paddingX: 0,
+      paddingY: 0,
+      className: " border-none overflow-hidden",
+      children: /* @__PURE__ */ jsx33("div", { style: { backgroundColor: "#4B5563E5" }, className: "px-12 py-10", children: /* @__PURE__ */ jsxs24(Stack_default, { gap: 5, direction: "col", children: [
+        /* @__PURE__ */ jsx33(
+          Text,
+          {
+            size: "body14",
+            fontWeight: "bold",
+            color: "white",
+            className: "whitespace-nowrap",
+            style: {
+              lineHeight: "1.4"
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx33(Stack_default, { gap: 2, direction: "col", children: children.map((child, index) => /* @__PURE__ */ jsxs24(
+          "div",
+          {
+            className: `whitespace-nowrap flex items-baseline flex-none relative w-full`,
+            children: [
+              /* @__PURE__ */ jsx33(
+                "span",
+                {
+                  className: "inline-block w-3 h-3 bg-dark6 mr-4 ",
+                  style: {
+                    verticalAlign: "top",
+                    position: "relative",
+                    top: "-2px"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx33(
+                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
+import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+function ColorIcInfo({
+  width = 12,
+  height = 12,
+  color = "gray"
+}) {
+  return /* @__PURE__ */ jsx34(
+    "span",
+    {
+      style: {
+        color: `var(--color-${color})`,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsxs25(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: "0 0 12 12",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx34("rect", { width: "12", height: "12", rx: "6", fill: "currentColor" }),
+            /* @__PURE__ */ jsxs25("g", { clipPath: "url(#clip0_603_10414)", children: [
+              /* @__PURE__ */ jsx34(
+                "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__ */ jsx34(
+                "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__ */ jsx34("defs", { children: /* @__PURE__ */ jsx34("clipPath", { id: "clip0_603_10414", children: /* @__PURE__ */ jsx34(
+              "rect",
+              {
+                width: "7.63636",
+                height: "7.63636",
+                fill: "white",
+                transform: "translate(2 2)"
+              }
+            ) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+var ColorIcInfo_default = ColorIcInfo;
+
+// src/assets/colorIcon/ColorIcWarning.tsx
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+function ColorIcWarning({
+  width = 16,
+  height = 16,
+  color = "warning"
+}) {
+  return /* @__PURE__ */ jsx35(
+    "span",
+    {
+      style: {
+        color: `var(--color-${color})`,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsxs26(
+        "svg",
+        {
+          width,
+          height,
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx35("rect", { width: "16", height: "16", rx: "8", fill: "currentColor" }),
+            /* @__PURE__ */ jsx35(
+              "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__ */ jsx35(
+              "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__ */ jsx35(
+              "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
+import { jsx as jsx36, jsxs as jsxs27 } from "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__ */ jsx36(ColorIcInfo_default, { width: iconSize, height: iconSize }) : /* @__PURE__ */ jsx36(ColorIcWarning_default, { width: iconSize, height: iconSize });
+  return /* @__PURE__ */ jsx36(
+    "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__ */ jsx36(
+        "div",
+        {
+          className: `relative ${colorClass} inline-block text-body12 font-bold px-12 py-8 rounded-warn touch-none`,
+          children: /* @__PURE__ */ jsxs27(Stack_default, { direction: "row", align: "start", gap: 4, children: [
+            /* @__PURE__ */ jsx36("span", { className: `${color === "text" ? "mt-4" : "mt-3"}`, children: icon }),
+            children
+          ] })
+        }
+      )
+    }
+  );
+};
+var WarningBox_default = WarningBox;
 export {
+  BorderRadiusBox_default as BorderRadiusBox,
+  BulletText_default as BulletText,
+  Button_default as Button,
+  Checkbox_default as Checkbox,
+  CommonTable_default as CommonTable,
+  Divider_default as Divider,
+  EmailInput_default as EmailInput,
+  Input_default as Input,
+  Label_default as Label,
+  MultiSelectCheckbox_default as MultiSelectCheckbox,
+  Paging,
+  Radio_default as Radio,
+  RequiredDot_default as RequiredDot,
+  SelectBox_default as SelectBox,
+  Stack_default as Stack,
+  Table_default as Table,
+  TableTop_default as TableTop,
+  Tag,
+  TagInput_default as TagInput,
   Text,
+  TextArea_default as TextArea,
+  TextButton_default as TextButton,
+  Toggle_default as Toggle,
+  ToolTipBox_default as ToolTipBox,
+  Tooltip_default as Tooltip,
+  TooltipInfo_default as TooltipInfo,
+  WarningBox_default as WarningBox,
   alignSelfs,
   aligns,
   colors,