@hivcd-printshop/design-system 1.3.3 → 1.4.0

package/dist/index.mjs

@@ -376,8 +376,33 @@ var BackButton = ({ onClick, className }) => {
   );
 };
 
-// src/components/CTA/CTA.tsx
+// src/components/Badge/Badge.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
+var variantStyles = {
+  warning: "bg-sub-warning text-strong",
+  restriction: "bg-sub-restriction text-strong",
+  outline: "bg-white border border-gray02 text-primary",
+  neutral: "bg-gray01 text-secondary",
+  solid: "bg-black text-white"
+};
+var Badge = ({ variant = "neutral", children, className, ...props }) => {
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      className: cn(
+        "inline-flex h-8 w-fit items-center justify-center px-2 py-1",
+        "text-body3-book whitespace-nowrap select-none",
+        variantStyles[variant],
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+
+// src/components/CTA/CTA.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
 var CTA = ({
   primary = false,
   alert = false,
@@ -388,7 +413,7 @@ var CTA = ({
   forModal = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "button",
     {
       type: "button",
@@ -416,22 +441,22 @@ var CTA = ({
 };
 
 // src/components/Column/MultiColumn.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var MultiColumnMain = ({ children, className }) => {
-  return /* @__PURE__ */ jsx5("div", { className: cn("flex flex-col w-full h-full", className), children });
+  return /* @__PURE__ */ jsx6("div", { className: cn("flex flex-col w-full h-full", className), children });
 };
 var Columns = ({ children, className }) => {
   return (
     // flex 래퍼를 사용하고 하위 Column들이 flex-1을 가지게 하거나,
     // grid를 사용하여 열을 나눌 수 있어. 여기서는 flex를 활용한 균등 분할 예시야.
-    /* @__PURE__ */ jsx5("div", { className: cn("flex w-full h-full divide-x divide-gray02", className), children })
+    /* @__PURE__ */ jsx6("div", { className: cn("flex w-full h-full divide-x divide-gray02", className), children })
   );
 };
 var CTAs = ({ children, className }) => {
   if (!children) return null;
   return (
     // CTA 버튼들을 중앙에 배치하는 예시 (우측 정렬이 필요하면 justify-end 사용)
-    /* @__PURE__ */ jsx5("div", { className: cn("flex flex-col w-full h-fit", className), children })
+    /* @__PURE__ */ jsx6("div", { className: cn("flex flex-col w-full h-fit", className), children })
   );
 };
 var MultiColumn = Object.assign(MultiColumnMain, {
@@ -440,39 +465,39 @@ var MultiColumn = Object.assign(MultiColumnMain, {
 });
 
 // src/components/Column/Column.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var Column = ({ className, children, header }) => {
   return /* @__PURE__ */ jsxs3("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 py-3", className), children: [
-    header && /* @__PURE__ */ jsx6("h1", { className: cn("text-body1-medium text-primary"), children: header }),
+    header && /* @__PURE__ */ jsx7("h1", { className: cn("text-body1-medium text-primary"), children: header }),
     children
   ] });
 };
 
 // src/components/Column/ColumnContentContainer.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var ColumnContentContainer = ({ className, children }) => {
-  return /* @__PURE__ */ jsx7("div", { className: cn("flex flex-col gap-1.5 w-full h-fit", className), children });
+  return /* @__PURE__ */ jsx8("div", { className: cn("flex flex-col gap-1.5 w-full h-fit", className), children });
 };
 
 // src/components/Column/ColumnLabel.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var ColumnLabel = ({ className, children, subLabel, htmlFor }) => {
   return /* @__PURE__ */ jsxs4("label", { htmlFor, className: cn("flex gap-1.5 items-end", className), children: [
-    /* @__PURE__ */ jsx8("span", { className: cn("text-body2-regular text-tertiary"), children }),
-    subLabel && /* @__PURE__ */ jsx8("span", { className: cn("text-caption-book text-quaternary"), children: subLabel })
+    /* @__PURE__ */ jsx9("span", { className: cn("text-body2-regular text-tertiary"), children }),
+    subLabel && /* @__PURE__ */ jsx9("span", { className: cn("text-caption-book text-quaternary"), children: subLabel })
   ] });
 };
 
 // src/components/Column/ColumnText.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var ColumnTextStyle = "text-body3-book text-strong";
 var ModalTextStyle = "text-body1-regular text-primary";
 var ColumnText = ({ className, alert = false, children, onClick }) => {
-  return /* @__PURE__ */ jsx9("div", { className: cn(ColumnTextStyle, alert && "text-danger", className), onClick, children: children ? children : "-" });
+  return /* @__PURE__ */ jsx10("div", { className: cn(ColumnTextStyle, alert && "text-danger", className), onClick, children: children ? children : "-" });
 };
 
 // src/components/Column/ColumnSubTitle.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var ColumnSubTitle = ({
   className,
   children,
@@ -480,29 +505,29 @@ var ColumnSubTitle = ({
   as: Tag2 = "h2"
 }) => {
   return /* @__PURE__ */ jsxs5(Tag2, { className: cn("flex items-center justify-between gap-1.5", "w-full", className), children: [
-    /* @__PURE__ */ jsx10("span", { className: cn("text-body1-medium text-primary"), children }),
-    action && /* @__PURE__ */ jsx10("span", { className: "flex shrink-0 items-center", children: action })
+    /* @__PURE__ */ jsx11("span", { className: cn("text-body1-medium text-primary"), children }),
+    action && /* @__PURE__ */ jsx11("span", { className: "flex shrink-0 items-center", children: action })
   ] });
 };
 
 // src/components/Column/ColumnDescription.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var ColumnDescription = ({
   className,
   children,
   bullet = true
 }) => {
   return /* @__PURE__ */ jsxs6("div", { className: cn("flex items-start gap-3", className), children: [
-    bullet && /* @__PURE__ */ jsx11("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ jsx11(IconCompass, { className: "size-4" }) }),
-    /* @__PURE__ */ jsx11("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
+    bullet && /* @__PURE__ */ jsx12("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ jsx12(IconCompass, { className: "size-4" }) }),
+    /* @__PURE__ */ jsx12("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
   ] });
 };
 var ColumnDescriptionList = ({ className, children }) => {
-  return /* @__PURE__ */ jsx11("div", { className: cn("flex flex-col gap-4", className), children });
+  return /* @__PURE__ */ jsx12("div", { className: cn("flex flex-col gap-4", className), children });
 };
 
 // src/components/Form/BasicFormField.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var BasicFormField = ({
   children,
   isDanger,
@@ -511,7 +536,7 @@ var BasicFormField = ({
 }) => {
   return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col gap-1.5", className), children: [
     children,
-    isDanger && dangerText && /* @__PURE__ */ jsx12("span", { className: "text-caption-book text-danger", children: dangerText })
+    isDanger && dangerText && /* @__PURE__ */ jsx13("span", { className: "text-caption-book text-danger", children: dangerText })
   ] });
 };
 var getInputStyles = (isDanger, additionalClass) => {
@@ -522,6 +547,9 @@ var getInputStyles = (isDanger, additionalClass) => {
     "bg-white transition-colors",
     ColumnTextStyle,
     "text-primary placeholder:text-quaternary",
+    // 비활성(disabled) 상태: 배경/글자를 죽이고 커서 차단
+    "disabled:bg-gray00 disabled:text-quaternary disabled:cursor-not-allowed",
+    "disabled:placeholder:text-quaternary",
     isDanger && "border-danger",
     // 경고 시 빨간 테두리 (#E42939)
     additionalClass
@@ -530,15 +558,15 @@ var getInputStyles = (isDanger, additionalClass) => {
 };
 
 // src/components/Form/FormText.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var FormText = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx13(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx13("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ jsx14(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx14("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTextArea.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx14(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx15(
     "textarea",
     {
       className: getInputStyles(isDanger, "resize-none h-30 px-4 py-2.5 " + (className || "")),
@@ -548,19 +576,19 @@ var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
 };
 
 // src/components/Form/FormNumber.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var FormNumber = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx15(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx15("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ jsx16(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx16("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormPassword.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var FormPassword = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ jsx16(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx16("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ jsx17(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx17("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTel.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
   const handlePhoneChange = (e) => {
     const rawValue = e.target.value.replace(/[^0-9]/g, "");
@@ -572,7 +600,7 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
     e.target.value = formattedValue;
     if (onChange) onChange(e);
   };
-  return /* @__PURE__ */ jsx17(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsx18(
     "input",
     {
       type: "tel",
@@ -586,7 +614,7 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
 
 // src/components/Form/FormColor.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
 var FormColor = ({
   className,
   isDanger,
@@ -604,7 +632,7 @@ var FormColor = ({
     setInternalColor(e.target.value);
     onChange?.(e);
   };
-  return /* @__PURE__ */ jsx18(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx19(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs8(
     "label",
     {
       className: getInputStyles(
@@ -613,7 +641,7 @@ var FormColor = ({
         "flex items-center gap-2 relative focus-within:border-black focus-within:hover:bg-white" + (className || "")
       ),
       children: [
-        /* @__PURE__ */ jsx18("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ jsx18(
+        /* @__PURE__ */ jsx19("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ jsx19(
           "input",
           {
             type: "color",
@@ -623,7 +651,7 @@ var FormColor = ({
             ...props
           }
         ) }),
-        /* @__PURE__ */ jsx18("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
+        /* @__PURE__ */ jsx19("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
       ]
     }
   ) });
@@ -631,7 +659,7 @@ var FormColor = ({
 
 // src/components/Form/FormFile.tsx
 import { useState as useState3 } from "react";
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var FormFile = ({
   className,
   isDanger,
@@ -692,7 +720,7 @@ var FormFile = ({
     }
   };
   const displayFileName = selectedFile?.name || (fileUrl ? fileUrl.split("/").pop() : null);
-  return /* @__PURE__ */ jsx19(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx20(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs9(
     "div",
     {
       className: getInputStyles(
@@ -705,7 +733,7 @@ var FormFile = ({
         )
       ),
       children: [
-        displayFileName && /* @__PURE__ */ jsx19(
+        displayFileName && /* @__PURE__ */ jsx20(
           "span",
           {
             onClick: handleDownload,
@@ -715,8 +743,8 @@ var FormFile = ({
           }
         ),
         /* @__PURE__ */ jsxs9("label", { className: "shrink-0 px-1 -mx-1 cursor-pointer", children: [
-          /* @__PURE__ */ jsx19("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
-          /* @__PURE__ */ jsx19("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
+          /* @__PURE__ */ jsx20("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
+          /* @__PURE__ */ jsx20("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
         ] })
       ]
     }
@@ -724,7 +752,7 @@ var FormFile = ({
 };
 
 // src/components/Form/FormCheckBox.tsx
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var FormCheckBox = ({
   isChecked,
   setIsChecked,
@@ -744,7 +772,7 @@ var FormCheckBox = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "input",
           {
             type: "checkbox",
@@ -754,14 +782,14 @@ var FormCheckBox = ({
             ...props
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "div",
           {
             className: cn(
               "flex items-center justify-center w-5 h-5 shrink-0 rounded transition-colors",
               "group-hover:bg-gray00 group-active:bg-gray01"
             ),
-            children: /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx21(
               "div",
               {
                 className: cn(
@@ -771,12 +799,12 @@ var FormCheckBox = ({
                   // 💡 3. 키보드 Tab 이동 시 접근성 향상 (포커스 링 표시)
                   "peer-focus-visible:ring-2 peer-focus-visible:ring-black peer-focus-visible:ring-offset-1"
                 ),
-                children: isChecked && /* @__PURE__ */ jsx20(IconCheck, {})
+                children: isChecked && /* @__PURE__ */ jsx21(IconCheck, {})
               }
             )
           }
         ),
-        children && /* @__PURE__ */ jsx20("span", { className: cn("text-body3-book text-primary", textStyle), children })
+        children && /* @__PURE__ */ jsx21("span", { className: cn("text-body3-book text-primary", textStyle), children })
       ]
     }
   );
@@ -786,14 +814,14 @@ var FormCheckBox = ({
 import { useEffect, useRef, useState as useState4 } from "react";
 
 // src/components/Form/SelectBoxOption.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var SelectBoxOption = ({
   label,
   onClick,
   // selectedLabel,
   className
 }) => {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "li",
     {
       onClick,
@@ -815,7 +843,7 @@ var SelectBoxOption = ({
 };
 
 // src/components/Form/FormSelectBox.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 var FormSelectBox = ({
   options,
   value,
@@ -838,7 +866,7 @@ var FormSelectBox = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ jsx22(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs11("div", { ref: containerRef, className: "relative w-full", children: [
+  return /* @__PURE__ */ jsx23(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ jsxs11("div", { ref: containerRef, className: "relative w-full", children: [
     /* @__PURE__ */ jsxs11(
       "div",
       {
@@ -859,8 +887,8 @@ var FormSelectBox = ({
           setIsOpen((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx22("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
-          /* @__PURE__ */ jsx22(
+          /* @__PURE__ */ jsx23("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
+          /* @__PURE__ */ jsx23(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -870,7 +898,7 @@ var FormSelectBox = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx22(
+    isOpen && /* @__PURE__ */ jsx23(
       "ul",
       {
         className: cn(
@@ -880,7 +908,7 @@ var FormSelectBox = ({
           "max-h-50 overflow-y-auto"
           // 항목이 너무 많으면 스크롤 생성 (디자인 스펙: 그림자 없음)
         ),
-        children: options.map((option) => /* @__PURE__ */ jsx22(
+        children: options.map((option) => /* @__PURE__ */ jsx23(
           SelectBoxOption,
           {
             label: option,
@@ -897,7 +925,7 @@ var FormSelectBox = ({
 };
 
 // src/components/TextButton/TextButton.tsx
-import { Fragment, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var TextButton = ({
   children,
   icon,
@@ -908,9 +936,9 @@ var TextButton = ({
   ...props
 }) => {
   const content = /* @__PURE__ */ jsxs12(Fragment, { children: [
-    icon && iconPosition === "left" && /* @__PURE__ */ jsx23("span", { className: "flex shrink-0 items-center", children: icon }),
-    /* @__PURE__ */ jsx23("span", { className: cn(underline && "underline underline-offset-2"), children }),
-    icon && iconPosition === "right" && /* @__PURE__ */ jsx23("span", { className: "flex shrink-0 items-center", children: icon })
+    icon && iconPosition === "left" && /* @__PURE__ */ jsx24("span", { className: "flex shrink-0 items-center", children: icon }),
+    /* @__PURE__ */ jsx24("span", { className: cn(underline && "underline underline-offset-2"), children }),
+    icon && iconPosition === "right" && /* @__PURE__ */ jsx24("span", { className: "flex shrink-0 items-center", children: icon })
   ] });
   const classes = cn(
     "inline-flex w-fit items-center gap-1 px-1 -mx-1",
@@ -925,15 +953,15 @@ var TextButton = ({
   );
   if (props.href !== void 0) {
     const { href, ...rest } = props;
-    return /* @__PURE__ */ jsx23("a", { href, className: classes, ...rest, children: content });
+    return /* @__PURE__ */ jsx24("a", { href, className: classes, ...rest, children: content });
   }
   const buttonProps = props;
-  return /* @__PURE__ */ jsx23("button", { type: "button", className: classes, ...buttonProps, children: content });
+  return /* @__PURE__ */ jsx24("button", { type: "button", className: classes, ...buttonProps, children: content });
 };
 
 // src/components/Dropdown/Dropdown.tsx
 import { useEffect as useEffect2, useRef as useRef2, useState as useState5 } from "react";
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
   const [isOpen, setIsOpen] = useState5(false);
   const containerRef = useRef2(null);
@@ -962,8 +990,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ),
         onClick: () => setIsOpen((prev) => !prev),
         children: [
-          /* @__PURE__ */ jsx24("p", { children: selectedLabel }),
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx25("p", { children: selectedLabel }),
+          /* @__PURE__ */ jsx25(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -973,7 +1001,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx24("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ jsx24(
+    isOpen && /* @__PURE__ */ jsx25("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ jsx25(
       SelectBoxOption,
       {
         label,
@@ -989,7 +1017,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
 };
 
 // src/components/ListView/List.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 function List({
   className,
   label1,
@@ -1018,10 +1046,10 @@ function List({
       onClick,
       children: [
         /* @__PURE__ */ jsxs14("section", { className: cn("flex items-center gap-4"), children: [
-          /* @__PURE__ */ jsx25("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
-          /* @__PURE__ */ jsx25("div", { className: cn("flex items-center gap-2"), children })
+          /* @__PURE__ */ jsx26("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
+          /* @__PURE__ */ jsx26("div", { className: cn("flex items-center gap-2"), children })
         ] }),
-        /* @__PURE__ */ jsx25(
+        /* @__PURE__ */ jsx26(
           "label",
           {
             className: cn(
@@ -1033,18 +1061,18 @@ function List({
             children: label2 ? label2 : "-"
           }
         ),
-        /* @__PURE__ */ jsx25("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
+        /* @__PURE__ */ jsx26("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
       ]
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   if (!isVisible) return null;
   return /* @__PURE__ */ jsxs15("div", { className: cn("fixed inset-0 z-50"), children: [
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       "div",
       {
         "aria-hidden": true,
@@ -1052,7 +1080,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
         className: cn("fixed inset-0 z-1000 bg-[#212121]/30", onClose && "cursor-pointer")
       }
     ),
-    /* @__PURE__ */ jsx26("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsx27("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs15(
       "main",
       {
         role: "dialog",
@@ -1065,7 +1093,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
           className
         ),
         children: [
-          onClose && /* @__PURE__ */ jsx26(
+          onClose && /* @__PURE__ */ jsx27(
             "button",
             {
               type: "button",
@@ -1075,10 +1103,10 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
                 "absolute right-3 top-3 flex size-8 items-center justify-center",
                 "text-tertiary transition-colors hover:bg-gray00 active:bg-gray01 cursor-pointer"
               ),
-              children: /* @__PURE__ */ jsx26(IconClose, {})
+              children: /* @__PURE__ */ jsx27(IconClose, {})
             }
           ),
-          /* @__PURE__ */ jsx26("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+          /* @__PURE__ */ jsx27("h1", { className: cn("text-head-lg-medium text-strong"), children: header }),
           children
         ]
       }
@@ -1086,7 +1114,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   ] });
 };
 var Contents = ({ children, className }) => {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       className: cn(
@@ -1103,7 +1131,7 @@ var CTAs2 = ({ children, className, row = false }) => {
   if (!children) return null;
   return (
     // CTA 버튼들을 중앙에 배치하는 예시 (우측 정렬이 필요하면 justify-end 사용)
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx27(
       "div",
       {
         className: cn(
@@ -1122,9 +1150,9 @@ var Modal = Object.assign(ModalBase, {
 });
 
 // src/components/Modal/ModalText.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var ModalText = ({ children, className }) => {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: cn(
@@ -1140,14 +1168,14 @@ var ModalText = ({ children, className }) => {
 };
 
 // src/components/createPost/CategorySegment.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var CategorySegment = ({
   selected = false,
   label,
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       className: cn(
@@ -1167,7 +1195,7 @@ var CategorySegment = ({
 };
 
 // src/components/createPost/CategorySegmentedControl.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var categorySegments = {
   info: ["\uACF5\uC6A9 \uBB3C\uD488", "\uC77C\uBC18 \uAE30\uC790\uC7AC", "\uD2B9\uC218 \uAE30\uC790\uC7AC"],
   archive: ["\uD504\uB9B0\uD2B8\uC2E4", "\uD64D\uC775\uC2DC\uB514"],
@@ -1182,7 +1210,7 @@ var CategorySegmentedControl = ({
 }) => {
   const segments = categorySegments[variable];
   return /* @__PURE__ */ jsxs16("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       "div",
       {
         className: cn(
@@ -1195,7 +1223,7 @@ var CategorySegmentedControl = ({
         children: variable === "infoTag" ? "\uD0DC\uADF8 \uC120\uD0DD" : "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
       }
     ),
-    segments.map((label) => /* @__PURE__ */ jsx29(
+    segments.map((label) => /* @__PURE__ */ jsx30(
       CategorySegment,
       {
         label,
@@ -1208,9 +1236,9 @@ var CategorySegmentedControl = ({
 };
 
 // src/components/createPost/TitleInput.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var TitleInput = ({ title, onChange, className }) => {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "input",
     {
       type: "text",
@@ -1230,9 +1258,9 @@ var TitleInput = ({ title, onChange, className }) => {
 };
 
 // src/components/notice/NoticeBadge.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var NoticeBadge = ({ variable, className, onClick }) => {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx32(
     "button",
     {
       type: "button",
@@ -1253,7 +1281,7 @@ var NoticeBadge = ({ variable, className, onClick }) => {
 };
 
 // src/components/notice/NoticeBar.tsx
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 var NoticeBar = ({
   variable = "default",
   badgeVariable,
@@ -1275,17 +1303,17 @@ var NoticeBar = ({
       onClick,
       children: [
         /* @__PURE__ */ jsxs17("section", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsx32(NoticeBadge, { variable: badgeVariable }),
-          /* @__PURE__ */ jsx32("h1", { className: "text-head1-medium text-strong", children: title })
+          /* @__PURE__ */ jsx33(NoticeBadge, { variable: badgeVariable }),
+          /* @__PURE__ */ jsx33("h1", { className: "text-head1-medium text-strong", children: title })
         ] }),
-        /* @__PURE__ */ jsx32("p", { className: "text-body3-book text-tertiary", children: date })
+        /* @__PURE__ */ jsx33("p", { className: "text-body3-book text-tertiary", children: date })
       ]
     }
   );
 };
 
 // src/components/SearchBar/SearchBar.tsx
-import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var SearchBar = ({ value, onChange, className }) => {
   return /* @__PURE__ */ jsxs18(
     "label",
@@ -1298,8 +1326,8 @@ var SearchBar = ({ value, onChange, className }) => {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx33(IconSearch, {}),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx34(IconSearch, {}),
+        /* @__PURE__ */ jsx34(
           "input",
           {
             type: "text",
@@ -1319,7 +1347,7 @@ var SearchBar = ({ value, onChange, className }) => {
 
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var printColorBgClass = {
   Plotter: "bg-print-plotter",
   Printer: "bg-print-printer",
@@ -1364,7 +1392,7 @@ var SideRadioAccordion = forwardRef2(
       onOpenChange?.(next);
     };
     return /* @__PURE__ */ jsxs19("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
-      /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx35(
         Stepper,
         {
           step,
@@ -1376,7 +1404,7 @@ var SideRadioAccordion = forwardRef2(
         }
       ),
       expanded && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col divide-y divide-gray02", children: [
-        radioToggleList.map((item) => /* @__PURE__ */ jsx34(
+        radioToggleList.map((item) => /* @__PURE__ */ jsx35(
           RadioToggleItem,
           {
             ...item,
@@ -1385,7 +1413,7 @@ var SideRadioAccordion = forwardRef2(
           },
           itemKey(item)
         )),
-        quantityLimitLabel && /* @__PURE__ */ jsx34("div", { className: "px-5 py-4", children: /* @__PURE__ */ jsx34(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
+        quantityLimitLabel && /* @__PURE__ */ jsx35("div", { className: "px-5 py-4", children: /* @__PURE__ */ jsx35(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
       ] })
     ] });
   }
@@ -1398,7 +1426,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
   ] });
   const base = "w-full flex items-center justify-between px-5 py-2.5 text-head3-medium text-primary text-left bg-white border-b border-gray02";
   if (!collapsible) {
-    return /* @__PURE__ */ jsx34("div", { className: cn(base, className), children: label });
+    return /* @__PURE__ */ jsx35("div", { className: cn(base, className), children: label });
   }
   return /* @__PURE__ */ jsxs19(
     "button",
@@ -1408,7 +1436,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
       className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
       children: [
         label,
-        /* @__PURE__ */ jsx34(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
+        /* @__PURE__ */ jsx35(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
       ]
     }
   );
@@ -1443,15 +1471,15 @@ var RadioToggleItem = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx34(Radio, { selected: open }),
-          /* @__PURE__ */ jsx34("span", { children: title })
+          /* @__PURE__ */ jsx35(Radio, { selected: open }),
+          /* @__PURE__ */ jsx35("span", { children: title })
         ]
       }
     ),
     open && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
-      /* @__PURE__ */ jsx34("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ jsx34("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx34(Badge, { label: badge }, badge)) }),
-      labelTextButton && /* @__PURE__ */ jsx34(
+      /* @__PURE__ */ jsx35("p", { className: "text-caption-regular text-secondary", children: content }),
+      badges && badges.length > 0 && /* @__PURE__ */ jsx35("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx35(Badge2, { label: badge }, badge)) }),
+      labelTextButton && /* @__PURE__ */ jsx35(
         TextButton2,
         {
           label: labelTextButton,
@@ -1469,7 +1497,7 @@ var Radio = ({ selected = false, className }) => {
     // 디자인 스펙(Figma "radio" 5:781): 24px 히트 영역 안에 10px 원만 중앙에 그려진다.
     // 아이콘 자체 색은 고정, hover/pressed 시 24px 원형 배경 칩만 나타난다(gray00/gray01).
     // 부모 버튼의 group-hover/active로 동기화.
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35(
       "span",
       {
         className: cn(
@@ -1477,7 +1505,7 @@ var Radio = ({ selected = false, className }) => {
           "group-hover:bg-gray00 group-active:bg-gray01",
           className
         ),
-        children: /* @__PURE__ */ jsx34(Icon, { className: "size-2.5" })
+        children: /* @__PURE__ */ jsx35(Icon, { className: "size-2.5" })
       }
     )
   );
@@ -1496,14 +1524,14 @@ var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ jsx34(IconExclamation, {}),
+        showIcon && /* @__PURE__ */ jsx35(IconExclamation, {}),
         label
       ]
     }
   );
 };
-var Badge = ({ label, className }) => {
-  return /* @__PURE__ */ jsx34(
+var Badge2 = ({ label, className }) => {
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: cn(
@@ -1517,7 +1545,7 @@ var Badge = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Tag = ({
   className,
   children,
@@ -1527,7 +1555,7 @@ var Tag = ({
   onClick,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "button",
     {
       className: cn(
@@ -1546,21 +1574,21 @@ var Tag = ({
       disabled,
       style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
       ...props,
-      children: /* @__PURE__ */ jsx35("span", { children })
+      children: /* @__PURE__ */ jsx36("span", { children })
     }
   );
 };
 
 // src/components/TabSwitch/TabSwitch.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs20 } from "react/jsx-runtime";
 var itemKey2 = (item) => item.value ?? item.label;
 var TabSwitch = forwardRef3(function TabSwitch2({ items, selected, defaultSelected, onSelect, className }, ref) {
   const [selectedValue, setSelectedValue] = useControllableState(
     selected,
     defaultSelected ?? itemKey2(items[0])
   );
-  return /* @__PURE__ */ jsx36("div", { ref, className: cn("w-full border-b border-gray02", className), children: /* @__PURE__ */ jsx36("div", { className: "flex items-stretch", children: items.map((item) => {
+  return /* @__PURE__ */ jsx37("div", { ref, className: cn("w-full border-b border-gray02", className), children: /* @__PURE__ */ jsx37("div", { className: "flex items-stretch", children: items.map((item) => {
     const key = itemKey2(item);
     const isSelected = key === selectedValue;
     return /* @__PURE__ */ jsxs20("div", { className: "flex items-stretch", children: [
@@ -1577,7 +1605,7 @@ var TabSwitch = forwardRef3(function TabSwitch2({ items, selected, defaultSelect
             isSelected ? "gap-2" : "pb-2.5"
           ),
           children: [
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               "span",
               {
                 className: cn(
@@ -1587,11 +1615,11 @@ var TabSwitch = forwardRef3(function TabSwitch2({ items, selected, defaultSelect
                 children: item.label
               }
             ),
-            isSelected && /* @__PURE__ */ jsx36("span", { className: "h-0.5 w-full bg-black" })
+            isSelected && /* @__PURE__ */ jsx37("span", { className: "h-0.5 w-full bg-black" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx36("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+      /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
     ] }, key);
   }) }) });
 });
@@ -1633,7 +1661,7 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var weekLabel = {
   thisWeek: "\uC774\uBC88 \uC8FC",
   nextWeek: "\uB2E4\uC74C \uC8FC",
@@ -1656,22 +1684,22 @@ var WeekNavigation = forwardRef4(
           className
         ),
         children: [
-          /* @__PURE__ */ jsx37(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-          /* @__PURE__ */ jsx37("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
-          /* @__PURE__ */ jsx37(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+          /* @__PURE__ */ jsx38(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ jsx38("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
+          /* @__PURE__ */ jsx38(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
         ]
       }
     );
   }
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
-  const divider = /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
+  const divider = /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ jsx37("span", { "aria-hidden": true, className: "w-[43px]" });
+    return /* @__PURE__ */ jsx38("span", { "aria-hidden": true, className: "w-[43px]" });
   }
   return /* @__PURE__ */ jsxs21("div", { className: "flex items-stretch", children: [
     direction === "right" && divider,
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       "button",
       {
         type: "button",
@@ -1681,7 +1709,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
           "text-gray06 cursor-pointer transition-colors",
           "hover:bg-gray00 active:bg-gray01"
         ),
-        children: /* @__PURE__ */ jsx37(
+        children: /* @__PURE__ */ jsx38(
           IconChevronDownXS,
           {
             className: direction === "left" ? "rotate-90" : "-rotate-90",
@@ -1695,7 +1723,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
 };
 
 // src/components/Timetable/Timetable.tsx
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -1719,7 +1747,7 @@ var Timetable = forwardRef5(function Timetable2({
   className
 }, ref) {
   return /* @__PURE__ */ jsxs22("div", { ref, className: cn(fluid && "w-full", className), children: [
-    !hideWeekNavigation && /* @__PURE__ */ jsx38(
+    !hideWeekNavigation && /* @__PURE__ */ jsx39(
       WeekNavigation,
       {
         date: weekStart,
@@ -1730,7 +1758,7 @@ var Timetable = forwardRef5(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ jsx38("div", { className: cn("flex divide-x divide-gray02", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39("div", { className: cn("flex divide-x divide-gray02", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ jsx39(
       DailyTimetable,
       {
         date: day.date,
@@ -1744,11 +1772,11 @@ var Timetable = forwardRef5(function Timetable2({
 });
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
   return /* @__PURE__ */ jsxs22("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
-    /* @__PURE__ */ jsx38("div", { className: "h-12 flex items-center justify-center border-b border-gray02 text-body1-regular text-secondary", children: formatDayLabel(date) }),
+    /* @__PURE__ */ jsx39("div", { className: "h-12 flex items-center justify-center border-b border-gray02 text-body1-regular text-secondary", children: formatDayLabel(date) }),
     slots.map((slot, index) => {
       const prevState = index > 0 ? slots[index - 1].state : void 0;
       const withTopBorder = slot.state !== "none" && prevState === "none";
-      return /* @__PURE__ */ jsx38(
+      return /* @__PURE__ */ jsx39(
         TimeItem,
         {
           state: slot.state,
@@ -1777,7 +1805,7 @@ var TimeItem = ({
 }) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
   const style = state === "default" && color ? { "--tt-hover": color } : void 0;
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       onClick: clickable ? onClick : void 0,
@@ -1809,7 +1837,7 @@ import {
   useCallback as useCallback2,
   useState as useState6
 } from "react";
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 function useControllableState2(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
   const [uncontrolled, setUncontrolled] = useState6(defaultValue);
@@ -1862,7 +1890,7 @@ var TNB = forwardRef6(function TNB2({
     onSelectedLowerChange?.(label);
   };
   return /* @__PURE__ */ jsxs23("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       UpperPart,
       {
         logo,
@@ -1873,7 +1901,7 @@ var TNB = forwardRef6(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -1888,7 +1916,7 @@ var NavClickable = forwardRef6(function NavClickable2({ href, onClick, linkCompo
   const ariaCurrent = current ? "page" : void 0;
   if (href && !disabled) {
     if (Link) {
-      return /* @__PURE__ */ jsx39(
+      return /* @__PURE__ */ jsx40(
         Link,
         {
           href,
@@ -1900,7 +1928,7 @@ var NavClickable = forwardRef6(function NavClickable2({ href, onClick, linkCompo
         }
       );
     }
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx40(
       "a",
       {
         href,
@@ -1912,7 +1940,7 @@ var NavClickable = forwardRef6(function NavClickable2({ href, onClick, linkCompo
       }
     );
   }
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "button",
     {
       type: "button",
@@ -1943,11 +1971,11 @@ var UpperPart = ({
       ),
       children: [
         /* @__PURE__ */ jsxs23("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ jsx39("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ jsx39(NavIconButton, { ...logo, linkComponent }) }),
+          /* @__PURE__ */ jsx40("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ jsx40(NavIconButton, { ...logo, linkComponent }) }),
           /* @__PURE__ */ jsxs23("div", { className: "flex items-stretch", children: [
-            /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+            /* @__PURE__ */ jsx40("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
             upperPartItemList.map((item) => /* @__PURE__ */ jsxs23(Fragment2, { children: [
-              /* @__PURE__ */ jsx39(
+              /* @__PURE__ */ jsx40(
                 UpperPartTab,
                 {
                   label: item.label,
@@ -1960,15 +1988,15 @@ var UpperPart = ({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+              /* @__PURE__ */ jsx40("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
             ] }, item.id ?? item.label))
           ] })
         ] }),
         /* @__PURE__ */ jsxs23("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+          /* @__PURE__ */ jsx40("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
           upperPartIconList.map((icon, index) => /* @__PURE__ */ jsxs23(Fragment2, { children: [
-            /* @__PURE__ */ jsx39(NavIconButton, { ...icon, linkComponent }),
-            /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+            /* @__PURE__ */ jsx40(NavIconButton, { ...icon, linkComponent }),
+            /* @__PURE__ */ jsx40("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
           ] }, icon.id ?? icon.src ?? icon.label ?? index))
         ] })
       ]
@@ -1998,8 +2026,8 @@ var UpperPartTab = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx39("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
-        /* @__PURE__ */ jsx39("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
+        /* @__PURE__ */ jsx40("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
+        /* @__PURE__ */ jsx40("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
       ]
     }
   );
@@ -2024,9 +2052,9 @@ var NavIconButton = forwardRef6(
           className
         ),
         children: [
-          icon ? /* @__PURE__ */ jsx39("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ jsx39("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
-          label ? /* @__PURE__ */ jsx39("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
-          showBadge ? /* @__PURE__ */ jsx39(
+          icon ? /* @__PURE__ */ jsx40("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ jsx40("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
+          label ? /* @__PURE__ */ jsx40("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ jsx40(
             "span",
             {
               "aria-hidden": badge === true,
@@ -2057,9 +2085,9 @@ var LowerPart = ({
     {
       className: cn("w-full h-[42px] pl-14 flex items-stretch border-b border-gray02", className),
       children: [
-        /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+        /* @__PURE__ */ jsx40("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
         lowerPartItemList.map((item) => /* @__PURE__ */ jsxs23(Fragment2, { children: [
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             LowerPartItemButton,
             {
               label: item.label,
@@ -2072,7 +2100,7 @@ var LowerPart = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx39("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          /* @__PURE__ */ jsx40("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
         ] }, item.id ?? item.label))
       ]
     }
@@ -2086,7 +2114,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     NavClickable,
     {
       href,
@@ -2106,7 +2134,7 @@ var LowerPartItemButton = ({
 
 // src/components/Toast/Toast.tsx
 import { forwardRef as forwardRef7, useEffect as useEffect3, useState as useState7 } from "react";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var EXIT_MS = 300;
 var Toast = forwardRef7(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
   const controlled = open !== void 0;
@@ -2129,7 +2157,7 @@ var Toast = forwardRef7(function Toast2({ message, open, duration = 3e3, onClose
     return () => clearTimeout(timer);
   }, [controlled, open, duration, onClose]);
   if (!mounted) return null;
-  const banner = /* @__PURE__ */ jsx40(
+  const banner = /* @__PURE__ */ jsx41(
     "div",
     {
       ref,
@@ -2147,7 +2175,7 @@ var Toast = forwardRef7(function Toast2({ message, open, duration = 3e3, onClose
     }
   );
   if (position === "none") return banner;
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       className: cn(
@@ -2161,6 +2189,7 @@ var Toast = forwardRef7(function Toast2({ message, open, duration = 3e3, onClose
 export {
   Accordion,
   BackButton,
+  Badge,
   BasicFormField,
   CTA,
   CategorySegment,