@hivcd-printshop/design-system 1.2.1 → 1.2.2

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-black/10", 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") })
       ]
     }
   );
@@ -1355,7 +1442,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,14 +1456,8 @@ 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 /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { className: cn("w-6 h-6", className) });
 };
 var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
@@ -1392,7 +1473,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 +1484,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
       ),
@@ -2029,8 +2110,12 @@ var Toast = (0, import_react10.forwardRef)(function Toast2({ message, open, dura
   FormTextArea,
   IconCheck,
   IconChevronDownXS,
+  IconClose,
   IconCompass,
+  IconExclamation,
   IconInfo,
+  IconRadioSelected,
+  IconRadioUnselected,
   List,
   Modal,
   ModalText,