@sarunyu/system-one 4.2.0 → 4.2.2

package/dist/index.js

@@ -3411,25 +3411,46 @@ const ALERT_CONFIG = {
     titleColor: "var(--accent-orange)",
     background: "https://www.figma.com/api/mcp/asset/f4ca68ad-5732-4124-9ff4-cfb69330cc02",
     layers: [
-      { inset: "12.5%", src: "https://www.figma.com/api/mcp/asset/7052a092-a432-4e8c-b559-6b51d28d878f" },
-      { inset: "22.5%", src: "https://www.figma.com/api/mcp/asset/a291a1b2-06c8-455c-8e21-29755aa05c57" },
-      { inset: "28.57% 30.71% 32.86% 30.71%", src: "https://www.figma.com/api/mcp/asset/a22c7520-55fe-4003-ba78-65dab40b9e23" }
+      {
+        inset: "12.5%",
+        src: "https://www.figma.com/api/mcp/asset/7052a092-a432-4e8c-b559-6b51d28d878f"
+      },
+      {
+        inset: "22.5%",
+        src: "https://www.figma.com/api/mcp/asset/a291a1b2-06c8-455c-8e21-29755aa05c57"
+      },
+      {
+        inset: "28.57% 30.71% 32.86% 30.71%",
+        src: "https://www.figma.com/api/mcp/asset/a22c7520-55fe-4003-ba78-65dab40b9e23"
+      }
     ]
   },
   success: {
     titleColor: "var(--success)",
     background: "https://www.figma.com/api/mcp/asset/2a865e6f-8a92-4496-88b5-71ac99e2c385",
     layers: [
-      { inset: "12.77%", src: "https://www.figma.com/api/mcp/asset/5878ce35-4f9a-4203-97a8-70a2f17b182c" },
-      { inset: "22.55%", src: "https://www.figma.com/api/mcp/asset/cea74180-b261-4db7-8712-6d32c4ccdeaf" }
+      {
+        inset: "12.77%",
+        src: "https://www.figma.com/api/mcp/asset/5878ce35-4f9a-4203-97a8-70a2f17b182c"
+      },
+      {
+        inset: "22.55%",
+        src: "https://www.figma.com/api/mcp/asset/cea74180-b261-4db7-8712-6d32c4ccdeaf"
+      }
     ]
   },
   danger: {
     titleColor: "var(--destructive)",
     background: "https://www.figma.com/api/mcp/asset/c7a65595-684e-4a04-b7fd-d443951f680a",
     layers: [
-      { inset: "12.77%", src: "https://www.figma.com/api/mcp/asset/10090345-ae32-4fc4-aff6-cba04ea93700" },
-      { inset: "22.55%", src: "https://www.figma.com/api/mcp/asset/3aa1156e-e48b-411f-ab98-93e1da98ecc1" }
+      {
+        inset: "12.77%",
+        src: "https://www.figma.com/api/mcp/asset/10090345-ae32-4fc4-aff6-cba04ea93700"
+      },
+      {
+        inset: "22.55%",
+        src: "https://www.figma.com/api/mcp/asset/3aa1156e-e48b-411f-ab98-93e1da98ecc1"
+      }
     ]
   }
 };
@@ -3451,32 +3472,42 @@ function Modal({
 }) {
   const isContent = variant === "content";
   const isAlert = variant === "alert";
+  const isDialog = variant === "dialog";
   const isDesktop = responsive === "desktop";
   const alert = ALERT_CONFIG[alertStatus];
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
-        "max-w-full overflow-hidden border border-border bg-background",
+        "w-auto overflow-hidden border border-border bg-background",
         isAlert ? "w-[343px] rounded-2xl" : "rounded-xl",
-        isContent ? "w-[343px]" : isAlert ? void 0 : "w-[375px]",
+        isContent ? "min-w-[343px] max-w-[500px] " : isAlert ? void 0 : isDialog && "min-w-[375px] max-w-[500px]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center px-4 pt-4", isAlert ? "justify-end" : "justify-between gap-4"), children: [
-          !isAlert ? /* @__PURE__ */ jsx("p", { className: "text-[18px] leading-7 font-bold text-foreground", children: title }) : null,
-          showClose ? /* @__PURE__ */ jsx(
-            Button,
-            {
-              "aria-label": "Close dialog",
-              className: "h-5 w-5 shrink-0 rounded-none text-subtle-text",
-              onClick: onClose,
-              size: "icon-xs",
-              variant: "plain-black",
-              children: /* @__PURE__ */ jsx(X, { size: 20, weight: "regular" })
-            }
-          ) : null
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center px-4 pt-4",
+              isAlert ? "justify-end" : "justify-between gap-4"
+            ),
+            children: [
+              !isAlert ? /* @__PURE__ */ jsx("p", { className: "text-[18px] leading-7 font-bold text-foreground", children: title }) : null,
+              showClose ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  "aria-label": "Close dialog",
+                  className: "h-5 w-5 shrink-0 rounded-none text-subtle-text",
+                  onClick: onClose,
+                  size: "icon-xs",
+                  variant: "plain-black",
+                  children: /* @__PURE__ */ jsx(X, { size: 20, weight: "regular" })
+                }
+              ) : null
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("div", { className: cn("px-4 pb-6", isAlert ? "pt-0" : "pt-4"), children: isAlert ? /* @__PURE__ */ jsx(AlertBody, { config: alert, title, description }) : isContent ? /* @__PURE__ */ jsx("div", { className: "w-full", children: children ?? null }) : children ?? /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: description }) }),
         actionLayout !== "none" ? /* @__PURE__ */ jsx("div", { className: "px-4 pb-4", children: /* @__PURE__ */ jsx(
           ModalActions,
@@ -3501,11 +3532,40 @@ function AlertBody({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 text-center", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative size-[100px]", children: [
-      /* @__PURE__ */ jsx("img", { alt: "", className: "absolute inset-0 size-full", src: config.background }),
-      config.layers.map((layer) => /* @__PURE__ */ jsx("div", { className: "absolute", style: { inset: layer.inset }, children: /* @__PURE__ */ jsx("img", { alt: "", className: "absolute inset-0 size-full", src: layer.src }) }, layer.src))
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          alt: "",
+          className: "absolute inset-0 size-full",
+          src: config.background
+        }
+      ),
+      config.layers.map((layer) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute",
+          style: { inset: layer.inset },
+          children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              alt: "",
+              className: "absolute inset-0 size-full",
+              src: layer.src
+            }
+          )
+        },
+        layer.src
+      ))
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-[18px] leading-7 font-bold", style: { color: config.titleColor }, children: title }),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-[18px] leading-7 font-bold",
+          style: { color: config.titleColor },
+          children: title
+        }
+      ),
       /* @__PURE__ */ jsx("p", { className: "text-sm leading-5 text-muted-foreground", children: description })
     ] })
   ] });
@@ -3535,8 +3595,26 @@ function ModalActions({
   const containerClass = isContent ? cn("flex gap-4", isDesktop ? "justify-end" : "flex-col") : "flex items-center gap-4";
   const buttonClass = isContent ? isDesktop ? void 0 : "w-full" : "min-w-0 flex-1";
   return /* @__PURE__ */ jsxs("div", { className: containerClass, children: [
-    /* @__PURE__ */ jsx(Button, { className: buttonClass, onClick: onSecondaryClick, size: "xl", variant: "outline", children: secondaryLabel }),
-    /* @__PURE__ */ jsx(Button, { className: buttonClass, onClick: onPrimaryClick, size: "xl", variant: "primary", children: primaryLabel })
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: buttonClass,
+        onClick: onSecondaryClick,
+        size: "xl",
+        variant: "outline",
+        children: secondaryLabel
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: buttonClass,
+        onClick: onPrimaryClick,
+        size: "xl",
+        variant: "primary",
+        children: primaryLabel
+      }
+    )
   ] });
 }
 const OptionList = forwardRef(