@hivcd-printshop/design-system 1.2.1 → 1.2.2

package/dist/index.mjs

@@ -175,6 +175,89 @@ var IconCompass = ({ className, fill }) => {
     }
   );
 };
+var IconRadioSelected = ({
+  className,
+  stroke,
+  fill
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#121212" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "4", fill: fill || "#121212" })
+      ]
+    }
+  );
+};
+var IconRadioUnselected = ({
+  className,
+  stroke
+}) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "7", stroke: stroke || "#B4B9C2" })
+    }
+  );
+};
+var IconExclamation = ({ className, fill }) => {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ 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__ */ jsx("circle", { cx: "6", cy: "6", r: "4.5", stroke: fill || "#505865" })
+      ]
+    }
+  );
+};
+var IconClose = ({ className, stroke }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4 4L12 12M12 4L4 12",
+          stroke: stroke || "#6d7683",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+};
 
 // src/components/BackButton/BackButton.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -862,30 +945,49 @@ function List({
 
 // src/components/Modal/Modal.tsx
 import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
-var ModalBase = ({ isVisible, header, children, className }) => {
+var ModalBase = ({ isVisible, header, children, className, onClose }) => {
   if (!isVisible) return null;
-  return /* @__PURE__ */ jsx25("div", { className: cn("fixed inset-0 z-50 pointer-events-auto"), children: /* @__PURE__ */ jsx25(
-    "div",
-    {
-      className: cn("fixed inset-0 z-1001 flex items-center justify-center pointer-events-auto"),
-      children: /* @__PURE__ */ jsxs14(
-        "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__ */ jsxs14("div", { className: cn("fixed inset-0 z-50"), children: [
+    /* @__PURE__ */ jsx25(
+      "div",
+      {
+        "aria-hidden": true,
+        onClick: onClose,
+        className: cn("fixed inset-0 z-1000 bg-black/10", onClose && "cursor-pointer")
+      }
+    ),
+    /* @__PURE__ */ jsx25("div", { className: "fixed inset-0 z-1001 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs14(
+      "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__ */ jsx25(
+            "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__ */ jsx25(IconClose, {})
+            }
           ),
-          children: [
-            /* @__PURE__ */ jsx25("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
-            children
-          ]
-        }
-      )
-    }
-  ) });
+          /* @__PURE__ */ jsx25("h1", { className: cn("text-strong font-[500] text-[24px] leading-[32px]"), children: header }),
+          children
+        ]
+      }
+    ) })
+  ] });
 };
 var Contents = ({ children, className }) => {
   return /* @__PURE__ */ jsx25(
@@ -1137,18 +1239,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
 import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 var printColorBgClass = {
@@ -1239,14 +1329,7 @@ var Stepper = ({ step, title, isOpen, collapsible, onClick, className }) => {
       className: cn(base, "cursor-pointer hover:bg-gray00 active:bg-gray01", className),
       children: [
         label,
-        /* @__PURE__ */ jsx33(
-          "img",
-          {
-            src: ChevronDown_default,
-            alt: "",
-            className: cn("transition-transform", isOpen && "rotate-180")
-          }
-        )
+        /* @__PURE__ */ jsx33(IconChevronDownXS, { className: cn("transition-transform", isOpen && "rotate-180") })
       ]
     }
   );
@@ -1286,7 +1369,7 @@ var RadioToggleItem = ({
     ),
     open && /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-2 px-3 py-3 bg-white", children: [
       /* @__PURE__ */ jsx33("p", { className: "text-caption-regular text-secondary", children: content }),
-      badges && badges.length > 0 && /* @__PURE__ */ jsx33("div", { className: "flex gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx33(Badge, { label: badge }, badge)) }),
+      badges && badges.length > 0 && /* @__PURE__ */ jsx33("div", { className: "flex flex-wrap gap-1", children: badges.map((badge) => /* @__PURE__ */ jsx33(Badge, { label: badge }, badge)) }),
       labelTextButton && /* @__PURE__ */ jsx33(
         TextButton2,
         {
@@ -1300,14 +1383,8 @@ var RadioToggleItem = ({
   ] });
 };
 var Radio = ({ selected = false, className }) => {
-  return /* @__PURE__ */ jsx33(
-    "img",
-    {
-      src: selected ? RadioSelected_default : RadioUnselected_default,
-      alt: "",
-      className: cn("w-6 h-6", className)
-    }
-  );
+  const Icon = selected ? IconRadioSelected : IconRadioUnselected;
+  return /* @__PURE__ */ jsx33(Icon, { className: cn("w-6 h-6", className) });
 };
 var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
   return /* @__PURE__ */ jsxs18(
@@ -1323,7 +1400,7 @@ var TextButton2 = ({ label, onClick, showIcon = false, className }) => {
         className
       ),
       children: [
-        showIcon && /* @__PURE__ */ jsx33("img", { src: Exclamation_default, alt: "" }),
+        showIcon && /* @__PURE__ */ jsx33(IconExclamation, {}),
         label
       ]
     }
@@ -1334,7 +1411,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
       ),
@@ -1964,8 +2041,12 @@ export {
   FormTextArea,
   IconCheck,
   IconChevronDownXS,
+  IconClose,
   IconCompass,
+  IconExclamation,
   IconInfo,
+  IconRadioSelected,
+  IconRadioUnselected,
   List,
   Modal,
   ModalText,