@deframe-sdk/components 0.1.32 → 0.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@ import { twMerge } from 'tailwind-merge';
2
2
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
3
3
  import { HiXMark, HiChevronUp, HiChevronDown, HiChevronLeft, HiOutlineClock, HiArrowRight, HiArrowLeft } from 'react-icons/hi2';
4
4
  import * as React6 from 'react';
5
- import React6__default, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
5
+ import React6__default, { useMemo, useState, useEffect, useRef, useCallback } from 'react';
6
6
  import { motion, AnimatePresence } from 'framer-motion';
7
7
  import { MdClose, MdOutlineSearch, MdOutlineSearchOff, MdOutlineSwapHoriz, MdHistory, MdOutlineSwapVert, MdArrowRight, MdArrowDropDown, MdOutlineArrowBack, MdOutlineArrowDropDown, MdOutlineClose, MdContentCopy, MdOutlineExpandMore, MdQrCodeScanner, MdOutlineArrowUpward, MdOutlineArrowDownward, MdCheckCircleOutline, MdErrorOutline, MdWarningAmber, MdInfoOutline, MdArrowUpward, MdArrowDownward } from 'react-icons/md';
8
8
  import { IoAlertCircleOutline, IoTimeOutline, IoCheckmarkOutline } from 'react-icons/io5';
@@ -2436,6 +2436,1393 @@ var ProcessingBadge = ({
2436
2436
  }
2437
2437
  );
2438
2438
  };
2439
+ function ChoiceCard(_a) {
2440
+ var _b = _a, {
2441
+ label,
2442
+ description,
2443
+ selected = false,
2444
+ onClick,
2445
+ className
2446
+ } = _b, buttonProps = __objRest(_b, [
2447
+ "label",
2448
+ "description",
2449
+ "selected",
2450
+ "onClick",
2451
+ "className"
2452
+ ]);
2453
+ return /* @__PURE__ */ jsxs(
2454
+ "button",
2455
+ __spreadProps(__spreadValues({
2456
+ type: "button",
2457
+ "data-slot": "choice-card",
2458
+ "data-test-id": "choice-card",
2459
+ "data-selected": selected,
2460
+ onClick
2461
+ }, buttonProps), {
2462
+ className: twMerge(
2463
+ "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",
2464
+ "bg-[color:var(--deframe-widget-color-bg-secondary)]",
2465
+ 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)]",
2466
+ className
2467
+ ),
2468
+ children: [
2469
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-[var(--deframe-widget-size-gap-sm)]", children: [
2470
+ /* @__PURE__ */ jsx(
2471
+ "span",
2472
+ {
2473
+ "data-slot": "choice-card-label",
2474
+ "data-test-id": "choice-card-label",
2475
+ className: twMerge(
2476
+ "text-[length:var(--deframe-widget-font-size-md)] font-[var(--deframe-widget-font-weight-medium)] leading-[var(--deframe-widget-font-leading-md)]",
2477
+ selected ? "text-[color:var(--deframe-widget-color-brand-primary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
2478
+ ),
2479
+ children: label
2480
+ }
2481
+ ),
2482
+ /* @__PURE__ */ jsx(
2483
+ "span",
2484
+ {
2485
+ "data-slot": "choice-card-indicator",
2486
+ "data-test-id": "choice-card-indicator",
2487
+ "aria-hidden": "true",
2488
+ className: twMerge(
2489
+ "flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[var(--deframe-widget-size-radius-full)] border-2 transition-colors duration-150",
2490
+ selected ? "border-[color:var(--deframe-widget-color-brand-primary)]" : "border-[color:var(--deframe-widget-color-border-primary)]"
2491
+ ),
2492
+ children: selected && /* @__PURE__ */ jsx("span", { className: "h-[8px] w-[8px] rounded-[var(--deframe-widget-size-radius-full)] bg-[color:var(--deframe-widget-color-brand-primary)]" })
2493
+ }
2494
+ )
2495
+ ] }),
2496
+ description && /* @__PURE__ */ jsx(
2497
+ "p",
2498
+ {
2499
+ "data-slot": "choice-card-description",
2500
+ "data-test-id": "choice-card-description",
2501
+ 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)]",
2502
+ children: description
2503
+ }
2504
+ )
2505
+ ]
2506
+ })
2507
+ );
2508
+ }
2509
+ function KYCInfoRow({ label, value, divider = true, className }) {
2510
+ return /* @__PURE__ */ jsxs(
2511
+ "div",
2512
+ {
2513
+ "data-slot": "kyc-info-row",
2514
+ "data-test-id": "kyc-info-row",
2515
+ className: twMerge(
2516
+ "flex w-full items-start justify-between gap-[var(--deframe-widget-size-gap-md)]",
2517
+ divider && "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]",
2518
+ className
2519
+ ),
2520
+ children: [
2521
+ /* @__PURE__ */ jsx(
2522
+ "span",
2523
+ {
2524
+ "data-slot": "kyc-info-row-label",
2525
+ "data-test-id": "kyc-info-row-label",
2526
+ 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)]",
2527
+ children: label
2528
+ }
2529
+ ),
2530
+ /* @__PURE__ */ jsx(
2531
+ "span",
2532
+ {
2533
+ "data-slot": "kyc-info-row-value",
2534
+ "data-test-id": "kyc-info-row-value",
2535
+ 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)]",
2536
+ children: value
2537
+ }
2538
+ )
2539
+ ]
2540
+ }
2541
+ );
2542
+ }
2543
+ var DEFAULT_INTRO_CHECKLIST = [
2544
+ {
2545
+ label: "Dados pessoais",
2546
+ icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
2547
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
2548
+ /* @__PURE__ */ jsx("path", { d: "M4 20c0-4 3.6-7 8-7s8 3 8 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2549
+ ] })
2550
+ },
2551
+ {
2552
+ label: "Endere\xE7o",
2553
+ icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
2554
+ /* @__PURE__ */ 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" }),
2555
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "2", stroke: "currentColor", strokeWidth: "1.5" })
2556
+ ] })
2557
+ },
2558
+ {
2559
+ label: "Documento de identidade",
2560
+ icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
2561
+ /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5" }),
2562
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "12", r: "2.5", stroke: "currentColor", strokeWidth: "1.5" }),
2563
+ /* @__PURE__ */ jsx("path", { d: "M13 10h5M13 12.5h4M13 15h3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2564
+ ] })
2565
+ },
2566
+ {
2567
+ label: "Selfie de verifica\xE7\xE3o",
2568
+ icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: [
2569
+ /* @__PURE__ */ 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" }),
2570
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "13", r: "3.5", stroke: "currentColor", strokeWidth: "1.5" })
2571
+ ] })
2572
+ }
2573
+ ];
2574
+ var DEFAULT_STATUS_FIELDS = [
2575
+ { label: "Nome completo", value: "Jo\xE3o Carlos Porto" },
2576
+ { label: "CPF", value: "123.456.789-00" },
2577
+ { label: "Data de nascimento", value: "15/04/1990" },
2578
+ { label: "Nacionalidade", value: "Brasileiro" },
2579
+ { label: "Endere\xE7o", value: "Rua das Flores, 123 \u2014 SP" }
2580
+ ];
2581
+ var DEFAULT_DOCUMENT_OPTIONS = [
2582
+ { value: "rg", label: "RG \u2014 Registro Geral" },
2583
+ { value: "cnh", label: "CNH \u2014 Carteira de Motorista" },
2584
+ { value: "passport", label: "Passaporte" },
2585
+ { value: "rne", label: "RNE \u2014 Registro Nacional de Estrangeiro" }
2586
+ ];
2587
+ var KYC_STATUS_BADGE_LABELS = {
2588
+ processing: "Processando",
2589
+ pending: "Pendente",
2590
+ reviewing: "Em an\xE1lise",
2591
+ verified: "Verificado",
2592
+ completed: "Conclu\xEDdo",
2593
+ failed: "Falhou",
2594
+ rejected: "Rejeitado",
2595
+ cancelled: "Cancelado"
2596
+ };
2597
+ var KYC_STATUS_BADGE_CLASSES = {
2598
+ processing: {
2599
+ text: "text-[color:var(--deframe-widget-color-state-info)]",
2600
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_12%,transparent)]",
2601
+ border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-info)_28%,transparent)]"
2602
+ },
2603
+ pending: {
2604
+ text: "text-[color:var(--deframe-widget-color-state-warning)]",
2605
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_12%,transparent)]",
2606
+ border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_28%,transparent)]"
2607
+ },
2608
+ reviewing: {
2609
+ text: "text-[color:var(--deframe-widget-color-state-warning)]",
2610
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_12%,transparent)]",
2611
+ border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_28%,transparent)]"
2612
+ },
2613
+ verified: {
2614
+ text: "text-[color:var(--deframe-widget-color-state-success)]",
2615
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)]",
2616
+ border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_28%,transparent)]"
2617
+ },
2618
+ completed: {
2619
+ text: "text-[color:var(--deframe-widget-color-state-success)]",
2620
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_12%,transparent)]",
2621
+ border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-success)_28%,transparent)]"
2622
+ },
2623
+ failed: {
2624
+ text: "text-[color:var(--deframe-widget-color-state-error)]",
2625
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_12%,transparent)]",
2626
+ border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_28%,transparent)]"
2627
+ },
2628
+ rejected: {
2629
+ text: "text-[color:var(--deframe-widget-color-state-error)]",
2630
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_12%,transparent)]",
2631
+ border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_28%,transparent)]"
2632
+ },
2633
+ cancelled: {
2634
+ text: "text-[color:var(--deframe-widget-color-text-tertiary)]",
2635
+ bg: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-text-tertiary)_10%,transparent)]",
2636
+ border: "border-[color:color-mix(in_srgb,var(--deframe-widget-color-text-tertiary)_22%,transparent)]"
2637
+ }
2638
+ };
2639
+ function KYCStatusBadgeIcon({
2640
+ status,
2641
+ size
2642
+ }) {
2643
+ if (status === "processing") {
2644
+ return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2645
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2646
+ /* @__PURE__ */ jsx("path", { d: "M8 5v3.5l2 1.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2647
+ ] });
2648
+ }
2649
+ if (status === "pending") {
2650
+ return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 3h2.5v3.5L8 8.5l2.5-2V3H13M3 13h10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
2651
+ }
2652
+ if (status === "reviewing") {
2653
+ return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2654
+ /* @__PURE__ */ jsx("ellipse", { cx: "8", cy: "8", rx: "6", ry: "4", stroke: "currentColor", strokeWidth: "1.5" }),
2655
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" })
2656
+ ] });
2657
+ }
2658
+ if (status === "verified" || status === "completed") {
2659
+ return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2660
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2661
+ /* @__PURE__ */ jsx("path", { d: "M5 8l2.2 2.2L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
2662
+ ] });
2663
+ }
2664
+ if (status === "failed" || status === "rejected") {
2665
+ return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2666
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2667
+ /* @__PURE__ */ jsx("path", { d: "M5.5 5.5l5 5M10.5 5.5l-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2668
+ ] });
2669
+ }
2670
+ return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
2671
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
2672
+ /* @__PURE__ */ jsx("path", { d: "M5.5 8h5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
2673
+ ] });
2674
+ }
2675
+ function KYCStatusBadge({
2676
+ status,
2677
+ label,
2678
+ size = "default",
2679
+ className
2680
+ }) {
2681
+ const isCompact = size === "compact";
2682
+ const isAnimated = status === "processing";
2683
+ const colors = KYC_STATUS_BADGE_CLASSES[status];
2684
+ const iconSize = isCompact ? 11 : 13;
2685
+ return /* @__PURE__ */ jsxs(
2686
+ "div",
2687
+ {
2688
+ "data-slot": "kyc-status-badge",
2689
+ "data-test-id": "kyc-status-badge",
2690
+ "data-status": status,
2691
+ className: twMerge(
2692
+ "inline-flex max-w-fit items-center gap-[var(--deframe-widget-size-gap-xs)] rounded-[var(--deframe-widget-size-radius-full)] border",
2693
+ 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)]",
2694
+ colors.text,
2695
+ colors.bg,
2696
+ colors.border,
2697
+ className
2698
+ ),
2699
+ children: [
2700
+ /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: /* @__PURE__ */ jsx(KYCStatusBadgeIcon, { status, size: iconSize }) }),
2701
+ /* @__PURE__ */ jsx(
2702
+ "span",
2703
+ {
2704
+ className: twMerge(
2705
+ "truncate font-[var(--deframe-widget-font-weight-medium)]",
2706
+ colors.text,
2707
+ isCompact ? "text-[11px] leading-[14px]" : "text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)]"
2708
+ ),
2709
+ children: label != null ? label : KYC_STATUS_BADGE_LABELS[status]
2710
+ }
2711
+ ),
2712
+ isAnimated && /* @__PURE__ */ jsx("span", { className: twMerge("flex shrink-0 items-center opacity-80", colors.text), "aria-hidden": "true", children: /* @__PURE__ */ jsx(LoadingDots, { className: isCompact ? "text-[11px] leading-[14px]" : "text-[12px] leading-[16px]" }) })
2713
+ ]
2714
+ }
2715
+ );
2716
+ }
2717
+ function KYCDataCard({
2718
+ title = "Dados de identidade",
2719
+ status,
2720
+ statusLabel,
2721
+ fields,
2722
+ action,
2723
+ className,
2724
+ style
2725
+ }) {
2726
+ return /* @__PURE__ */ jsxs(
2727
+ "div",
2728
+ {
2729
+ "data-slot": "kyc-data-card",
2730
+ "data-test-id": "kyc-data-card",
2731
+ style,
2732
+ className: twMerge(
2733
+ "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)]",
2734
+ className
2735
+ ),
2736
+ children: [
2737
+ /* @__PURE__ */ jsxs(
2738
+ "div",
2739
+ {
2740
+ "data-slot": "kyc-data-card-header",
2741
+ "data-test-id": "kyc-data-card-header",
2742
+ 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)]",
2743
+ children: [
2744
+ /* @__PURE__ */ jsx(
2745
+ "span",
2746
+ {
2747
+ "data-slot": "kyc-data-card-title",
2748
+ "data-test-id": "kyc-data-card-title",
2749
+ className: "text-[length:var(--deframe-widget-font-size-sm)] font-[var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)]",
2750
+ children: title
2751
+ }
2752
+ ),
2753
+ status && /* @__PURE__ */ jsx(KYCStatusBadge, { status, label: statusLabel, size: "compact" })
2754
+ ]
2755
+ }
2756
+ ),
2757
+ /* @__PURE__ */ jsx(
2758
+ "div",
2759
+ {
2760
+ "data-slot": "kyc-data-card-fields",
2761
+ "data-test-id": "kyc-data-card-fields",
2762
+ 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)]",
2763
+ children: fields.map((field, index) => /* @__PURE__ */ jsx(
2764
+ KYCInfoRow,
2765
+ {
2766
+ label: field.label,
2767
+ value: field.value,
2768
+ divider: index < fields.length - 1
2769
+ },
2770
+ `${field.label}-${index}`
2771
+ ))
2772
+ }
2773
+ ),
2774
+ action && /* @__PURE__ */ jsx(
2775
+ "div",
2776
+ {
2777
+ "data-slot": "kyc-data-card-action",
2778
+ "data-test-id": "kyc-data-card-action",
2779
+ 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)]",
2780
+ children: action
2781
+ }
2782
+ )
2783
+ ]
2784
+ }
2785
+ );
2786
+ }
2787
+ var PANEL_DEFAULTS = {
2788
+ verified: {
2789
+ title: "Identidade verificada",
2790
+ description: "Seus dados foram validados com sucesso. Voc\xEA tem acesso completo \xE0 plataforma.",
2791
+ glow: "color-mix(in srgb, var(--deframe-widget-color-state-success) 12%, transparent)",
2792
+ glow2: "color-mix(in srgb, var(--deframe-widget-color-state-success) 22%, transparent)"
2793
+ },
2794
+ reviewing: {
2795
+ title: "Em an\xE1lise",
2796
+ description: "Estamos verificando seus documentos. Isso pode levar at\xE9 2 dias \xFAteis.",
2797
+ glow: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 12%, transparent)",
2798
+ glow2: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 22%, transparent)"
2799
+ },
2800
+ pending: {
2801
+ title: "Verifica\xE7\xE3o pendente",
2802
+ description: "Complete o processo de verifica\xE7\xE3o de identidade para liberar todas as funcionalidades.",
2803
+ glow: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 12%, transparent)",
2804
+ glow2: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 22%, transparent)"
2805
+ },
2806
+ rejected: {
2807
+ title: "Verifica\xE7\xE3o rejeitada",
2808
+ description: "N\xE3o foi poss\xEDvel validar seus dados. Revise as informa\xE7\xF5es e tente novamente.",
2809
+ glow: "color-mix(in srgb, var(--deframe-widget-color-state-error) 12%, transparent)",
2810
+ glow2: "color-mix(in srgb, var(--deframe-widget-color-state-error) 22%, transparent)"
2811
+ },
2812
+ expired: {
2813
+ title: "Sess\xE3o expirada",
2814
+ description: "O tempo para concluir a verifica\xE7\xE3o expirou. Voc\xEA pode reiniciar o processo.",
2815
+ glow: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 12%, transparent)",
2816
+ glow2: "color-mix(in srgb, var(--deframe-widget-color-state-warning) 22%, transparent)"
2817
+ }
2818
+ };
2819
+ function StatusIcon({ status }) {
2820
+ if (status === "verified") {
2821
+ return /* @__PURE__ */ jsx("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 22l9 9L34 14", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
2822
+ }
2823
+ if (status === "reviewing") {
2824
+ return /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
2825
+ /* @__PURE__ */ jsx("ellipse", { cx: "22", cy: "22", rx: "14", ry: "9", stroke: "currentColor", strokeWidth: "3" }),
2826
+ /* @__PURE__ */ jsx("circle", { cx: "22", cy: "22", r: "4", fill: "currentColor" })
2827
+ ] });
2828
+ }
2829
+ if (status === "pending" || status === "expired") {
2830
+ return /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
2831
+ /* @__PURE__ */ jsx("circle", { cx: "22", cy: "22", r: "14", stroke: "currentColor", strokeWidth: "3" }),
2832
+ /* @__PURE__ */ jsx("path", { d: "M22 14v9l5 4", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
2833
+ ] });
2834
+ }
2835
+ return /* @__PURE__ */ jsx("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M14 14l16 16M30 14L14 30", stroke: "currentColor", strokeWidth: "3.5", strokeLinecap: "round" }) });
2836
+ }
2837
+ function KYCStatusPanel({
2838
+ status,
2839
+ title,
2840
+ description,
2841
+ action,
2842
+ className
2843
+ }) {
2844
+ const defaults = PANEL_DEFAULTS[status];
2845
+ return /* @__PURE__ */ jsxs(
2846
+ "div",
2847
+ {
2848
+ "data-slot": "kyc-status-panel",
2849
+ "data-test-id": "kyc-status-panel",
2850
+ "data-status": status,
2851
+ className: twMerge(
2852
+ "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",
2853
+ className
2854
+ ),
2855
+ children: [
2856
+ /* @__PURE__ */ jsx(
2857
+ "div",
2858
+ {
2859
+ "data-slot": "kyc-status-panel-icon",
2860
+ "data-test-id": "kyc-status-panel-icon",
2861
+ className: "flex h-[64px] w-[64px] shrink-0 items-center justify-center rounded-[var(--deframe-widget-size-radius-full)]",
2862
+ style: {
2863
+ color: `var(--deframe-widget-color-state-${status === "verified" ? "success" : status === "rejected" ? "error" : "warning"})`,
2864
+ background: defaults.glow,
2865
+ boxShadow: `0 0 0 7px ${defaults.glow}, 0 0 24px ${defaults.glow2}`
2866
+ },
2867
+ children: /* @__PURE__ */ jsx(StatusIcon, { status })
2868
+ }
2869
+ ),
2870
+ /* @__PURE__ */ jsxs(
2871
+ "div",
2872
+ {
2873
+ "data-slot": "kyc-status-panel-text",
2874
+ "data-test-id": "kyc-status-panel-text",
2875
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]",
2876
+ children: [
2877
+ /* @__PURE__ */ jsx(
2878
+ "h2",
2879
+ {
2880
+ "data-slot": "kyc-status-panel-title",
2881
+ "data-test-id": "kyc-status-panel-title",
2882
+ 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)]",
2883
+ children: title != null ? title : defaults.title
2884
+ }
2885
+ ),
2886
+ /* @__PURE__ */ jsx(
2887
+ "p",
2888
+ {
2889
+ "data-slot": "kyc-status-panel-description",
2890
+ "data-test-id": "kyc-status-panel-description",
2891
+ 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)]",
2892
+ children: description != null ? description : defaults.description
2893
+ }
2894
+ )
2895
+ ]
2896
+ }
2897
+ ),
2898
+ action && /* @__PURE__ */ jsx("div", { "data-slot": "kyc-status-panel-action", "data-test-id": "kyc-status-panel-action", children: action })
2899
+ ]
2900
+ }
2901
+ );
2902
+ }
2903
+ function renderKYCActionButton(action, index) {
2904
+ const ButtonComponent = action.variant === "secondary" ? SecondaryButton : PrimaryButton;
2905
+ const button = /* @__PURE__ */ jsx(
2906
+ ButtonComponent,
2907
+ __spreadProps(__spreadValues({
2908
+ className: twMerge("h-12 py-0", action.className)
2909
+ }, action.buttonProps), {
2910
+ children: action.label
2911
+ }),
2912
+ index
2913
+ );
2914
+ if (action.href) {
2915
+ return /* @__PURE__ */ jsx("a", { href: action.href, className: "w-full", children: button }, index);
2916
+ }
2917
+ return button;
2918
+ }
2919
+ function KYCActionRow({ actions, className }) {
2920
+ if (actions.length === 0) return null;
2921
+ return /* @__PURE__ */ jsx(
2922
+ "div",
2923
+ {
2924
+ "data-slot": "kyc-action-row",
2925
+ "data-test-id": "kyc-action-row",
2926
+ className: twMerge(
2927
+ actions.length === 1 ? "flex w-full" : "flex w-full gap-[var(--deframe-widget-size-gap-sm)]",
2928
+ className
2929
+ ),
2930
+ children: actions.map((action, index) => /* @__PURE__ */ jsx("div", { className: "flex-1", children: renderKYCActionButton(action, index) }, index))
2931
+ }
2932
+ );
2933
+ }
2934
+ function KYCChecklistItem({ icon, label, description }) {
2935
+ return /* @__PURE__ */ jsxs(
2936
+ "div",
2937
+ {
2938
+ "data-slot": "kyc-checklist-item",
2939
+ "data-test-id": "kyc-checklist-item",
2940
+ className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]",
2941
+ children: [
2942
+ /* @__PURE__ */ jsx(
2943
+ "div",
2944
+ {
2945
+ className: "flex h-[32px] w-[32px] shrink-0 items-center justify-center rounded-[var(--deframe-widget-size-radius-sm)]",
2946
+ style: {
2947
+ background: "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 10%, transparent)",
2948
+ color: "var(--deframe-widget-color-brand-primary)"
2949
+ },
2950
+ children: icon ? /* @__PURE__ */ 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__ */ jsx("span", { className: "h-[6px] w-[6px] rounded-full bg-[color:var(--deframe-widget-color-brand-primary)]" })
2951
+ }
2952
+ ),
2953
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[2px]", children: [
2954
+ /* @__PURE__ */ 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 }),
2955
+ description && /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: description })
2956
+ ] })
2957
+ ]
2958
+ }
2959
+ );
2960
+ }
2961
+ function KYCChecklistCard({ items, className }) {
2962
+ return /* @__PURE__ */ jsx(
2963
+ "div",
2964
+ {
2965
+ "data-slot": "kyc-checklist-card",
2966
+ "data-test-id": "kyc-checklist-card",
2967
+ className: twMerge(
2968
+ "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)]",
2969
+ className
2970
+ ),
2971
+ children: items.map((item, index) => /* @__PURE__ */ jsx(
2972
+ "div",
2973
+ {
2974
+ className: twMerge(
2975
+ "px-[var(--deframe-widget-size-padding-x-md)] py-[12px]",
2976
+ index < items.length - 1 && "border-b border-[color:var(--deframe-widget-color-border-secondary)]"
2977
+ ),
2978
+ children: /* @__PURE__ */ jsx(
2979
+ KYCChecklistItem,
2980
+ {
2981
+ icon: item.icon,
2982
+ label: item.label,
2983
+ description: item.description
2984
+ }
2985
+ )
2986
+ },
2987
+ index
2988
+ ))
2989
+ }
2990
+ );
2991
+ }
2992
+ function KYCFieldMessage({
2993
+ tone = "error",
2994
+ children,
2995
+ className,
2996
+ testId
2997
+ }) {
2998
+ return /* @__PURE__ */ jsx(
2999
+ "p",
3000
+ {
3001
+ "data-slot": "kyc-field-message",
3002
+ "data-test-id": testId != null ? testId : "kyc-field-message",
3003
+ className: twMerge(
3004
+ "text-[length:var(--deframe-widget-font-size-xs)] leading-[var(--deframe-widget-font-leading-sm)]",
3005
+ tone === "error" ? "text-[color:var(--deframe-widget-color-state-error)]" : "text-[color:var(--deframe-widget-color-text-tertiary)]",
3006
+ className
3007
+ ),
3008
+ children
3009
+ }
3010
+ );
3011
+ }
3012
+ var bannerTheme = {
3013
+ info: {
3014
+ iconColor: "text-[color:var(--deframe-widget-color-state-info)]",
3015
+ icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
3016
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
3017
+ /* @__PURE__ */ jsx("path", { d: "M8 7v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
3018
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5.5", r: "0.75", fill: "currentColor" })
3019
+ ] })
3020
+ },
3021
+ success: {
3022
+ iconColor: "text-[color:var(--deframe-widget-color-state-success)]",
3023
+ icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
3024
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
3025
+ /* @__PURE__ */ jsx("path", { d: "M5 8l2.2 2.2L11 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
3026
+ ] })
3027
+ },
3028
+ warning: {
3029
+ iconColor: "text-[color:var(--deframe-widget-color-state-warning)]",
3030
+ icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
3031
+ /* @__PURE__ */ jsx("path", { d: "M8 2.5l5.5 10.25H2.5L8 2.5z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
3032
+ /* @__PURE__ */ jsx("path", { d: "M8 6v3.25", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
3033
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.25", r: "0.75", fill: "currentColor" })
3034
+ ] })
3035
+ },
3036
+ error: {
3037
+ iconColor: "text-[color:var(--deframe-widget-color-state-error)]",
3038
+ icon: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
3039
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
3040
+ /* @__PURE__ */ jsx("path", { d: "M5.5 5.5l5 5M10.5 5.5l-5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
3041
+ ] })
3042
+ }
3043
+ };
3044
+ function KYCMessageBanner({
3045
+ variant = "info",
3046
+ children,
3047
+ className,
3048
+ testId
3049
+ }) {
3050
+ const theme = bannerTheme[variant];
3051
+ return /* @__PURE__ */ jsxs(
3052
+ "div",
3053
+ {
3054
+ "data-slot": "kyc-message-banner",
3055
+ "data-test-id": testId != null ? testId : "kyc-message-banner",
3056
+ className: twMerge(
3057
+ "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)]",
3058
+ "border-[color:var(--deframe-widget-color-border-secondary)] bg-[color:var(--deframe-widget-color-bg-secondary)] text-[color:var(--deframe-widget-color-text-tertiary)]",
3059
+ className
3060
+ ),
3061
+ children: [
3062
+ /* @__PURE__ */ jsx("span", { className: twMerge("mt-[2px] shrink-0", theme.iconColor), children: theme.icon }),
3063
+ /* @__PURE__ */ jsx("div", { className: "text-[length:var(--deframe-widget-font-size-xs)] leading-[var(--deframe-widget-font-leading-sm)]", children })
3064
+ ]
3065
+ }
3066
+ );
3067
+ }
3068
+ function KYCStepIndicator({ total, current, className }) {
3069
+ return /* @__PURE__ */ jsxs(
3070
+ "div",
3071
+ {
3072
+ "data-slot": "kyc-step-indicator",
3073
+ "data-test-id": "kyc-step-indicator",
3074
+ className: twMerge("flex items-center gap-[var(--deframe-widget-size-gap-xs)]", className),
3075
+ children: [
3076
+ Array.from({ length: total }).map((_, index) => /* @__PURE__ */ jsx(
3077
+ "div",
3078
+ {
3079
+ "data-slot": "kyc-step-dot",
3080
+ "data-test-id": `kyc-step-dot-${index + 1}`,
3081
+ className: twMerge(
3082
+ "h-[4px] rounded-[var(--deframe-widget-size-radius-full)] transition-all duration-300",
3083
+ index <= current ? "w-[24px] bg-[color:var(--deframe-widget-color-brand-primary)]" : "w-[16px] bg-[color:var(--deframe-widget-color-border-primary)]"
3084
+ )
3085
+ },
3086
+ index
3087
+ )),
3088
+ /* @__PURE__ */ jsxs(
3089
+ "span",
3090
+ {
3091
+ "data-slot": "kyc-step-label",
3092
+ "data-test-id": "kyc-step-label",
3093
+ className: "ml-[var(--deframe-widget-size-gap-xs)] text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]",
3094
+ children: [
3095
+ current + 1,
3096
+ " de ",
3097
+ total
3098
+ ]
3099
+ }
3100
+ )
3101
+ ]
3102
+ }
3103
+ );
3104
+ }
3105
+ function IconButton({
3106
+ onClick,
3107
+ label,
3108
+ testId,
3109
+ children
3110
+ }) {
3111
+ if (!onClick) {
3112
+ return /* @__PURE__ */ jsx("div", { className: "h-9 w-9 shrink-0", "aria-hidden": "true" });
3113
+ }
3114
+ return /* @__PURE__ */ jsx(
3115
+ "button",
3116
+ {
3117
+ type: "button",
3118
+ "data-slot": testId,
3119
+ "data-test-id": testId,
3120
+ onClick,
3121
+ 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)]",
3122
+ "aria-label": label,
3123
+ children
3124
+ }
3125
+ );
3126
+ }
3127
+ function KYCPageHeader({
3128
+ step,
3129
+ totalSteps,
3130
+ onBack,
3131
+ onClose,
3132
+ className
3133
+ }) {
3134
+ return /* @__PURE__ */ jsxs(
3135
+ "div",
3136
+ {
3137
+ "data-slot": "kyc-page-header",
3138
+ "data-test-id": "kyc-page-header",
3139
+ className: twMerge(
3140
+ "flex items-center justify-between px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
3141
+ className
3142
+ ),
3143
+ children: [
3144
+ /* @__PURE__ */ jsx(IconButton, { onClick: onBack, label: "Voltar", testId: "kyc-back-button", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z" }) }) }),
3145
+ typeof step === "number" && typeof totalSteps === "number" ? /* @__PURE__ */ jsx(KYCStepIndicator, { total: totalSteps, current: Math.max(step - 1, 0) }) : /* @__PURE__ */ jsx("div", { className: "h-9 flex-1", "aria-hidden": "true" }),
3146
+ /* @__PURE__ */ jsx(IconButton, { onClick: onClose, label: "Fechar", testId: "kyc-close-button", children: /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", strokeLinecap: "round" }) }) })
3147
+ ]
3148
+ }
3149
+ );
3150
+ }
3151
+ function KYCPageSection({ title, description, className }) {
3152
+ return /* @__PURE__ */ jsxs(
3153
+ "div",
3154
+ {
3155
+ "data-slot": "kyc-page-section",
3156
+ "data-test-id": "kyc-page-section",
3157
+ className: twMerge("flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", className),
3158
+ children: [
3159
+ /* @__PURE__ */ jsx(
3160
+ "h1",
3161
+ {
3162
+ "data-slot": "kyc-section-title",
3163
+ "data-test-id": "kyc-section-title",
3164
+ 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)]",
3165
+ children: title
3166
+ }
3167
+ ),
3168
+ description && /* @__PURE__ */ jsx(
3169
+ "p",
3170
+ {
3171
+ "data-slot": "kyc-section-description",
3172
+ "data-test-id": "kyc-section-description",
3173
+ className: "text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)]",
3174
+ children: description
3175
+ }
3176
+ )
3177
+ ]
3178
+ }
3179
+ );
3180
+ }
3181
+ function ContinueKeyHandler(e) {
3182
+ var _a;
3183
+ if (e.key !== "Enter" || e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) return;
3184
+ const target = e.target;
3185
+ if (!target) return;
3186
+ const tag = (_a = target.tagName) == null ? void 0 : _a.toLowerCase();
3187
+ if (tag === "textarea" || target.isContentEditable || tag === "button") return;
3188
+ const root = e.currentTarget;
3189
+ const continueButton = root.querySelector('button[data-kyc-continue="true"]');
3190
+ if (!continueButton || continueButton.disabled) return;
3191
+ e.preventDefault();
3192
+ continueButton.click();
3193
+ }
3194
+ function KYCPageShell({ children, className, screenId, containerMode = "fullscreen" }) {
3195
+ return /* @__PURE__ */ jsx(
3196
+ "div",
3197
+ {
3198
+ "data-slot": "kyc-page-shell",
3199
+ "data-test-id": "kyc-page-shell",
3200
+ "data-kyc-screen": screenId,
3201
+ className: twMerge(
3202
+ "flex w-full max-w-[390px] flex-col",
3203
+ 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)]",
3204
+ className
3205
+ ),
3206
+ onKeyDownCapture: ContinueKeyHandler,
3207
+ children
3208
+ }
3209
+ );
3210
+ }
3211
+ function PageBody({
3212
+ children,
3213
+ className
3214
+ }) {
3215
+ return /* @__PURE__ */ jsx(
3216
+ "div",
3217
+ {
3218
+ className: [
3219
+ "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)]",
3220
+ className
3221
+ ].filter(Boolean).join(" "),
3222
+ children
3223
+ }
3224
+ );
3225
+ }
3226
+ function KYCFormPage({
3227
+ screenId,
3228
+ onBack,
3229
+ onClose,
3230
+ step,
3231
+ totalSteps,
3232
+ title,
3233
+ description,
3234
+ children,
3235
+ banners = [],
3236
+ footer,
3237
+ actions = [],
3238
+ className,
3239
+ containerMode = "fullscreen"
3240
+ }) {
3241
+ return /* @__PURE__ */ jsxs(KYCPageShell, { screenId, className, containerMode, children: [
3242
+ /* @__PURE__ */ jsx(KYCPageHeader, { step, totalSteps, onBack, onClose }),
3243
+ /* @__PURE__ */ jsxs(PageBody, { children: [
3244
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-lg)]", children: [
3245
+ /* @__PURE__ */ jsx(KYCPageSection, { title, description }),
3246
+ /* @__PURE__ */ jsx(
3247
+ "div",
3248
+ {
3249
+ "data-slot": "kyc-form-page-content",
3250
+ "data-test-id": "kyc-form-page-content",
3251
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]",
3252
+ children
3253
+ }
3254
+ )
3255
+ ] }),
3256
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
3257
+ banners.map((banner, index) => /* @__PURE__ */ jsx(
3258
+ KYCMessageBanner,
3259
+ {
3260
+ variant: banner.variant,
3261
+ testId: banner.testId,
3262
+ children: banner.children
3263
+ },
3264
+ index
3265
+ )),
3266
+ footer,
3267
+ /* @__PURE__ */ jsx(KYCActionRow, { actions })
3268
+ ] })
3269
+ ] })
3270
+ ] });
3271
+ }
3272
+ function CountrySelect() {
3273
+ const [value, setValue] = useState("brasil");
3274
+ return /* @__PURE__ */ jsxs(Select, { value, onValueChange: setValue, children: [
3275
+ /* @__PURE__ */ jsx(SelectTrigger, { placeholder: "Selecione o pa\xEDs" }),
3276
+ /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectItem, { value: "brasil", children: "Brasil" }) })
3277
+ ] });
3278
+ }
3279
+ function DefaultAddressLoadingContent() {
3280
+ return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
3281
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" }),
3282
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" }),
3283
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_100px] gap-[var(--deframe-widget-size-gap-sm)]", children: [
3284
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" }),
3285
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" })
3286
+ ] }),
3287
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_100px] gap-[var(--deframe-widget-size-gap-sm)]", children: [
3288
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" }),
3289
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" })
3290
+ ] }),
3291
+ /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" })
3292
+ ] });
3293
+ }
3294
+ function KYCAddressPage({
3295
+ screenId = "address",
3296
+ onBack,
3297
+ onClose,
3298
+ step = 4,
3299
+ totalSteps = 4,
3300
+ title = "Qual \xE9 o seu endere\xE7o?",
3301
+ description = "Digite o seu CEP e preencheremos o restante automaticamente.",
3302
+ cepField,
3303
+ streetField,
3304
+ cityField,
3305
+ stateField,
3306
+ complementField,
3307
+ countryField,
3308
+ numberField,
3309
+ isLoading = false,
3310
+ loadingContent,
3311
+ banners = [],
3312
+ actions,
3313
+ containerMode = "fullscreen",
3314
+ onNext
3315
+ }) {
3316
+ const defaultActions = actions != null ? actions : [
3317
+ {
3318
+ label: "Continuar",
3319
+ buttonProps: { onClick: onNext }
3320
+ }
3321
+ ];
3322
+ const fallbackFields = useMemo(() => ({
3323
+ cepField: /* @__PURE__ */ jsxs(Input, { children: [
3324
+ /* @__PURE__ */ jsx(InputLabel, { htmlFor: "cep", children: "CEP" }),
3325
+ /* @__PURE__ */ jsx(InputField, { id: "cep", placeholder: "00000-000", inputMode: "numeric" })
3326
+ ] }),
3327
+ streetField: /* @__PURE__ */ jsxs(Input, { children: [
3328
+ /* @__PURE__ */ jsx(InputLabel, { htmlFor: "street", children: "Logradouro" }),
3329
+ /* @__PURE__ */ jsx(InputField, { id: "street", placeholder: "Rua, Avenida, etc.", autoComplete: "street-address" })
3330
+ ] }),
3331
+ cityField: /* @__PURE__ */ jsxs(Input, { children: [
3332
+ /* @__PURE__ */ jsx(InputLabel, { htmlFor: "city", children: "Cidade" }),
3333
+ /* @__PURE__ */ jsx(InputField, { id: "city", placeholder: "S\xE3o Paulo", autoComplete: "address-level2" })
3334
+ ] }),
3335
+ stateField: /* @__PURE__ */ jsxs(Input, { children: [
3336
+ /* @__PURE__ */ jsx(InputLabel, { htmlFor: "state", children: "Estado" }),
3337
+ /* @__PURE__ */ jsx(InputField, { id: "state", placeholder: "SP", maxLength: 2 })
3338
+ ] }),
3339
+ complementField: /* @__PURE__ */ jsxs(Input, { children: [
3340
+ /* @__PURE__ */ jsx(InputLabel, { htmlFor: "complement", children: "Complemento" }),
3341
+ /* @__PURE__ */ jsx(InputField, { id: "complement", placeholder: "Apto, Bloco (opcional)" })
3342
+ ] }),
3343
+ countryField: /* @__PURE__ */ jsxs(
3344
+ "div",
3345
+ {
3346
+ "data-slot": "kyc-country-field",
3347
+ "data-test-id": "kyc-country-field",
3348
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]",
3349
+ children: [
3350
+ /* @__PURE__ */ jsx(InputLabel, { htmlFor: "country", children: "Pa\xEDs" }),
3351
+ /* @__PURE__ */ jsx(CountrySelect, {})
3352
+ ]
3353
+ }
3354
+ )
3355
+ }), []);
3356
+ return /* @__PURE__ */ jsxs(
3357
+ KYCFormPage,
3358
+ {
3359
+ screenId,
3360
+ onBack,
3361
+ onClose,
3362
+ step,
3363
+ totalSteps,
3364
+ title,
3365
+ description,
3366
+ banners,
3367
+ actions: defaultActions,
3368
+ containerMode,
3369
+ children: [
3370
+ cepField != null ? cepField : fallbackFields.cepField,
3371
+ isLoading ? loadingContent != null ? loadingContent : /* @__PURE__ */ jsx(DefaultAddressLoadingContent, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
3372
+ streetField != null ? streetField : fallbackFields.streetField,
3373
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_100px] gap-[var(--deframe-widget-size-gap-sm)]", "data-test-id": "kyc-address-row", children: [
3374
+ cityField != null ? cityField : fallbackFields.cityField,
3375
+ stateField != null ? stateField : fallbackFields.stateField
3376
+ ] }),
3377
+ (complementField != null ? complementField : fallbackFields.complementField) && numberField ? /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[1fr_100px] gap-[var(--deframe-widget-size-gap-sm)]", children: [
3378
+ complementField != null ? complementField : fallbackFields.complementField,
3379
+ numberField
3380
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
3381
+ complementField != null ? complementField : fallbackFields.complementField,
3382
+ numberField && /* @__PURE__ */ jsx("div", { className: "w-full max-w-[100px]", children: numberField })
3383
+ ] }),
3384
+ countryField != null ? countryField : fallbackFields.countryField
3385
+ ] })
3386
+ ]
3387
+ }
3388
+ );
3389
+ }
3390
+ function KYCBasicDataPage(_a) {
3391
+ var _b = _a, {
3392
+ screenId = "basic-data",
3393
+ step = 1,
3394
+ totalSteps = 4,
3395
+ title = "Comece com seus dados b\xE1sicos",
3396
+ description = "Use seu CPF e telefone para iniciarmos a verifica\xE7\xE3o.",
3397
+ cpfField,
3398
+ phoneField
3399
+ } = _b, props = __objRest(_b, [
3400
+ "screenId",
3401
+ "step",
3402
+ "totalSteps",
3403
+ "title",
3404
+ "description",
3405
+ "cpfField",
3406
+ "phoneField"
3407
+ ]);
3408
+ return /* @__PURE__ */ jsxs(
3409
+ KYCFormPage,
3410
+ __spreadProps(__spreadValues({
3411
+ screenId,
3412
+ step,
3413
+ totalSteps,
3414
+ title,
3415
+ description
3416
+ }, props), {
3417
+ children: [
3418
+ cpfField,
3419
+ phoneField
3420
+ ]
3421
+ })
3422
+ );
3423
+ }
3424
+ function KYCDocumentPage(_a) {
3425
+ var _b = _a, {
3426
+ screenId = "document",
3427
+ step = 2,
3428
+ totalSteps = 4,
3429
+ title = "Documento de identidade",
3430
+ description = "Escolha o tipo de documento que voc\xEA usar\xE1 para a verifica\xE7\xE3o.",
3431
+ checklistItems,
3432
+ documentOptions,
3433
+ selectedValue,
3434
+ onSelectValue,
3435
+ 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.",
3436
+ content
3437
+ } = _b, props = __objRest(_b, [
3438
+ "screenId",
3439
+ "step",
3440
+ "totalSteps",
3441
+ "title",
3442
+ "description",
3443
+ "checklistItems",
3444
+ "documentOptions",
3445
+ "selectedValue",
3446
+ "onSelectValue",
3447
+ "notice",
3448
+ "content"
3449
+ ]);
3450
+ const [internalSelectedValue, setInternalSelectedValue] = useState("");
3451
+ const effectiveOptions = documentOptions != null ? documentOptions : DEFAULT_DOCUMENT_OPTIONS;
3452
+ const effectiveSelectedValue = selectedValue != null ? selectedValue : internalSelectedValue;
3453
+ const handleSelectValue = onSelectValue != null ? onSelectValue : setInternalSelectedValue;
3454
+ return /* @__PURE__ */ jsxs(
3455
+ KYCFormPage,
3456
+ __spreadProps(__spreadValues({
3457
+ screenId,
3458
+ step,
3459
+ totalSteps,
3460
+ title,
3461
+ description
3462
+ }, props), {
3463
+ children: [
3464
+ Array.isArray(effectiveOptions) && effectiveOptions.length > 0 ? /* @__PURE__ */ jsx(
3465
+ "div",
3466
+ {
3467
+ "data-slot": "kyc-document-type-list",
3468
+ "data-test-id": "kyc-document-type-list",
3469
+ "data-kyc-field": "documentType",
3470
+ className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
3471
+ children: effectiveOptions.map(({ value, label, description: optionDescription }) => /* @__PURE__ */ jsx(
3472
+ ChoiceCard,
3473
+ {
3474
+ "data-kyc-choice-value": value,
3475
+ "data-kyc-choice-selected": effectiveSelectedValue === value ? "true" : "false",
3476
+ label,
3477
+ description: optionDescription,
3478
+ selected: effectiveSelectedValue === value,
3479
+ onClick: () => handleSelectValue(value)
3480
+ },
3481
+ value
3482
+ ))
3483
+ }
3484
+ ) : checklistItems && checklistItems.length > 0 ? /* @__PURE__ */ jsx(KYCChecklistCard, { items: checklistItems }) : null,
3485
+ notice && /* @__PURE__ */ jsxs(
3486
+ "div",
3487
+ {
3488
+ "data-slot": "kyc-idv-notice",
3489
+ "data-test-id": "kyc-idv-notice",
3490
+ 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)]",
3491
+ children: [
3492
+ /* @__PURE__ */ 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: [
3493
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeWidth: "1.5" }),
3494
+ /* @__PURE__ */ jsx("path", { d: "M8 7v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
3495
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "5.5", r: "0.75", fill: "currentColor" })
3496
+ ] }),
3497
+ /* @__PURE__ */ 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 })
3498
+ ]
3499
+ }
3500
+ ),
3501
+ content
3502
+ ]
3503
+ })
3504
+ );
3505
+ }
3506
+ function KYCEditPage(_a) {
3507
+ var _b = _a, {
3508
+ screenId = "edit",
3509
+ title = "Editar informa\xE7\xF5es",
3510
+ fullNameField,
3511
+ dateOfBirthField,
3512
+ cpfField,
3513
+ phoneField,
3514
+ emailField
3515
+ } = _b, props = __objRest(_b, [
3516
+ "screenId",
3517
+ "title",
3518
+ "fullNameField",
3519
+ "dateOfBirthField",
3520
+ "cpfField",
3521
+ "phoneField",
3522
+ "emailField"
3523
+ ]);
3524
+ return /* @__PURE__ */ jsxs(
3525
+ KYCFormPage,
3526
+ __spreadProps(__spreadValues({
3527
+ screenId,
3528
+ title
3529
+ }, props), {
3530
+ children: [
3531
+ fullNameField,
3532
+ dateOfBirthField,
3533
+ cpfField,
3534
+ phoneField,
3535
+ emailField
3536
+ ]
3537
+ })
3538
+ );
3539
+ }
3540
+ function KYCIntroPage({
3541
+ screenId = "intro",
3542
+ onClose,
3543
+ title = "Verifica\xE7\xE3o de identidade",
3544
+ description = "Para garantir a seguran\xE7a da plataforma, precisamos confirmar sua identidade. O processo leva cerca de 5 minutos.",
3545
+ checklistItems = DEFAULT_INTRO_CHECKLIST,
3546
+ banners = [],
3547
+ legalNotice,
3548
+ primaryAction = { label: "Come\xE7ar verifica\xE7\xE3o" },
3549
+ className,
3550
+ containerMode = "fullscreen"
3551
+ }) {
3552
+ return /* @__PURE__ */ jsxs(KYCPageShell, { screenId, containerMode, children: [
3553
+ onClose && /* @__PURE__ */ jsx(KYCPageHeader, { onClose }),
3554
+ /* @__PURE__ */ jsxs(
3555
+ "div",
3556
+ {
3557
+ "data-slot": "kyc-intro-page",
3558
+ "data-test-id": "kyc-intro-page",
3559
+ className: twMerge(
3560
+ "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)]",
3561
+ className
3562
+ ),
3563
+ children: [
3564
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-[var(--deframe-widget-size-gap-lg)] text-center", children: [
3565
+ /* @__PURE__ */ jsx(
3566
+ "div",
3567
+ {
3568
+ "data-test-id": "kyc-intro-icon",
3569
+ className: "flex h-[64px] w-[64px] items-center justify-center rounded-[var(--deframe-widget-size-radius-full)]",
3570
+ style: {
3571
+ background: "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)",
3572
+ 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)",
3573
+ color: "var(--deframe-widget-color-brand-primary)"
3574
+ },
3575
+ children: /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
3576
+ /* @__PURE__ */ jsx("rect", { x: "8", y: "10", width: "28", height: "20", rx: "3", stroke: "currentColor", strokeWidth: "3" }),
3577
+ /* @__PURE__ */ jsx("circle", { cx: "22", cy: "20", r: "5", stroke: "currentColor", strokeWidth: "3" }),
3578
+ /* @__PURE__ */ jsx("path", { d: "M12 34c0-4 4.5-7 10-7s10 3 10 7", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
3579
+ ] })
3580
+ }
3581
+ ),
3582
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
3583
+ /* @__PURE__ */ jsx(
3584
+ "h1",
3585
+ {
3586
+ "data-test-id": "kyc-intro-title",
3587
+ 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)]",
3588
+ children: title
3589
+ }
3590
+ ),
3591
+ /* @__PURE__ */ jsx(
3592
+ "p",
3593
+ {
3594
+ "data-test-id": "kyc-intro-description",
3595
+ 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)]",
3596
+ children: description
3597
+ }
3598
+ )
3599
+ ] }),
3600
+ /* @__PURE__ */ jsx(KYCChecklistCard, { items: checklistItems, className: "w-full max-w-[320px]" }),
3601
+ banners.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-[320px] flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: banners.map((banner, index) => /* @__PURE__ */ jsx(
3602
+ KYCMessageBanner,
3603
+ {
3604
+ variant: banner.variant,
3605
+ testId: banner.testId,
3606
+ children: banner.children
3607
+ },
3608
+ index
3609
+ )) }),
3610
+ legalNotice && /* @__PURE__ */ 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 })
3611
+ ] }),
3612
+ /* @__PURE__ */ jsx("div", { className: "w-full", children: renderKYCActionButton(primaryAction, 0) })
3613
+ ]
3614
+ }
3615
+ )
3616
+ ] });
3617
+ }
3618
+ function KYCLoadingPage({
3619
+ screenId = "loading",
3620
+ onClose,
3621
+ title,
3622
+ description,
3623
+ note,
3624
+ className,
3625
+ containerMode = "fullscreen"
3626
+ }) {
3627
+ return /* @__PURE__ */ jsxs(KYCPageShell, { screenId, className, containerMode, children: [
3628
+ onClose && /* @__PURE__ */ jsx(KYCPageHeader, { onClose }),
3629
+ /* @__PURE__ */ 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: [
3630
+ /* @__PURE__ */ jsx(
3631
+ "div",
3632
+ {
3633
+ className: "flex h-[72px] w-[72px] items-center justify-center rounded-[var(--deframe-widget-size-radius-full)]",
3634
+ style: {
3635
+ background: "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)",
3636
+ 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)"
3637
+ },
3638
+ children: /* @__PURE__ */ jsx("div", { className: "h-9 w-9 rounded-full border-[3px] border-[color:var(--deframe-widget-color-brand-primary)] border-t-transparent animate-spin" })
3639
+ }
3640
+ ),
3641
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
3642
+ /* @__PURE__ */ 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 }),
3643
+ description && /* @__PURE__ */ 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 })
3644
+ ] }),
3645
+ note && /* @__PURE__ */ jsx(KYCMessageBanner, { variant: "info", children: note }),
3646
+ /* @__PURE__ */ jsxs("div", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
3647
+ "Carregando ",
3648
+ /* @__PURE__ */ jsx(LoadingDots, {})
3649
+ ] })
3650
+ ] })
3651
+ ] });
3652
+ }
3653
+ function PageBody2({ children }) {
3654
+ return /* @__PURE__ */ 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 });
3655
+ }
3656
+ function KYCReviewPage({
3657
+ screenId = "review",
3658
+ onClose,
3659
+ step = 3,
3660
+ totalSteps = 4,
3661
+ title,
3662
+ description,
3663
+ cards,
3664
+ banners = [],
3665
+ actions = [],
3666
+ className,
3667
+ containerMode = "fullscreen"
3668
+ }) {
3669
+ return /* @__PURE__ */ jsxs(KYCPageShell, { screenId, className, containerMode, children: [
3670
+ /* @__PURE__ */ jsx(KYCPageHeader, { step, totalSteps, onClose }),
3671
+ /* @__PURE__ */ jsxs(PageBody2, { children: [
3672
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-lg)]", children: [
3673
+ /* @__PURE__ */ jsx(KYCPageSection, { title, description }),
3674
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: cards.map((card, index) => /* @__PURE__ */ jsx(KYCDataCard, __spreadValues({}, card), index)) })
3675
+ ] }),
3676
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: [
3677
+ banners.map((banner, index) => /* @__PURE__ */ jsx(
3678
+ KYCMessageBanner,
3679
+ {
3680
+ variant: banner.variant,
3681
+ testId: banner.testId,
3682
+ children: banner.children
3683
+ },
3684
+ index
3685
+ )),
3686
+ /* @__PURE__ */ jsx(KYCActionRow, { actions })
3687
+ ] })
3688
+ ] })
3689
+ ] });
3690
+ }
3691
+ function PageBody3({ children }) {
3692
+ return /* @__PURE__ */ 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 });
3693
+ }
3694
+ function KYCReviewPageSkeleton({
3695
+ screenId = "review-loading",
3696
+ onClose,
3697
+ step = 3,
3698
+ totalSteps = 4,
3699
+ containerMode = "fullscreen"
3700
+ }) {
3701
+ return /* @__PURE__ */ jsxs(KYCPageShell, { screenId, containerMode, children: [
3702
+ /* @__PURE__ */ jsx(KYCPageHeader, { step, totalSteps, onClose }),
3703
+ /* @__PURE__ */ jsxs(PageBody3, { children: [
3704
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-lg)]", children: [
3705
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
3706
+ /* @__PURE__ */ jsx("div", { className: "h-7 w-56 animate-pulse rounded bg-[color:var(--deframe-widget-color-bg-tertiary)]" }),
3707
+ /* @__PURE__ */ jsx("div", { className: "h-4 w-40 animate-pulse rounded bg-[color:var(--deframe-widget-color-bg-tertiary)]" })
3708
+ ] }),
3709
+ [0, 1].map((card) => /* @__PURE__ */ jsx(
3710
+ "div",
3711
+ {
3712
+ 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)]",
3713
+ children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [0, 1, 2].map((row) => /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
3714
+ /* @__PURE__ */ jsx("div", { className: "h-4 w-24 animate-pulse rounded bg-[color:var(--deframe-widget-color-bg-tertiary)]" }),
3715
+ /* @__PURE__ */ jsx("div", { className: "h-4 w-32 animate-pulse rounded bg-[color:var(--deframe-widget-color-bg-tertiary)]" })
3716
+ ] }, row)) })
3717
+ },
3718
+ card
3719
+ ))
3720
+ ] }),
3721
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-[var(--deframe-widget-size-gap-sm)]", children: [
3722
+ /* @__PURE__ */ jsx("div", { className: "h-12 flex-1 animate-pulse rounded-[var(--deframe-widget-size-radius-xs)] bg-[color:var(--deframe-widget-color-bg-tertiary)]" }),
3723
+ /* @__PURE__ */ jsx("div", { className: "h-12 flex-1 animate-pulse rounded-[var(--deframe-widget-size-radius-xs)] bg-[color:var(--deframe-widget-color-bg-tertiary)]" })
3724
+ ] })
3725
+ ] })
3726
+ ] });
3727
+ }
3728
+ function statusItemToneClasses(tone) {
3729
+ switch (tone) {
3730
+ case "success":
3731
+ return "text-[color:var(--deframe-widget-color-state-success)]";
3732
+ case "warning":
3733
+ return "text-[color:var(--deframe-widget-color-state-warning)]";
3734
+ case "error":
3735
+ return "text-[color:var(--deframe-widget-color-state-error)]";
3736
+ default:
3737
+ return "text-[color:var(--deframe-widget-color-text-secondary)]";
3738
+ }
3739
+ }
3740
+ function DefaultStatusItemIcon({ tone = "default" }) {
3741
+ const className = statusItemToneClasses(tone);
3742
+ return /* @__PURE__ */ jsx("div", { className: 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__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
3743
+ /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.25", stroke: "currentColor", strokeWidth: "1.5" }),
3744
+ /* @__PURE__ */ jsx("path", { d: "M10 6v4.5l2.5 1.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
3745
+ ] }) });
3746
+ }
3747
+ function KYCStatusItemCard({
3748
+ icon,
3749
+ title,
3750
+ description,
3751
+ tone = "default",
3752
+ testId,
3753
+ className
3754
+ }) {
3755
+ return /* @__PURE__ */ jsxs(
3756
+ "div",
3757
+ {
3758
+ "data-slot": "kyc-status-item-card",
3759
+ "data-test-id": testId != null ? testId : "kyc-status-item-card",
3760
+ className: twMerge(
3761
+ "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)]",
3762
+ className
3763
+ ),
3764
+ children: [
3765
+ /* @__PURE__ */ jsx("div", { className: "shrink-0", children: icon != null ? icon : /* @__PURE__ */ jsx(DefaultStatusItemIcon, { tone }) }),
3766
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[2px]", children: [
3767
+ /* @__PURE__ */ 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 }),
3768
+ /* @__PURE__ */ jsx("div", { className: twMerge("text-[length:var(--deframe-widget-font-size-sm)] leading-[var(--deframe-widget-font-leading-sm)]", statusItemToneClasses(tone)), children: description })
3769
+ ] })
3770
+ ]
3771
+ }
3772
+ );
3773
+ }
3774
+ function resolveCardStatus(status) {
3775
+ if (status === "verified") return "verified";
3776
+ if (status === "rejected") return "rejected";
3777
+ return "reviewing";
3778
+ }
3779
+ function KYCStatusPage({
3780
+ screenId = "pending",
3781
+ onClose,
3782
+ status,
3783
+ panelStatus,
3784
+ panelTitle,
3785
+ panelDescription,
3786
+ panelAction,
3787
+ items = [],
3788
+ cards,
3789
+ banners = [],
3790
+ actions = [],
3791
+ footer,
3792
+ className,
3793
+ containerMode = "fullscreen"
3794
+ }) {
3795
+ var _a;
3796
+ const effectiveStatus = (_a = panelStatus != null ? panelStatus : status) != null ? _a : "reviewing";
3797
+ const effectiveCards = cards != null ? cards : [{ status: resolveCardStatus(effectiveStatus), fields: DEFAULT_STATUS_FIELDS }];
3798
+ return /* @__PURE__ */ jsxs(KYCPageShell, { screenId, className, containerMode, children: [
3799
+ onClose && /* @__PURE__ */ jsx(KYCPageHeader, { onClose }),
3800
+ /* @__PURE__ */ 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: [
3801
+ /* @__PURE__ */ 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__ */ jsx(
3802
+ KYCStatusPanel,
3803
+ {
3804
+ status: effectiveStatus,
3805
+ title: panelTitle,
3806
+ description: panelDescription,
3807
+ action: panelAction
3808
+ }
3809
+ ) }),
3810
+ items.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: items.map((item, index) => /* @__PURE__ */ jsx(KYCStatusItemCard, __spreadValues({}, item), index)) }),
3811
+ effectiveCards.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-md)]", children: effectiveCards.map((card, index) => /* @__PURE__ */ jsx(KYCDataCard, __spreadValues({}, card), index)) }),
3812
+ banners.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: banners.map((banner, index) => /* @__PURE__ */ jsx(
3813
+ KYCMessageBanner,
3814
+ {
3815
+ variant: banner.variant,
3816
+ testId: banner.testId,
3817
+ children: banner.children
3818
+ },
3819
+ index
3820
+ )) }),
3821
+ footer,
3822
+ actions.length > 0 && /* @__PURE__ */ jsx(KYCActionRow, { actions })
3823
+ ] })
3824
+ ] });
3825
+ }
2439
3826
  var gapClasses3 = {
2440
3827
  xs: "gap-[var(--deframe-widget-size-gap-xs)]",
2441
3828
  sm: "gap-[var(--deframe-widget-size-gap-sm)]",
@@ -14974,6 +16361,6 @@ var DashboardViewSimple = ({
14974
16361
  );
14975
16362
  };
14976
16363
 
14977
- export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DepositSuccessIcon, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnDesktopViewSimple, EarnExploreGridView, EarnFlowSkeletonSimple, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedSimpleView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawFormViewSimple, EarnWithdrawProcessingSimpleView, EarnWithdrawProcessingView, EarnWithdrawSuccessSimpleView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningSimpleView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InvestmentCrossChainProcessingView, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, OnchainDepositFormSimpleView, OnchainDepositFormView, OnchainDepositSuccessSimpleView, OnchainDepositSuccessView, OnchainWithdrawChainSelectorView, OnchainWithdrawFailedView, OnchainWithdrawFormSimpleView, OnchainWithdrawFormView, OnchainWithdrawProcessingSimpleView, OnchainWithdrawSignatureWarningSimpleView, OnchainWithdrawSignatureWarningView, OnchainWithdrawSuccessView, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, WithdrawFailedIcon, WithdrawSuccessIcon, isDustValue, truncateAddress };
16364
+ export { ActionButton, ActionSheet, AddressDisplay, ApyRange, BackButton, BackgroundContainer, BannerNotification, Chip, ChipGroup, ChoiceCard, ChooseANetworkView, ChooseAStrategyActionsheetView, ChooseAnAssetSwapView, ChooseNetworkAndAssetViewSimple, CloseButton_default as CloseButton, CollapsibleInfoRow, CollapsibleSection, ConfirmSwapButtonView, ConfirmSwapButtonViewSimple, ConnectWalletList, Currency, DashboardBalancesBreakdown, DashboardCard, DashboardInvestmentOpportunitiesView, DashboardPortfolioView, DashboardPortfolioViewSimple, DashboardRecentTransactionsView, DashboardRecentTransactionsViewSimple, DashboardStrategiesListView, DashboardTokenListView, DashboardTokensView, DashboardTokensViewSimple, DashboardTransactionsPlaceholder, DashboardView, DashboardViewSimple, DeframeComponentsProvider, DepositSuccessIcon, DetailsHeader, EarnAmountInputView, EarnBalanceCard, EarnBytecodeErrorView, EarnDepositFailedSimpleView, EarnDepositFailedView, EarnDepositFormView, EarnDepositFormViewSimple, EarnDepositProcessingSimpleView, EarnDepositProcessingView, EarnDepositSuccessSimpleView, EarnDepositSuccessView, EarnDepositWarningSimpleView, EarnDepositWarningView, EarnDesktopView, EarnDesktopViewSimple, EarnExploreGridView, EarnFlowSkeletonSimple, EarnInvestedSectionView, EarnInvestmentDetailsView, EarnInvestmentSummaryView, EarnNoBalanceNotificationView, EarnOverviewView, EarnPercentageButtonsView, EarnPositionCardView, EarnRecentTransactionsView, EarnTokenSelectorView, EarnTxStatusCardView, EarnWithdrawFailedSimpleView, EarnWithdrawFailedView, EarnWithdrawFormView, EarnWithdrawFormViewSimple, EarnWithdrawProcessingSimpleView, EarnWithdrawProcessingView, EarnWithdrawSuccessSimpleView, EarnWithdrawSuccessView, EarnWithdrawTokenSelectorView, EarnWithdrawWarningSimpleView, EarnWithdrawWarningView, Currency as Fiat, FlexCol, FlexRow, GroupedStrategyListView, HighRiskBadge, HistoryDepositDetailsView, HistoryListSkeleton, HistoryListView, HistorySwapDetailsView, HistoryTabEmpty, HistoryWithdrawDetailsView, InfoLabel, InfoRow, InfoRowIconLabel, InfoRowIconValue, InfoRowWithIcon, InfoValue, Input2 as Input, InputField, InputLabel, Input as InputRoot, InvestmentCrossChainProcessingView, KYCActionRow, KYCAddressPage, KYCBasicDataPage, KYCChecklistCard, KYCChecklistItem, KYCDataCard, KYCDocumentPage, KYCEditPage, KYCFieldMessage, KYCFormPage, KYCInfoRow, KYCIntroPage, KYCLoadingPage, KYCMessageBanner, KYCPageHeader, KYCPageSection, KYCPageShell, KYCReviewPage, KYCReviewPageSkeleton, KYCStatusItemCard, KYCStatusPage, KYCStatusPanel, KYCStepIndicator, Label, Link, ListItem, ListItemContent, ListItemLeftSide, ListItemRightSide, LoadingDots, LowRiskBadge, MediumRiskBadge, Navbar, OnchainDepositFormSimpleView, OnchainDepositFormView, OnchainDepositSuccessSimpleView, OnchainDepositSuccessView, OnchainWithdrawChainSelectorView, OnchainWithdrawFailedView, OnchainWithdrawFormSimpleView, OnchainWithdrawFormView, OnchainWithdrawProcessingSimpleView, OnchainWithdrawSignatureWarningSimpleView, OnchainWithdrawSignatureWarningView, OnchainWithdrawSuccessView, PercentageButton, PrimaryButton, ProcessingBadge, ProgressIndicator, ScrollableContent, SearchEmptyState, SearchInput, SecondaryButton, SectionCard, Select, SelectContent, SelectItem, SelectTrigger, Skeleton, StepDisplay, StepStatusIcon, StepStatusText, StrategyDetailsView, StrategyGridCard, SummaryDetails, SummaryDetailsCryptoControlV2, SwapAdvancedSettingsView, SwapAmountInputView, SwapCrossChainProcessingView, SwapFormView, SwapFormViewSimple, SwapFromCardView, SwapFromCardViewSimple, SwapHistoryView, SwapProcessingView, SwapProcessingViewSimple, SwapQuoteDetailsView, SwapSignatureWarningView, SwapSignatureWarningViewSimple, SwapSuccessView, SwapSuccessViewSimple, SwapToCardView, SwapToCardViewSimple, SwapTransactionFailedView, SwapTransactionFailedViewSimple, SwapWidgetFallbackView, Tabs, TabsContent, TabsList, TabsTrigger, TertiaryButton, Text_default as Text, TextAccent, TextBody, TextHeading, Title, TokenWithChainBadge, TransactionProcessingDetails, TransactionScreen, TransactionScreenIcon, TransactionScreenInvestmentCard, WalletBalances, WalletConnectPanel, WalletItem, ConnectWalletList as WalletList, WalletListContainer, WithdrawFailedIcon, WithdrawSuccessIcon, isDustValue, truncateAddress };
14978
16365
  //# sourceMappingURL=index.mjs.map
14979
16366
  //# sourceMappingURL=index.mjs.map