@sarunyu/system-one 4.9.9 → 4.9.11

package/dist/index.js

@@ -3694,49 +3694,21 @@ Input.displayName = "Input";
 const ALERT_CONFIG = {
   warning: {
     titleColor: "var(--text-warning-primary)",
-    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"
-      }
-    ]
+    solidBg: "#f0b100",
+    boxShadow: "0 0 0 8px rgba(240,177,0,0.2), 0 0 0 20px rgba(240,177,0,0.08)",
+    Icon: Warning
   },
   success: {
     titleColor: "var(--text-success-primary)",
-    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"
-      }
-    ]
+    solidBg: "#00c951",
+    boxShadow: "0 0 0 8px rgba(0,201,81,0.2), 0 0 0 20px rgba(0,201,81,0.08)",
+    Icon: Check
   },
   danger: {
     titleColor: "var(--text-danger-primary)",
-    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"
-      }
-    ]
+    solidBg: "#fb2c36",
+    boxShadow: "0 0 0 8px rgba(251,44,54,0.2), 0 0 0 20px rgba(251,44,54,0.08)",
+    Icon: X
   }
 };
 function Modal({
@@ -3815,39 +3787,22 @@ function AlertBody({
   title,
   description
 }) {
+  const { Icon, titleColor, solidBg, boxShadow } = config;
   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("div", { className: "flex items-center justify-center size-[100px]", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex items-center justify-center size-[56px] rounded-full",
+        style: { backgroundColor: solidBg, boxShadow },
+        children: /* @__PURE__ */ jsx(Icon, { size: 40, color: "white" })
+      }
+    ) }),
     /* @__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 },
+          style: { color: titleColor },
           children: title
         }
       ),