@khipu/design-system 0.2.0-alpha.13 → 0.2.0-alpha.131

package/dist/index.mjs

@@ -34,6 +34,40 @@ function lighten(hex, amount) {
     b + (255 - b) * amount
   );
 }
+function formatDateTime(iso) {
+  if (!iso) {
+    return "";
+  }
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  const pad = (n) => n.toString().padStart(2, "0");
+  const datePart = `${pad(date.getDate())}-${pad(date.getMonth() + 1)}-${date.getFullYear()}`;
+  const timePart = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  return `${datePart} ${timePart}`;
+}
+function formatDate(iso) {
+  if (!iso) {
+    return "";
+  }
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
+}
+function formatTime(iso) {
+  if (!iso) {
+    return "";
+  }
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return "";
+  }
+  const pad = (n) => n.toString().padStart(2, "0");
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
 
 // src/theme/KdsThemeProvider.tsx
 import { jsx } from "react/jsx-runtime";
@@ -347,6 +381,8 @@ var semanticColors = {
     // From Figma: warning/light
     dark: "#E65100",
     // From Figma: warning/dark
+    warm: "#8A6D1A",
+    // Warm/olive variant for header icons (LigoPay handoff v2)
     container: "#FFFBEB",
     // Light amber background for chips/badges
     contrastText: "#FFFFFF"
@@ -365,6 +401,8 @@ var semanticColors = {
     main: "#0288D1",
     light: "#03A9F4",
     dark: "#01579B",
+    blue: "#5A5FE0",
+    // Khipu-blue / LigoPay informational blue (distinct from cyan main)
     container: "#EFF6FF",
     // Light blue background for chips/badges
     contrastText: "#FFFFFF"
@@ -391,6 +429,8 @@ var fontWeights = {
   bold: 700
 };
 var fontSizes = {
+  "2xs": "0.625rem",
+  // 10px — tiny captions (version footer, fine print)
   xs: "0.75rem",
   // 12px
   sm: "0.875rem",
@@ -407,8 +447,10 @@ var fontSizes = {
   // 24px
   "3xl": "1.875rem",
   // 30px
-  "4xl": "2.25rem"
+  "4xl": "2.25rem",
   // 36px
+  decimalSup: "0.5em"
+  // Relative size for decimal superscript in amount displays
 };
 var lineHeights = {
   tight: 1.2,
@@ -811,6 +853,8 @@ var responsiveTypography = {
   }
 };
 var responsiveBaseFontSizes = {
+  "2xs": { mobile: "0.5625rem", tablet: "0.625rem", desktop: "0.625rem" },
+  // 9px → 10px
   xs: { mobile: "0.6875rem", tablet: "0.75rem", desktop: "0.75rem" },
   // 11px → 12px
   sm: { mobile: "0.8125rem", tablet: "0.875rem", desktop: "0.875rem" },
@@ -1040,7 +1084,7 @@ var KdsButton = forwardRef(
       children: [
         !loading && startIcon && /* @__PURE__ */ jsx2("span", { className: "kds-icon", children: /* @__PURE__ */ jsx2("i", { className: "material-symbols-outlined", children: startIcon }) }),
         loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx2("span", { className: "loader small" }),
+          /* @__PURE__ */ jsx2("progress", { className: "circle indeterminate small" }),
           /* @__PURE__ */ jsx2("span", { children })
         ] }) : /* @__PURE__ */ jsx2("span", { children }),
         !loading && endIcon && /* @__PURE__ */ jsx2("span", { className: "kds-icon", children: /* @__PURE__ */ jsx2("i", { className: "material-symbols-outlined", children: endIcon }) })
@@ -1051,7 +1095,7 @@ var KdsButton = forwardRef(
 KdsButton.displayName = "KdsButton";
 
 // src/components/core/KdsTextField/KdsTextField.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef as forwardRef2, useState } from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var KdsTextField = forwardRef2(
   ({
@@ -1059,14 +1103,31 @@ var KdsTextField = forwardRef2(
     helperText,
     error,
     fullWidth = true,
+    narrow = false,
     readOnly,
     startIcon,
     endIcon,
+    required,
     className,
     id,
+    type,
+    revealable,
+    revealLabel = "Mostrar u ocultar contrase\xF1a",
+    requiredMark = true,
     ...props
   }, ref) => {
+    const [revealed, setRevealed] = useState(false);
     const fieldId = id || `kds-field-${label.toLowerCase().replace(/\s+/g, "-")}`;
+    const isRevealable = !!revealable && !readOnly && !props.disabled;
+    const inputType = isRevealable ? revealed ? "text" : "password" : type;
+    const hasSuffix = !!endIcon || readOnly || isRevealable;
+    const toggleReveal = () => setRevealed((v) => !v);
+    const onToggleKeyDown = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        toggleReveal();
+      }
+    };
     return /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -1074,9 +1135,12 @@ var KdsTextField = forwardRef2(
           "field",
           "label",
           "border",
+          startIcon && "prefix",
+          hasSuffix && "suffix",
           error && "invalid",
           readOnly && "locked",
-          fullWidth && "kds-w-full",
+          fullWidth && !narrow && "kds-w-full",
+          narrow && "kds-field--narrow",
           className
         ),
         children: [
@@ -1086,14 +1150,32 @@ var KdsTextField = forwardRef2(
             {
               ref,
               id: fieldId,
-              placeholder: " ",
+              type: inputType,
               readOnly,
-              ...props
+              required,
+              ...props,
+              placeholder: " "
             }
           ),
-          /* @__PURE__ */ jsx3("label", { htmlFor: fieldId, children: label }),
+          /* @__PURE__ */ jsxs2("label", { htmlFor: fieldId, children: [
+            label,
+            required && requiredMark && " *"
+          ] }),
           readOnly && /* @__PURE__ */ jsx3("i", { className: "material-symbols-outlined", children: "lock" }),
-          endIcon && !readOnly && /* @__PURE__ */ jsx3("i", { className: "material-symbols-outlined", children: endIcon }),
+          isRevealable && /* @__PURE__ */ jsx3(
+            "a",
+            {
+              className: "kds-field-reveal",
+              role: "button",
+              tabIndex: 0,
+              "aria-label": revealLabel,
+              "aria-pressed": revealed,
+              onClick: toggleReveal,
+              onKeyDown: onToggleKeyDown,
+              children: /* @__PURE__ */ jsx3("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: revealed ? "visibility" : "visibility_off" })
+            }
+          ),
+          endIcon && !readOnly && !isRevealable && /* @__PURE__ */ jsx3("i", { className: "material-symbols-outlined", children: endIcon }),
           helperText && /* @__PURE__ */ jsx3("span", { className: "helper", children: helperText })
         ]
       }
@@ -1102,76 +1184,41 @@ var KdsTextField = forwardRef2(
 );
 KdsTextField.displayName = "KdsTextField";
 
-// src/components/core/KdsCheckbox/KdsCheckbox.tsx
+// src/components/core/KdsSearchField/KdsSearchField.tsx
 import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var KdsCheckbox = forwardRef3(
-  ({ label, className, id, ...props }, ref) => {
-    const fieldId = id || `kds-cb-${label?.toLowerCase().replace(/\s+/g, "-") || "check"}`;
-    return /* @__PURE__ */ jsxs3("label", { className: clsx("field", className), htmlFor: fieldId, children: [
-      /* @__PURE__ */ jsx4("input", { ref, type: "checkbox", id: fieldId, ...props }),
-      /* @__PURE__ */ jsx4("span", { children: label })
+var KdsSearchField = forwardRef3(
+  ({ className, withIcon = false, ...props }, ref) => {
+    const input = /* @__PURE__ */ jsx4(
+      "input",
+      {
+        ref,
+        type: "search",
+        className: clsx("kds-search-field", className),
+        ...props
+      }
+    );
+    if (!withIcon) {
+      return input;
+    }
+    return /* @__PURE__ */ jsxs3("div", { className: "kds-search-field-wrapper", children: [
+      /* @__PURE__ */ jsx4("i", { className: "material-symbols-outlined kds-search-field-icon", "aria-hidden": "true", children: "search" }),
+      input
     ] });
   }
 );
-KdsCheckbox.displayName = "KdsCheckbox";
+KdsSearchField.displayName = "KdsSearchField";
 
-// src/components/core/KdsModal/KdsModal.tsx
+// src/components/core/KdsCheckbox/KdsCheckbox.tsx
 import { forwardRef as forwardRef4 } from "react";
-import * as Dialog from "@radix-ui/react-dialog";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var KdsModal = forwardRef4(
-  ({
-    open,
-    onClose,
-    title,
-    description,
-    footer,
-    children,
-    size = "md",
-    showCloseButton = true,
-    className
-  }, ref) => /* @__PURE__ */ jsx5(
-    Dialog.Root,
-    {
-      open,
-      onOpenChange: (o) => {
-        if (!o) onClose();
-      },
-      children: /* @__PURE__ */ jsxs4(Dialog.Portal, { children: [
-        /* @__PURE__ */ jsx5(Dialog.Overlay, { className: "kds-bottom-sheet-scrim" }),
-        /* @__PURE__ */ jsxs4(
-          Dialog.Content,
-          {
-            ref,
-            className: clsx(
-              "kds-bottom-sheet",
-              `kds-bottom-sheet-${size}`,
-              className
-            ),
-            children: [
-              title && /* @__PURE__ */ jsxs4("div", { className: "kds-bottom-sheet-header", children: [
-                /* @__PURE__ */ jsx5(Dialog.Title, { className: "kds-bottom-sheet-title", children: title }),
-                showCloseButton && /* @__PURE__ */ jsx5(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    className: "kds-bottom-sheet-close",
-                    "aria-label": "Cerrar",
-                    children: /* @__PURE__ */ jsx5("i", { className: "material-symbols-outlined", children: "close" })
-                  }
-                ) })
-              ] }),
-              description && /* @__PURE__ */ jsx5(Dialog.Description, { className: "kds-bottom-sheet-description", children: description }),
-              /* @__PURE__ */ jsx5("div", { className: "kds-bottom-sheet-body", children }),
-              footer && /* @__PURE__ */ jsx5("div", { className: "kds-bottom-sheet-actions", children: footer })
-            ]
-          }
-        )
-      ] })
-    }
-  )
+var KdsCheckbox = forwardRef4(
+  ({ label, className, ...props }, ref) => /* @__PURE__ */ jsxs4("label", { className: clsx("checkbox", className), children: [
+    /* @__PURE__ */ jsx5("input", { ref, type: "checkbox", ...props }),
+    /* @__PURE__ */ jsx5("span", { children: label })
+  ] })
 );
-KdsModal.displayName = "KdsModal";
+KdsCheckbox.displayName = "KdsCheckbox";
 
 // src/components/core/KdsCard/KdsCard.tsx
 import { forwardRef as forwardRef5 } from "react";
@@ -1208,50 +1255,161 @@ KdsCardFooter.displayName = "KdsCardFooter";
 // src/components/core/KdsSpinner/KdsSpinner.tsx
 import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var SIZE_CLASS = {
+  small: "small",
+  medium: null,
+  large: "large"
+};
 var KdsSpinner = forwardRef6(
-  ({ size = "medium", label, className, ...props }, ref) => /* @__PURE__ */ jsxs5("div", { ref, className: clsx("kds-flex kds-flex-col kds-items-center kds-gap-2", className), role: "status", ...props, children: [
-    /* @__PURE__ */ jsx7("span", { className: clsx("loader", size) }),
-    label && /* @__PURE__ */ jsx7("span", { className: "kds-text-body-small kds-text-muted", children: label }),
-    !label && /* @__PURE__ */ jsx7("span", { className: "kds-hidden", children: "Cargando" })
-  ] })
+  ({ size = "medium", label, className, ...props }, ref) => {
+    const sizeClass = SIZE_CLASS[size];
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref,
+        className: clsx("kds-flex kds-flex-col kds-items-center kds-gap-2", className),
+        role: "status",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx7("progress", { className: clsx("circle indeterminate", sizeClass) }),
+          label && /* @__PURE__ */ jsx7("span", { className: "kds-text-body-small kds-text-muted", children: label }),
+          !label && /* @__PURE__ */ jsx7("span", { className: "kds-hidden", children: "Cargando" })
+        ]
+      }
+    );
+  }
 );
 KdsSpinner.displayName = "KdsSpinner";
 
-// src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
+// src/components/core/KdsSecureLoader/KdsSecureLoader.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var KdsLinearProgress = forwardRef7(
-  ({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ jsx8("progress", { ref, className: clsx("kds-progress", className), value, max, ...props })
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var KdsSecureLoader = forwardRef7(
+  ({ title, message, className, ...props }, ref) => /* @__PURE__ */ jsxs6("div", { ref, className: clsx("kds-secure-loader", className), role: "status", "aria-busy": "true", ...props, children: [
+    (title || message) && /* @__PURE__ */ jsxs6("div", { className: "kds-secure-loader-text", children: [
+      title && /* @__PURE__ */ jsx8("p", { className: "kds-secure-loader-title", children: title }),
+      message && /* @__PURE__ */ jsx8("p", { className: "kds-secure-loader-message", children: message })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "kds-secure-loader-spinner", children: [
+      /* @__PURE__ */ jsx8(
+        "svg",
+        {
+          className: "kds-secure-loader-ring",
+          viewBox: "22 22 44 44",
+          width: "100",
+          height: "100",
+          fill: "none",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx8("circle", { cx: "44", cy: "44", r: "20.2", fill: "none" })
+        }
+      ),
+      /* @__PURE__ */ jsx8("i", { className: "material-symbols-outlined kds-secure-loader-lock", "aria-hidden": "true", children: "lock" })
+    ] })
+  ] })
+);
+KdsSecureLoader.displayName = "KdsSecureLoader";
+
+// src/components/core/KdsCopyButton/KdsCopyButton.tsx
+import { forwardRef as forwardRef8 } from "react";
+
+// src/components/core/hooks/useCopyToClipboard.ts
+import { useState as useState2, useCallback } from "react";
+function useCopyToClipboard(resetMs = 1200) {
+  const [copied, setCopied] = useState2(false);
+  const copy = useCallback(
+    async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), resetMs);
+      } catch {
+      }
+    },
+    [resetMs]
+  );
+  return { copied, copy };
+}
+
+// src/components/core/KdsCopyButton/KdsCopyButton.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var KdsCopyButton = forwardRef8(
+  ({ value, copiedText = "Copiado", className, ...props }, ref) => {
+    const { copied, copy } = useCopyToClipboard();
+    return /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: clsx("kds-copy-button", copied && "copied", className),
+        onClick: () => copy(value),
+        "aria-label": `Copiar: ${value}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs7("span", { className: "kds-copy-button-label", children: [
+            /* @__PURE__ */ jsx9("span", { className: "kds-copy-button-value", "aria-hidden": copied || void 0, children: value }),
+            /* @__PURE__ */ jsx9("span", { className: "kds-copy-button-copied", "aria-hidden": !copied || void 0, children: copiedText })
+          ] }),
+          /* @__PURE__ */ jsx9("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: copied ? "check" : "content_copy" })
+        ]
+      }
+    );
+  }
+);
+KdsCopyButton.displayName = "KdsCopyButton";
+
+// src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var KdsLinearProgress = forwardRef9(
+  ({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ jsx10("progress", { ref, className: clsx("kds-progress", className), value, max, ...props })
 );
 KdsLinearProgress.displayName = "KdsLinearProgress";
 
 // src/components/core/KdsAlert/KdsAlert.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var KdsAlert = forwardRef8(
-  ({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      ref,
-      role: "alert",
-      className: clsx("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx9("div", { className: "kds-alert-icon", children: /* @__PURE__ */ jsx9("i", { className: "material-symbols-outlined", children: icon }) }),
-        /* @__PURE__ */ jsxs6("div", { className: "kds-alert-content", children: [
-          title && /* @__PURE__ */ jsx9("p", { className: "kds-alert-title", children: title }),
-          /* @__PURE__ */ jsx9("p", { className: "kds-alert-description", children })
-        ] }),
-        onClose && /* @__PURE__ */ jsx9("button", { className: "kds-btn kds-btn-text kds-btn-sm", onClick: onClose, "aria-label": "Cerrar", children: /* @__PURE__ */ jsx9("i", { className: "material-symbols-outlined", children: "close" }) })
-      ]
-    }
-  )
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_ICONS = {
+  success: "check_circle",
+  info: "info",
+  warning: "warning",
+  error: "error"
+};
+var KdsAlert = forwardRef10(
+  ({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => {
+    const resolvedIcon = icon === false ? null : typeof icon === "string" ? icon : DEFAULT_ICONS[severity];
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: clsx("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
+        ...props,
+        children: [
+          resolvedIcon && /* @__PURE__ */ jsx11("div", { className: "kds-alert-icon", children: /* @__PURE__ */ jsx11("i", { className: "material-symbols-outlined", children: resolvedIcon }) }),
+          /* @__PURE__ */ jsxs8("div", { className: "kds-alert-content", children: [
+            title && /* @__PURE__ */ jsx11("p", { className: "kds-alert-title", children: title }),
+            /* @__PURE__ */ jsx11("p", { className: "kds-alert-description", children })
+          ] }),
+          onClose && /* @__PURE__ */ jsx11(
+            "button",
+            {
+              type: "button",
+              className: "kds-alert-close",
+              onClick: onClose,
+              "aria-label": "Cerrar",
+              children: /* @__PURE__ */ jsx11("i", { className: "material-symbols-outlined", children: "close" })
+            }
+          )
+        ]
+      }
+    );
+  }
 );
 KdsAlert.displayName = "KdsAlert";
 
 // src/components/core/KdsTypography/KdsTypography.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var variantTag = {
   display1: "h1",
   display2: "h2",
@@ -1263,13 +1421,18 @@ var variantTag = {
   "body-small": "p",
   label: "span",
   "label-small": "span",
+  "kv-label": "span",
+  value: "span",
+  code: "span",
+  caption: "span",
   muted: "p",
-  link: "span"
+  link: "span",
+  strong: "span"
 };
-var KdsTypography = forwardRef9(
+var KdsTypography = forwardRef11(
   ({ variant = "body", color, as, children, className, ...props }, ref) => {
     const Tag = as || variantTag[variant];
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx12(
       Tag,
       {
         ref,
@@ -1287,12 +1450,12 @@ var KdsTypography = forwardRef9(
 KdsTypography.displayName = "KdsTypography";
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-import React10, { forwardRef as forwardRef10, Children, useMemo } from "react";
+import React12, { forwardRef as forwardRef12, Children, useMemo } from "react";
 
 // src/components/core/hooks/useTabsKeyboard.ts
-import { useCallback } from "react";
+import { useCallback as useCallback2 } from "react";
 function useTabsKeyboard(tabCount, activeIndex, onChange) {
-  const onKeyDown = useCallback(
+  const onKeyDown = useCallback2(
     (e) => {
       let next = activeIndex;
       if (e.key === "ArrowRight") next = (activeIndex + 1) % tabCount;
@@ -1312,31 +1475,31 @@ function useTabsKeyboard(tabCount, activeIndex, onChange) {
 }
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
-var KdsTabs = forwardRef10(
-  ({ activeIndex, onChange, variant = "standard", children, className, style, ...props }, ref) => {
+import { jsx as jsx13 } from "react/jsx-runtime";
+var KdsTabs = forwardRef12(
+  ({ activeIndex, onChange, children, className, style, ...props }, ref) => {
     const tabCount = Children.count(children);
     const { onKeyDown } = useTabsKeyboard(tabCount, activeIndex, onChange);
-    const mergedStyle = useMemo(() => {
-      if (variant !== "segmented") return style;
-      return {
+    const mergedStyle = useMemo(
+      () => ({
         ...style,
         "--_tab-count": tabCount,
         "--_active-idx": activeIndex
-      };
-    }, [variant, tabCount, activeIndex, style]);
-    return /* @__PURE__ */ jsx11(
+      }),
+      [tabCount, activeIndex, style]
+    );
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref,
         role: "tablist",
-        className: clsx(variant === "segmented" ? "kds-segmented-tabs" : "kds-tabs", className),
+        className: clsx("kds-segmented-tabs", className),
         style: mergedStyle,
         onKeyDown,
         ...props,
         children: Children.map(children, (child, i) => {
-          if (!React10.isValidElement(child)) return child;
-          return React10.cloneElement(child, {
+          if (!React12.isValidElement(child)) return child;
+          return React12.cloneElement(child, {
             _active: i === activeIndex,
             _onClick: () => onChange(i)
           });
@@ -1346,11 +1509,12 @@ var KdsTabs = forwardRef10(
   }
 );
 KdsTabs.displayName = "KdsTabs";
-var KdsTab = forwardRef10(
-  ({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var KdsTab = forwardRef12(
+  ({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ jsx13(
     "button",
     {
       ref,
+      type: "button",
       role: "tab",
       "aria-selected": _active,
       tabIndex: _active ? 0 : -1,
@@ -1362,8 +1526,8 @@ var KdsTab = forwardRef10(
   )
 );
 KdsTab.displayName = "KdsTab";
-var KdsTabPanel = forwardRef10(
-  ({ active, children, className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var KdsTabPanel = forwardRef12(
+  ({ active, children, className, ...props }, ref) => /* @__PURE__ */ jsx13(
     "div",
     {
       ref,
@@ -1377,190 +1541,128 @@ var KdsTabPanel = forwardRef10(
 );
 KdsTabPanel.displayName = "KdsTabPanel";
 
-// src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
-import { forwardRef as forwardRef11 } from "react";
-
-// src/assets/images/khipu-logo-color.svg
-var khipu_logo_color_default = "./khipu-logo-color-TV75AKOV.svg";
-
-// src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var KhipuLogo = () => /* @__PURE__ */ jsx12(
-  "img",
-  {
-    src: khipu_logo_color_default,
-    alt: "Khipu",
-    className: "kds-logo-header-logo-img"
-  }
-);
-var KdsLogoHeaderLogo = forwardRef11(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
-      "div",
-      {
-        ref,
-        className: clsx("kds-logo-header-logo", className),
-        ...props,
-        children: children || /* @__PURE__ */ jsx12(KhipuLogo, {})
-      }
-    );
-  }
-);
-KdsLogoHeaderLogo.displayName = "KdsLogoHeaderLogo";
-var KdsLogoHeaderSeparator = forwardRef11(
-  ({ children = "|", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
-      "span",
-      {
-        ref,
-        className: clsx("kds-logo-header-separator", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-KdsLogoHeaderSeparator.displayName = "KdsLogoHeaderSeparator";
-var KdsLogoHeaderCode = forwardRef11(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
-      "span",
-      {
-        ref,
-        className: clsx("kds-logo-header-code", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-KdsLogoHeaderCode.displayName = "KdsLogoHeaderCode";
-var KdsLogoHeaderCloseButton = forwardRef11(
-  ({ onClose, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12("div", { className: "kds-logo-header-close-wrapper", children: /* @__PURE__ */ jsx12(
-      "button",
-      {
-        ref,
-        onClick: onClose,
-        className: clsx("kds-btn kds-btn-icon", className),
-        "aria-label": "close",
-        ...props,
-        children: /* @__PURE__ */ jsx12("i", { className: "material-symbols-outlined", children: "close" })
-      }
-    ) });
-  }
-);
-KdsLogoHeaderCloseButton.displayName = "KdsLogoHeaderCloseButton";
-var KdsLogoHeader = forwardRef11(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
-      "div",
-      {
-        ref,
-        className: clsx("kds-brand-row", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-KdsLogoHeader.displayName = "KdsLogoHeader";
-
 // src/components/core/KdsRadioGroup/KdsRadioGroup.tsx
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var KdsRadioGroup = forwardRef12(
-  ({ label, name, options, value, onChange, className, ...props }, ref) => /* @__PURE__ */ jsxs7("fieldset", { ref, className: clsx("kds-radio-group", className), ...props, children: [
-    label && /* @__PURE__ */ jsx13("legend", { children: label }),
-    options.map((opt) => /* @__PURE__ */ jsxs7("label", { className: "field", children: [
-      /* @__PURE__ */ jsx13(
-        "input",
-        {
-          type: "radio",
-          name,
-          value: opt.value,
-          checked: value === opt.value,
-          disabled: opt.disabled,
-          onChange: () => onChange?.(opt.value)
-        }
-      ),
-      /* @__PURE__ */ jsx13("span", { children: opt.label })
-    ] }, opt.value))
-  ] })
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var KdsRadioGroup = forwardRef13(
+  ({ label, name, options, value, onChange, size, variant, className, ...props }, ref) => /* @__PURE__ */ jsxs9(
+    "fieldset",
+    {
+      ref,
+      className: clsx("kds-radio-group", variant === "card" && "kds-radio-group--card", className),
+      ...props,
+      children: [
+        label && /* @__PURE__ */ jsx14("legend", { children: label }),
+        options.map((opt) => /* @__PURE__ */ jsxs9("label", { className: clsx("radio", size), children: [
+          /* @__PURE__ */ jsx14(
+            "input",
+            {
+              type: "radio",
+              name,
+              value: opt.value,
+              checked: value === opt.value,
+              disabled: opt.disabled,
+              onChange: () => onChange?.(opt.value)
+            }
+          ),
+          /* @__PURE__ */ jsx14("span", { children: opt.label })
+        ] }, opt.value))
+      ]
+    }
+  )
 );
 KdsRadioGroup.displayName = "KdsRadioGroup";
 
 // src/components/core/KdsSelect/KdsSelect.tsx
-import { forwardRef as forwardRef13 } from "react";
-import * as Select from "@radix-ui/react-select";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var KdsSelectRoot = forwardRef13(
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var KdsSelect = forwardRef14(
   ({
-    value,
-    onValueChange,
-    placeholder,
     label,
-    error,
+    options,
+    placeholder,
     helperText,
-    disabled,
+    error,
+    prefixIcon,
     fullWidth = true,
-    children,
-    className
-  }, ref) => /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      ref,
-      className: clsx(
-        "kds-select",
-        error && "kds-select-error",
-        fullWidth && "kds-select-full",
-        className
-      ),
-      children: [
-        label && /* @__PURE__ */ jsx14("label", { className: "kds-select-label", children: label }),
-        /* @__PURE__ */ jsxs8(Select.Root, { value, onValueChange, disabled, children: [
-          /* @__PURE__ */ jsxs8(Select.Trigger, { className: "kds-select-trigger", children: [
-            /* @__PURE__ */ jsx14(Select.Value, { placeholder }),
-            /* @__PURE__ */ jsx14(Select.Icon, { className: "kds-select-icon", children: /* @__PURE__ */ jsx14("i", { className: "material-symbols-outlined", children: "expand_more" }) })
+    disabled,
+    required,
+    className,
+    id,
+    ...props
+  }, ref) => {
+    const fieldId = id || `kds-select-${label.toLowerCase().replace(/\s+/g, "-")}`;
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: clsx(
+          "field",
+          "label",
+          "border",
+          prefixIcon && "prefix",
+          error && "invalid",
+          fullWidth && "kds-w-full",
+          className
+        ),
+        children: [
+          prefixIcon && /* @__PURE__ */ jsx15("i", { className: "material-symbols-outlined", children: prefixIcon }),
+          /* @__PURE__ */ jsxs10(
+            "select",
+            {
+              ref,
+              id: fieldId,
+              disabled,
+              required,
+              ...props,
+              children: [
+                placeholder !== void 0 && /* @__PURE__ */ jsx15("option", { value: "", children: placeholder }),
+                options.map((opt) => /* @__PURE__ */ jsx15("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs10("label", { htmlFor: fieldId, children: [
+            label,
+            required && " *"
           ] }),
-          /* @__PURE__ */ jsx14(Select.Portal, { children: /* @__PURE__ */ jsx14(Select.Content, { className: "kds-select-content", position: "popper", sideOffset: 4, children: /* @__PURE__ */ jsx14(Select.Viewport, { className: "kds-select-viewport", children }) }) })
-        ] }),
-        helperText && /* @__PURE__ */ jsx14("span", { className: clsx("kds-select-helper", error && "kds-select-helper-error"), children: helperText })
-      ]
-    }
-  )
-);
-KdsSelectRoot.displayName = "KdsSelect";
-var KdsSelectItem = forwardRef13(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs8(Select.Item, { ref, className: clsx("kds-select-item", className), ...props, children: [
-    /* @__PURE__ */ jsx14(Select.ItemText, { children }),
-    /* @__PURE__ */ jsx14(Select.ItemIndicator, { className: "kds-select-item-indicator", children: /* @__PURE__ */ jsx14("i", { className: "material-symbols-outlined", children: "check" }) })
-  ] })
+          helperText && /* @__PURE__ */ jsx15("span", { className: "helper", children: helperText })
+        ]
+      }
+    );
+  }
 );
-KdsSelectItem.displayName = "KdsSelect.Item";
-var KdsSelect = Object.assign(KdsSelectRoot, {
-  Item: KdsSelectItem
-});
+KdsSelect.displayName = "KdsSelect";
 
 // src/components/core/KdsChip/KdsChip.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-var KdsChip = forwardRef14(
-  ({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ jsxs9("span", { ref, className: clsx("kds-badge", color, className), ...props, children: [
-    icon && /* @__PURE__ */ jsx15("i", { className: "material-symbols-outlined", children: icon }),
-    children,
-    onDelete && /* @__PURE__ */ jsx15("button", { className: "kds-btn kds-btn-text kds-btn-sm", onClick: onDelete, "aria-label": "Eliminar", children: /* @__PURE__ */ jsx15("i", { className: "material-symbols-outlined", children: "close" }) })
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+var KdsChip = forwardRef15(
+  ({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ jsxs11("span", { ref, className: clsx("kds-badge", color, className), ...props, children: [
+    icon && /* @__PURE__ */ jsx16("i", { className: "material-symbols-outlined", children: icon }),
+    /* @__PURE__ */ jsx16("span", { children }),
+    onDelete && /* @__PURE__ */ jsx16(
+      "button",
+      {
+        type: "button",
+        className: "kds-badge-close",
+        onClick: (e) => {
+          e.stopPropagation();
+          onDelete();
+        },
+        "aria-label": "Eliminar",
+        children: /* @__PURE__ */ jsx16("i", { className: "material-symbols-outlined", children: "close" })
+      }
+    )
   ] })
 );
 KdsChip.displayName = "KdsChip";
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 
 // src/components/core/hooks/useAutoHide.ts
-import { useState, useEffect, useRef } from "react";
+import { useState as useState3, useEffect, useRef } from "react";
 function useAutoHide(durationMs, onHide) {
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState3(true);
   const onHideRef = useRef(onHide);
   onHideRef.current = onHide;
   useEffect(() => {
@@ -1575,22 +1677,61 @@ function useAutoHide(durationMs, onHide) {
 }
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var KdsSnackbar = forwardRef15(
-  ({ message, type, duration = 5e3, onClose, open = true, className, ...props }, ref) => {
-    const { visible } = useAutoHide(duration, onClose);
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var DEFAULT_ICONS2 = {
+  info: "info",
+  success: "check_circle",
+  error: "error"
+};
+var KdsSnackbar = forwardRef16(
+  ({
+    message,
+    type = "info",
+    duration = 5e3,
+    onClose,
+    open = true,
+    icon,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const autoDismiss = duration > 0;
+    const { visible } = useAutoHide(autoDismiss ? duration : 0, onClose);
     if (!open || !visible) return null;
-    return /* @__PURE__ */ jsxs10("div", { ref, role: "status", className: clsx("snackbar", "active", type, className), ...props, children: [
-      /* @__PURE__ */ jsx16("span", { children: message }),
-      onClose && /* @__PURE__ */ jsx16("button", { onClick: onClose, "aria-label": "Cerrar", children: /* @__PURE__ */ jsx16("i", { className: "material-symbols-outlined", children: "close" }) })
-    ] });
-  }
-);
+    const resolvedIcon = icon === false ? null : icon ?? DEFAULT_ICONS2[type];
+    const mergedStyle = autoDismiss ? { ...style, ["--kds-snackbar-duration"]: `${duration}ms` } : style ?? {};
+    return /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: clsx("snackbar", "active", type, className),
+        "data-auto-dismiss": autoDismiss ? "true" : void 0,
+        style: mergedStyle,
+        ...props,
+        children: [
+          resolvedIcon && /* @__PURE__ */ jsx17("i", { className: "material-symbols-outlined", children: resolvedIcon }),
+          /* @__PURE__ */ jsx17("span", { className: "max", children: message }),
+          onClose && /* @__PURE__ */ jsx17(
+            "button",
+            {
+              type: "button",
+              className: "kds-snackbar-close",
+              onClick: onClose,
+              "aria-label": "Cerrar",
+              children: /* @__PURE__ */ jsx17("i", { className: "material-symbols-outlined", children: "close" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 KdsSnackbar.displayName = "KdsSnackbar";
 
 // src/components/core/KdsTooltip/KdsTooltip.tsx
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function KdsTooltip({
   content,
   children,
@@ -1601,167 +1742,377 @@ function KdsTooltip({
   onOpenChange,
   delayDuration = 300
 }) {
-  return /* @__PURE__ */ jsx17(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ jsxs11(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx17(Tooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx17(Tooltip.Portal, { children: /* @__PURE__ */ jsxs11(Tooltip.Content, { className: clsx("kds-tooltip", className), side: placement, sideOffset: 4, children: [
-      content,
-      /* @__PURE__ */ jsx17(Tooltip.Arrow, { className: "kds-tooltip-arrow" })
-    ] }) })
+  return /* @__PURE__ */ jsx18(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ jsxs13(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx18(Tooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx18(Tooltip.Portal, { children: /* @__PURE__ */ jsx18("div", { className: "kds-theme-root", style: { display: "contents" }, children: /* @__PURE__ */ jsxs13(
+      Tooltip.Content,
+      {
+        className: clsx("kds-tooltip", className),
+        side: placement,
+        sideOffset: 6,
+        collisionPadding: 8,
+        children: [
+          content,
+          /* @__PURE__ */ jsx18(Tooltip.Arrow, { className: "kds-tooltip-arrow", width: 10, height: 5 })
+        ]
+      }
+    ) }) })
   ] }) });
 }
 
 // src/components/core/KdsAccordion/KdsAccordion.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-var KdsAccordion = forwardRef16(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx18("details", { ref, className: clsx("kds-accordion", className), ...props, children })
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+var KdsAccordion = forwardRef17(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx19("details", { ref, className: clsx("kds-accordion", className), ...props, children })
 );
 KdsAccordion.displayName = "KdsAccordion";
-var KdsAccordionSummary = forwardRef16(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs12("summary", { ref, className: clsx("kds-accordion-summary", className), ...props, children: [
+var KdsAccordionSummary = forwardRef17(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs14("summary", { ref, className: clsx("kds-accordion-summary", className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx18("i", { className: "material-symbols-outlined", children: "expand_more" })
+    /* @__PURE__ */ jsx19("i", { className: "material-symbols-outlined", children: "expand_more" })
   ] })
 );
 KdsAccordionSummary.displayName = "KdsAccordionSummary";
-var KdsAccordionDetails = forwardRef16(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx18("div", { ref, className: clsx("kds-accordion-details", className), ...props, children })
+var KdsAccordionDetails = forwardRef17(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx19("div", { ref, className: clsx("kds-accordion-details", className), ...props, children })
 );
 KdsAccordionDetails.displayName = "KdsAccordionDetails";
 
 // src/components/core/KdsDivider/KdsDivider.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var KdsDivider = forwardRef17(
-  ({ dashed, className, ...props }, ref) => /* @__PURE__ */ jsx19("hr", { ref, className: clsx(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var KdsDivider = forwardRef18(
+  ({ dashed, className, ...props }, ref) => /* @__PURE__ */ jsx20("hr", { ref, className: clsx(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
 );
 KdsDivider.displayName = "KdsDivider";
 
 // src/components/core/KdsSectionNote/KdsSectionNote.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
-var KdsSectionNote = forwardRef18(
-  ({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ jsxs13("p", { ref, className: clsx("kds-section-note", className), ...props, children: [
-    /* @__PURE__ */ jsx20("i", { className: "material-symbols-outlined", children: icon }),
-    /* @__PURE__ */ jsx20("span", { children })
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var KdsSectionNote = forwardRef19(
+  ({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ jsxs15("p", { ref, className: clsx("kds-section-note", className), ...props, children: [
+    /* @__PURE__ */ jsx21("i", { className: "material-symbols-outlined", children: icon }),
+    /* @__PURE__ */ jsx21("span", { children })
   ] })
 );
 KdsSectionNote.displayName = "KdsSectionNote";
 
 // src/components/core/KdsStatusBlock/KdsStatusBlock.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
-var KdsStatusBlock = forwardRef19(
-  ({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ jsxs14("div", { ref, className: clsx("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
-    /* @__PURE__ */ jsx21("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ jsx21("i", { className: "material-symbols-outlined", children: icon }) }),
-    /* @__PURE__ */ jsxs14("div", { children: [
-      /* @__PURE__ */ jsx21("h2", { className: "kds-status-block-title", children: title }),
-      description && /* @__PURE__ */ jsx21("p", { className: "kds-status-block-description", children: description })
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var KdsStatusBlock = forwardRef20(
+  ({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ jsxs16("div", { ref, className: clsx("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
+    /* @__PURE__ */ jsx22("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ jsx22("i", { className: "material-symbols-outlined", children: icon }) }),
+    /* @__PURE__ */ jsxs16("div", { children: [
+      /* @__PURE__ */ jsx22("h2", { className: "kds-status-block-title", children: title }),
+      description && /* @__PURE__ */ jsx22("p", { className: "kds-status-block-description", children: description })
     ] })
   ] })
 );
 KdsStatusBlock.displayName = "KdsStatusBlock";
 
 // src/components/core/KdsStepper/KdsStepper.tsx
-import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-var KdsStepper = forwardRef20(
-  ({ steps, current, className, ...props }, ref) => /* @__PURE__ */ jsx22("div", { ref, className: clsx("kds-stepper", className), "data-steps": steps, "data-current": current, ...props, children: Array.from({ length: steps }, (_, i) => /* @__PURE__ */ jsxs15("div", { className: clsx("kds-step", i < current && "completed", i === current && "current"), children: [
-    /* @__PURE__ */ jsx22("div", { className: "kds-step-indicator", children: i < current ? "\u2713" : i + 1 }),
-    i < steps - 1 && /* @__PURE__ */ jsx22("div", { className: "kds-step-line" })
-  ] }, i)) })
-);
-KdsStepper.displayName = "KdsStepper";
-
-// src/components/core/KdsCopyRow/KdsCopyRow.tsx
 import { forwardRef as forwardRef21 } from "react";
-
-// src/components/core/hooks/useCopyToClipboard.ts
-import { useState as useState2, useCallback as useCallback2 } from "react";
-function useCopyToClipboard(resetMs = 1200) {
-  const [copied, setCopied] = useState2(false);
-  const copy = useCallback2(
-    async (text) => {
-      try {
-        await navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), resetMs);
-      } catch {
-      }
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var KdsStepper = forwardRef21(
+  ({ steps, current, className, ...props }, ref) => /* @__PURE__ */ jsx23("div", { ref, className: clsx("kds-stepper", className), ...props, children: steps.map((label, i) => /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: clsx("kds-step", i < current && "completed", i === current && "current"),
+      children: [
+        /* @__PURE__ */ jsx23("div", { className: "kds-step-indicator" }),
+        /* @__PURE__ */ jsx23("div", { className: "kds-step-label", children: label })
+      ]
     },
-    [resetMs]
-  );
-  return { copied, copy };
-}
+    `${i}-${label}`
+  )) })
+);
+KdsStepper.displayName = "KdsStepper";
 
 // src/components/core/KdsCopyRow/KdsCopyRow.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
-var KdsCopyRow = forwardRef21(
-  ({ label, value, className, ...props }, ref) => {
+import { forwardRef as forwardRef22 } from "react";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var KdsCopyRow = forwardRef22(
+  ({ label, value, copiedText = "Copiado", className, ...props }, ref) => {
     const { copied, copy } = useCopyToClipboard();
-    return /* @__PURE__ */ jsxs16("div", { ref, className: clsx("kds-copy-row", copied && "copied", className), ...props, children: [
-      /* @__PURE__ */ jsx23("span", { className: "kds-copy-row-label", children: label }),
-      /* @__PURE__ */ jsx23("span", { className: "kds-copy-row-value", children: value }),
-      /* @__PURE__ */ jsx23("button", { className: "kds-copy-row-btn", onClick: () => copy(value), "aria-label": `Copiar ${label}`, children: /* @__PURE__ */ jsx23("i", { className: "material-symbols-outlined", children: copied ? "check" : "content_copy" }) })
-    ] });
+    return /* @__PURE__ */ jsxs18(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: clsx("kds-copy-row", copied && "copied", className),
+        "data-copy": value,
+        onClick: () => copy(value),
+        "aria-label": `Copiar ${label}: ${value}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx24("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "content_copy" }),
+          /* @__PURE__ */ jsxs18("div", { children: [
+            /* @__PURE__ */ jsx24("span", { className: "kds-copy-row-label", children: label }),
+            /* @__PURE__ */ jsx24("span", { className: "kds-copy-row-value", children: value })
+          ] }),
+          /* @__PURE__ */ jsxs18("span", { className: "kds-copy-toast", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx24("i", { className: "material-symbols-outlined", children: "check_circle" }),
+            " ",
+            copiedText
+          ] })
+        ]
+      }
+    );
   }
 );
 KdsCopyRow.displayName = "KdsCopyRow";
 
 // src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
-import { forwardRef as forwardRef22 } from "react";
-import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-var KdsCopyableTable = forwardRef22(
-  ({ rows, className, ...props }, ref) => {
-    const { copied, copy } = useCopyToClipboard();
-    const handleCopyAll = () => {
-      const text = rows.map((r) => `${r.label}: ${r.value}`).join("\n");
-      copy(text);
-    };
-    return /* @__PURE__ */ jsxs17(Fragment2, { children: [
-      /* @__PURE__ */ jsx24("div", { ref, className: clsx("kds-copyable-table", className), ...props, children: rows.map((row) => /* @__PURE__ */ jsxs17("div", { className: "kds-copyable-table-row", children: [
-        /* @__PURE__ */ jsx24("span", { className: "kds-copyable-table-label", children: row.label }),
-        /* @__PURE__ */ jsx24("span", { className: "kds-copyable-table-value", children: row.value })
-      ] }, row.label)) }),
-      /* @__PURE__ */ jsxs17("button", { className: `kds-btn kds-btn-outlined kds-btn-block kds-copy-all-btn${copied ? " copied" : ""}`, onClick: handleCopyAll, "aria-label": "Copiar todo", children: [
-        /* @__PURE__ */ jsx24("span", { className: "kds-icon", children: /* @__PURE__ */ jsx24("i", { className: "material-symbols-outlined", children: copied ? "check" : "content_copy" }) }),
-        /* @__PURE__ */ jsx24("span", { children: copied ? "Copiado" : "Copiar todos los datos" })
-      ] })
-    ] });
+import { forwardRef as forwardRef23, useState as useState4, useRef as useRef2, useCallback as useCallback3 } from "react";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+async function copyToClipboard(text) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  try {
+    document.execCommand("copy");
+    return true;
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(ta);
+  }
+}
+var TRANSITION_MS = 300;
+function GridVariant({
+  gridRows,
+  disabled,
+  className,
+  forwardedRef,
+  rest
+}) {
+  return /* @__PURE__ */ jsx25(
+    "div",
+    {
+      ref: forwardedRef,
+      className: clsx("kds-copyable-table", "kds-copyable-table--grid", className),
+      ...rest,
+      children: gridRows.map((cells, rowIndex) => /* @__PURE__ */ jsx25(
+        "div",
+        {
+          className: "kds-copyable-table-row kds-copyable-table-row--grid",
+          "data-testid": "kds-grid-row",
+          children: cells.map((text, cellIndex) => /* @__PURE__ */ jsx25(
+            "span",
+            {
+              className: clsx("kds-grid-cell", disabled && "kds-grid-cell--disabled"),
+              children: text
+            },
+            cellIndex
+          ))
+        },
+        rowIndex
+      ))
+    }
+  );
+}
+function CopyableVariant({
+  rows,
+  copyAllLabel = "Copiar todos los datos",
+  copiedAllLabel = "Datos copiados",
+  showCopyAll = true,
+  className,
+  forwardedRef,
+  rest
+}) {
+  const copiedTimers = useRef2(/* @__PURE__ */ new Map());
+  const settlingTimers = useRef2(/* @__PURE__ */ new Map());
+  const [copiedRows, setCopiedRows] = useState4(/* @__PURE__ */ new Set());
+  const [settlingRows, setSettlingRows] = useState4(/* @__PURE__ */ new Set());
+  const [allCopied, setAllCopied] = useState4(false);
+  const markCopied = useCallback3((indexes, duration = 1500) => {
+    setCopiedRows((prev) => {
+      const next = new Set(prev);
+      indexes.forEach((i) => next.add(i));
+      return next;
+    });
+    indexes.forEach((i) => {
+      const st = settlingTimers.current.get(i);
+      if (st) {
+        clearTimeout(st);
+        settlingTimers.current.delete(i);
+      }
+    });
+    setSettlingRows((prev) => {
+      const next = new Set(prev);
+      indexes.forEach((i) => next.delete(i));
+      return next;
+    });
+    indexes.forEach((i) => {
+      const existing = copiedTimers.current.get(i);
+      if (existing) clearTimeout(existing);
+      const t = setTimeout(() => {
+        setCopiedRows((prev) => {
+          const next = new Set(prev);
+          next.delete(i);
+          return next;
+        });
+        setSettlingRows((prev) => {
+          const next = new Set(prev);
+          next.add(i);
+          return next;
+        });
+        copiedTimers.current.delete(i);
+        const settlingT = setTimeout(() => {
+          setSettlingRows((prev) => {
+            const next = new Set(prev);
+            next.delete(i);
+            return next;
+          });
+          settlingTimers.current.delete(i);
+        }, TRANSITION_MS);
+        settlingTimers.current.set(i, settlingT);
+      }, duration);
+      copiedTimers.current.set(i, t);
+    });
+  }, []);
+  const handleRowCopy = async (row, index) => {
+    const ok = await copyToClipboard(row.copy ?? row.value);
+    if (ok) markCopied([index]);
+  };
+  const handleCopyAll = async () => {
+    const text = rows.map((r) => `${r.label}: ${r.value}`).join("\n");
+    const ok = await copyToClipboard(text);
+    if (ok) {
+      markCopied(rows.map((_, i) => i));
+      setAllCopied(true);
+      setTimeout(() => setAllCopied(false), 2e3);
+    }
+  };
+  return /* @__PURE__ */ jsxs19(Fragment2, { children: [
+    /* @__PURE__ */ jsx25("div", { ref: forwardedRef, className: clsx("kds-copyable-table", className), ...rest, children: rows.map((row, i) => /* @__PURE__ */ jsxs19(
+      "div",
+      {
+        className: clsx(
+          "kds-copyable-table-row",
+          copiedRows.has(i) && "copied",
+          settlingRows.has(i) && "settling"
+        ),
+        role: "button",
+        tabIndex: 0,
+        onClick: () => handleRowCopy(row, i),
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleRowCopy(row, i);
+          }
+        },
+        "aria-label": `Copiar ${row.label}: ${row.value}`,
+        children: [
+          /* @__PURE__ */ jsx25("span", { className: "kds-key", children: row.label }),
+          /* @__PURE__ */ jsx25("span", { className: "kds-value", children: row.value })
+        ]
+      },
+      `${row.label}-${i}`
+    )) }),
+    showCopyAll && /* @__PURE__ */ jsxs19(
+      "button",
+      {
+        type: "button",
+        className: clsx(
+          "kds-btn",
+          "kds-btn-outlined",
+          "kds-btn-block",
+          "kds-copy-all-btn",
+          allCopied && "copied"
+        ),
+        onClick: handleCopyAll,
+        "aria-label": allCopied ? copiedAllLabel : copyAllLabel,
+        children: [
+          /* @__PURE__ */ jsx25("span", { className: "kds-icon", children: /* @__PURE__ */ jsx25("i", { className: "material-symbols-outlined", children: allCopied ? "check" : "content_copy" }) }),
+          /* @__PURE__ */ jsx25("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
+        ]
+      }
+    )
+  ] });
+}
+var KdsCopyableTable = forwardRef23(
+  ({
+    rows = [],
+    variant = "copyable",
+    gridRows = [],
+    disabled = false,
+    copyAllLabel,
+    copiedAllLabel,
+    showCopyAll,
+    className,
+    ...props
+  }, ref) => {
+    if (variant === "grid") {
+      return /* @__PURE__ */ jsx25(
+        GridVariant,
+        {
+          gridRows,
+          disabled,
+          className,
+          forwardedRef: ref,
+          rest: props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx25(
+      CopyableVariant,
+      {
+        rows,
+        copyAllLabel,
+        copiedAllLabel,
+        showCopyAll,
+        className,
+        forwardedRef: ref,
+        rest: props
+      }
+    );
   }
 );
 KdsCopyableTable.displayName = "KdsCopyableTable";
 
 // src/components/core/KdsExpandPanel/KdsExpandPanel.tsx
-import { forwardRef as forwardRef23, useState as useState3 } from "react";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
-var KdsExpandPanel = forwardRef23(
+import { forwardRef as forwardRef24, useState as useState5 } from "react";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+var KdsExpandPanel = forwardRef24(
   ({ label, defaultExpanded = false, children, className, ...props }, ref) => {
-    const [expanded, setExpanded] = useState3(defaultExpanded);
-    return /* @__PURE__ */ jsxs18("div", { ref, className, ...props, children: [
-      /* @__PURE__ */ jsxs18(
+    const [expanded, setExpanded] = useState5(defaultExpanded);
+    return /* @__PURE__ */ jsxs20("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ jsxs20(
         "button",
         {
           className: "kds-expand-toggle",
           onClick: () => setExpanded((v) => !v),
           "aria-expanded": expanded,
           children: [
-            /* @__PURE__ */ jsx25("span", { children: label }),
-            /* @__PURE__ */ jsx25("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
+            /* @__PURE__ */ jsx26("span", { children: label }),
+            /* @__PURE__ */ jsx26("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx25("div", { className: clsx("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
+      /* @__PURE__ */ jsx26("div", { className: clsx("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
     ] });
   }
 );
 KdsExpandPanel.displayName = "KdsExpandPanel";
 
 // src/components/core/KdsCountdown/KdsCountdown.tsx
-import { forwardRef as forwardRef24, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { forwardRef as forwardRef25, useEffect as useEffect3, useRef as useRef3 } from "react";
 
 // src/components/core/hooks/useCountdown.ts
-import { useState as useState4, useEffect as useEffect2 } from "react";
+import { useState as useState6, useEffect as useEffect2 } from "react";
 function calcRemaining(deadline) {
   const diff = Math.max(0, new Date(deadline).getTime() - Date.now());
   const totalSeconds = Math.floor(diff / 1e3);
@@ -1774,7 +2125,7 @@ function calcRemaining(deadline) {
   };
 }
 function useCountdown(deadline) {
-  const [state, setState] = useState4(() => calcRemaining(deadline));
+  const [state, setState] = useState6(() => calcRemaining(deadline));
   useEffect2(() => {
     const tick = () => setState(calcRemaining(deadline));
     const id = setInterval(tick, 1e3);
@@ -1784,11 +2135,11 @@ function useCountdown(deadline) {
 }
 
 // src/components/core/KdsCountdown/KdsCountdown.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
-var KdsCountdown = forwardRef24(
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+var KdsCountdown = forwardRef25(
   ({ deadline, label, onExpire, className, ...props }, ref) => {
     const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
-    const onExpireRef = useRef2(onExpire);
+    const onExpireRef = useRef3(onExpire);
     onExpireRef.current = onExpire;
     useEffect3(() => {
       if (expired) {
@@ -1799,9 +2150,9 @@ var KdsCountdown = forwardRef24(
       return null;
     }
     const pad = (n) => String(n).padStart(2, "0");
-    return /* @__PURE__ */ jsxs19("div", { ref, className: clsx("kds-countdown", urgent && "urgent", className), ...props, children: [
-      label && /* @__PURE__ */ jsx26("span", { className: "kds-countdown-label", children: label }),
-      /* @__PURE__ */ jsxs19("span", { className: "kds-countdown-value", children: [
+    return /* @__PURE__ */ jsxs21("div", { ref, className: clsx("kds-countdown", urgent && "urgent", className), ...props, children: [
+      label && /* @__PURE__ */ jsx27("span", { className: "kds-countdown-label", children: label }),
+      /* @__PURE__ */ jsxs21("span", { className: "kds-countdown-value", children: [
         pad(hours),
         ":",
         pad(minutes),
@@ -1814,96 +2165,122 @@ var KdsCountdown = forwardRef24(
 KdsCountdown.displayName = "KdsCountdown";
 
 // src/components/core/KdsSegmentedTabs/KdsSegmentedTabs.tsx
-import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var KdsSegmentedTabs = forwardRef25(
-  (props, ref) => /* @__PURE__ */ jsx27(KdsTabs, { ref, variant: "segmented", ...props })
+import { forwardRef as forwardRef26 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var KdsSegmentedTabs = forwardRef26(
+  (props, ref) => /* @__PURE__ */ jsx28(KdsTabs, { ref, ...props })
 );
 KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
 
-// src/components/domain/KdsBankRow/KdsBankRow.tsx
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
-var KdsBankRow = forwardRef26(
-  ({ name, logoUrl, selected, className, ...props }, ref) => /* @__PURE__ */ jsxs20(
+// src/components/core/KdsFab/KdsFab.tsx
+import { forwardRef as forwardRef27 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var KdsFab = forwardRef27(
+  ({ icon, position = "top-right", hidden = false, className, ...props }, ref) => /* @__PURE__ */ jsx29(
     "button",
     {
       ref,
       type: "button",
-      className: clsx("kds-bank-row", selected && "selected", className),
+      className: clsx(
+        "kds-fab",
+        position !== "none" && `kds-fab--${position}`,
+        hidden && "kds-fab--hidden",
+        className
+      ),
+      "aria-hidden": hidden || void 0,
+      tabIndex: hidden ? -1 : void 0,
       ...props,
-      children: [
-        /* @__PURE__ */ jsx28("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ jsx28("img", { src: logoUrl, alt: name }) : /* @__PURE__ */ jsx28("span", { className: "initials", children: name.charAt(0) }) }),
-        /* @__PURE__ */ jsx28("span", { className: "kds-bank-row-name", children: name }),
-        /* @__PURE__ */ jsx28("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
-      ]
+      children: /* @__PURE__ */ jsx29("i", { className: "material-symbols-outlined", children: icon })
     }
   )
 );
+KdsFab.displayName = "KdsFab";
+
+// src/components/domain/KdsBankRow/KdsBankRow.tsx
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+var KdsBankRow = forwardRef28(
+  ({ name, logoUrl, selected, hideLogo, className, ...props }, ref) => {
+    const nameStr = typeof name === "string" ? name : "";
+    return /* @__PURE__ */ jsxs22(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: clsx("kds-bank-row", selected && "selected", className),
+        ...props,
+        children: [
+          !hideLogo && /* @__PURE__ */ jsx30("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ jsx30("img", { src: logoUrl, alt: nameStr }) : /* @__PURE__ */ jsx30("span", { className: "initials", children: nameStr.charAt(0) }) }),
+          /* @__PURE__ */ jsx30("span", { className: "kds-bank-row-name", children: name }),
+          /* @__PURE__ */ jsx30("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
+        ]
+      }
+    );
+  }
+);
 KdsBankRow.displayName = "KdsBankRow";
 
 // src/components/domain/KdsBankList/KdsBankList.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var KdsBankList = forwardRef27(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx29("div", { ref, className: clsx("kds-bank-list", className), role: "list", ...props, children })
+import { forwardRef as forwardRef29 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var KdsBankList = forwardRef29(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx31("div", { ref, className: clsx("kds-bank-list", className), role: "list", ...props, children })
 );
 KdsBankList.displayName = "KdsBankList";
 
 // src/components/domain/KdsBankModal/KdsBankModal.tsx
-import { forwardRef as forwardRef28, useState as useState5 } from "react";
-import * as Dialog2 from "@radix-ui/react-dialog";
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
-var KdsBankModal = forwardRef28(
+import { forwardRef as forwardRef30, useState as useState7 } from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+var KdsBankModal = forwardRef30(
   ({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
-    const [query, setQuery] = useState5("");
+    const [query, setQuery] = useState7("");
     const handleSearch = (value) => {
       setQuery(value);
       onSearch?.(value);
     };
-    return /* @__PURE__ */ jsx30(Dialog2.Root, { open, onOpenChange: (o) => {
+    return /* @__PURE__ */ jsx32(Dialog.Root, { open, onOpenChange: (o) => {
       if (!o) onClose();
-    }, children: /* @__PURE__ */ jsx30(Dialog2.Portal, { container, children: /* @__PURE__ */ jsx30(Dialog2.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ jsxs21(Dialog2.Content, { ref, className: clsx("kds-bank-modal", className), children: [
-      /* @__PURE__ */ jsxs21("div", { className: "kds-bank-modal-header", children: [
-        /* @__PURE__ */ jsx30(Dialog2.Title, { asChild: true, children: /* @__PURE__ */ jsx30("h3", { children: title }) }),
-        /* @__PURE__ */ jsx30(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx30("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ jsx30("i", { className: "material-symbols-outlined", children: "close" }) }) })
+    }, children: /* @__PURE__ */ jsx32(Dialog.Portal, { container, children: /* @__PURE__ */ jsx32(Dialog.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ jsxs23(Dialog.Content, { ref, className: clsx("kds-bank-modal", className), children: [
+      /* @__PURE__ */ jsxs23("div", { className: "kds-bank-modal-header", children: [
+        /* @__PURE__ */ jsx32(Dialog.Title, { asChild: true, children: /* @__PURE__ */ jsx32("h3", { children: title }) }),
+        /* @__PURE__ */ jsx32(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx32("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ jsx32("i", { className: "material-symbols-outlined", children: "close" }) }) })
       ] }),
-      /* @__PURE__ */ jsx30("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ jsx30(
-        "input",
+      /* @__PURE__ */ jsx32("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ jsx32(
+        KdsSearchField,
         {
-          type: "text",
           placeholder: searchPlaceholder,
           value: query,
           onChange: (e) => handleSearch(e.target.value)
         }
       ) }),
-      /* @__PURE__ */ jsx30("div", { className: "kds-bank-modal-body", children })
+      /* @__PURE__ */ jsx32("div", { className: "kds-bank-modal-body", children })
     ] }) }) }) });
   }
 );
 KdsBankModal.displayName = "KdsBankModal";
 
 // src/components/domain/KdsQrRow/KdsQrRow.tsx
-import { forwardRef as forwardRef29 } from "react";
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
-var KdsQrRow = forwardRef29(
-  ({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ jsxs22("button", { ref, type: "button", className: clsx("kds-qr-row", className), ...props, children: [
-    /* @__PURE__ */ jsx31("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsx31("i", { className: "material-symbols-outlined", children: icon }) }),
-    /* @__PURE__ */ jsxs22("span", { className: "kds-qr-text", children: [
-      /* @__PURE__ */ jsx31("span", { className: "title", children: name }),
-      description && /* @__PURE__ */ jsx31("span", { className: "sub", children: description })
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+var KdsQrRow = forwardRef31(
+  ({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ jsxs24("button", { ref, type: "button", className: clsx("kds-qr-row", className), ...props, children: [
+    /* @__PURE__ */ jsx33("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsx33("i", { className: "material-symbols-outlined", children: icon }) }),
+    /* @__PURE__ */ jsxs24("span", { className: "kds-qr-text", children: [
+      /* @__PURE__ */ jsx33("span", { className: "kds-qr-title", children: name }),
+      description && /* @__PURE__ */ jsx33("span", { className: "kds-qr-subtitle", children: description })
     ] }),
-    badge && /* @__PURE__ */ jsx31("span", { className: "kds-qr-badge", children: badge }),
-    /* @__PURE__ */ jsx31("i", { className: "material-symbols-outlined", children: "chevron_right" })
+    badge && /* @__PURE__ */ jsx33("span", { className: "kds-qr-badge", children: badge }),
+    /* @__PURE__ */ jsx33("i", { className: "material-symbols-outlined", children: "chevron_right" })
   ] })
 );
 KdsQrRow.displayName = "KdsQrRow";
 
 // src/components/domain/KdsCardSelector/KdsCardSelector.tsx
-import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
-var KdsCardSelector = forwardRef30(
-  ({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ jsxs23(
+import { forwardRef as forwardRef32 } from "react";
+import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+var KdsCardSelector = forwardRef32(
+  ({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ jsxs25(
     "button",
     {
       ref,
@@ -1911,9 +2288,9 @@ var KdsCardSelector = forwardRef30(
       className: clsx("kds-card-selector", selected && "selected", className),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx32("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ jsx32("i", { className: "material-symbols-outlined", children: icon }) }),
-        /* @__PURE__ */ jsx32("span", { className: "kds-card-selector-title", children: title }),
-        description && /* @__PURE__ */ jsx32("span", { className: "kds-card-selector-description", children: description })
+        icon && /* @__PURE__ */ jsx34("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ jsx34("i", { className: "material-symbols-outlined", children: icon }) }),
+        /* @__PURE__ */ jsx34("span", { className: "kds-card-selector-title", children: title }),
+        description && /* @__PURE__ */ jsx34("span", { className: "kds-card-selector-description", children: description })
       ]
     }
   )
@@ -1921,26 +2298,26 @@ var KdsCardSelector = forwardRef30(
 KdsCardSelector.displayName = "KdsCardSelector";
 
 // src/components/domain/KdsCardPlan/KdsCardPlan.tsx
-import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
-var KdsCardPlan = forwardRef31(
-  ({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ jsxs24(
+import { forwardRef as forwardRef33 } from "react";
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+var KdsCardPlan = forwardRef33(
+  ({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ jsxs26(
     "div",
     {
       ref,
       className: clsx("kds-card-plan", recommended && "recommended", className),
       ...props,
       children: [
-        badgeText && /* @__PURE__ */ jsx33("span", { className: "kds-card-plan-badge", children: badgeText }),
-        /* @__PURE__ */ jsx33("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ jsx33("h3", { children: title }) }),
-        /* @__PURE__ */ jsxs24("div", { className: "kds-card-plan-price", children: [
-          /* @__PURE__ */ jsx33("span", { children: price }),
-          period && /* @__PURE__ */ jsxs24("span", { children: [
+        /* @__PURE__ */ jsx35("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ jsx35("h3", { children: title }) }),
+        /* @__PURE__ */ jsxs26("div", { className: "kds-card-plan-price", children: [
+          /* @__PURE__ */ jsx35("span", { className: "kds-price", children: price }),
+          period && /* @__PURE__ */ jsxs26("span", { className: "kds-price-period", children: [
             "/",
             period
           ] })
         ] }),
-        features && features.length > 0 && /* @__PURE__ */ jsx33("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ jsx33("li", { children: f }, i)) }),
+        badgeText && /* @__PURE__ */ jsx35("span", { className: "kds-card-plan-badge", children: badgeText }),
+        features && features.length > 0 && /* @__PURE__ */ jsx35("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ jsx35("li", { children: f }, i)) }),
         action
       ]
     }
@@ -1949,50 +2326,564 @@ var KdsCardPlan = forwardRef31(
 KdsCardPlan.displayName = "KdsCardPlan";
 
 // src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
-import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var KdsInvoiceSticky = forwardRef32(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx34("div", { ref, className: clsx("kds-card-elevated", "kds-invoice-sticky", className), ...props, children })
+import { forwardRef as forwardRef34 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var KdsInvoiceSticky = forwardRef34(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx36(
+    "article",
+    {
+      ref,
+      className: clsx("kds-card-elevated", "kds-invoice-sticky", className),
+      ...props,
+      children
+    }
+  )
 );
 KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
 
 // src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
-import { forwardRef as forwardRef33 } from "react";
-import * as Dialog3 from "@radix-ui/react-dialog";
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
-var KdsBottomSheet = forwardRef33(
-  ({ open, onClose, title, children, actions, className, container }, ref) => /* @__PURE__ */ jsx35(Dialog3.Root, { open, onOpenChange: (o) => {
-    if (!o) onClose();
-  }, children: /* @__PURE__ */ jsx35(Dialog3.Portal, { container, children: /* @__PURE__ */ jsx35(Dialog3.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ jsxs25(Dialog3.Content, { ref, className: clsx("kds-bottom-sheet", className), children: [
-    /* @__PURE__ */ jsx35("div", { className: "kds-bottom-sheet-grabber" }),
-    title && /* @__PURE__ */ jsx35(Dialog3.Title, { className: "kds-bottom-sheet-title", children: title }),
-    /* @__PURE__ */ jsx35("div", { className: "kds-bottom-sheet-body", children }),
-    actions && /* @__PURE__ */ jsx35("div", { className: "kds-bottom-sheet-actions", children: actions })
-  ] }) }) }) })
+import { forwardRef as forwardRef35 } from "react";
+import * as Dialog2 from "@radix-ui/react-dialog";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+var KdsBottomSheet = forwardRef35(
+  ({
+    open,
+    onClose,
+    title,
+    description,
+    children,
+    actions,
+    showGrabber = true,
+    showCloseButton = false,
+    container,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx37(
+    Dialog2.Root,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (!o) onClose();
+      },
+      children: /* @__PURE__ */ jsx37(Dialog2.Portal, { container, children: /* @__PURE__ */ jsx37("div", { className: "kds-theme-root", style: { display: "contents" }, children: /* @__PURE__ */ jsx37(Dialog2.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ jsxs27(
+        Dialog2.Content,
+        {
+          ref,
+          className: clsx("kds-bottom-sheet", className),
+          onPointerDownOutside: (e) => {
+            const target = e.target;
+            if (target.closest(".kds-bottom-sheet")) e.preventDefault();
+          },
+          ...props,
+          children: [
+            showGrabber && /* @__PURE__ */ jsx37("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
+            showCloseButton && /* @__PURE__ */ jsx37(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx37(
+              "button",
+              {
+                type: "button",
+                className: "kds-bottom-sheet-close",
+                "aria-label": "Cerrar",
+                children: /* @__PURE__ */ jsx37("i", { className: "material-symbols-outlined", children: "close" })
+              }
+            ) }),
+            title && /* @__PURE__ */ jsx37(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
+            description && /* @__PURE__ */ jsx37(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
+            /* @__PURE__ */ jsx37("div", { className: "kds-bottom-sheet-body", children }),
+            actions && /* @__PURE__ */ jsx37("div", { className: "kds-bottom-sheet-actions", children: actions })
+          ]
+        }
+      ) }) }) })
+    }
+  )
 );
 KdsBottomSheet.displayName = "KdsBottomSheet";
 
 // src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
-import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
-var KdsSecureFooter = forwardRef34(
-  ({ variant = "default", children, className, ...props }, ref) => /* @__PURE__ */ jsxs26("footer", { ref, className: clsx("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
-    /* @__PURE__ */ jsx36("i", { className: "material-symbols-outlined", children: "lock" }),
-    children || /* @__PURE__ */ jsx36("span", { children: "Pago seguro con Khipu" })
+import { forwardRef as forwardRef37 } from "react";
+
+// src/components/domain/KdsSecureFooter/KhipuWordmark.tsx
+import { forwardRef as forwardRef36 } from "react";
+import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
+var KhipuWordmark = forwardRef36(
+  ({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ jsxs28(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 45 15",
+      role: "img",
+      "aria-label": "Khipu",
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx38("path", { d: "M16.6417 11.8339C16.7273 11.9196 16.8272 11.9624 16.9472 11.9624H18.9628C19.0798 11.9624 19.1826 11.9196 19.2682 11.8339C19.3539 11.7483 19.3967 11.6483 19.3967 11.5284V7.12891C19.3967 6.50081 19.3111 5.95551 19.1398 5.49586C18.9685 5.03621 18.7315 4.65937 18.4289 4.3596C18.1234 4.05983 17.758 3.83999 17.3326 3.69439C16.9043 3.55164 16.4361 3.47741 15.9251 3.47741C15.4226 3.47741 14.9801 3.58019 14.5975 3.7886C14.2121 3.99702 13.9295 4.214 13.7496 4.43668V1.03071C13.7496 0.913654 13.7068 0.810874 13.6211 0.728079C13.5355 0.642434 13.4355 0.599609 13.3185 0.599609H11.2943C11.1773 0.599609 11.0745 0.642434 10.9888 0.728079C10.9032 0.813729 10.8604 0.913654 10.8604 1.03071V11.5284C10.8604 11.6455 10.9032 11.7483 10.9888 11.8339C11.0745 11.9196 11.1744 11.9624 11.2943 11.9624H13.3099C13.427 11.9624 13.5298 11.9196 13.6126 11.8339C13.6982 11.7483 13.741 11.6483 13.741 11.5284V7.48006C13.741 7.02041 13.8495 6.65216 14.0693 6.37521C14.2892 6.09826 14.6375 5.95836 15.1171 5.95836C15.5968 5.95836 15.9479 6.09826 16.1735 6.37521C16.3961 6.65216 16.5103 7.02041 16.5103 7.48006V11.5284C16.5132 11.6483 16.556 11.7483 16.6417 11.8339Z", fill: "#8347AD" }),
+        /* @__PURE__ */ jsx38("path", { d: "M23.6189 3.64014H21.6005C21.4834 3.64014 21.3806 3.68296 21.295 3.76861C21.2093 3.85426 21.1665 3.95418 21.1665 4.07124V11.5284C21.1665 11.6454 21.2093 11.7482 21.295 11.8339C21.3806 11.9195 21.4806 11.9623 21.6005 11.9623H23.6161C23.7331 11.9623 23.8359 11.9195 23.9187 11.8339C24.0044 11.7482 24.0472 11.6483 24.0472 11.5284V4.07124C24.0472 3.95418 24.0044 3.85141 23.9187 3.76861C23.8359 3.68296 23.736 3.64014 23.6189 3.64014Z", fill: "#8347AD" }),
+        /* @__PURE__ */ jsx38("path", { d: "M34.1881 10.0723C34.3851 9.61264 34.4936 9.07019 34.5164 8.43924C34.5278 8.27934 34.5335 8.06239 34.5335 7.79114C34.5335 7.51994 34.5278 7.30294 34.5164 7.14309C34.4936 6.51499 34.3851 5.96969 34.1881 5.51004C33.9911 5.05039 33.7313 4.67068 33.4115 4.36519C33.0918 4.05971 32.7178 3.83702 32.2924 3.69427C31.8642 3.55152 31.4131 3.47729 30.9334 3.47729C30.5823 3.47729 30.2854 3.50584 30.0455 3.5658C29.8057 3.62575 29.603 3.69998 29.4374 3.78848C29.2718 3.87984 29.1348 3.98263 29.0206 4.09968C28.9093 4.21674 28.8036 4.32808 28.7094 4.43657V4.06828C28.7094 3.95122 28.6666 3.84844 28.5809 3.7628C28.4953 3.67715 28.3954 3.63432 28.2783 3.63432H26.3426C26.2256 3.63432 26.1228 3.67715 26.0372 3.7628C25.9515 3.84844 25.9087 3.94837 25.9087 4.06828V14.566C25.9087 14.683 25.9515 14.7858 26.0372 14.8715C26.1228 14.9571 26.2227 14.9999 26.3426 14.9999H28.3583C28.4753 14.9999 28.5781 14.9571 28.6637 14.8715C28.7494 14.7858 28.7922 14.6859 28.7922 14.566V11.1629C28.8664 11.2599 28.9635 11.3627 29.0806 11.474C29.1976 11.5854 29.3432 11.691 29.5117 11.7852C29.683 11.8823 29.8857 11.9622 30.1198 12.0251C30.3539 12.0879 30.6251 12.1221 30.9363 12.1221C31.4159 12.1221 31.8699 12.0479 32.2953 11.8994C32.7206 11.751 33.0946 11.5226 33.4144 11.22C33.7313 10.9145 33.9911 10.5319 34.1881 10.0723ZM31.65 8.24794C31.6186 8.62194 31.4959 8.94739 31.2817 9.22434C31.0676 9.50129 30.7107 9.64119 30.2083 9.64119C29.9742 9.64119 29.7715 9.60404 29.6002 9.52984C29.4289 9.45559 29.289 9.35569 29.1748 9.23289C29.0634 9.11014 28.9749 8.97309 28.9121 8.82464C28.8493 8.67619 28.8065 8.52204 28.7836 8.35929C28.7608 8.19939 28.7522 8.01384 28.7522 7.79974C28.7522 7.58559 28.7637 7.40004 28.7836 7.24014C28.8036 7.08029 28.8465 6.92609 28.9121 6.77479C28.9749 6.62634 29.0634 6.48929 29.1748 6.36654C29.2861 6.24374 29.4289 6.14384 29.6002 6.06959C29.7715 5.99539 29.9742 5.95824 30.2083 5.95824C30.7107 5.95824 31.0676 6.09814 31.2817 6.37509C31.4959 6.65204 31.6186 6.97749 31.65 7.35149C31.6843 7.65124 31.6843 7.95104 31.65 8.24794Z", fill: "#8347AD" }),
+        /* @__PURE__ */ jsx38("path", { d: "M41.7481 11.8339C41.8337 11.9195 41.9337 11.9623 42.0536 11.9623H43.9093C44.0264 11.9623 44.1291 11.9195 44.2119 11.8339C44.2976 11.7482 44.3404 11.6483 44.3404 11.5284V4.07124C44.3404 3.95418 44.2976 3.85141 44.2119 3.76861C44.1263 3.68296 44.0264 3.64014 43.9093 3.64014H41.8937C41.7766 3.64014 41.6739 3.68296 41.5882 3.76861C41.5026 3.85426 41.4597 3.95418 41.4597 4.07124V8.1196C41.4597 8.57925 41.3598 8.94755 41.1628 9.22445C40.9658 9.5014 40.6318 9.6413 40.1636 9.6413C39.6954 9.6413 39.3585 9.5014 39.1558 9.22445C38.9531 8.94755 38.8503 8.57925 38.8503 8.1196V4.07124C38.8503 3.95418 38.8075 3.85141 38.7218 3.76861C38.6362 3.68296 38.5363 3.64014 38.4163 3.64014H36.4007C36.2837 3.64014 36.1809 3.68296 36.0953 3.76861C36.0096 3.85426 35.9668 3.95418 35.9668 4.07124V8.47075C35.9668 9.7298 36.2723 10.6519 36.8861 11.24C37.4999 11.8282 38.325 12.1194 39.3585 12.1194C39.6897 12.1194 39.9752 12.0908 40.215 12.0309C40.4548 11.9709 40.6661 11.8967 40.8459 11.8082C41.0286 11.7168 41.18 11.6169 41.3027 11.5027C41.4255 11.3914 41.5283 11.2772 41.6139 11.1601V11.5284C41.6196 11.6483 41.6624 11.7482 41.7481 11.8339Z", fill: "#8347AD" }),
+        /* @__PURE__ */ jsx38("path", { d: "M22.5569 2.78074C21.7889 2.78074 21.1665 2.1555 21.1665 1.39037C21.1665 0.622385 21.7918 0 22.5569 0C23.3249 0 23.9473 0.62524 23.9473 1.39037C23.9501 2.1555 23.3249 2.78074 22.5569 2.78074Z", fill: "#3CB4E5" }),
+        /* @__PURE__ */ jsx38("path", { d: "M3.1374 7.43996V4.78198L2.34372 5.77836C2.22095 5.93256 2.21524 6.14951 2.32944 6.31226L3.1374 7.43996Z", fill: "#743CEB" }),
+        /* @__PURE__ */ jsx38("path", { d: "M2.96345 0.722369C2.88351 0.642434 2.78074 0.599609 2.66368 0.599609H0.40826C0.299771 0.599609 0.205557 0.639579 0.122763 0.722369C0.0428246 0.802309 0 0.905089 0 1.02214V11.557C0 11.6655 0.0399696 11.7597 0.122763 11.8425C0.202703 11.9224 0.299771 11.9652 0.40826 11.9652H2.66368C2.78359 11.9652 2.88351 11.9253 2.96345 11.8425C3.04339 11.7625 3.08622 11.6655 3.08622 11.557V8.41081L2.83783 8.08246L2.83212 8.07676L2.82642 8.06821L1.81576 6.65216C1.55024 6.28101 1.56166 5.76996 1.84716 5.41306L2.84069 4.16261L3.08622 3.84285V1.01929C3.08622 0.902234 3.04625 0.802309 2.96345 0.722369Z", fill: "#8347AD" }),
+        /* @__PURE__ */ jsx38("path", { d: "M9.60962 11.9625C9.70667 11.9625 9.78947 11.9282 9.85227 11.8568C9.91797 11.7855 9.94937 11.7084 9.94937 11.6227C9.94937 11.5371 9.92652 11.4714 9.88367 11.4286L5.89242 6.0384L9.59247 1.13642C9.63532 1.08217 9.65812 1.01651 9.65812 0.942284C9.65812 0.856634 9.62387 0.776694 9.55252 0.708174C9.50967 0.665349 9.45832 0.633944 9.40407 0.616814C9.37267 0.608249 9.33552 0.602539 9.30127 0.602539H6.73752C6.56337 0.602539 6.42632 0.636799 6.32352 0.708174C6.22077 0.779549 6.14082 0.850924 6.08942 0.928009L3.32868 4.54525L2.32944 5.80145C2.27234 5.8728 2.24094 5.95845 2.24094 6.04695C2.23808 6.13545 2.26378 6.2211 2.31802 6.2982L2.83477 7.0205L3.32868 7.70855L6.29787 11.6199C6.32927 11.6627 6.39492 11.7312 6.49197 11.8226C6.55192 11.8797 6.63472 11.9197 6.73752 11.9425C6.80032 11.9568 6.86882 11.9625 6.94592 11.9625H9.60962Z", fill: "#3CB4E5" })
+      ]
+    }
+  )
+);
+KhipuWordmark.displayName = "KhipuWordmark";
+
+// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
+import { Fragment as Fragment3, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+var KdsSecureFooter = forwardRef37(
+  ({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ jsxs29("footer", { ref, className: clsx("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
+    /* @__PURE__ */ jsxs29("svg", { className: "kds-secure-footer-lock", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx39("rect", { x: "4.5", y: "10.5", width: "15", height: "10", rx: "2.25" }),
+      /* @__PURE__ */ jsx39("path", { d: "M8 10.5V7a4 4 0 0 1 8 0v3.5" })
+    ] }),
+    children || /* @__PURE__ */ jsx39("span", { children: "Pago seguro procesado por" }),
+    showLogo && /* @__PURE__ */ jsx39(KhipuWordmark, {}),
+    psp && /* @__PURE__ */ jsxs29(Fragment3, { children: [
+      /* @__PURE__ */ jsx39("span", { className: "kds-secure-footer-sep", "aria-hidden": "true" }),
+      psp
+    ] })
   ] })
 );
 KdsSecureFooter.displayName = "KdsSecureFooter";
 
 // src/components/domain/KdsRecapList/KdsRecapList.tsx
-import { forwardRef as forwardRef35 } from "react";
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
-var KdsRecapList = forwardRef35(
-  ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx37("ul", { ref, className: clsx("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxs27("li", { children: [
-    /* @__PURE__ */ jsx37("span", { className: "k", children: item.label }),
-    /* @__PURE__ */ jsx37("span", { className: clsx("v", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
+import { forwardRef as forwardRef38 } from "react";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+var KdsRecapList = forwardRef38(
+  ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx40("ul", { ref, className: clsx("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxs30("li", { children: [
+    /* @__PURE__ */ jsx40("span", { className: "kds-key", children: item.label }),
+    /* @__PURE__ */ jsx40("span", { className: clsx("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
   ] }, i)) })
 );
 KdsRecapList.displayName = "KdsRecapList";
+
+// src/components/domain/KdsMontoRow/KdsMontoRow.tsx
+import { forwardRef as forwardRef39 } from "react";
+import { jsx as jsx41, jsxs as jsxs31 } from "react/jsx-runtime";
+var KdsMontoRow = forwardRef39(
+  ({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ jsxs31("div", { ref, className: clsx("kds-monto-row", className), ...props, children: [
+    /* @__PURE__ */ jsxs31("div", { children: [
+      /* @__PURE__ */ jsx41("div", { className: "kds-monto-row-title", children: title }),
+      deadline && /* @__PURE__ */ jsx41("div", { className: "kds-monto-row-deadline", children: deadline })
+    ] }),
+    /* @__PURE__ */ jsx41("div", { className: "kds-monto-row-value", children: value })
+  ] })
+);
+KdsMontoRow.displayName = "KdsMontoRow";
+
+// src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
+import { forwardRef as forwardRef40 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var KdsMerchantTile = forwardRef40(
+  ({ name, logoUrl, initials, compact, className, ...props }, ref) => {
+    const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
+    return /* @__PURE__ */ jsx42(
+      "div",
+      {
+        ref,
+        className: clsx("kds-merchant-tile", logoUrl && "logo", compact && "compact", className),
+        "aria-label": name,
+        ...props,
+        children: logoUrl ? /* @__PURE__ */ jsx42("img", { src: logoUrl, alt: name }) : displayInitials
+      }
+    );
+  }
+);
+KdsMerchantTile.displayName = "KdsMerchantTile";
+
+// src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
+import { forwardRef as forwardRef41, useState as useState9 } from "react";
+
+// src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
+import { useEffect as useEffect4, useState as useState8 } from "react";
+
+// src/components/domain/KdsInvoiceMerchant/logoLuminance.ts
+var LIGHT_LOGO_LUMINANCE_THRESHOLD = 0.72;
+var SAMPLE_SIZE = 16;
+var ALPHA_THRESHOLD = 128;
+var MIN_OPAQUE_RATIO = 0.02;
+function measureLogoLuminance(url) {
+  return new Promise((resolve) => {
+    const probe = new Image();
+    probe.crossOrigin = "anonymous";
+    probe.onload = () => {
+      try {
+        const canvas = document.createElement("canvas");
+        canvas.width = SAMPLE_SIZE;
+        canvas.height = SAMPLE_SIZE;
+        const context = canvas.getContext("2d");
+        if (!context) {
+          resolve(null);
+          return;
+        }
+        context.drawImage(probe, 0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+        const { data } = context.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+        let sum = 0;
+        let opaquePixels = 0;
+        for (let i = 0; i < data.length; i += 4) {
+          if (data[i + 3] < ALPHA_THRESHOLD) continue;
+          sum += (0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2]) / 255;
+          opaquePixels++;
+        }
+        if (opaquePixels < SAMPLE_SIZE * SAMPLE_SIZE * MIN_OPAQUE_RATIO) {
+          resolve(null);
+          return;
+        }
+        resolve(sum / opaquePixels);
+      } catch {
+        resolve(null);
+      }
+    };
+    probe.onerror = () => resolve(null);
+    probe.src = url;
+  });
+}
+function pickLogoBackdrop(luminance) {
+  return luminance != null && luminance > LIGHT_LOGO_LUMINANCE_THRESHOLD ? "dark" : "light";
+}
+
+// src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
+function useLogoBackdrop(logoUrl) {
+  const [backdrop, setBackdrop] = useState8("light");
+  useEffect4(() => {
+    let cancelled = false;
+    setBackdrop("light");
+    if (!logoUrl) {
+      return void 0;
+    }
+    measureLogoLuminance(logoUrl).then((luminance) => {
+      if (!cancelled) {
+        setBackdrop(pickLogoBackdrop(luminance));
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [logoUrl]);
+  return backdrop;
+}
+
+// src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
+import { jsx as jsx43 } from "react/jsx-runtime";
+var KdsInvoiceMerchant = forwardRef41(
+  ({ logoUrl, brandColor, className, style, ...props }, ref) => {
+    const [failed, setFailed] = useState9(false);
+    const showLogo = !!logoUrl && !failed;
+    const backdrop = useLogoBackdrop(showLogo ? logoUrl : void 0);
+    return /* @__PURE__ */ jsx43(
+      "div",
+      {
+        ref,
+        className: clsx(
+          "kds-invoice-merchant",
+          showLogo && "kds-invoice-merchant-neutral",
+          showLogo && backdrop === "dark" && "dark",
+          className
+        ),
+        "aria-hidden": "true",
+        style: !showLogo && brandColor ? { background: brandColor, ...style } : style,
+        ...props,
+        children: showLogo ? /* @__PURE__ */ jsx43("img", { src: logoUrl, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ jsx43("i", { className: "material-symbols-outlined", children: "storefront" })
+      }
+    );
+  }
+);
+KdsInvoiceMerchant.displayName = "KdsInvoiceMerchant";
+
+// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
+import { forwardRef as forwardRef42 } from "react";
+import { jsx as jsx44, jsxs as jsxs32 } from "react/jsx-runtime";
+var KdsPaymentTotal = forwardRef42(
+  ({
+    variant = "default",
+    tone = "brand",
+    centered = false,
+    amount,
+    currency = "S/",
+    decimals = 2,
+    locale = "es-PE",
+    label = "Monto a pagar",
+    title = "Escanea el QR",
+    titleMobile = "Descarga el QR",
+    className,
+    ...props
+  }, ref) => {
+    const { integer, fraction } = formatAmount(amount, decimals, locale);
+    const isEmail = variant === "email";
+    const isInfoTone = tone === "info";
+    return /* @__PURE__ */ jsxs32(
+      "div",
+      {
+        ref,
+        className: clsx(
+          "kds-payment-total",
+          isEmail && "kds-payment-total--email",
+          isInfoTone && "kds-payment-total--tone-info",
+          centered && "kds-payment-total--centered",
+          className
+        ),
+        ...props,
+        children: [
+          !isEmail && title != null && /* @__PURE__ */ jsx44("h5", { className: "kds-payment-total-title", children: title }),
+          !isEmail && titleMobile != null && /* @__PURE__ */ jsx44("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
+          label != null && /* @__PURE__ */ jsx44("h6", { className: "kds-payment-label", children: label }),
+          /* @__PURE__ */ jsxs32("h5", { className: "kds-payment-amount", children: [
+            currency,
+            " ",
+            integer,
+            fraction !== null && /* @__PURE__ */ jsx44("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
+          ] })
+        ]
+      }
+    );
+  }
+);
+KdsPaymentTotal.displayName = "KdsPaymentTotal";
+function formatAmount(amount, decimals, locale) {
+  const showDecimals = typeof decimals === "number" && decimals > 0;
+  if (typeof amount === "number") {
+    if (showDecimals) {
+      const fixed = amount.toFixed(decimals);
+      const [int, frac] = fixed.split(".");
+      const formattedInt2 = new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(
+        Number(int)
+      );
+      return { integer: formattedInt2, fraction: frac ?? null };
+    }
+    const formattedInt = new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(
+      Math.trunc(amount)
+    );
+    return { integer: formattedInt, fraction: null };
+  }
+  const str = amount.trim();
+  const dotIdx = str.indexOf(".");
+  if (dotIdx === -1 || !showDecimals) {
+    return { integer: str, fraction: null };
+  }
+  return {
+    integer: str.slice(0, dotIdx),
+    fraction: str.slice(dotIdx + 1)
+  };
+}
+
+// src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
+import { forwardRef as forwardRef43 } from "react";
+import { jsx as jsx45, jsxs as jsxs33 } from "react/jsx-runtime";
+var KdsBillAttachment = forwardRef43(
+  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ jsxs33(
+    "a",
+    {
+      ref,
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: clsx("kds-bill-attachment", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx45("i", { className: "material-symbols-outlined", children: icon }),
+        /* @__PURE__ */ jsx45("span", { children: filename })
+      ]
+    }
+  )
+);
+KdsBillAttachment.displayName = "KdsBillAttachment";
+var KdsBillAttachments = forwardRef43(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx45("div", { ref, className: clsx("kds-bill-attachments", className), ...props, children })
+);
+KdsBillAttachments.displayName = "KdsBillAttachments";
+
+// src/components/core/hooks/useStickyInvoiceCollapse.ts
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
+function useStickyInvoiceCollapse(options = {}) {
+  const { onCollapseStart, collapseEnd = 20, mobileBreakpoint = 768 } = options;
+  const onCollapseStartRef = useRef4(onCollapseStart);
+  onCollapseStartRef.current = onCollapseStart;
+  useEffect5(() => {
+    let viewportOffset = 0;
+    let ticking = false;
+    let wasCollapsing = false;
+    const isMobile = () => window.innerWidth < mobileBreakpoint;
+    const closeOpenPanels = (sticky) => {
+      const toggles = sticky.querySelectorAll(
+        '[data-expand-toggle][aria-expanded="true"], .kds-expand-toggle[aria-expanded="true"]'
+      );
+      toggles.forEach((toggle) => {
+        toggle.setAttribute("aria-expanded", "false");
+        const panelId = toggle.getAttribute("aria-controls");
+        const panel = panelId ? document.getElementById(panelId) : toggle.parentElement?.querySelector("[data-expand-panel], .kds-expand-panel");
+        panel?.classList.remove("open");
+        if (panel) panel.style.maxHeight = "";
+      });
+    };
+    const apply = () => {
+      ticking = false;
+      const screen = document.querySelector(".kds-screen.active");
+      if (!screen) return;
+      const sticky = screen.querySelector(".kds-invoice-sticky");
+      if (!sticky || !isMobile()) {
+        screen.style.removeProperty("--collapse-progress");
+        screen.style.removeProperty("--collapse-collapsible-h");
+        sticky?.classList.remove("is-collapsed");
+        wasCollapsing = false;
+        return;
+      }
+      const scrollY = Math.max(window.scrollY || window.pageYOffset || 0, viewportOffset);
+      const progress = Math.min(Math.max(scrollY / collapseEnd, 0), 1);
+      if (!screen.style.getPropertyValue("--collapse-collapsible-h")) {
+        const collapsible = sticky.querySelector(".kds-invoice-collapsible");
+        if (collapsible) {
+          screen.style.setProperty("--collapse-collapsible-h", `${collapsible.offsetHeight}px`);
+        }
+      }
+      screen.style.setProperty("--collapse-progress", String(progress));
+      sticky.classList.toggle("is-collapsed", progress >= 1);
+      if (progress > 0) {
+        if (!wasCollapsing) {
+          wasCollapsing = true;
+          closeOpenPanels(sticky);
+          onCollapseStartRef.current?.();
+        }
+      } else {
+        wasCollapsing = false;
+      }
+    };
+    const onScroll = () => {
+      if (ticking) return;
+      ticking = true;
+      window.requestAnimationFrame(apply);
+    };
+    const onMessage = (event) => {
+      if (event.data && event.data.type === "VIEWPORT_OFFSET") {
+        viewportOffset = Math.max(0, event.data.offsetTop || 0);
+        onScroll();
+      }
+    };
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    window.addEventListener("message", onMessage);
+    apply();
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("message", onMessage);
+    };
+  }, [collapseEnd, mobileBreakpoint]);
+}
+
+// src/components/core/hooks/useExpandToggle.ts
+import { useCallback as useCallback4, useId, useLayoutEffect, useRef as useRef5, useState as useState10 } from "react";
+function useExpandToggle(options = {}) {
+  const { defaultOpen = false, open: controlledOpen, onOpenChange, id } = options;
+  const generatedId = useId();
+  const panelId = id ?? `kds-expand-${generatedId}`;
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState10(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const panelRef = useRef5(null);
+  const setPanelRef = useCallback4((node) => {
+    panelRef.current = node;
+  }, []);
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    panel.style.maxHeight = open ? `${panel.scrollHeight}px` : "";
+  }, [open]);
+  const setOpen = useCallback4(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = useCallback4(() => setOpen(!open), [open, setOpen]);
+  const getToggleProps = useCallback4(
+    () => ({
+      type: "button",
+      "aria-expanded": open,
+      "aria-controls": panelId,
+      onClick: () => toggle()
+    }),
+    [open, panelId, toggle]
+  );
+  const getPanelProps = useCallback4(
+    (baseClassName = "kds-expand-panel") => ({
+      id: panelId,
+      className: open ? `${baseClassName} open` : baseClassName,
+      hidden: !open,
+      ref: setPanelRef
+    }),
+    [open, panelId, setPanelRef]
+  );
+  return { open, setOpen, toggle, getToggleProps, getPanelProps };
+}
+
+// src/components/core/hooks/useHideOnScroll.ts
+import { useEffect as useEffect6, useState as useState11 } from "react";
+function useHideOnScroll(options = {}) {
+  const { threshold = 8, topOffset = 0 } = options;
+  const [hidden, setHidden] = useState11(false);
+  useEffect6(() => {
+    let viewportOffset = 0;
+    let lastY = 0;
+    let ticking = false;
+    const currentY = () => Math.max(window.scrollY || window.pageYOffset || 0, viewportOffset);
+    const apply = () => {
+      ticking = false;
+      const y = currentY();
+      if (y <= topOffset) {
+        setHidden(false);
+        lastY = y;
+        return;
+      }
+      const delta = y - lastY;
+      if (Math.abs(delta) < threshold) return;
+      setHidden(delta > 0);
+      lastY = y;
+    };
+    const onScroll = () => {
+      if (ticking) return;
+      ticking = true;
+      window.requestAnimationFrame(apply);
+    };
+    const onMessage = (event) => {
+      if (event.data && event.data.type === "VIEWPORT_OFFSET") {
+        viewportOffset = Math.max(0, event.data.offsetTop || 0);
+        onScroll();
+      }
+    };
+    lastY = currentY();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    window.addEventListener("resize", onScroll);
+    window.addEventListener("message", onMessage);
+    return () => {
+      window.removeEventListener("scroll", onScroll);
+      window.removeEventListener("resize", onScroll);
+      window.removeEventListener("message", onMessage);
+    };
+  }, [threshold, topOffset]);
+  return { hidden };
+}
+
+// src/components/core/hooks/useMediaQuery.ts
+import { useEffect as useEffect7, useState as useState12 } from "react";
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState12(
+    () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
+  );
+  useEffect7(() => {
+    if (typeof window === "undefined") return;
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const onChange = (event) => setMatches(event.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
 export {
   KdsAccordion,
   KdsAccordionDetails,
@@ -2001,6 +2892,8 @@ export {
   KdsBankList,
   KdsBankModal,
   KdsBankRow,
+  KdsBillAttachment,
+  KdsBillAttachments,
   KdsBottomSheet,
   KdsButton,
   KdsCard,
@@ -2011,24 +2904,26 @@ export {
   KdsCardSelector,
   KdsCheckbox,
   KdsChip,
+  KdsCopyButton,
   KdsCopyRow,
   KdsCopyableTable,
   KdsCountdown,
   KdsDivider,
   KdsExpandPanel,
+  KdsFab,
+  KdsInvoiceMerchant,
   KdsInvoiceSticky,
   KdsLinearProgress,
-  KdsLogoHeader,
-  KdsLogoHeaderCloseButton,
-  KdsLogoHeaderCode,
-  KdsLogoHeaderLogo,
-  KdsLogoHeaderSeparator,
-  KdsModal,
+  KdsMerchantTile,
+  KdsMontoRow,
+  KdsPaymentTotal,
   KdsQrRow,
   KdsRadioGroup,
   KdsRecapList,
+  KdsSearchField,
   KdsSectionNote,
   KdsSecureFooter,
+  KdsSecureLoader,
   KdsSegmentedTabs,
   KdsSelect,
   KdsSnackbar,
@@ -2042,6 +2937,7 @@ export {
   KdsThemeProvider,
   KdsTooltip,
   KdsTypography,
+  LIGHT_LOGO_LUMINANCE_THRESHOLD,
   borderRadius,
   breakpoints,
   clsx,
@@ -2050,10 +2946,15 @@ export {
   fontFamilies,
   fontSizes,
   fontWeights,
+  formatDate,
+  formatDateTime,
+  formatTime,
   getContrastColor,
   letterSpacings,
   lighten,
   lineHeights,
+  measureLogoLuminance,
+  pickLogoBackdrop,
   semanticSpacing,
   shadows,
   spacing,
@@ -2064,6 +2965,11 @@ export {
   useAutoHide,
   useCopyToClipboard,
   useCountdown,
+  useExpandToggle,
+  useHideOnScroll,
+  useLogoBackdrop,
+  useMediaQuery,
+  useStickyInvoiceCollapse,
   useTabsKeyboard,
   zIndex
 };