@hivcd-printshop/design-system 1.2.1 → 1.2.3

package/dist/index.d.mts

@@ -234,13 +234,18 @@ interface ModalProps {
     header: string;
     children: react__default.ReactNode;
     className?: string;
+    /**
+     * 지정하면 배경(백드롭) 클릭 시 호출되고, 카드 우상단에 닫기(X) 버튼이 노출된다.
+     * 생략하면 배경은 딤 처리만 되고 클릭해도 닫히지 않는다.
+     */
+    onClose?: () => void;
 }
 interface BaseProps {
     children: react__default.ReactNode;
     className?: string;
     row?: boolean;
 }
-declare const Modal: (({ isVisible, header, children, className }: ModalProps) => react__default.JSX.Element | null) & {
+declare const Modal: (({ isVisible, header, children, className, onClose }: ModalProps) => react__default.JSX.Element | null) & {
     Contents: ({ children, className }: BaseProps) => react__default.JSX.Element;
     CTAs: ({ children, className, row }: BaseProps) => react__default.JSX.Element | null;
 };
@@ -268,6 +273,27 @@ declare const IconCompass: ({ className, fill }: {
     className?: string;
     fill?: string;
 }) => react.JSX.Element;
+/** 선택된 라디오 버튼(채워진 점). SideRadioAccordion 등에서 사용. */
+declare const IconRadioSelected: ({ className, stroke, fill, }: {
+    className?: string;
+    stroke?: string;
+    fill?: string;
+}) => react.JSX.Element;
+/** 선택되지 않은 라디오 버튼(빈 원). */
+declare const IconRadioUnselected: ({ className, stroke, }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
+/** 느낌표(원 안). 보조 안내 텍스트 버튼 등에서 사용. */
+declare const IconExclamation: ({ className, fill }: {
+    className?: string;
+    fill?: string;
+}) => react.JSX.Element;
+/** 닫기(X) 아이콘. Modal 우상단 등에서 사용. */
+declare const IconClose: ({ className, stroke }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
 
 interface CategorySegmentProps {
     selected?: boolean;
@@ -519,4 +545,4 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
 
-export { BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconCompass, IconInfo, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };
+export { BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconClose, IconCompass, IconExclamation, IconInfo, IconRadioSelected, IconRadioUnselected, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };

package/dist/index.d.ts

@@ -234,13 +234,18 @@ interface ModalProps {
     header: string;
     children: react__default.ReactNode;
     className?: string;
+    /**
+     * 지정하면 배경(백드롭) 클릭 시 호출되고, 카드 우상단에 닫기(X) 버튼이 노출된다.
+     * 생략하면 배경은 딤 처리만 되고 클릭해도 닫히지 않는다.
+     */
+    onClose?: () => void;
 }
 interface BaseProps {
     children: react__default.ReactNode;
     className?: string;
     row?: boolean;
 }
-declare const Modal: (({ isVisible, header, children, className }: ModalProps) => react__default.JSX.Element | null) & {
+declare const Modal: (({ isVisible, header, children, className, onClose }: ModalProps) => react__default.JSX.Element | null) & {
     Contents: ({ children, className }: BaseProps) => react__default.JSX.Element;
     CTAs: ({ children, className, row }: BaseProps) => react__default.JSX.Element | null;
 };
@@ -268,6 +273,27 @@ declare const IconCompass: ({ className, fill }: {
     className?: string;
     fill?: string;
 }) => react.JSX.Element;
+/** 선택된 라디오 버튼(채워진 점). SideRadioAccordion 등에서 사용. */
+declare const IconRadioSelected: ({ className, stroke, fill, }: {
+    className?: string;
+    stroke?: string;
+    fill?: string;
+}) => react.JSX.Element;
+/** 선택되지 않은 라디오 버튼(빈 원). */
+declare const IconRadioUnselected: ({ className, stroke, }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
+/** 느낌표(원 안). 보조 안내 텍스트 버튼 등에서 사용. */
+declare const IconExclamation: ({ className, fill }: {
+    className?: string;
+    fill?: string;
+}) => react.JSX.Element;
+/** 닫기(X) 아이콘. Modal 우상단 등에서 사용. */
+declare const IconClose: ({ className, stroke }: {
+    className?: string;
+    stroke?: string;
+}) => react.JSX.Element;
 
 interface CategorySegmentProps {
     selected?: boolean;
@@ -519,4 +545,4 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
 
-export { BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconCompass, IconInfo, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };
+export { BackButton, type BackButtonProps, BasicFormField, type BasicFormFieldProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, Column, ColumnContentContainer, type ColumnContentContainerProps, ColumnDescription, ColumnDescriptionList, type ColumnDescriptionListProps, type ColumnDescriptionProps, ColumnLabel, type ColumnLabelProps, type ColumnProps, ColumnSubTitle, type ColumnSubTitleProps, ColumnText, type ColumnTextProps, ColumnTextStyle, type DayColumn, Dropdown, type DropdownProps, FormCheckBox, type FormCheckBoxProps, FormColor, type FormColorProps, FormFile, type FormFileProps, FormNumber, type FormNumberProps, FormPassword, type FormPasswordProps, FormSelectBox, type FormSelectBoxProps, FormTel, type FormTelProps, FormText, FormTextArea, type FormTextAreaProps, type FormTextProps, IconCheck, IconChevronDownXS, IconClose, IconCompass, IconExclamation, IconInfo, IconRadioSelected, IconRadioUnselected, type LinkComponent, List, type ListProps, type LowerPartItem, Modal, type ModalProps, ModalText, type ModalTextProps, ModalTextStyle, MultiColumn, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SelectBoxOption, type SelectBoxOptionProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, TextButton, type TextButtonProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps, getInputStyles };

package/dist/index.js

@@ -46,8 +46,12 @@ __export(index_exports, {
   FormTextArea: () => FormTextArea,
   IconCheck: () => IconCheck,
   IconChevronDownXS: () => IconChevronDownXS,
+  IconClose: () => IconClose,
   IconCompass: () => IconCompass,
+  IconExclamation: () => IconExclamation,
   IconInfo: () => IconInfo,
+  IconRadioSelected: () => IconRadioSelected,
+  IconRadioUnselected: () => IconRadioUnselected,
   List: () => List,
   Modal: () => Modal,
   ModalText: () => ModalText,
@@ -244,6 +248,89 @@ var IconCompass = ({ className, fill }) => {
     }
   );
 };
+var IconRadioSelected = ({
+  className,
+  stroke,
+  fill
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#121212" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "4", fill: fill || "#121212" })
+      ]
+    }
+  );
+};
+var IconRadioUnselected = ({
+  className,
+  stroke
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#B4B9C2" })
+    }
+  );
+};
+var IconExclamation = ({ className, fill }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      className,
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M6.41438 7.18735H5.57954L5.50175 3.10938H6.49218L6.41438 7.18735ZM5.40001 8.3313C5.39801 8.23061 5.42395 8.13738 5.47781 8.05161C5.53167 7.96583 5.60448 7.89777 5.69624 7.84743C5.79 7.79708 5.89174 7.77191 6.00145 7.77191C6.10718 7.77191 6.20592 7.79708 6.29768 7.84743C6.38945 7.89777 6.46226 7.96583 6.51612 8.05161C6.57197 8.13738 6.5999 8.23061 6.5999 8.3313C6.5999 8.43199 6.57197 8.52522 6.51612 8.611C6.46226 8.69677 6.38945 8.76483 6.29768 8.81518C6.20592 8.86552 6.10718 8.89069 6.00145 8.89069C5.89174 8.89069 5.79 8.86552 5.69624 8.81518C5.60448 8.76483 5.53167 8.69677 5.47781 8.611C5.42395 8.52522 5.39801 8.43199 5.40001 8.3313Z",
+            fill: fill || "#505865"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "6", cy: "6", r: "4.5", stroke: fill || "#505865" })
+      ]
+    }
+  );
+};
+var IconClose = ({ className, stroke }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: "M4 4L12 12M12 4L4 12",
+          stroke: stroke || "#6d7683",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+};
 
 // src/components/BackButton/BackButton.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -931,30 +1018,49 @@ function List({
 
 // src/components/Modal/Modal.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var ModalBase = ({ isVisible, header, children, className }) => {
+var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("fixed inset-0 z-50 pointer-events-auto"), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-    "div",
-    {
-      className: cn("fixed inset-0 z-1001 flex items-center justify-center pointer-events-auto"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-        "main",
-        {
-          className: cn(
-            "w-110 pt-8 h-fit",
-            "flex flex-col items-center",
-            "border border-gray02",
-            "bg-white shadow-[0 0 30px 0 rgba(0, 0, 0, 0.08);]",
-            className
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("fixed inset-0 z-50"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        onClick: onClose,
+        className: cn("fixed inset-0 z-1000 bg-[#212121]/30", onClose && "cursor-pointer")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "main",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        className: cn(
+          "relative w-110 pt-8 h-fit pointer-events-auto",
+          "flex flex-col items-center",
+          "border border-gray02",
+          "bg-white shadow-[0px_0px_30px_0px_rgba(0,0,0,0.08)]",
+          className
+        ),
+        children: [
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "\uB2EB\uAE30",
+              className: cn(
+                "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_runtime25.jsx)(IconClose, {})
+            }
           ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
-            children
-          ]
-        }
-      )
-    }
-  ) });
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+          children
+        ]
+      }
+    ) })
+  ] });
 };
 var Contents = ({ children, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -1206,18 +1312,6 @@ function useControllableState(controlled, defaultValue) {
   return [value, setValue, isControlled];
 }
 
-// src/components/SideRadioAccordion/Exclamation.svg
-var Exclamation_default = "./Exclamation-IUYZYYC4.svg";
-
-// src/components/SideRadioAccordion/ChevronDown.svg
-var ChevronDown_default = "./ChevronDown-XSALXCW4.svg";
-
-// src/components/SideRadioAccordion/RadioSelected.svg
-var RadioSelected_default = "./RadioSelected-DOLVV7ZM.svg";
-
-// src/components/SideRadioAccordion/RadioUnselected.svg
-var RadioUnselected_default = "./RadioUnselected-QN74EU46.svg";
-
 // src/components/SideRadioAccordion/SideRadioAccordion.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var printColorBgClass = {
@@ -1308,14 +1402,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_runtime33.jsx)(
-          "img",
-          {
-            src: ChevronDown_default,
-            alt: "",
-            className: cn("transition-transform", isOpen && "rotate-180")
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
       ]
     }
   );
@@ -1342,8 +1429,9 @@ var RadioToggleItem = ({
         onClick: onSelect,
         style,
         className: cn(
-          "w-full flex items-center gap-1.5 p-3",
-          "text-body1-regular text-secondary text-left cursor-pointer",
+          "group w-full flex items-center gap-1.5 p-3",
+          "text-body1-regular text-left cursor-pointer",
+          open ? "text-strong" : "text-secondary",
           rowBg,
           className
         ),
@@ -1355,7 +1443,7 @@ var RadioToggleItem = ({
     ),
     open && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Badge, { label: badge }, badge)) }),
+      badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Badge, { label: badge }, badge)) }),
       labelTextButton && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         TextButton2,
         {
@@ -1369,13 +1457,21 @@ var RadioToggleItem = ({
   ] });
 };
 var Radio = ({ selected = false, className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    "img",
-    {
-      src: selected ? RadioSelected_default : RadioUnselected_default,
-      alt: "",
-      className: cn("w-6 h-6", className)
-    }
+  const Icon = selected ? IconRadioSelected : IconRadioUnselected;
+  return (
+    // 디자인 스펙(Figma "radio" 5:781): 아이콘 자체 색은 고정, hover/pressed 시
+    // 24px 원형 배경 칩만 나타난다(gray00/gray01). 부모 버튼의 group-hover/active로 동기화.
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      "span",
+      {
+        className: cn(
+          "inline-flex size-6 shrink-0 items-center justify-center rounded-full transition-colors",
+          "group-hover:bg-gray00 group-active:bg-gray01",
+          className
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { className: "size-6" })
+      }
+    )
   );
 };
 var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
@@ -1392,7 +1488,7 @@ var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { src: Exclamation_default, alt: "" }),
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconExclamation, {}),
         label
       ]
     }
@@ -1403,7 +1499,7 @@ var Badge = ({ label, className }) => {
     "div",
     {
       className: cn(
-        "w-fit h-fit px-2 py-0.5 border border-gray02",
+        "w-fit h-fit px-2 py-0.5 border border-gray02 shrink-0 whitespace-nowrap",
         "text-tertiary text-caption-book",
         className
       ),
@@ -1808,14 +1904,10 @@ var UpperPart = ({
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-stretch", children: [
           /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" }),
-          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-            NavIconButton,
-            {
-              ...icon,
-              linkComponent
-            },
-            icon.id ?? icon.src ?? icon.label ?? index
-          ))
+          upperPartIconList.map((icon, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react9.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(NavIconButton, { ...icon, linkComponent }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { "aria-hidden": true, className: "w-px self-stretch bg-gray02" })
+          ] }, icon.id ?? icon.src ?? icon.label ?? index))
         ] })
       ]
     }
@@ -1837,7 +1929,9 @@ var UpperPartTab = ({
       linkComponent,
       current: selected,
       className: cn(
-        "inline-flex min-h-13 flex-col items-center gap-2 pt-2.5 cursor-pointer no-underline",
+        // 헤더 바닥 border-b와 언더라인이 겹치도록 높이를 52px로 고정하고
+        // justify-between으로 라벨/언더라인을 위-아래 끝에 붙인다.
+        "inline-flex h-13 flex-col items-center justify-between pt-2.5 cursor-pointer no-underline",
         "transition-colors hover:bg-gray00 active:bg-gray01",
         className
       ),
@@ -2029,8 +2123,12 @@ var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, dura
   FormTextArea,
   IconCheck,
   IconChevronDownXS,
+  IconClose,
   IconCompass,
+  IconExclamation,
   IconInfo,
+  IconRadioSelected,
+  IconRadioUnselected,
   List,
   Modal,
   ModalText,