@deframe-sdk/components 0.1.50 → 0.1.51

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, {})
       ] })
     ] })