@deframe-sdk/components 0.1.32 → 0.1.33

package/dist/index.js

@@ -2460,6 +2460,1393 @@ var ProcessingBadge = ({
     }
   );
 };
+function ChoiceCard(_a) {
+  var _b = _a, {
+    label,
+    description,
+    selected = false,
+    onClick,
+    className
+  } = _b, buttonProps = __objRest(_b, [
+    "label",
+    "description",
+    "selected",
+    "onClick",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      "data-slot": "choice-card",
+      "data-test-id": "choice-card",
+      "data-selected": selected,
+      onClick
+    }, buttonProps), {
+      className: tailwindMerge.twMerge(
+        "w-full cursor-pointer rounded-[var(--deframe-widget-size-radius-md)] border p-[var(--deframe-widget-size-padding-x-md)] text-left transition-colors duration-150",
+        "bg-[color:var(--deframe-widget-color-bg-secondary)]",
+        selected ? "border-[color:var(--deframe-widget-color-brand-primary)] bg-[color:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_8%,var(--deframe-widget-color-bg-secondary))]" : "border-[color:var(--deframe-widget-color-border-secondary)] hover:border-[color:var(--deframe-widget-color-border-primary)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "choice-card-label",
+              "data-test-id": "choice-card-label",
+              className: tailwindMerge.twMerge(
+                "text-[length:var(--deframe-widget-font-size-md)] font-[var(--deframe-widget-font-weight-medium)] leading-[var(--deframe-widget-font-leading-md)]",
+                selected ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
+              ),
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "choice-card-indicator",
+              "data-test-id": "choice-card-indicator",
+              "aria-hidden": "true",
+              className: tailwindMerge.twMerge(
+                "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[var(--deframe-widget-size-radius-full)] border-2 transition-colors duration-150",
+                selected ? "border-[color:var(--deframe-widget-color-brand-primary)]" : "border-[color:var(--deframe-widget-color-border-primary)]"
+              ),
+              children: selected && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-[8px] w-[8px] rounded-[var(--deframe-widget-size-radius-full)] bg-[color:var(--deframe-widget-color-brand-primary)]" })
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            "data-slot": "choice-card-description",
+            "data-test-id": "choice-card-description",
+            className: "mt-[var(--deframe-widget-size-gap-xs)] text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]",
+            children: description
+          }
+        )
+      ]
+    })
+  );
+}
+function KYCInfoRow({ label, value, divider = true, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "kyc-info-row",
+      "data-test-id": "kyc-info-row",
+      className: tailwindMerge.twMerge(
+        "flex w-full items-start justify-between gap-[var(--deframe-widget-size-gap-md)]",
+        divider && "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "kyc-info-row-label",
+            "data-test-id": "kyc-info-row-label",
+            className: "shrink-0 text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "data-slot": "kyc-info-row-value",
+            "data-test-id": "kyc-info-row-value",
+            className: "text-right text-[length:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-weight-medium)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-primary)]",
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+var DEFAULT_INTRO_CHECKLIST = [
+  {
+    label: "Dados pessoais",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "8", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 20c0-4 3.6-7 8-7s8 3 8 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ] })
+  },
+  {
+    label: "Endere\xE7o",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C8.7 2 6 4.7 6 8c0 5 6 13 6 13s6-8 6-13c0-3.3-2.7-6-6-6z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "8", r: "2", stroke: "currentColor", strokeWidth: "1.5" })
+    ] })
+  },
+  {
+    label: "Documento de identidade",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "12", r: "2.5", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 10h5M13 12.5h4M13 15h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ] })
+  },
+  {
+    label: "Selfie de verifica\xE7\xE3o",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "13", r: "3.5", stroke: "currentColor", strokeWidth: "1.5" })
+    ] })
+  }
+];
+var DEFAULT_STATUS_FIELDS = [
+  { label: "Nome completo", value: "Jo\xE3o Carlos Porto" },
+  { label: "CPF", value: "123.456.789-00" },
+  { label: "Data de nascimento", value: "15/04/1990" },
+  { label: "Nacionalidade", value: "Brasileiro" },
+  { label: "Endere\xE7o", value: "Rua das Flores, 123 \u2014 SP" }
+];
+var DEFAULT_DOCUMENT_OPTIONS = [
+  { value: "rg", label: "RG \u2014 Registro Geral" },
+  { value: "cnh", label: "CNH \u2014 Carteira de Motorista" },
+  { value: "passport", label: "Passaporte" },
+  { value: "rne", label: "RNE \u2014 Registro Nacional de Estrangeiro" }
+];
+var KYC_STATUS_BADGE_LABELS = {
+  processing: "Processando",
+  pending: "Pendente",
+  reviewing: "Em an\xE1lise",
+  verified: "Verificado",
+  completed: "Conclu\xEDdo",
+  failed: "Falhou",
+  rejected: "Rejeitado",
+  cancelled: "Cancelado"
+};
+var KYC_STATUS_BADGE_CLASSES = {
+  processing: {
+    text: "text-[color:var(--deframe-widget-color-state-info)]",
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_12%,transparent)]",
+    border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_28%,transparent)]"
+  },
+  pending: {
+    text: "text-[color:var(--deframe-widget-color-state-warning)]",
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_12%,transparent)]",
+    border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_28%,transparent)]"
+  },
+  reviewing: {
+    text: "text-[color:var(--deframe-widget-color-state-warning)]",
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_12%,transparent)]",
+    border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_28%,transparent)]"
+  },
+  verified: {
+    text: "text-[color:var(--deframe-widget-color-state-success)]",
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)]",
+    border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_28%,transparent)]"
+  },
+  completed: {
+    text: "text-[color:var(--deframe-widget-color-state-success)]",
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)]",
+    border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_28%,transparent)]"
+  },
+  failed: {
+    text: "text-[color:var(--deframe-widget-color-state-error)]",
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_12%,transparent)]",
+    border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_28%,transparent)]"
+  },
+  rejected: {
+    text: "text-[color:var(--deframe-widget-color-state-error)]",
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_12%,transparent)]",
+    border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_28%,transparent)]"
+  },
+  cancelled: {
+    text: "text-[color:var(--deframe-widget-color-text-tertiary)]",
+    bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-text-tertiary)_10%,transparent)]",
+    border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-text-tertiary)_22%,transparent)]"
+  }
+};
+function KYCStatusBadgeIcon({
+  status,
+  size
+}) {
+  if (status === "processing") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v3.5l2 1.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ] });
+  }
+  if (status === "pending") {
+    return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3h2.5v3.5L8 8.5l2.5-2V3H13M3 13h10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  }
+  if (status === "reviewing") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "8", cy: "8", rx: "6", ry: "4", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" })
+    ] });
+  }
+  if (status === "verified" || status === "completed") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2.2 2.2L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] });
+  }
+  if (status === "failed" || status === "rejected") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 5.5l5 5M10.5 5.5l-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 8h5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
+}
+function KYCStatusBadge({
+  status,
+  label,
+  size = "default",
+  className
+}) {
+  const isCompact = size === "compact";
+  const isAnimated = status === "processing";
+  const colors = KYC_STATUS_BADGE_CLASSES[status];
+  const iconSize = isCompact ? 11 : 13;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "kyc-status-badge",
+      "data-test-id": "kyc-status-badge",
+      "data-status": status,
+      className: tailwindMerge.twMerge(
+        "inline-flex max-w-fit items-center gap-[var(--deframe-widget-size-gap-xs)] rounded-[var(--deframe-widget-size-radius-full)] border",
+        isCompact ? "px-[calc(var(--deframe-widget-size-padding-x-xs)+2px)] py-[2px]" : "px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-xs)]",
+        colors.text,
+        colors.bg,
+        colors.border,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsxRuntime.jsx(KYCStatusBadgeIcon, { status, size: iconSize }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: tailwindMerge.twMerge(
+              "truncate font-[var(--deframe-widget-font-weight-medium)]",
+              colors.text,
+              isCompact ? "text-[11px] leading-[14px]" : "text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)]"
+            ),
+            children: label != null ? label : KYC_STATUS_BADGE_LABELS[status]
+          }
+        ),
+        isAnimated && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("flex shrink-0 items-center opacity-80", colors.text), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, { className: isCompact ? "text-[11px] leading-[14px]" : "text-[12px] leading-[16px]" }) })
+      ]
+    }
+  );
+}
+function KYCDataCard({
+  title = "Dados de identidade",
+  status,
+  statusLabel,
+  fields,
+  action,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "kyc-data-card",
+      "data-test-id": "kyc-data-card",
+      style,
+      className: tailwindMerge.twMerge(
+        "w-full self-start rounded-[var(--deframe-widget-size-radius-md)] border border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:var(--deframe-widget-color-bg-secondary)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "kyc-data-card-header",
+            "data-test-id": "kyc-data-card-header",
+            className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)] border-b border-[color:var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "data-slot": "kyc-data-card-title",
+                  "data-test-id": "kyc-data-card-title",
+                  className: "text-[length:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]",
+                  children: title
+                }
+              ),
+              status && /* @__PURE__ */ jsxRuntime.jsx(KYCStatusBadge, { status, label: statusLabel, size: "compact" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "kyc-data-card-fields",
+            "data-test-id": "kyc-data-card-fields",
+            className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+            children: fields.map((field, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              KYCInfoRow,
+              {
+                label: field.label,
+                value: field.value,
+                divider: index < fields.length - 1
+              },
+              `${field.label}-${index}`
+            ))
+          }
+        ),
+        action && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "kyc-data-card-action",
+            "data-test-id": "kyc-data-card-action",
+            className: "border-t border-[color:var(--deframe-widget-color-border-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
+            children: action
+          }
+        )
+      ]
+    }
+  );
+}
+var PANEL_DEFAULTS = {
+  verified: {
+    title: "Identidade verificada",
+    description: "Seus dados foram validados com sucesso. Voc\xEA tem acesso completo \xE0 plataforma.",
+    glow: "color-mix(in srgb, var(--deframe-widget-color-state-success) 12%, transparent)",
+    glow2: "color-mix(in srgb, var(--deframe-widget-color-state-success) 22%, transparent)"
+  },
+  reviewing: {
+    title: "Em an\xE1lise",
+    description: "Estamos verificando seus documentos. Isso pode levar at\xE9 2 dias \xFAteis.",
+    glow: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 12%, transparent)",
+    glow2: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 22%, transparent)"
+  },
+  pending: {
+    title: "Verifica\xE7\xE3o pendente",
+    description: "Complete o processo de verifica\xE7\xE3o de identidade para liberar todas as funcionalidades.",
+    glow: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 12%, transparent)",
+    glow2: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 22%, transparent)"
+  },
+  rejected: {
+    title: "Verifica\xE7\xE3o rejeitada",
+    description: "N\xE3o foi poss\xEDvel validar seus dados. Revise as informa\xE7\xF5es e tente novamente.",
+    glow: "color-mix(in srgb, var(--deframe-widget-color-state-error) 12%, transparent)",
+    glow2: "color-mix(in srgb, var(--deframe-widget-color-state-error) 22%, transparent)"
+  },
+  expired: {
+    title: "Sess\xE3o expirada",
+    description: "O tempo para concluir a verifica\xE7\xE3o expirou. Voc\xEA pode reiniciar o processo.",
+    glow: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 12%, transparent)",
+    glow2: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 22%, transparent)"
+  }
+};
+function StatusIcon({ status }) {
+  if (status === "verified") {
+    return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 22l9 9L34 14", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  }
+  if (status === "reviewing") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: "22", cy: "22", rx: "14", ry: "9", stroke: "currentColor", strokeWidth: "3" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "22", cy: "22", r: "4", fill: "currentColor" })
+    ] });
+  }
+  if (status === "pending" || status === "expired") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "22", cy: "22", r: "14", stroke: "currentColor", strokeWidth: "3" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 14v9l5 4", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 14l16 16M30 14L14 30", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round" }) });
+}
+function KYCStatusPanel({
+  status,
+  title,
+  description,
+  action,
+  className
+}) {
+  const defaults = PANEL_DEFAULTS[status];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "kyc-status-panel",
+      "data-test-id": "kyc-status-panel",
+      "data-status": status,
+      className: tailwindMerge.twMerge(
+        "flex w-full flex-col items-center gap-[var(--deframe-widget-size-gap-lg)] px-[var(--deframe-widget-size-padding-x-lg)] py-[var(--deframe-widget-size-padding-y-lg)] text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "kyc-status-panel-icon",
+            "data-test-id": "kyc-status-panel-icon",
+            className: "flex h-[64px] w-[64px] shrink-0 items-center justify-center rounded-[var(--deframe-widget-size-radius-full)]",
+            style: {
+              color: `var(--deframe-widget-color-state-${status === "verified" ? "success" : status === "rejected" ? "error" : "warning"})`,
+              background: defaults.glow,
+              boxShadow: `0 0 0 7px ${defaults.glow}, 0 0 24px ${defaults.glow2}`
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { status })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "kyc-status-panel-text",
+            "data-test-id": "kyc-status-panel-text",
+            className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  "data-slot": "kyc-status-panel-title",
+                  "data-test-id": "kyc-status-panel-title",
+                  className: "text-[length:var(--deframe-widget-font-size-lg)] font-[var(--deframe-widget-font-weight-semibold)] leading-[var(--deframe-widget-font-leading-lg)] text-[color:var(--deframe-widget-color-text-primary)]",
+                  children: title != null ? title : defaults.title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  "data-slot": "kyc-status-panel-description",
+                  "data-test-id": "kyc-status-panel-description",
+                  className: "max-w-[320px] text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]",
+                  children: description != null ? description : defaults.description
+                }
+              )
+            ]
+          }
+        ),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "kyc-status-panel-action", "data-test-id": "kyc-status-panel-action", children: action })
+      ]
+    }
+  );
+}
+function renderKYCActionButton(action, index) {
+  const ButtonComponent = action.variant === "secondary" ? SecondaryButton : PrimaryButton;
+  const button = /* @__PURE__ */ jsxRuntime.jsx(
+    ButtonComponent,
+    __spreadProps(__spreadValues({
+      className: tailwindMerge.twMerge("h-12 py-0", action.className)
+    }, action.buttonProps), {
+      children: action.label
+    }),
+    index
+  );
+  if (action.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: action.href, className: "w-full", children: button }, index);
+  }
+  return button;
+}
+function KYCActionRow({ actions, className }) {
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "kyc-action-row",
+      "data-test-id": "kyc-action-row",
+      className: tailwindMerge.twMerge(
+        actions.length === 1 ? "flex w-full" : "flex w-full gap-[var(--deframe-widget-size-gap-sm)]",
+        className
+      ),
+      children: actions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: renderKYCActionButton(action, index) }, index))
+    }
+  );
+}
+function KYCChecklistItem({ icon, label, description }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "kyc-checklist-item",
+      "data-test-id": "kyc-checklist-item",
+      className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex h-[32px] w-[32px] shrink-0 items-center justify-center rounded-[var(--deframe-widget-size-radius-sm)]",
+            style: {
+              background: "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 10%, transparent)",
+              color: "var(--deframe-widget-color-brand-primary)"
+            },
+            children: icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center justify-center text-[length:var(--deframe-widget-font-size-md)] text-[color:var(--deframe-widget-color-brand-primary)]", children: icon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-[6px] w-[6px] rounded-full bg-[color:var(--deframe-widget-color-brand-primary)]" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[2px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-secondary)]", children: label }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: description })
+        ] })
+      ]
+    }
+  );
+}
+function KYCChecklistCard({ items, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "kyc-checklist-card",
+      "data-test-id": "kyc-checklist-card",
+      className: tailwindMerge.twMerge(
+        "overflow-hidden rounded-[var(--deframe-widget-size-radius-md)] border border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:var(--deframe-widget-color-bg-secondary)]",
+        className
+      ),
+      children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: tailwindMerge.twMerge(
+            "px-[var(--deframe-widget-size-padding-x-md)] py-[12px]",
+            index < items.length - 1 && "border-b border-[color:var(--deframe-widget-color-border-secondary)]"
+          ),
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            KYCChecklistItem,
+            {
+              icon: item.icon,
+              label: item.label,
+              description: item.description
+            }
+          )
+        },
+        index
+      ))
+    }
+  );
+}
+function KYCFieldMessage({
+  tone = "error",
+  children,
+  className,
+  testId
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      "data-slot": "kyc-field-message",
+      "data-test-id": testId != null ? testId : "kyc-field-message",
+      className: tailwindMerge.twMerge(
+        "text-[length:var(--deframe-widget-font-size-xs)] leading-[var(--deframe-widget-font-leading-sm)]",
+        tone === "error" ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)]",
+        className
+      ),
+      children
+    }
+  );
+}
+var bannerTheme = {
+  info: {
+    iconColor: "text-[color:var(--deframe-widget-color-state-info)]",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 7v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "5.5", r: "0.75", fill: "currentColor" })
+    ] })
+  },
+  success: {
+    iconColor: "text-[color:var(--deframe-widget-color-state-success)]",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2.2 2.2L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] })
+  },
+  warning: {
+    iconColor: "text-[color:var(--deframe-widget-color-state-warning)]",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2.5l5.5 10.25H2.5L8 2.5z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6v3.25", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "11.25", r: "0.75", fill: "currentColor" })
+    ] })
+  },
+  error: {
+    iconColor: "text-[color:var(--deframe-widget-color-state-error)]",
+    icon: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 5.5l5 5M10.5 5.5l-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ] })
+  }
+};
+function KYCMessageBanner({
+  variant = "info",
+  children,
+  className,
+  testId
+}) {
+  const theme = bannerTheme[variant];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "kyc-message-banner",
+      "data-test-id": testId != null ? testId : "kyc-message-banner",
+      className: tailwindMerge.twMerge(
+        "flex items-start gap-[var(--deframe-widget-size-gap-sm)] rounded-[var(--deframe-widget-size-radius-md)] border px-[var(--deframe-widget-size-padding-x-sm)] py-[var(--deframe-widget-size-padding-y-sm)]",
+        "border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-tertiary)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: tailwindMerge.twMerge("mt-[2px] shrink-0", theme.iconColor), children: theme.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[length:var(--deframe-widget-font-size-xs)] leading-[var(--deframe-widget-font-leading-sm)]", children })
+      ]
+    }
+  );
+}
+function KYCStepIndicator({ total, current, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "kyc-step-indicator",
+      "data-test-id": "kyc-step-indicator",
+      className: tailwindMerge.twMerge("flex items-center gap-[var(--deframe-widget-size-gap-xs)]", className),
+      children: [
+        Array.from({ length: total }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "kyc-step-dot",
+            "data-test-id": `kyc-step-dot-${index + 1}`,
+            className: tailwindMerge.twMerge(
+              "h-[4px] rounded-[var(--deframe-widget-size-radius-full)] transition-all duration-300",
+              index <= current ? "w-[24px] bg-[color:var(--deframe-widget-color-brand-primary)]" : "w-[16px] bg-[color:var(--deframe-widget-color-border-primary)]"
+            )
+          },
+          index
+        )),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            "data-slot": "kyc-step-label",
+            "data-test-id": "kyc-step-label",
+            className: "ml-[var(--deframe-widget-size-gap-xs)] text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]",
+            children: [
+              current + 1,
+              " de ",
+              total
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function IconButton({
+  onClick,
+  label,
+  testId,
+  children
+}) {
+  if (!onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-9 w-9 shrink-0", "aria-hidden": "true" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "data-slot": testId,
+      "data-test-id": testId,
+      onClick,
+      className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--deframe-widget-size-radius-sm)] border border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-secondary)] outline-none transition-[background,color] duration-150 hover:bg-[color:var(--deframe-widget-color-bg-tertiary)] hover:text-[color:var(--deframe-widget-color-text-primary)]",
+      "aria-label": label,
+      children
+    }
+  );
+}
+function KYCPageHeader({
+  step,
+  totalSteps,
+  onBack,
+  onClose,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "kyc-page-header",
+      "data-test-id": "kyc-page-header",
+      className: tailwindMerge.twMerge(
+        "flex items-center justify-between px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: onBack, label: "Voltar", testId: "kyc-back-button", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z" }) }) }),
+        typeof step === "number" && typeof totalSteps === "number" ? /* @__PURE__ */ jsxRuntime.jsx(KYCStepIndicator, { total: totalSteps, current: Math.max(step - 1, 0) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-9 flex-1", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: onClose, label: "Fechar", testId: "kyc-close-button", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", strokeLinecap: "round" }) }) })
+      ]
+    }
+  );
+}
+function KYCPageSection({ title, description, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "kyc-page-section",
+      "data-test-id": "kyc-page-section",
+      className: tailwindMerge.twMerge("flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            "data-slot": "kyc-section-title",
+            "data-test-id": "kyc-section-title",
+            className: "text-[length:var(--deframe-widget-font-size-xl)] font-[var(--deframe-widget-font-weight-semibold)] leading-[var(--deframe-widget-font-leading-xl)] text-[color:var(--deframe-widget-color-text-primary)]",
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            "data-slot": "kyc-section-description",
+            "data-test-id": "kyc-section-description",
+            className: "text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]",
+            children: description
+          }
+        )
+      ]
+    }
+  );
+}
+function ContinueKeyHandler(e) {
+  var _a;
+  if (e.key !== "Enter" || e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) return;
+  const target = e.target;
+  if (!target) return;
+  const tag = (_a = target.tagName) == null ? void 0 : _a.toLowerCase();
+  if (tag === "textarea" || target.isContentEditable || tag === "button") return;
+  const root = e.currentTarget;
+  const continueButton = root.querySelector('button[data-kyc-continue="true"]');
+  if (!continueButton || continueButton.disabled) return;
+  e.preventDefault();
+  continueButton.click();
+}
+function KYCPageShell({ children, className, screenId, containerMode = "fullscreen" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "kyc-page-shell",
+      "data-test-id": "kyc-page-shell",
+      "data-kyc-screen": screenId,
+      className: tailwindMerge.twMerge(
+        "flex w-full max-w-[390px] flex-col",
+        containerMode === "fullscreen" ? "min-h-[100svh] bg-[color:var(--deframe-widget-color-bg-primary)]" : "mx-auto my-[40px] min-h-[calc(100svh-160px)] overflow-hidden rounded-[var(--deframe-widget-size-radius-md)] border border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:var(--deframe-widget-color-bg-secondary)] shadow-[0_20px_50px_rgba(17,20,27,0.12)]",
+        className
+      ),
+      onKeyDownCapture: ContinueKeyHandler,
+      children
+    }
+  );
+}
+function PageBody({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: [
+        "flex flex-1 flex-col justify-between gap-[var(--deframe-widget-size-gap-xl)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)]",
+        className
+      ].filter(Boolean).join(" "),
+      children
+    }
+  );
+}
+function KYCFormPage({
+  screenId,
+  onBack,
+  onClose,
+  step,
+  totalSteps,
+  title,
+  description,
+  children,
+  banners = [],
+  footer,
+  actions = [],
+  className,
+  containerMode = "fullscreen"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(KYCPageShell, { screenId, className, containerMode, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(KYCPageHeader, { step, totalSteps, onBack, onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs(PageBody, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-lg)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(KYCPageSection, { title, description }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "kyc-form-page-content",
+            "data-test-id": "kyc-form-page-content",
+            className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
+            children
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
+        banners.map((banner, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          KYCMessageBanner,
+          {
+            variant: banner.variant,
+            testId: banner.testId,
+            children: banner.children
+          },
+          index
+        )),
+        footer,
+        /* @__PURE__ */ jsxRuntime.jsx(KYCActionRow, { actions })
+      ] })
+    ] })
+  ] });
+}
+function CountrySelect() {
+  const [value, setValue] = React6.useState("brasil");
+  return /* @__PURE__ */ jsxRuntime.jsxs(Select, { value, onValueChange: setValue, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { placeholder: "Selecione o pa\xEDs" }),
+    /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: "brasil", children: "Brasil" }) })
+  ] });
+}
+function DefaultAddressLoadingContent() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_100px] gap-[var(--deframe-widget-size-gap-sm)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_100px] gap-[var(--deframe-widget-size-gap-sm)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" })
+  ] });
+}
+function KYCAddressPage({
+  screenId = "address",
+  onBack,
+  onClose,
+  step = 4,
+  totalSteps = 4,
+  title = "Qual \xE9 o seu endere\xE7o?",
+  description = "Digite o seu CEP e preencheremos o restante automaticamente.",
+  cepField,
+  streetField,
+  cityField,
+  stateField,
+  complementField,
+  countryField,
+  numberField,
+  isLoading = false,
+  loadingContent,
+  banners = [],
+  actions,
+  containerMode = "fullscreen",
+  onNext
+}) {
+  const defaultActions = actions != null ? actions : [
+    {
+      label: "Continuar",
+      buttonProps: { onClick: onNext }
+    }
+  ];
+  const fallbackFields = React6.useMemo(() => ({
+    cepField: /* @__PURE__ */ jsxRuntime.jsxs(Input, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: "cep", children: "CEP" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputField, { id: "cep", placeholder: "00000-000", inputMode: "numeric" })
+    ] }),
+    streetField: /* @__PURE__ */ jsxRuntime.jsxs(Input, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: "street", children: "Logradouro" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputField, { id: "street", placeholder: "Rua, Avenida, etc.", autoComplete: "street-address" })
+    ] }),
+    cityField: /* @__PURE__ */ jsxRuntime.jsxs(Input, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: "city", children: "Cidade" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputField, { id: "city", placeholder: "S\xE3o Paulo", autoComplete: "address-level2" })
+    ] }),
+    stateField: /* @__PURE__ */ jsxRuntime.jsxs(Input, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: "state", children: "Estado" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputField, { id: "state", placeholder: "SP", maxLength: 2 })
+    ] }),
+    complementField: /* @__PURE__ */ jsxRuntime.jsxs(Input, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: "complement", children: "Complemento" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputField, { id: "complement", placeholder: "Apto, Bloco (opcional)" })
+    ] }),
+    countryField: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "kyc-country-field",
+        "data-test-id": "kyc-country-field",
+        className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { htmlFor: "country", children: "Pa\xEDs" }),
+          /* @__PURE__ */ jsxRuntime.jsx(CountrySelect, {})
+        ]
+      }
+    )
+  }), []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    KYCFormPage,
+    {
+      screenId,
+      onBack,
+      onClose,
+      step,
+      totalSteps,
+      title,
+      description,
+      banners,
+      actions: defaultActions,
+      containerMode,
+      children: [
+        cepField != null ? cepField : fallbackFields.cepField,
+        isLoading ? loadingContent != null ? loadingContent : /* @__PURE__ */ jsxRuntime.jsx(DefaultAddressLoadingContent, {}) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          streetField != null ? streetField : fallbackFields.streetField,
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_100px] gap-[var(--deframe-widget-size-gap-sm)]", "data-test-id": "kyc-address-row", children: [
+            cityField != null ? cityField : fallbackFields.cityField,
+            stateField != null ? stateField : fallbackFields.stateField
+          ] }),
+          (complementField != null ? complementField : fallbackFields.complementField) && numberField ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_100px] gap-[var(--deframe-widget-size-gap-sm)]", children: [
+            complementField != null ? complementField : fallbackFields.complementField,
+            numberField
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            complementField != null ? complementField : fallbackFields.complementField,
+            numberField && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-[100px]", children: numberField })
+          ] }),
+          countryField != null ? countryField : fallbackFields.countryField
+        ] })
+      ]
+    }
+  );
+}
+function KYCBasicDataPage(_a) {
+  var _b = _a, {
+    screenId = "basic-data",
+    step = 1,
+    totalSteps = 4,
+    title = "Comece com seus dados b\xE1sicos",
+    description = "Use seu CPF e telefone para iniciarmos a verifica\xE7\xE3o.",
+    cpfField,
+    phoneField
+  } = _b, props = __objRest(_b, [
+    "screenId",
+    "step",
+    "totalSteps",
+    "title",
+    "description",
+    "cpfField",
+    "phoneField"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    KYCFormPage,
+    __spreadProps(__spreadValues({
+      screenId,
+      step,
+      totalSteps,
+      title,
+      description
+    }, props), {
+      children: [
+        cpfField,
+        phoneField
+      ]
+    })
+  );
+}
+function KYCDocumentPage(_a) {
+  var _b = _a, {
+    screenId = "document",
+    step = 2,
+    totalSteps = 4,
+    title = "Documento de identidade",
+    description = "Escolha o tipo de documento que voc\xEA usar\xE1 para a verifica\xE7\xE3o.",
+    checklistItems,
+    documentOptions,
+    selectedValue,
+    onSelectValue,
+    notice = "A pr\xF3xima etapa usar\xE1 um servi\xE7o externo de verifica\xE7\xE3o. Voc\xEA ser\xE1 redirecionado para tirar fotos do documento e uma selfie.",
+    content
+  } = _b, props = __objRest(_b, [
+    "screenId",
+    "step",
+    "totalSteps",
+    "title",
+    "description",
+    "checklistItems",
+    "documentOptions",
+    "selectedValue",
+    "onSelectValue",
+    "notice",
+    "content"
+  ]);
+  const [internalSelectedValue, setInternalSelectedValue] = React6.useState("");
+  const effectiveOptions = documentOptions != null ? documentOptions : DEFAULT_DOCUMENT_OPTIONS;
+  const effectiveSelectedValue = selectedValue != null ? selectedValue : internalSelectedValue;
+  const handleSelectValue = onSelectValue != null ? onSelectValue : setInternalSelectedValue;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    KYCFormPage,
+    __spreadProps(__spreadValues({
+      screenId,
+      step,
+      totalSteps,
+      title,
+      description
+    }, props), {
+      children: [
+        Array.isArray(effectiveOptions) && effectiveOptions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "kyc-document-type-list",
+            "data-test-id": "kyc-document-type-list",
+            "data-kyc-field": "documentType",
+            className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
+            children: effectiveOptions.map(({ value, label, description: optionDescription }) => /* @__PURE__ */ jsxRuntime.jsx(
+              ChoiceCard,
+              {
+                "data-kyc-choice-value": value,
+                "data-kyc-choice-selected": effectiveSelectedValue === value ? "true" : "false",
+                label,
+                description: optionDescription,
+                selected: effectiveSelectedValue === value,
+                onClick: () => handleSelectValue(value)
+              },
+              value
+            ))
+          }
+        ) : checklistItems && checklistItems.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(KYCChecklistCard, { items: checklistItems }) : null,
+        notice && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-slot": "kyc-idv-notice",
+            "data-test-id": "kyc-idv-notice",
+            className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)] rounded-[var(--deframe-widget-size-radius-md)] border border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:var(--deframe-widget-color-bg-secondary)] p-[var(--deframe-widget-size-padding-x-sm)]",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", className: "mt-[2px] shrink-0 text-[color:var(--deframe-widget-color-state-info)]", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 7v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "5.5", r: "0.75", fill: "currentColor" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[length:var(--deframe-widget-font-size-xs)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: notice })
+            ]
+          }
+        ),
+        content
+      ]
+    })
+  );
+}
+function KYCEditPage(_a) {
+  var _b = _a, {
+    screenId = "edit",
+    title = "Editar informa\xE7\xF5es",
+    fullNameField,
+    dateOfBirthField,
+    cpfField,
+    phoneField,
+    emailField
+  } = _b, props = __objRest(_b, [
+    "screenId",
+    "title",
+    "fullNameField",
+    "dateOfBirthField",
+    "cpfField",
+    "phoneField",
+    "emailField"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    KYCFormPage,
+    __spreadProps(__spreadValues({
+      screenId,
+      title
+    }, props), {
+      children: [
+        fullNameField,
+        dateOfBirthField,
+        cpfField,
+        phoneField,
+        emailField
+      ]
+    })
+  );
+}
+function KYCIntroPage({
+  screenId = "intro",
+  onClose,
+  title = "Verifica\xE7\xE3o de identidade",
+  description = "Para garantir a seguran\xE7a da plataforma, precisamos confirmar sua identidade. O processo leva cerca de 5 minutos.",
+  checklistItems = DEFAULT_INTRO_CHECKLIST,
+  banners = [],
+  legalNotice,
+  primaryAction = { label: "Come\xE7ar verifica\xE7\xE3o" },
+  className,
+  containerMode = "fullscreen"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(KYCPageShell, { screenId, containerMode, children: [
+    onClose && /* @__PURE__ */ jsxRuntime.jsx(KYCPageHeader, { onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-slot": "kyc-intro-page",
+        "data-test-id": "kyc-intro-page",
+        className: tailwindMerge.twMerge(
+          "flex flex-1 flex-col items-center justify-between gap-[var(--deframe-widget-size-gap-xl)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-xl)]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-[var(--deframe-widget-size-gap-lg)] text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "data-test-id": "kyc-intro-icon",
+                className: "flex h-[64px] w-[64px] items-center justify-center rounded-[var(--deframe-widget-size-radius-full)]",
+                style: {
+                  background: "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)",
+                  boxShadow: "0 0 0 7px color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent), 0 0 24px color-mix(in srgb, var(--deframe-widget-color-brand-primary) 22%, transparent)",
+                  color: "var(--deframe-widget-color-brand-primary)"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "8", y: "10", width: "28", height: "20", rx: "3", stroke: "currentColor", strokeWidth: "3" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "22", cy: "20", r: "5", stroke: "currentColor", strokeWidth: "3" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 34c0-4 4.5-7 10-7s10 3 10 7", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
+                {
+                  "data-test-id": "kyc-intro-title",
+                  className: "text-[length:var(--deframe-widget-font-size-xxl)] font-[var(--deframe-widget-font-weight-semibold)] leading-[var(--deframe-widget-font-leading-xl)] text-[color:var(--deframe-widget-color-text-primary)]",
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  "data-test-id": "kyc-intro-description",
+                  className: "max-w-[300px] text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]",
+                  children: description
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(KYCChecklistCard, { items: checklistItems, className: "w-full max-w-[320px]" }),
+            banners.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full max-w-[320px] flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: banners.map((banner, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              KYCMessageBanner,
+              {
+                variant: banner.variant,
+                testId: banner.testId,
+                children: banner.children
+              },
+              index
+            )) }),
+            legalNotice && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-[320px] text-[length:var(--deframe-widget-font-size-xs)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: legalNotice })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: renderKYCActionButton(primaryAction, 0) })
+        ]
+      }
+    )
+  ] });
+}
+function KYCLoadingPage({
+  screenId = "loading",
+  onClose,
+  title,
+  description,
+  note,
+  className,
+  containerMode = "fullscreen"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(KYCPageShell, { screenId, className, containerMode, children: [
+    onClose && /* @__PURE__ */ jsxRuntime.jsx(KYCPageHeader, { onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-[var(--deframe-widget-size-gap-xl)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-xl)] text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "flex h-[72px] w-[72px] items-center justify-center rounded-[var(--deframe-widget-size-radius-full)]",
+          style: {
+            background: "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)",
+            boxShadow: "0 0 0 7px color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent), 0 0 24px color-mix(in srgb, var(--deframe-widget-color-brand-primary) 22%, transparent)"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-9 w-9 rounded-full border-[3px] border-[color:var(--deframe-widget-color-brand-primary)] border-t-transparent animate-spin" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[length:var(--deframe-widget-font-size-xl)] font-[var(--deframe-widget-font-weight-semibold)] leading-[var(--deframe-widget-font-leading-xl)] text-[color:var(--deframe-widget-color-text-primary)]", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: description })
+      ] }),
+      note && /* @__PURE__ */ jsxRuntime.jsx(KYCMessageBanner, { variant: "info", children: note }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
+        "Carregando ",
+        /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
+      ] })
+    ] })
+  ] });
+}
+function PageBody2({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col justify-between gap-[var(--deframe-widget-size-gap-xl)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)]", children });
+}
+function KYCReviewPage({
+  screenId = "review",
+  onClose,
+  step = 3,
+  totalSteps = 4,
+  title,
+  description,
+  cards,
+  banners = [],
+  actions = [],
+  className,
+  containerMode = "fullscreen"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(KYCPageShell, { screenId, className, containerMode, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(KYCPageHeader, { step, totalSteps, onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs(PageBody2, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-lg)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(KYCPageSection, { title, description }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: cards.map((card, index) => /* @__PURE__ */ jsxRuntime.jsx(KYCDataCard, __spreadValues({}, card), index)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
+        banners.map((banner, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          KYCMessageBanner,
+          {
+            variant: banner.variant,
+            testId: banner.testId,
+            children: banner.children
+          },
+          index
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(KYCActionRow, { actions })
+      ] })
+    ] })
+  ] });
+}
+function PageBody3({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col justify-between gap-[var(--deframe-widget-size-gap-xl)] px-[var(--deframe-widget-size-padding-x-md)] pb-[var(--deframe-widget-size-padding-y-xl)]", children });
+}
+function KYCReviewPageSkeleton({
+  screenId = "review-loading",
+  onClose,
+  step = 3,
+  totalSteps = 4,
+  containerMode = "fullscreen"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(KYCPageShell, { screenId, containerMode, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(KYCPageHeader, { step, totalSteps, onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs(PageBody3, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-lg)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-7 w-56 animate-pulse rounded bg-[color:var(--deframe-widget-color-bg-tertiary)]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-40 animate-pulse rounded bg-[color:var(--deframe-widget-color-bg-tertiary)]" })
+        ] }),
+        [0, 1].map((card) => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "rounded-[var(--deframe-widget-size-radius-md)] border border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:var(--deframe-widget-color-bg-secondary)] p-[var(--deframe-widget-size-padding-x-md)]",
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [0, 1, 2].map((row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-[color:var(--deframe-widget-color-bg-tertiary)]" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-32 animate-pulse rounded bg-[color:var(--deframe-widget-color-bg-tertiary)]" })
+            ] }, row)) })
+          },
+          card
+        ))
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 flex-1 animate-pulse rounded-[var(--deframe-widget-size-radius-xs)] bg-[color:var(--deframe-widget-color-bg-tertiary)]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 flex-1 animate-pulse rounded-[var(--deframe-widget-size-radius-xs)] bg-[color:var(--deframe-widget-color-bg-tertiary)]" })
+      ] })
+    ] })
+  ] });
+}
+function statusItemToneClasses(tone) {
+  switch (tone) {
+    case "success":
+      return "text-[color:var(--deframe-widget-color-state-success)]";
+    case "warning":
+      return "text-[color:var(--deframe-widget-color-state-warning)]";
+    case "error":
+      return "text-[color:var(--deframe-widget-color-state-error)]";
+    default:
+      return "text-[color:var(--deframe-widget-color-text-secondary)]";
+  }
+}
+function DefaultStatusItemIcon({ tone = "default" }) {
+  const className = statusItemToneClasses(tone);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("flex h-11 w-11 items-center justify-center rounded-[var(--deframe-widget-size-radius-sm)] bg-[color:var(--deframe-widget-color-bg-tertiary)]", className), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 6v4.5l2.5 1.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] }) });
+}
+function KYCStatusItemCard({
+  icon,
+  title,
+  description,
+  tone = "default",
+  testId,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "kyc-status-item-card",
+      "data-test-id": testId != null ? testId : "kyc-status-item-card",
+      className: tailwindMerge.twMerge(
+        "flex items-start gap-[var(--deframe-widget-size-gap-md)] rounded-[var(--deframe-widget-size-radius-md)] border border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:var(--deframe-widget-color-bg-secondary)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx(DefaultStatusItemIcon, { tone }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[2px]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[length:var(--deframe-widget-font-size-md)] font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: tailwindMerge.twMerge("text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)]", statusItemToneClasses(tone)), children: description })
+        ] })
+      ]
+    }
+  );
+}
+function resolveCardStatus(status) {
+  if (status === "verified") return "verified";
+  if (status === "rejected") return "rejected";
+  return "reviewing";
+}
+function KYCStatusPage({
+  screenId = "pending",
+  onClose,
+  status,
+  panelStatus,
+  panelTitle,
+  panelDescription,
+  panelAction,
+  items = [],
+  cards,
+  banners = [],
+  actions = [],
+  footer,
+  className,
+  containerMode = "fullscreen"
+}) {
+  var _a;
+  const effectiveStatus = (_a = panelStatus != null ? panelStatus : status) != null ? _a : "reviewing";
+  const effectiveCards = cards != null ? cards : [{ status: resolveCardStatus(effectiveStatus), fields: DEFAULT_STATUS_FIELDS }];
+  return /* @__PURE__ */ jsxRuntime.jsxs(KYCPageShell, { screenId, className, containerMode, children: [
+    onClose && /* @__PURE__ */ jsxRuntime.jsx(KYCPageHeader, { onClose }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-[var(--deframe-widget-size-gap-md)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-[var(--deframe-widget-size-radius-md)] border border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:var(--deframe-widget-color-bg-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+        KYCStatusPanel,
+        {
+          status: effectiveStatus,
+          title: panelTitle,
+          description: panelDescription,
+          action: panelAction
+        }
+      ) }),
+      items.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(KYCStatusItemCard, __spreadValues({}, item), index)) }),
+      effectiveCards.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: effectiveCards.map((card, index) => /* @__PURE__ */ jsxRuntime.jsx(KYCDataCard, __spreadValues({}, card), index)) }),
+      banners.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: banners.map((banner, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        KYCMessageBanner,
+        {
+          variant: banner.variant,
+          testId: banner.testId,
+          children: banner.children
+        },
+        index
+      )) }),
+      footer,
+      actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(KYCActionRow, { actions })
+    ] })
+  ] });
+}
 var gapClasses3 = {
   xs: "gap-[var(--deframe-widget-size-gap-xs)]",
   sm: "gap-[var(--deframe-widget-size-gap-sm)]",
@@ -15007,6 +16394,7 @@ exports.BackgroundContainer = BackgroundContainer;
 exports.BannerNotification = BannerNotification;
 exports.Chip = Chip;
 exports.ChipGroup = ChipGroup;
+exports.ChoiceCard = ChoiceCard;
 exports.ChooseANetworkView = ChooseANetworkView;
 exports.ChooseAStrategyActionsheetView = ChooseAStrategyActionsheetView;
 exports.ChooseAnAssetSwapView = ChooseAnAssetSwapView;
@@ -15091,7 +16479,33 @@ exports.InfoRowIconValue = InfoRowIconValue;
 exports.InfoRowWithIcon = InfoRowWithIcon;
 exports.InfoValue = InfoValue;
 exports.Input = Input2;
+exports.InputField = InputField;
+exports.InputLabel = InputLabel;
+exports.InputRoot = Input;
 exports.InvestmentCrossChainProcessingView = InvestmentCrossChainProcessingView;
+exports.KYCActionRow = KYCActionRow;
+exports.KYCAddressPage = KYCAddressPage;
+exports.KYCBasicDataPage = KYCBasicDataPage;
+exports.KYCChecklistCard = KYCChecklistCard;
+exports.KYCChecklistItem = KYCChecklistItem;
+exports.KYCDataCard = KYCDataCard;
+exports.KYCDocumentPage = KYCDocumentPage;
+exports.KYCEditPage = KYCEditPage;
+exports.KYCFieldMessage = KYCFieldMessage;
+exports.KYCFormPage = KYCFormPage;
+exports.KYCInfoRow = KYCInfoRow;
+exports.KYCIntroPage = KYCIntroPage;
+exports.KYCLoadingPage = KYCLoadingPage;
+exports.KYCMessageBanner = KYCMessageBanner;
+exports.KYCPageHeader = KYCPageHeader;
+exports.KYCPageSection = KYCPageSection;
+exports.KYCPageShell = KYCPageShell;
+exports.KYCReviewPage = KYCReviewPage;
+exports.KYCReviewPageSkeleton = KYCReviewPageSkeleton;
+exports.KYCStatusItemCard = KYCStatusItemCard;
+exports.KYCStatusPage = KYCStatusPage;
+exports.KYCStatusPanel = KYCStatusPanel;
+exports.KYCStepIndicator = KYCStepIndicator;
 exports.Label = Label;
 exports.Link = Link;
 exports.ListItem = ListItem;