@hivcd-printshop/design-system 1.3.3 → 1.4.1

package/dist/index.js

@@ -23,6 +23,7 @@ var index_exports = {};
 __export(index_exports, {
   Accordion: () => Accordion,
   BackButton: () => BackButton,
+  Badge: () => Badge,
   BasicFormField: () => BasicFormField,
   CTA: () => CTA,
   CategorySegment: () => CategorySegment,
@@ -451,8 +452,33 @@ var BackButton = ({ onClick, className }) => {
   );
 };
 
-// src/components/CTA/CTA.tsx
+// src/components/Badge/Badge.tsx
 var import_jsx_runtime4 = require("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__ */ (0, import_jsx_runtime4.jsx)(
+    "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
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var CTA = ({
   primary = false,
   alert = false,
@@ -463,7 +489,7 @@ var CTA = ({
   forModal = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "button",
     {
       type: "button",
@@ -491,22 +517,22 @@ var CTA = ({
 };
 
 // src/components/Column/MultiColumn.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var MultiColumnMain = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("flex flex-col w-full h-full", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("flex flex-col w-full h-full", className), children });
 };
 var Columns = ({ children, className }) => {
   return (
     // flex 래퍼를 사용하고 하위 Column들이 flex-1을 가지게 하거나,
     // grid를 사용하여 열을 나눌 수 있어. 여기서는 flex를 활용한 균등 분할 예시야.
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("flex w-full h-full divide-x divide-gray02", className), children })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime5.jsx)("div", { className: cn("flex flex-col w-full h-fit", className), children })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("flex flex-col w-full h-fit", className), children })
   );
 };
 var MultiColumn = Object.assign(MultiColumnMain, {
@@ -515,78 +541,78 @@ var MultiColumn = Object.assign(MultiColumnMain, {
 });
 
 // src/components/Column/Column.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var Column = ({ className, children, header }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 py-3", className), children: [
-    header && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: cn("text-body1-medium text-primary"), children: header }),
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("flex flex-col gap-5", "h-full w-full px-5 py-3", className), children: [
+    header && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { className: cn("text-body1-medium text-primary"), children: header }),
     children
   ] });
 };
 
 // src/components/Column/ColumnContentContainer.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ColumnContentContainer = ({ className, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn("flex flex-col gap-1.5 w-full h-fit", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("flex flex-col gap-1.5 w-full h-fit", className), children });
 };
 
 // src/components/Column/ColumnLabel.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ColumnLabel = ({ className, children, subLabel, htmlFor }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { htmlFor, className: cn("flex gap-1.5 items-end", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("text-body2-regular text-tertiary"), children }),
-    subLabel && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("text-caption-book text-quaternary"), children: subLabel })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { htmlFor, className: cn("flex gap-1.5 items-end", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("text-body2-regular text-tertiary"), children }),
+    subLabel && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("text-caption-book text-quaternary"), children: subLabel })
   ] });
 };
 
 // src/components/Column/ColumnText.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn(ColumnTextStyle, alert && "text-danger", className), onClick, children: children ? children : "-" });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn(ColumnTextStyle, alert && "text-danger", className), onClick, children: children ? children : "-" });
 };
 
 // src/components/Column/ColumnSubTitle.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var ColumnSubTitle = ({
   className,
   children,
   action,
   as: Tag2 = "h2"
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Tag2, { className: cn("flex items-center justify-between gap-1.5", "w-full", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn("text-body1-medium text-primary"), children }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex shrink-0 items-center", children: action })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Tag2, { className: cn("flex items-center justify-between gap-1.5", "w-full", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("text-body1-medium text-primary"), children }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex shrink-0 items-center", children: action })
   ] });
 };
 
 // src/components/Column/ColumnDescription.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var ColumnDescription = ({
   className,
   children,
   bullet = true
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex items-start gap-3", className), children: [
-    bullet && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconCompass, { className: "size-4" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex items-start gap-3", className), children: [
+    bullet && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex shrink-0 items-center py-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconCompass, { className: "size-4" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "min-w-0 flex-1 whitespace-pre-line text-body3-book text-primary", children })
   ] });
 };
 var ColumnDescriptionList = ({ className, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex flex-col gap-4", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("flex flex-col gap-4", className), children });
 };
 
 // src/components/Form/BasicFormField.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var BasicFormField = ({
   children,
   isDanger,
   dangerText,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
     children,
-    isDanger && dangerText && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-caption-book text-danger", children: dangerText })
+    isDanger && dangerText && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-caption-book text-danger", children: dangerText })
   ] });
 };
 var getInputStyles = (isDanger, additionalClass) => {
@@ -597,6 +623,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
@@ -605,15 +634,15 @@ var getInputStyles = (isDanger, additionalClass) => {
 };
 
 // src/components/Form/FormText.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormText = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("input", { type: "text", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTextArea.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "textarea",
     {
       className: getInputStyles(isDanger, "resize-none h-30 px-4 py-2.5 " + (className || "")),
@@ -623,19 +652,19 @@ var FormTextArea = ({ className, isDanger, dangerText, ...props }) => {
 };
 
 // src/components/Form/FormNumber.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var FormNumber = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "number", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormPassword.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var FormPassword = ({ className, isDanger, dangerText, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("input", { type: "password", className: getInputStyles(isDanger, className), ...props }) });
 };
 
 // src/components/Form/FormTel.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
   const handlePhoneChange = (e) => {
     const rawValue = e.target.value.replace(/[^0-9]/g, "");
@@ -647,7 +676,7 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
     e.target.value = formattedValue;
     if (onChange) onChange(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "input",
     {
       type: "tel",
@@ -661,7 +690,7 @@ var FormTel = ({ className, isDanger, dangerText, onChange, ...props }) => {
 
 // src/components/Form/FormColor.tsx
 var import_react3 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var FormColor = ({
   className,
   isDanger,
@@ -679,7 +708,7 @@ var FormColor = ({
     setInternalColor(e.target.value);
     onChange?.(e);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
     "label",
     {
       className: getInputStyles(
@@ -688,7 +717,7 @@ var FormColor = ({
         "flex items-center gap-2 relative focus-within:border-black focus-within:hover:bg-white" + (className || "")
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "w-6 h-6 shrink-0 overflow-hidden", style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "input",
           {
             type: "color",
@@ -698,7 +727,7 @@ var FormColor = ({
             ...props
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-primary text-body3-regular uppercase flex-1 select-none", children: color })
       ]
     }
   ) });
@@ -706,7 +735,7 @@ var FormColor = ({
 
 // src/components/Form/FormFile.tsx
 var import_react4 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var FormFile = ({
   className,
   isDanger,
@@ -767,7 +796,7 @@ var FormFile = ({
     }
   };
   const displayFileName = selectedFile?.name || (fileUrl ? fileUrl.split("/").pop() : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       className: getInputStyles(
@@ -780,7 +809,7 @@ var FormFile = ({
         )
       ),
       children: [
-        displayFileName && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        displayFileName && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "span",
           {
             onClick: handleDownload,
@@ -789,9 +818,9 @@ var FormFile = ({
             children: displayFileName
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("label", { className: "shrink-0 px-1 -mx-1 cursor-pointer", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("label", { className: "shrink-0 px-1 -mx-1 cursor-pointer", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-primary text-caption-regular underline", children: displayFileName ? "\uB2E4\uC2DC \uCCA8\uBD80" : "\uD30C\uC77C \uCCA8\uBD80" }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("input", { type: "file", className: "hidden", onChange: handleFileChange, ...props })
         ] })
       ]
     }
@@ -799,7 +828,7 @@ var FormFile = ({
 };
 
 // src/components/Form/FormCheckBox.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var FormCheckBox = ({
   isChecked,
   setIsChecked,
@@ -808,7 +837,7 @@ var FormCheckBox = ({
   textStyle,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "label",
     {
       className: cn(
@@ -819,7 +848,7 @@ var FormCheckBox = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "input",
           {
             type: "checkbox",
@@ -829,14 +858,14 @@ var FormCheckBox = ({
             ...props
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "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__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "div",
               {
                 className: cn(
@@ -846,12 +875,12 @@ var FormCheckBox = ({
                   // 💡 3. 키보드 Tab 이동 시 접근성 향상 (포커스 링 표시)
                   "peer-focus-visible:ring-2 peer-focus-visible:ring-black peer-focus-visible:ring-offset-1"
                 ),
-                children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(IconCheck, {})
+                children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconCheck, {})
               }
             )
           }
         ),
-        children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: cn("text-body3-book text-primary", textStyle), children })
+        children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: cn("text-body3-book text-primary", textStyle), children })
       ]
     }
   );
@@ -861,14 +890,14 @@ var FormCheckBox = ({
 var import_react5 = require("react");
 
 // src/components/Form/SelectBoxOption.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var SelectBoxOption = ({
   label,
   onClick,
   // selectedLabel,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "li",
     {
       onClick,
@@ -890,7 +919,7 @@ var SelectBoxOption = ({
 };
 
 // src/components/Form/FormSelectBox.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var FormSelectBox = ({
   options,
   value,
@@ -913,8 +942,8 @@ var FormSelectBox = ({
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: containerRef, className: "relative w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(BasicFormField, { isDanger, dangerText, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "div",
       {
         tabIndex: 0,
@@ -934,8 +963,8 @@ var FormSelectBox = ({
           setIsOpen((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: value ? "text-primary" : "text-quaternary", children: value || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -945,7 +974,7 @@ var FormSelectBox = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "ul",
       {
         className: cn(
@@ -955,7 +984,7 @@ var FormSelectBox = ({
           "max-h-50 overflow-y-auto"
           // 항목이 너무 많으면 스크롤 생성 (디자인 스펙: 그림자 없음)
         ),
-        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           SelectBoxOption,
           {
             label: option,
@@ -972,7 +1001,7 @@ var FormSelectBox = ({
 };
 
 // src/components/TextButton/TextButton.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var TextButton = ({
   children,
   icon,
@@ -982,10 +1011,10 @@ var TextButton = ({
   className,
   ...props
 }) => {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex shrink-0 items-center", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cn(underline && "underline underline-offset-2"), children }),
-    icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex shrink-0 items-center", children: icon })
+  const content = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    icon && iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex shrink-0 items-center", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cn(underline && "underline underline-offset-2"), children }),
+    icon && iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex shrink-0 items-center", children: icon })
   ] });
   const classes = cn(
     "inline-flex w-fit items-center gap-1 px-1 -mx-1",
@@ -1000,15 +1029,15 @@ var TextButton = ({
   );
   if (props.href !== void 0) {
     const { href, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href, className: classes, ...rest, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("a", { href, className: classes, ...rest, children: content });
   }
   const buttonProps = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", className: classes, ...buttonProps, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("button", { type: "button", className: classes, ...buttonProps, children: content });
 };
 
 // src/components/Dropdown/Dropdown.tsx
 var import_react6 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
   const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
   const containerRef = (0, import_react6.useRef)(null);
@@ -1023,8 +1052,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { ref: containerRef, className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
       "div",
       {
         className: cn(
@@ -1037,8 +1066,8 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ),
         onClick: () => setIsOpen((prev) => !prev),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { children: selectedLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { children: selectedLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             IconChevronDownXS,
             {
               className: cn("text-gray06 transition-transform", isOpen && "rotate-180"),
@@ -1048,7 +1077,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("absolute top-full right-0 z-10", "box-border border border-gray02"), children: labels.map((label) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       SelectBoxOption,
       {
         label,
@@ -1064,7 +1093,7 @@ var Dropdown = ({ selectedLabel, setSelectedLabel, labels, className }) => {
 };
 
 // src/components/ListView/List.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function List({
   className,
   label1,
@@ -1077,7 +1106,7 @@ function List({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "li",
     {
       className: cn(
@@ -1092,15 +1121,15 @@ function List({
       ...props,
       onClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("section", { className: cn("flex items-center gap-4"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex items-center gap-2"), children })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("section", { className: cn("flex items-center gap-4"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { className: cn("text-body2-regular"), children: label1 ? label1 : "-" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: cn("flex items-center gap-2"), children })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "label",
           {
             className: cn(
-              "text-body3-book truncate p-1 w-fit",
+              "text-body3-book truncate p-1 w-fit max-w-full",
               label2OnClick && "underline has-clickable",
               label2OnClick && !selected && "hover:bg-gray00"
             ),
@@ -1108,18 +1137,18 @@ function List({
             children: label2 ? label2 : "-"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("label", { className: cn("text-body3-regular text-right"), children: label3 ? label3 : "-" })
       ]
     }
   );
 }
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("fixed inset-0 z-50"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("fixed inset-0 z-50"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         "aria-hidden": true,
@@ -1127,7 +1156,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
         className: cn("fixed inset-0 z-1000 bg-[#212121]/30", onClose && "cursor-pointer")
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
       "main",
       {
         role: "dialog",
@@ -1140,7 +1169,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
           className
         ),
         children: [
-          onClose && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "button",
             {
               type: "button",
@@ -1150,10 +1179,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__ */ (0, import_jsx_runtime26.jsx)(IconClose, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(IconClose, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("h1", { className: cn("text-head-lg-medium text-strong"), children: header }),
           children
         ]
       }
@@ -1161,7 +1190,7 @@ var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   ] });
 };
 var Contents = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       className: cn(
@@ -1178,7 +1207,7 @@ var CTAs2 = ({ children, className, row = false }) => {
   if (!children) return null;
   return (
     // CTA 버튼들을 중앙에 배치하는 예시 (우측 정렬이 필요하면 justify-end 사용)
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "div",
       {
         className: cn(
@@ -1197,9 +1226,9 @@ var Modal = Object.assign(ModalBase, {
 });
 
 // src/components/Modal/ModalText.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var ModalText = ({ children, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       className: cn(
@@ -1215,14 +1244,14 @@ var ModalText = ({ children, className }) => {
 };
 
 // src/components/createPost/CategorySegment.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var CategorySegment = ({
   selected = false,
   label,
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       className: cn(
@@ -1242,7 +1271,7 @@ var CategorySegment = ({
 };
 
 // src/components/createPost/CategorySegmentedControl.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("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"],
@@ -1256,8 +1285,8 @@ var CategorySegmentedControl = ({
   className
 }) => {
   const segments = categorySegments[variable];
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: cn("w-full h-fit flex items-center justify-start", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "div",
       {
         className: cn(
@@ -1270,7 +1299,7 @@ var CategorySegmentedControl = ({
         children: variable === "infoTag" ? "\uD0DC\uADF8 \uC120\uD0DD" : "\uCE74\uD14C\uACE0\uB9AC \uC120\uD0DD"
       }
     ),
-    segments.map((label) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    segments.map((label) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       CategorySegment,
       {
         label,
@@ -1283,9 +1312,9 @@ var CategorySegmentedControl = ({
 };
 
 // src/components/createPost/TitleInput.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var TitleInput = ({ title, onChange, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "input",
     {
       type: "text",
@@ -1305,9 +1334,9 @@ var TitleInput = ({ title, onChange, className }) => {
 };
 
 // src/components/notice/NoticeBadge.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var NoticeBadge = ({ variable, className, onClick }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     "button",
     {
       type: "button",
@@ -1328,7 +1357,7 @@ var NoticeBadge = ({ variable, className, onClick }) => {
 };
 
 // src/components/notice/NoticeBar.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var NoticeBar = ({
   variable = "default",
   badgeVariable,
@@ -1337,7 +1366,7 @@ var NoticeBar = ({
   className,
   onClick
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "div",
     {
       className: cn(
@@ -1349,20 +1378,20 @@ var NoticeBar = ({
       ),
       onClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("section", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(NoticeBadge, { variable: badgeVariable }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h1", { className: "text-head1-medium text-strong", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NoticeBadge, { variable: badgeVariable }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h1", { className: "text-head1-medium text-strong", children: title })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-body3-book text-tertiary", children: date })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-body3-book text-tertiary", children: date })
       ]
     }
   );
 };
 
 // src/components/SearchBar/SearchBar.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var SearchBar = ({ value, onChange, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "label",
     {
       className: cn(
@@ -1373,8 +1402,8 @@ var SearchBar = ({ value, onChange, className }) => {
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconSearch, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconSearch, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "input",
           {
             type: "text",
@@ -1394,7 +1423,7 @@ var SearchBar = ({ value, onChange, className }) => {
 
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
 var import_react7 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var printColorBgClass = {
   Plotter: "bg-print-plotter",
   Printer: "bg-print-printer",
@@ -1438,8 +1467,8 @@ var SideRadioAccordion = (0, import_react7.forwardRef)(
       setIsOpen(next);
       onOpenChange?.(next);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref, className: cn("w-full border-r border-gray02 bg-white", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Stepper,
         {
           step,
@@ -1450,8 +1479,8 @@ var SideRadioAccordion = (0, import_react7.forwardRef)(
           className: cn(stickyHeader && "sticky top-0 z-10")
         }
       ),
-      expanded && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col divide-y divide-gray02", children: [
-        radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      expanded && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col divide-y divide-gray02", children: [
+        radioToggleList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           RadioToggleItem,
           {
             ...item,
@@ -1460,22 +1489,22 @@ var SideRadioAccordion = (0, import_react7.forwardRef)(
           },
           itemKey(item)
         )),
-        quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
+        quantityLimitLabel && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "px-5 py-4", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TextButton2, { label: quantityLimitLabel, onClick: onClickQuantityLimit }) })
       ] })
     ] });
   }
 );
 var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
-  const label = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { children: [
+  const label = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { children: [
     step,
     " | ",
     title
   ] });
   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__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn(base, className), children: label });
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn(base, className), children: label });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "button",
     {
       type: "button",
@@ -1483,7 +1512,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
       className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
       children: [
         label,
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
       ]
     }
   );
@@ -1503,8 +1532,8 @@ var RadioToggleItem = ({
 }) => {
   const rowBg = !open ? "bg-white hover:bg-gray00" : color ? void 0 : printColor ? printColorBgClass[printColor] : "bg-gray00";
   const style = open && color ? { backgroundColor: color } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "button",
       {
         type: "button",
@@ -1518,15 +1547,15 @@ var RadioToggleItem = ({
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Radio, { selected: open }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: title })
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Radio, { selected: open }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: title })
         ]
       }
     ),
-    open && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Badge, { label: badge }, badge)) }),
-      labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    open && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-caption-regular text-secondary", children: content }),
+      badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Badge2, { label: badge }, badge)) }),
+      labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         TextButton2,
         {
           label: labelTextButton,
@@ -1544,7 +1573,7 @@ var Radio = ({ selected = false, className }) => {
     // 디자인 스펙(Figma "radio" 5:781): 24px 히트 영역 안에 10px 원만 중앙에 그려진다.
     // 아이콘 자체 색은 고정, hover/pressed 시 24px 원형 배경 칩만 나타난다(gray00/gray01).
     // 부모 버튼의 group-hover/active로 동기화.
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       "span",
       {
         className: cn(
@@ -1552,13 +1581,13 @@ var Radio = ({ selected = false, className }) => {
           "group-hover:bg-gray00 group-active:bg-gray01",
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { className: "size-2.5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { className: "size-2.5" })
       }
     )
   );
 };
 var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "button",
     {
       type: "button",
@@ -1571,14 +1600,14 @@ var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconExclamation, {}),
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(IconExclamation, {}),
         label
       ]
     }
   );
 };
-var Badge = ({ label, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+var Badge2 = ({ label, className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       className: cn(
@@ -1592,7 +1621,7 @@ var Badge = ({ label, className }) => {
 };
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Tag = ({
   className,
   children,
@@ -1602,7 +1631,7 @@ var Tag = ({
   onClick,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "button",
     {
       className: cn(
@@ -1621,25 +1650,25 @@ var Tag = ({
       disabled,
       style: bgColor ? { backgroundColor: bgColor, border: "none" } : void 0,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children })
     }
   );
 };
 
 // src/components/TabSwitch/TabSwitch.tsx
 var import_react8 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var itemKey2 = (item) => item.value ?? item.label;
 var TabSwitch = (0, import_react8.forwardRef)(function TabSwitch2({ items, selected, defaultSelected, onSelect, className }, ref) {
   const [selectedValue, setSelectedValue] = useControllableState(
     selected,
     defaultSelected ?? itemKey2(items[0])
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref, className: cn("w-full border-b border-gray02", className), children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex items-stretch", children: items.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref, className: cn("w-full border-b border-gray02", className), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-stretch", children: items.map((item) => {
     const key = itemKey2(item);
     const isSelected = key === selectedValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
         "button",
         {
           type: "button",
@@ -1652,7 +1681,7 @@ var TabSwitch = (0, import_react8.forwardRef)(function TabSwitch2({ items, selec
             isSelected ? "gap-2" : "pb-2.5"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "span",
               {
                 className: cn(
@@ -1662,11 +1691,11 @@ var TabSwitch = (0, import_react8.forwardRef)(function TabSwitch2({ items, selec
                 children: item.label
               }
             ),
-            isSelected && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "h-0.5 w-full bg-black" })
+            isSelected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "h-0.5 w-full bg-black" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
     ] }, key);
   }) }) });
 });
@@ -1708,7 +1737,7 @@ var formatWeekRange = (weekStart) => {
 };
 
 // src/components/Timetable/WeekNavigation.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var weekLabel = {
   thisWeek: "\uC774\uBC88 \uC8FC",
   nextWeek: "\uB2E4\uC74C \uC8FC",
@@ -1719,7 +1748,7 @@ var WeekNavigation = (0, import_react9.forwardRef)(
     const showPrev = canPrev ?? (week ? week !== "thisWeek" : true);
     const showNext = canNext ?? (week ? week !== "twoWeeksLater" : true);
     const text = label ?? (week ? `${weekLabel[week]} (${formatWeekRange(date)})` : formatWeekRange(date));
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "div",
       {
         ref,
@@ -1731,22 +1760,22 @@ var WeekNavigation = (0, import_react9.forwardRef)(
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ArrowButton, { direction: "left", visible: showPrev, onClick: onPrevWeek }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex flex-1 items-center justify-center text-center", children: text }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ArrowButton, { direction: "right", visible: showNext, onClick: onNextWeek })
         ]
       }
     );
   }
 );
 var ArrowButton = ({ direction, visible, onClick }) => {
-  const divider = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
+  const divider = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" });
   if (!visible) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-[43px]" });
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { "aria-hidden": true, className: "w-[43px]" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-stretch", children: [
     direction === "right" && divider,
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "button",
       {
         type: "button",
@@ -1756,7 +1785,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
           "text-gray06 cursor-pointer transition-colors",
           "hover:bg-gray00 active:bg-gray01"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           IconChevronDownXS,
           {
             className: direction === "left" ? "rotate-90" : "-rotate-90",
@@ -1770,7 +1799,7 @@ var ArrowButton = ({ direction, visible, onClick }) => {
 };
 
 // src/components/Timetable/Timetable.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var printColorHoverClass = {
   Plotter: "hover:bg-print-plotter",
   Printer: "hover:bg-print-printer",
@@ -1793,8 +1822,8 @@ var Timetable = (0, import_react10.forwardRef)(function Timetable2({
   canNextWeek,
   className
 }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
-    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref, className: cn(fluid && "w-full", className), children: [
+    !hideWeekNavigation && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       WeekNavigation,
       {
         date: weekStart,
@@ -1805,7 +1834,7 @@ var Timetable = (0, import_react10.forwardRef)(function Timetable2({
         onNextWeek
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn("flex divide-x divide-gray02", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("flex divide-x divide-gray02", fluid && "w-full"), children: days.map((day) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       DailyTimetable,
       {
         date: day.date,
@@ -1818,12 +1847,12 @@ var Timetable = (0, import_react10.forwardRef)(function Timetable2({
   ] });
 });
 var DailyTimetable = ({ date, slots, fluid, onSelectTime, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "h-12 flex items-center justify-center border-b border-gray02 text-body1-regular text-secondary", children: formatDayLabel(date) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("flex flex-col", fluid ? "flex-1 min-w-0" : "w-18", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("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__ */ (0, import_jsx_runtime38.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         TimeItem,
         {
           state: slot.state,
@@ -1852,7 +1881,7 @@ var TimeItem = ({
 }) => {
   const clickable = (state === "default" || state === "selected") && !!onClick;
   const style = state === "default" && color ? { "--tt-hover": color } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       onClick: clickable ? onClick : void 0,
@@ -1879,7 +1908,7 @@ var TimeItem = ({
 
 // src/components/TNB/TNB.tsx
 var import_react11 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function useControllableState2(controlled, defaultValue) {
   const isControlled = controlled !== void 0;
   const [uncontrolled, setUncontrolled] = (0, import_react11.useState)(defaultValue);
@@ -1931,8 +1960,8 @@ var TNB = (0, import_react11.forwardRef)(function TNB2({
     setLowerValue(label);
     onSelectedLowerChange?.(label);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("nav", { ref, "aria-label": ariaLabel, className: cn("w-full bg-white", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       UpperPart,
       {
         logo,
@@ -1943,7 +1972,7 @@ var TNB = (0, import_react11.forwardRef)(function TNB2({
         linkComponent
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       LowerPart,
       {
         lowerPartItemList: currentLowerItemList,
@@ -1958,7 +1987,7 @@ var NavClickable = (0, import_react11.forwardRef)(function NavClickable2({ href,
   const ariaCurrent = current ? "page" : void 0;
   if (href && !disabled) {
     if (Link) {
-      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
         Link,
         {
           href,
@@ -1970,7 +1999,7 @@ var NavClickable = (0, import_react11.forwardRef)(function NavClickable2({ href,
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "a",
       {
         href,
@@ -1982,7 +2011,7 @@ var NavClickable = (0, import_react11.forwardRef)(function NavClickable2({ href,
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "button",
     {
       type: "button",
@@ -2004,7 +2033,7 @@ var UpperPart = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       className: cn(
@@ -2012,12 +2041,12 @@ var UpperPart = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(NavIconButton, { ...logo, linkComponent }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-stretch", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-            upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react11.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex w-14 shrink-0 items-center justify-center px-3", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(NavIconButton, { ...logo, linkComponent }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+            upperPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react11.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                 UpperPartTab,
                 {
                   label: item.label,
@@ -2030,15 +2059,15 @@ var UpperPart = ({
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
             ] }, item.id ?? item.label))
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-stretch", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react11.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(NavIconButton, { ...icon, linkComponent }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(NavIconButton, { ...icon, linkComponent }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
           ] }, icon.id ?? icon.src ?? icon.label ?? index))
         ] })
       ]
@@ -2053,7 +2082,7 @@ var UpperPartTab = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     NavClickable,
     {
       href,
@@ -2068,8 +2097,8 @@ var UpperPartTab = ({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("px-5 text-head1-medium", selected ? "text-strong" : "text-quaternary"), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("h-0.5 w-full", selected ? "bg-black" : "bg-transparent") })
       ]
     }
   );
@@ -2078,7 +2107,7 @@ var NavIconButton = (0, import_react11.forwardRef)(
   function NavIconButton2({ src, icon, alt, label, href, onClick, selected, badge, className, linkComponent }, forwardedRef) {
     const interactive = Boolean(onClick || href);
     const showBadge = badge !== void 0 && badge !== null && badge !== false;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       NavClickable,
       {
         ref: forwardedRef,
@@ -2094,9 +2123,9 @@ var NavIconButton = (0, import_react11.forwardRef)(
           className
         ),
         children: [
-          icon ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
-          label ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
-          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          icon ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "inline-flex h-6 w-6 items-center justify-center", children: icon }) : src ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src, alt: alt ?? label ?? "", className: "h-6 w-6" }) : null,
+          label ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("text-body2-regular", selected ? "text-white" : "text-secondary"), children: label }) : null,
+          showBadge ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "span",
             {
               "aria-hidden": badge === true,
@@ -2122,14 +2151,14 @@ var LowerPart = ({
   if (lowerPartItemList.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       className: cn("w-full h-[42px] pl-14 flex items-stretch border-b border-gray02", className),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-        lowerPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react11.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
+        lowerPartItemList.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react11.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             LowerPartItemButton,
             {
               label: item.label,
@@ -2142,7 +2171,7 @@ var LowerPart = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
         ] }, item.id ?? item.label))
       ]
     }
@@ -2156,7 +2185,7 @@ var LowerPartItemButton = ({
   linkComponent,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     NavClickable,
     {
       href,
@@ -2176,7 +2205,7 @@ var LowerPartItemButton = ({
 
 // src/components/Toast/Toast.tsx
 var import_react12 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var EXIT_MS = 300;
 var Toast = (0, import_react12.forwardRef)(function Toast2({ message, open, duration = 3e3, onClose, position = "none", className }, ref) {
   const controlled = open !== void 0;
@@ -2199,7 +2228,7 @@ var Toast = (0, import_react12.forwardRef)(function Toast2({ message, open, dura
     return () => clearTimeout(timer);
   }, [controlled, open, duration, onClose]);
   if (!mounted) return null;
-  const banner = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  const banner = /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       ref,
@@ -2217,7 +2246,7 @@ var Toast = (0, import_react12.forwardRef)(function Toast2({ message, open, dura
     }
   );
   if (position === "none") return banner;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       className: cn(
@@ -2232,6 +2261,7 @@ var Toast = (0, import_react12.forwardRef)(function Toast2({ message, open, dura
 0 && (module.exports = {
   Accordion,
   BackButton,
+  Badge,
   BasicFormField,
   CTA,
   CategorySegment,