@salilvnair/dui 1.0.10 → 1.0.11

package/dist/index.js

@@ -21845,21 +21845,22 @@ function yS({
   slowAfterSeconds: l = 8,
   slowMessage: c,
   action: s,
-  hints: d,
-  className: u = "",
-  style: p
+  messageWidth: d,
+  hints: u,
+  className: p = "",
+  style: g
 }) {
-  const [g, f] = N(!1);
+  const [f, h] = N(!1);
   U(() => {
     if (!l) return;
-    const y = window.setTimeout(() => f(!0), l * 1e3);
-    return () => window.clearTimeout(y);
+    const v = window.setTimeout(() => h(!0), l * 1e3);
+    return () => window.clearTimeout(v);
   }, [l]);
-  const h = a ?? (i ? 40 : 54), m = Math.round(h * 0.3), b = g && c ? c : n;
+  const m = a ?? (i ? 40 : 54), b = Math.round(m * 0.3), y = f && c ? c : n;
   return /* @__PURE__ */ x(
     "div",
     {
-      className: u,
+      className: p,
       role: "status",
       "aria-busy": "true",
       "aria-live": "polite",
@@ -21870,7 +21871,7 @@ function yS({
         gap: i ? 8 : 10,
         padding: i ? "18px 16px" : "34px 26px",
         textAlign: "center",
-        ...p
+        ...g
       },
       children: [
         t && /* @__PURE__ */ x(
@@ -21880,15 +21881,15 @@ function yS({
             style: {
               display: "grid",
               placeItems: "center",
-              width: h,
-              height: h,
-              borderRadius: m,
+              width: m,
+              height: m,
+              borderRadius: b,
               color: r,
               background: `color-mix(in srgb, ${r} 11%, transparent)`,
               border: `1px solid color-mix(in srgb, ${r} 22%, transparent)`
             },
             children: [
-              /* @__PURE__ */ o("span", { className: "dui_loading-state__ripple", style: { borderRadius: m } }),
+              /* @__PURE__ */ o("span", { className: "dui_loading-state__ripple", style: { borderRadius: b } }),
               t
             ]
           }
@@ -21902,16 +21903,16 @@ function yS({
           color: "var(--color-text-primary)"
         }, children: [
           e,
-          /* @__PURE__ */ o("span", { "aria-hidden": "true", style: { display: "inline-flex", marginLeft: 1 }, children: [0, 1, 2].map((y) => /* @__PURE__ */ o("span", { className: "dui_loading-state__dot", style: { color: r }, children: "." }, y)) })
+          /* @__PURE__ */ o("span", { "aria-hidden": "true", style: { display: "inline-flex", marginLeft: 1 }, children: [0, 1, 2].map((v) => /* @__PURE__ */ o("span", { className: "dui_loading-state__dot", style: { color: r }, children: "." }, v)) })
         ] }),
-        b && /* @__PURE__ */ o("p", { style: {
+        y && /* @__PURE__ */ o("p", { style: {
           margin: 0,
-          maxWidth: "52ch",
+          maxWidth: d ?? "52ch",
           fontSize: i ? 11 : 11.5,
           lineHeight: 1.6,
-          color: g ? "var(--color-warning)" : "var(--color-text-muted)"
-        }, children: b }),
-        d && d.length > 0 && /* @__PURE__ */ o("div", { style: { display: "flex", flexDirection: "column", gap: 5, marginTop: 2 }, children: d.map((y, v) => /* @__PURE__ */ x("div", { style: {
+          color: f ? "var(--color-warning)" : "var(--color-text-muted)"
+        }, children: y }),
+        u && u.length > 0 && /* @__PURE__ */ o("div", { style: { display: "flex", flexDirection: "column", gap: 5, marginTop: 2 }, children: u.map((v, k) => /* @__PURE__ */ x("div", { style: {
           display: "flex",
           alignItems: "flex-start",
           gap: 8,
@@ -21920,10 +21921,10 @@ function yS({
           color: "var(--color-text-muted)",
           textAlign: "left"
         }, children: [
-          /* @__PURE__ */ o("span", { style: { color: r, flexShrink: 0, marginTop: 1 }, children: y.key }),
-          /* @__PURE__ */ o("span", { children: y.text })
-        ] }, v)) }),
-        s && g && /* @__PURE__ */ o(
+          /* @__PURE__ */ o("span", { style: { color: r, flexShrink: 0, marginTop: 1 }, children: v.key }),
+          /* @__PURE__ */ o("span", { children: v.text })
+        ] }, k)) }),
+        s && f && /* @__PURE__ */ o(
           "button",
           {
             type: "button",