@deframe-sdk/components 0.1.50 → 0.1.52

package/dist/index.mjs

@@ -3130,8 +3130,8 @@ function KYCPageHeader({
   onBack,
   onClose,
   className,
-  backLabel,
-  closeLabel
+  backLabel = "Voltar",
+  closeLabel = "Fechar"
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -3273,13 +3273,6 @@ function KYCFormPage({
     ] })
   ] });
 }
-function CountrySelect() {
-  const [value, setValue] = useState("brasil");
-  return /* @__PURE__ */ jsxs(Select, { value, onValueChange: setValue, children: [
-    /* @__PURE__ */ jsx(SelectTrigger, { placeholder: "Selecione o pa\xEDs" }),
-    /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(SelectItem, { value: "brasil", children: "Brasil" }) })
-  ] });
-}
 function DefaultAddressLoadingContent() {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "48px", variant: "rect" }),
@@ -3354,7 +3347,7 @@ function KYCAddressPage({
         className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]",
         children: [
           /* @__PURE__ */ jsx(InputLabel, { htmlFor: "country", children: "Pa\xEDs" }),
-          /* @__PURE__ */ jsx(CountrySelect, {})
+          /* @__PURE__ */ jsx(InputField, { id: "country", value: "Brasil", disabled: true, readOnly: true })
         ]
       }
     )
@@ -3556,10 +3549,21 @@ function KYCIntroPage({
   primaryAction,
   className,
   containerMode = "fullscreen",
-  backLabel,
-  closeLabel
+  backLabel = "Voltar",
+  closeLabel = "Fechar",
+  visualVariant = "default"
 }) {
-  return /* @__PURE__ */ jsxs(KYCPageShell, { screenId, containerMode, children: [
+  const isCompact = visualVariant === "compact";
+  const iconClasses = twMerge(
+    "flex items-center justify-center text-[color:var(--deframe-widget-color-brand-primary)]",
+    isCompact ? "h-[44px] w-[44px]" : [
+      "h-[64px] w-[64px] rounded-[var(--deframe-widget-size-radius-full)]",
+      "[background:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
+      "[box-shadow: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)]"
+    ].join(" ")
+  );
+  const iconSize = isCompact ? 32 : 36;
+  return /* @__PURE__ */ jsxs(KYCPageShell, { screenId, containerMode, className: isCompact ? "min-h-0" : void 0, children: [
     onClose && /* @__PURE__ */ jsx(KYCPageHeader, { onClose, backLabel, closeLabel }),
     /* @__PURE__ */ jsxs(
       "div",
@@ -3576,13 +3580,8 @@ function KYCIntroPage({
               "div",
               {
                 "data-test-id": "kyc-intro-icon",
-                className: "flex h-[64px] w-[64px] items-center justify-center rounded-[var(--deframe-widget-size-radius-full)]",
-                style: {
-                  background: "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)",
-                  boxShadow: "0 0 0 7px color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent), 0 0 24px color-mix(in srgb, var(--deframe-widget-color-brand-primary) 22%, transparent)",
-                  color: "var(--deframe-widget-color-brand-primary)"
-                },
-                children: /* @__PURE__ */ jsxs("svg", { width: "36", height: "36", viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
+                className: iconClasses,
+                children: /* @__PURE__ */ jsxs("svg", { width: iconSize, height: iconSize, viewBox: "0 0 44 44", fill: "none", "aria-hidden": "true", children: [
                   /* @__PURE__ */ jsx("rect", { x: "8", y: "10", width: "28", height: "20", rx: "3", stroke: "currentColor", strokeWidth: "3" }),
                   /* @__PURE__ */ jsx("circle", { cx: "22", cy: "20", r: "5", stroke: "currentColor", strokeWidth: "3" }),
                   /* @__PURE__ */ jsx("path", { d: "M12 34c0-4 4.5-7 10-7s10 3 10 7", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round" })
@@ -3633,22 +3632,34 @@ function KYCLoadingPage({
   note,
   className,
   containerMode = "fullscreen",
-  backLabel,
-  closeLabel,
-  loadingLabel
+  backLabel = "Voltar",
+  closeLabel = "Fechar",
+  loadingLabel = "Carregando",
+  visualVariant = "default"
 }) {
-  return /* @__PURE__ */ jsxs(KYCPageShell, { screenId, className, containerMode, children: [
+  const isCompact = visualVariant === "compact";
+  const loadingFrameClasses = twMerge(
+    "flex items-center justify-center rounded-[var(--deframe-widget-size-radius-full)]",
+    isCompact ? "h-12 w-12" : [
+      "h-[72px] w-[72px]",
+      "[background:color-mix(in_srgb,var(--deframe-widget-color-brand-primary)_12%,transparent)]",
+      "[box-shadow: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)]"
+    ].join(" ")
+  );
+  const spinnerClasses = twMerge(
+    "rounded-[var(--deframe-widget-size-radius-full)] border-[3px] border-[color:var(--deframe-widget-color-brand-primary)] border-t-transparent animate-spin",
+    isCompact ? "h-10 w-10" : "h-9 w-9"
+  );
+  return /* @__PURE__ */ jsxs(KYCPageShell, { screenId, className: twMerge(isCompact && "min-h-0", className), containerMode, children: [
     onClose && /* @__PURE__ */ jsx(KYCPageHeader, { onClose, backLabel, closeLabel }),
     /* @__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: [
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: "flex h-[72px] w-[72px] items-center justify-center rounded-[var(--deframe-widget-size-radius-full)]",
-          style: {
-            background: "color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent)",
-            boxShadow: "0 0 0 7px color-mix(in srgb, var(--deframe-widget-color-brand-primary) 12%, transparent), 0 0 24px color-mix(in srgb, var(--deframe-widget-color-brand-primary) 22%, transparent)"
-          },
-          children: /* @__PURE__ */ jsx("div", { className: "h-9 w-9 rounded-full border-[3px] border-[color:var(--deframe-widget-color-brand-primary)] border-t-transparent animate-spin" })
+          "data-slot": "kyc-loading-indicator",
+          "data-test-id": "kyc-loading-indicator",
+          className: loadingFrameClasses,
+          children: /* @__PURE__ */ jsx("div", { className: spinnerClasses })
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)]", children: [
@@ -3656,9 +3667,8 @@ function KYCLoadingPage({
         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 })
       ] }),
       note && /* @__PURE__ */ jsx(KYCMessageBanner, { variant: "info", children: note }),
-      /* @__PURE__ */ jsxs("div", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
-        loadingLabel,
-        " ",
+      /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center justify-center gap-[var(--deframe-widget-size-gap-xs)] text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: [
+        /* @__PURE__ */ jsx("span", { children: loadingLabel }),
         /* @__PURE__ */ jsx(LoadingDots, {})
       ] })
     ] })
@@ -3888,7 +3898,7 @@ var STATUS_STYLES = {
   }
 };
 function resolveStatusBadgeTone(status = "SUCCESS") {
-  if (status === "PENDING") return "pending";
+  if (status === "PENDING" || status === "INITIAL") return "pending";
   if (status === "FAILED") return "failed";
   if (status === "REFUNDED") return "refunded";
   return "success";
@@ -9006,6 +9016,11 @@ var variantStyles2 = {
     dotClass: "bg-[var(--deframe-widget-color-state-warning)]",
     labelClass: "text-[color:var(--deframe-widget-color-state-warning)]"
   },
+  INITIAL: {
+    wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-warning)_32%,transparent)]",
+    dotClass: "bg-[var(--deframe-widget-color-state-warning)]",
+    labelClass: "text-[color:var(--deframe-widget-color-state-warning)]"
+  },
   FAILED: {
     wrapper: "bg-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_16%,transparent)] border-[color:color-mix(in_srgb,var(--deframe-widget-color-state-error)_32%,transparent)]",
     dotClass: "bg-[var(--deframe-widget-color-state-error)]",
@@ -9020,6 +9035,7 @@ var variantStyles2 = {
 var STATUS_LABEL_KEY = {
   SUCCESS: "success",
   PENDING: "pending",
+  INITIAL: "pending",
   FAILED: "failed",
   REFUNDED: "refunded"
 };
@@ -10696,14 +10712,14 @@ var EarnDesktopViewSimple = ({
     });
   }, [categories, strategies, labels == null ? void 0 : labels.stablecoinsBannerDescription, labels == null ? void 0 : labels.realsBannerDescription]);
   const historyByAsset = React6__default.useMemo(() => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const map = /* @__PURE__ */ new Map();
     for (const item of historyItems) {
       const isDeposit = item.type.includes("DEPOSIT");
-      const assetIn = (_a = item.amounts) == null ? void 0 : _a.assetIn;
-      const symbol = (_d = assetIn && "token" in assetIn ? (_c = (_b = assetIn.token) == null ? void 0 : _b.symbol) == null ? void 0 : _c.toUpperCase() : null) != null ? _d : "";
+      const primaryAsset = isDeposit ? (_a = item.amounts) == null ? void 0 : _a.assetIn : (_b = item.amounts) == null ? void 0 : _b.assetOut;
+      const symbol = (_e = primaryAsset && "token" in primaryAsset ? (_d = (_c = primaryAsset.token) == null ? void 0 : _c.symbol) == null ? void 0 : _d.toUpperCase() : null) != null ? _e : "";
       if (!symbol) continue;
-      const amount = assetIn && "amountInUSD" in assetIn && assetIn.amountInUSD ? formatCurrency(parseFloat(assetIn.amountInUSD)) : assetIn && "amountHumanized" in assetIn ? `${assetIn.amountHumanized} ${symbol}` : "";
+      const amount = primaryAsset && "amountInUSD" in primaryAsset && primaryAsset.amountInUSD ? formatCurrency(parseFloat(primaryAsset.amountInUSD)) : primaryAsset && "amountHumanized" in primaryAsset ? `${primaryAsset.amountHumanized} ${symbol}` : "";
       const date = new Date(item.createdAt).toLocaleString(locale, {
         day: "2-digit",
         month: "2-digit",