@paymanai/payman-ask-sdk 1.2.0 → 1.2.2

package/dist/index.mjs

@@ -745,19 +745,7 @@ function OtpInput({ value, onChange, maxLength, disabled = false }) {
       onPaste: handlePaste,
       onFocus: (e) => e.target.select(),
       "aria-label": `Digit ${i + 1}`,
-      style: {
-        width: "40px",
-        height: "48px",
-        textAlign: "center",
-        fontSize: "20px",
-        fontWeight: 600,
-        border: "1px solid hsl(var(--border, 214.3 31.8% 91.4%))",
-        borderRadius: "8px",
-        outline: "none",
-        backgroundColor: disabled ? "hsl(var(--muted, 210 40% 96.1%))" : "transparent",
-        color: "hsl(var(--foreground, 222.2 84% 4.9%))",
-        opacity: disabled ? 0.5 : 1
-      }
+      className: `w-10 h-12 text-center text-xl font-semibold border border-border rounded-lg outline-none text-foreground ${disabled ? "bg-muted opacity-50" : "bg-transparent"}`
     },
     i
   )) });
@@ -946,67 +934,16 @@ function UserActionModal({
           ref: dialogRef,
           role: "dialog",
           "aria-modal": "true",
-          style: {
-            backgroundColor: "hsl(var(--card, 0 0% 100%))",
-            borderRadius: "12px",
-            padding: "24px",
-            width: "100%",
-            maxWidth: "420px",
-            margin: "0 16px",
-            boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
-          },
+          className: "bg-card rounded-xl p-6 shadow-2xl",
+          style: { width: "100%", maxWidth: "420px", margin: "0 16px" },
           tabIndex: -1,
           children: [
-            /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", marginBottom: "16px" }, children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "48px",
-                    height: "48px",
-                    borderRadius: "50%",
-                    backgroundColor: "hsl(var(--muted, 210 40% 96.1%))",
-                    marginBottom: "12px"
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    ShieldCheck,
-                    {
-                      className: "text-primary",
-                      style: { width: "24px", height: "24px" }
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "h2",
-                {
-                  style: {
-                    fontSize: "18px",
-                    fontWeight: 600,
-                    color: "hsl(var(--foreground, 222.2 84% 4.9%))",
-                    margin: 0
-                  },
-                  children: MODAL_CONTENT.TITLE
-                }
-              )
+            /* @__PURE__ */ jsxs("div", { className: "text-center mb-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "inline-flex items-center justify-center w-12 h-12 rounded-full bg-muted mb-3", children: /* @__PURE__ */ jsx(ShieldCheck, { className: "w-6 h-6 text-primary" }) }),
+              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground m-0", children: MODAL_CONTENT.TITLE })
             ] }),
-            /* @__PURE__ */ jsx(
-              "p",
-              {
-                style: {
-                  fontSize: "14px",
-                  color: "hsl(var(--muted-foreground, 215.4 16.3% 46.9%))",
-                  textAlign: "center",
-                  margin: "0 0 24px 0",
-                  lineHeight: 1.5
-                },
-                children: userActionRequest.message
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { style: { marginBottom: "24px" }, children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center mb-6 leading-relaxed", children: userActionRequest.message }),
+            /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
               OtpInput,
               {
                 value: otp,