@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.d.mts +292 -3
- package/dist/index.d.ts +292 -3
- package/dist/index.js +1414 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1389 -2
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +143 -0
- package/package.json +1 -1
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
|
|
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
|