@khipu/design-system 0.2.0-alpha.8 → 0.2.0-alpha.81

package/dist/index.js

@@ -37,6 +37,8 @@ __export(index_exports, {
   KdsBankList: () => KdsBankList,
   KdsBankModal: () => KdsBankModal,
   KdsBankRow: () => KdsBankRow,
+  KdsBillAttachment: () => KdsBillAttachment,
+  KdsBillAttachments: () => KdsBillAttachments,
   KdsBottomSheet: () => KdsBottomSheet,
   KdsButton: () => KdsButton,
   KdsCard: () => KdsCard,
@@ -47,24 +49,25 @@ __export(index_exports, {
   KdsCardSelector: () => KdsCardSelector,
   KdsCheckbox: () => KdsCheckbox,
   KdsChip: () => KdsChip,
+  KdsCopyButton: () => KdsCopyButton,
   KdsCopyRow: () => KdsCopyRow,
   KdsCopyableTable: () => KdsCopyableTable,
   KdsCountdown: () => KdsCountdown,
   KdsDivider: () => KdsDivider,
   KdsExpandPanel: () => KdsExpandPanel,
+  KdsInvoiceMerchant: () => KdsInvoiceMerchant,
   KdsInvoiceSticky: () => KdsInvoiceSticky,
   KdsLinearProgress: () => KdsLinearProgress,
-  KdsLogoHeader: () => KdsLogoHeader,
-  KdsLogoHeaderCloseButton: () => KdsLogoHeaderCloseButton,
-  KdsLogoHeaderCode: () => KdsLogoHeaderCode,
-  KdsLogoHeaderLogo: () => KdsLogoHeaderLogo,
-  KdsLogoHeaderSeparator: () => KdsLogoHeaderSeparator,
-  KdsModal: () => KdsModal,
+  KdsMerchantTile: () => KdsMerchantTile,
+  KdsMontoRow: () => KdsMontoRow,
+  KdsPaymentTotal: () => KdsPaymentTotal,
   KdsQrRow: () => KdsQrRow,
   KdsRadioGroup: () => KdsRadioGroup,
   KdsRecapList: () => KdsRecapList,
+  KdsSearchField: () => KdsSearchField,
   KdsSectionNote: () => KdsSectionNote,
   KdsSecureFooter: () => KdsSecureFooter,
+  KdsSecureLoader: () => KdsSecureLoader,
   KdsSegmentedTabs: () => KdsSegmentedTabs,
   KdsSelect: () => KdsSelect,
   KdsSnackbar: () => KdsSnackbar,
@@ -100,6 +103,8 @@ __export(index_exports, {
   useAutoHide: () => useAutoHide,
   useCopyToClipboard: () => useCopyToClipboard,
   useCountdown: () => useCountdown,
+  useExpandToggle: () => useExpandToggle,
+  useStickyInvoiceCollapse: () => useStickyInvoiceCollapse,
   useTabsKeyboard: () => useTabsKeyboard,
   zIndex: () => zIndex
 });
@@ -454,6 +459,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"
@@ -472,6 +479,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"
@@ -514,8 +523,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,
@@ -1147,7 +1158,7 @@ var KdsButton = (0, import_react.forwardRef)(
       children: [
         !loading && startIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", { className: "material-symbols-outlined", children: startIcon }) }),
         loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "loader small" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("progress", { className: "circle indeterminate small" }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children })
         ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children }),
         !loading && endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", { className: "material-symbols-outlined", children: endIcon }) })
@@ -1166,14 +1177,31 @@ var KdsTextField = (0, import_react2.forwardRef)(
     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] = (0, import_react2.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__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
@@ -1181,9 +1209,12 @@ var KdsTextField = (0, import_react2.forwardRef)(
           "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: [
@@ -1193,14 +1224,32 @@ var KdsTextField = (0, import_react2.forwardRef)(
             {
               ref,
               id: fieldId,
-              placeholder: " ",
+              type: inputType,
               readOnly,
-              ...props
+              required,
+              ...props,
+              placeholder: " "
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: fieldId, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { htmlFor: fieldId, children: [
+            label,
+            required && requiredMark && " *"
+          ] }),
           readOnly && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "material-symbols-outlined", children: "lock" }),
-          endIcon && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "material-symbols-outlined", children: endIcon }),
+          isRevealable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "a",
+            {
+              className: "kds-field-reveal",
+              role: "button",
+              tabIndex: 0,
+              "aria-label": revealLabel,
+              "aria-pressed": revealed,
+              onClick: toggleReveal,
+              onKeyDown: onToggleKeyDown,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: revealed ? "visibility" : "visibility_off" })
+            }
+          ),
+          endIcon && !readOnly && !isRevealable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "material-symbols-outlined", children: endIcon }),
           helperText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "helper", children: helperText })
         ]
       }
@@ -1209,76 +1258,41 @@ var KdsTextField = (0, import_react2.forwardRef)(
 );
 KdsTextField.displayName = "KdsTextField";
 
-// src/components/core/KdsCheckbox/KdsCheckbox.tsx
+// src/components/core/KdsSearchField/KdsSearchField.tsx
 var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var KdsCheckbox = (0, import_react3.forwardRef)(
-  ({ label, className, id, ...props }, ref) => {
-    const fieldId = id || `kds-cb-${label?.toLowerCase().replace(/\s+/g, "-") || "check"}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: (0, import_clsx.clsx)("field", className), htmlFor: fieldId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { ref, type: "checkbox", id: fieldId, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: label })
+var KdsSearchField = (0, import_react3.forwardRef)(
+  ({ className, withIcon = false, ...props }, ref) => {
+    const input = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "input",
+      {
+        ref,
+        type: "search",
+        className: (0, import_clsx.clsx)("kds-search-field", className),
+        ...props
+      }
+    );
+    if (!withIcon) {
+      return input;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "kds-search-field-wrapper", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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
 var import_react4 = require("react");
-var Dialog = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var KdsModal = (0, import_react4.forwardRef)(
-  ({
-    open,
-    onClose,
-    title,
-    description,
-    footer,
-    children,
-    size = "md",
-    showCloseButton = true,
-    className
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    Dialog.Root,
-    {
-      open,
-      onOpenChange: (o) => {
-        if (!o) onClose();
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Dialog.Portal, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog.Overlay, { className: "kds-bottom-sheet-scrim" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-          Dialog.Content,
-          {
-            ref,
-            className: (0, import_clsx.clsx)(
-              "kds-bottom-sheet",
-              `kds-bottom-sheet-${size}`,
-              className
-            ),
-            children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "kds-bottom-sheet-header", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog.Title, { className: "kds-bottom-sheet-title", children: title }),
-                showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  "button",
-                  {
-                    className: "kds-bottom-sheet-close",
-                    "aria-label": "Cerrar",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("i", { className: "material-symbols-outlined", children: "close" })
-                  }
-                ) })
-              ] }),
-              description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog.Description, { className: "kds-bottom-sheet-description", children: description }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "kds-bottom-sheet-body", children }),
-              footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "kds-bottom-sheet-actions", children: footer })
-            ]
-          }
-        )
-      ] })
-    }
-  )
+var KdsCheckbox = (0, import_react4.forwardRef)(
+  ({ label, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: (0, import_clsx.clsx)("checkbox", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { ref, type: "checkbox", ...props }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: label })
+  ] })
 );
-KdsModal.displayName = "KdsModal";
+KdsCheckbox.displayName = "KdsCheckbox";
 
 // src/components/core/KdsCard/KdsCard.tsx
 var import_react5 = require("react");
@@ -1315,50 +1329,161 @@ KdsCardFooter.displayName = "KdsCardFooter";
 // src/components/core/KdsSpinner/KdsSpinner.tsx
 var import_react6 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var SIZE_CLASS = {
+  small: "small",
+  medium: null,
+  large: "large"
+};
 var KdsSpinner = (0, import_react6.forwardRef)(
-  ({ size = "medium", label, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-flex kds-flex-col kds-items-center kds-gap-2", className), role: "status", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_clsx.clsx)("loader", size) }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "kds-text-body-small kds-text-muted", children: label }),
-    !label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "kds-hidden", children: "Cargando" })
-  ] })
+  ({ size = "medium", label, className, ...props }, ref) => {
+    const sizeClass = SIZE_CLASS[size];
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)("kds-flex kds-flex-col kds-items-center kds-gap-2", className),
+        role: "status",
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("progress", { className: (0, import_clsx.clsx)("circle indeterminate", sizeClass) }),
+          label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "kds-text-body-small kds-text-muted", children: label }),
+          !label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "kds-hidden", children: "Cargando" })
+        ]
+      }
+    );
+  }
 );
 KdsSpinner.displayName = "KdsSpinner";
 
-// src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
+// src/components/core/KdsSecureLoader/KdsSecureLoader.tsx
 var import_react7 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var KdsLinearProgress = (0, import_react7.forwardRef)(
-  ({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("progress", { ref, className: (0, import_clsx.clsx)("kds-progress", className), value, max, ...props })
+var KdsSecureLoader = (0, import_react7.forwardRef)(
+  ({ title, message, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-secure-loader", className), role: "status", "aria-busy": "true", ...props, children: [
+    (title || message) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "kds-secure-loader-text", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "kds-secure-loader-title", children: title }),
+      message && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "kds-secure-loader-message", children: message })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "kds-secure-loader-spinner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "svg",
+        {
+          className: "kds-secure-loader-ring",
+          viewBox: "22 22 44 44",
+          width: "100",
+          height: "100",
+          fill: "none",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "44", cy: "44", r: "20.2", fill: "none" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("i", { className: "material-symbols-outlined kds-secure-loader-lock", "aria-hidden": "true", children: "lock" })
+    ] })
+  ] })
 );
-KdsLinearProgress.displayName = "KdsLinearProgress";
+KdsSecureLoader.displayName = "KdsSecureLoader";
 
-// src/components/core/KdsAlert/KdsAlert.tsx
+// src/components/core/KdsCopyButton/KdsCopyButton.tsx
+var import_react9 = require("react");
+
+// src/components/core/hooks/useCopyToClipboard.ts
 var import_react8 = require("react");
+function useCopyToClipboard(resetMs = 1200) {
+  const [copied, setCopied] = (0, import_react8.useState)(false);
+  const copy = (0, import_react8.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
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var KdsAlert = (0, import_react8.forwardRef)(
-  ({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    "div",
-    {
-      ref,
-      role: "alert",
-      className: (0, import_clsx.clsx)("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "kds-alert-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "kds-alert-content", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "kds-alert-title", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "kds-alert-description", children })
-        ] }),
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "kds-btn kds-btn-text kds-btn-sm", onClick: onClose, "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "material-symbols-outlined", children: "close" }) })
-      ]
-    }
-  )
+var KdsCopyButton = (0, import_react9.forwardRef)(
+  ({ value, copiedText = "Copiado", className, ...props }, ref) => {
+    const { copied, copy } = useCopyToClipboard();
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: (0, import_clsx.clsx)("kds-copy-button", copied && "copied", className),
+        onClick: () => copy(value),
+        "aria-label": `Copiar: ${value}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "kds-copy-button-label", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "kds-copy-button-value", "aria-hidden": copied || void 0, children: value }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "kds-copy-button-copied", "aria-hidden": !copied || void 0, children: copiedText })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: copied ? "check" : "content_copy" })
+        ]
+      }
+    );
+  }
+);
+KdsCopyButton.displayName = "KdsCopyButton";
+
+// src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var KdsLinearProgress = (0, import_react10.forwardRef)(
+  ({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("progress", { ref, className: (0, import_clsx.clsx)("kds-progress", className), value, max, ...props })
+);
+KdsLinearProgress.displayName = "KdsLinearProgress";
+
+// src/components/core/KdsAlert/KdsAlert.tsx
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DEFAULT_ICONS = {
+  success: "check_circle",
+  info: "info",
+  warning: "warning",
+  error: "error"
+};
+var KdsAlert = (0, import_react11.forwardRef)(
+  ({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => {
+    const resolvedIcon = icon === false ? null : typeof icon === "string" ? icon : DEFAULT_ICONS[severity];
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: (0, import_clsx.clsx)("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
+        ...props,
+        children: [
+          resolvedIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "kds-alert-icon", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("i", { className: "material-symbols-outlined", children: resolvedIcon }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "kds-alert-content", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "kds-alert-title", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "kds-alert-description", children })
+          ] }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "kds-alert-close",
+              onClick: onClose,
+              "aria-label": "Cerrar",
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("i", { className: "material-symbols-outlined", children: "close" })
+            }
+          )
+        ]
+      }
+    );
+  }
 );
 KdsAlert.displayName = "KdsAlert";
 
 // src/components/core/KdsTypography/KdsTypography.tsx
-var import_react9 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var variantTag = {
   display1: "h1",
   display2: "h2",
@@ -1371,12 +1496,13 @@ var variantTag = {
   label: "span",
   "label-small": "span",
   muted: "p",
-  link: "span"
+  link: "span",
+  strong: "span"
 };
-var KdsTypography = (0, import_react9.forwardRef)(
+var KdsTypography = (0, import_react12.forwardRef)(
   ({ variant = "body", color, as, children, className, ...props }, ref) => {
     const Tag = as || variantTag[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Tag,
       {
         ref,
@@ -1394,12 +1520,12 @@ var KdsTypography = (0, import_react9.forwardRef)(
 KdsTypography.displayName = "KdsTypography";
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-var import_react11 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // src/components/core/hooks/useTabsKeyboard.ts
-var import_react10 = require("react");
+var import_react13 = require("react");
 function useTabsKeyboard(tabCount, activeIndex, onChange) {
-  const onKeyDown = (0, import_react10.useCallback)(
+  const onKeyDown = (0, import_react13.useCallback)(
     (e) => {
       let next = activeIndex;
       if (e.key === "ArrowRight") next = (activeIndex + 1) % tabCount;
@@ -1419,31 +1545,31 @@ function useTabsKeyboard(tabCount, activeIndex, onChange) {
 }
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var KdsTabs = (0, import_react11.forwardRef)(
-  ({ activeIndex, onChange, variant = "standard", children, className, style, ...props }, ref) => {
-    const tabCount = import_react11.Children.count(children);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var KdsTabs = (0, import_react14.forwardRef)(
+  ({ activeIndex, onChange, children, className, style, ...props }, ref) => {
+    const tabCount = import_react14.Children.count(children);
     const { onKeyDown } = useTabsKeyboard(tabCount, activeIndex, onChange);
-    const mergedStyle = (0, import_react11.useMemo)(() => {
-      if (variant !== "segmented") return style;
-      return {
+    const mergedStyle = (0, import_react14.useMemo)(
+      () => ({
         ...style,
         "--_tab-count": tabCount,
         "--_active-idx": activeIndex
-      };
-    }, [variant, tabCount, activeIndex, style]);
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      }),
+      [tabCount, activeIndex, style]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ref,
         role: "tablist",
-        className: (0, import_clsx.clsx)(variant === "segmented" ? "kds-segmented-tabs" : "kds-tabs", className),
+        className: (0, import_clsx.clsx)("kds-segmented-tabs", className),
         style: mergedStyle,
         onKeyDown,
         ...props,
-        children: import_react11.Children.map(children, (child, i) => {
-          if (!import_react11.default.isValidElement(child)) return child;
-          return import_react11.default.cloneElement(child, {
+        children: import_react14.Children.map(children, (child, i) => {
+          if (!import_react14.default.isValidElement(child)) return child;
+          return import_react14.default.cloneElement(child, {
             _active: i === activeIndex,
             _onClick: () => onChange(i)
           });
@@ -1453,11 +1579,12 @@ var KdsTabs = (0, import_react11.forwardRef)(
   }
 );
 KdsTabs.displayName = "KdsTabs";
-var KdsTab = (0, import_react11.forwardRef)(
-  ({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var KdsTab = (0, import_react14.forwardRef)(
+  ({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       ref,
+      type: "button",
       role: "tab",
       "aria-selected": _active,
       tabIndex: _active ? 0 : -1,
@@ -1469,8 +1596,8 @@ var KdsTab = (0, import_react11.forwardRef)(
   )
 );
 KdsTab.displayName = "KdsTab";
-var KdsTabPanel = (0, import_react11.forwardRef)(
-  ({ active, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+var KdsTabPanel = (0, import_react14.forwardRef)(
+  ({ active, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       ref,
@@ -1484,193 +1611,131 @@ var KdsTabPanel = (0, import_react11.forwardRef)(
 );
 KdsTabPanel.displayName = "KdsTabPanel";
 
-// src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
-var import_react12 = require("react");
-
-// src/assets/images/khipu-logo-color.svg
-var khipu_logo_color_default = "./khipu-logo-color-TV75AKOV.svg";
-
-// src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var KhipuLogo = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-  "img",
-  {
-    src: khipu_logo_color_default,
-    alt: "Khipu",
-    className: "kds-logo-header-logo-img"
-  }
-);
-var KdsLogoHeaderLogo = (0, import_react12.forwardRef)(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        ref,
-        className: (0, import_clsx.clsx)("kds-logo-header-logo", className),
-        ...props,
-        children: children || /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(KhipuLogo, {})
-      }
-    );
-  }
-);
-KdsLogoHeaderLogo.displayName = "KdsLogoHeaderLogo";
-var KdsLogoHeaderSeparator = (0, import_react12.forwardRef)(
-  ({ children = "|", className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "span",
-      {
-        ref,
-        className: (0, import_clsx.clsx)("kds-logo-header-separator", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-KdsLogoHeaderSeparator.displayName = "KdsLogoHeaderSeparator";
-var KdsLogoHeaderCode = (0, import_react12.forwardRef)(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "span",
-      {
-        ref,
-        className: (0, import_clsx.clsx)("kds-logo-header-code", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-KdsLogoHeaderCode.displayName = "KdsLogoHeaderCode";
-var KdsLogoHeaderCloseButton = (0, import_react12.forwardRef)(
-  ({ onClose, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "kds-logo-header-close-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "button",
-      {
-        ref,
-        onClick: onClose,
-        className: (0, import_clsx.clsx)("kds-btn kds-btn-icon", className),
-        "aria-label": "close",
-        ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("i", { className: "material-symbols-outlined", children: "close" })
-      }
-    ) });
-  }
-);
-KdsLogoHeaderCloseButton.displayName = "KdsLogoHeaderCloseButton";
-var KdsLogoHeader = (0, import_react12.forwardRef)(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      "div",
-      {
-        ref,
-        className: (0, import_clsx.clsx)("kds-brand-row", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-KdsLogoHeader.displayName = "KdsLogoHeader";
-
 // src/components/core/KdsRadioGroup/KdsRadioGroup.tsx
-var import_react13 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var KdsRadioGroup = (0, import_react13.forwardRef)(
-  ({ label, name, options, value, onChange, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("fieldset", { ref, className: (0, import_clsx.clsx)("kds-radio-group", className), ...props, children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("legend", { children: label }),
-    options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        "input",
-        {
-          type: "radio",
-          name,
-          value: opt.value,
-          checked: value === opt.value,
-          disabled: opt.disabled,
-          onChange: () => onChange?.(opt.value)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: opt.label })
-    ] }, opt.value))
-  ] })
+var import_react15 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var KdsRadioGroup = (0, import_react15.forwardRef)(
+  ({ label, name, options, value, onChange, size, variant, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "fieldset",
+    {
+      ref,
+      className: (0, import_clsx.clsx)("kds-radio-group", variant === "card" && "kds-radio-group--card", className),
+      ...props,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("legend", { children: label }),
+        options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: (0, import_clsx.clsx)("radio", size), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "input",
+            {
+              type: "radio",
+              name,
+              value: opt.value,
+              checked: value === opt.value,
+              disabled: opt.disabled,
+              onChange: () => onChange?.(opt.value)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: opt.label })
+        ] }, opt.value))
+      ]
+    }
+  )
 );
 KdsRadioGroup.displayName = "KdsRadioGroup";
 
 // src/components/core/KdsSelect/KdsSelect.tsx
-var import_react14 = require("react");
-var Select = __toESM(require("@radix-ui/react-select"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var KdsSelectRoot = (0, import_react14.forwardRef)(
+var import_react16 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var KdsSelect = (0, import_react16.forwardRef)(
   ({
-    value,
-    onValueChange,
-    placeholder,
     label,
-    error,
+    options,
+    placeholder,
     helperText,
-    disabled,
+    error,
+    prefixIcon,
     fullWidth = true,
-    children,
-    className
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-    "div",
-    {
-      ref,
-      className: (0, import_clsx.clsx)(
-        "kds-select",
-        error && "kds-select-error",
-        fullWidth && "kds-select-full",
-        className
-      ),
-      children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: "kds-select-label", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Select.Root, { value, onValueChange, disabled, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Select.Trigger, { className: "kds-select-trigger", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Value, { placeholder }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Icon, { className: "kds-select-icon", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime15.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.clsx)(
+          "field",
+          "label",
+          "border",
+          prefixIcon && "prefix",
+          error && "invalid",
+          fullWidth && "kds-w-full",
+          className
+        ),
+        children: [
+          prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", { className: "material-symbols-outlined", children: prefixIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            "select",
+            {
+              ref,
+              id: fieldId,
+              disabled,
+              required,
+              ...props,
+              children: [
+                placeholder !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: "", children: placeholder }),
+                options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { htmlFor: fieldId, children: [
+            label,
+            required && " *"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Content, { className: "kds-select-content", position: "popper", sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Viewport, { className: "kds-select-viewport", children }) }) })
-        ] }),
-        helperText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: (0, import_clsx.clsx)("kds-select-helper", error && "kds-select-helper-error"), children: helperText })
-      ]
-    }
-  )
-);
-KdsSelectRoot.displayName = "KdsSelect";
-var KdsSelectItem = (0, import_react14.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Select.Item, { ref, className: (0, import_clsx.clsx)("kds-select-item", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.ItemText, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.ItemIndicator, { className: "kds-select-item-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("i", { className: "material-symbols-outlined", children: "check" }) })
-  ] })
+          helperText && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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
-var import_react15 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var KdsChip = (0, import_react15.forwardRef)(
-  ({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { ref, className: (0, import_clsx.clsx)("kds-badge", color, className), ...props, children: [
-    icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", { className: "material-symbols-outlined", children: icon }),
-    children,
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "kds-btn kds-btn-text kds-btn-sm", onClick: onDelete, "aria-label": "Eliminar", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", { className: "material-symbols-outlined", children: "close" }) })
+var import_react17 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var KdsChip = (0, import_react17.forwardRef)(
+  ({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { ref, className: (0, import_clsx.clsx)("kds-badge", color, className), ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children }),
+    onDelete && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "kds-badge-close",
+        onClick: (e) => {
+          e.stopPropagation();
+          onDelete();
+        },
+        "aria-label": "Eliminar",
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", children: "close" })
+      }
+    )
   ] })
 );
 KdsChip.displayName = "KdsChip";
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-var import_react17 = require("react");
+var import_react19 = require("react");
 
 // src/components/core/hooks/useAutoHide.ts
-var import_react16 = require("react");
+var import_react18 = require("react");
 function useAutoHide(durationMs, onHide) {
-  const [visible, setVisible] = (0, import_react16.useState)(true);
-  const onHideRef = (0, import_react16.useRef)(onHide);
+  const [visible, setVisible] = (0, import_react18.useState)(true);
+  const onHideRef = (0, import_react18.useRef)(onHide);
   onHideRef.current = onHide;
-  (0, import_react16.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (durationMs <= 0) return;
     const timer = setTimeout(() => {
       setVisible(false);
@@ -1682,22 +1747,61 @@ function useAutoHide(durationMs, onHide) {
 }
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var KdsSnackbar = (0, import_react17.forwardRef)(
-  ({ message, type, duration = 5e3, onClose, open = true, className, ...props }, ref) => {
-    const { visible } = useAutoHide(duration, onClose);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DEFAULT_ICONS2 = {
+  info: "info",
+  success: "check_circle",
+  error: "error"
+};
+var KdsSnackbar = (0, import_react19.forwardRef)(
+  ({
+    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__ */ (0, import_jsx_runtime16.jsxs)("div", { ref, role: "status", className: (0, import_clsx.clsx)("snackbar", "active", type, className), ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: message }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { onClick: onClose, "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime17.jsxs)(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: (0, import_clsx.clsx)("snackbar", "active", type, className),
+        "data-auto-dismiss": autoDismiss ? "true" : void 0,
+        style: mergedStyle,
+        ...props,
+        children: [
+          resolvedIcon && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("i", { className: "material-symbols-outlined", children: resolvedIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "max", children: message }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "kds-snackbar-close",
+              onClick: onClose,
+              "aria-label": "Cerrar",
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("i", { className: "material-symbols-outlined", children: "close" })
+            }
+          )
+        ]
+      }
+    );
   }
 );
 KdsSnackbar.displayName = "KdsSnackbar";
 
 // src/components/core/KdsTooltip/KdsTooltip.tsx
 var Tooltip = __toESM(require("@radix-ui/react-tooltip"));
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function KdsTooltip({
   content,
   children,
@@ -1708,167 +1812,377 @@ function KdsTooltip({
   onOpenChange,
   delayDuration = 300
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip.Content, { className: (0, import_clsx.clsx)("kds-tooltip", className), side: placement, sideOffset: 4, children: [
-      content,
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Arrow, { className: "kds-tooltip-arrow" })
-    ] }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      Tooltip.Content,
+      {
+        className: (0, import_clsx.clsx)("kds-tooltip", className),
+        side: placement,
+        sideOffset: 6,
+        collisionPadding: 8,
+        children: [
+          content,
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip.Arrow, { className: "kds-tooltip-arrow", width: 10, height: 5 })
+        ]
+      }
+    ) })
   ] }) });
 }
 
 // src/components/core/KdsAccordion/KdsAccordion.tsx
-var import_react18 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var KdsAccordion = (0, import_react18.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("details", { ref, className: (0, import_clsx.clsx)("kds-accordion", className), ...props, children })
+var import_react20 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var KdsAccordion = (0, import_react20.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("details", { ref, className: (0, import_clsx.clsx)("kds-accordion", className), ...props, children })
 );
 KdsAccordion.displayName = "KdsAccordion";
-var KdsAccordionSummary = (0, import_react18.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("summary", { ref, className: (0, import_clsx.clsx)("kds-accordion-summary", className), ...props, children: [
+var KdsAccordionSummary = (0, import_react20.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("summary", { ref, className: (0, import_clsx.clsx)("kds-accordion-summary", className), ...props, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("i", { className: "material-symbols-outlined", children: "expand_more" })
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("i", { className: "material-symbols-outlined", children: "expand_more" })
   ] })
 );
 KdsAccordionSummary.displayName = "KdsAccordionSummary";
-var KdsAccordionDetails = (0, import_react18.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-accordion-details", className), ...props, children })
+var KdsAccordionDetails = (0, import_react20.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-accordion-details", className), ...props, children })
 );
 KdsAccordionDetails.displayName = "KdsAccordionDetails";
 
 // src/components/core/KdsDivider/KdsDivider.tsx
-var import_react19 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var KdsDivider = (0, import_react19.forwardRef)(
-  ({ dashed, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("hr", { ref, className: (0, import_clsx.clsx)(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
+var import_react21 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var KdsDivider = (0, import_react21.forwardRef)(
+  ({ dashed, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("hr", { ref, className: (0, import_clsx.clsx)(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
 );
 KdsDivider.displayName = "KdsDivider";
 
 // src/components/core/KdsSectionNote/KdsSectionNote.tsx
-var import_react20 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var KdsSectionNote = (0, import_react20.forwardRef)(
-  ({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { ref, className: (0, import_clsx.clsx)("kds-section-note", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("i", { className: "material-symbols-outlined", children: icon }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children })
+var import_react22 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var KdsSectionNote = (0, import_react22.forwardRef)(
+  ({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { ref, className: (0, import_clsx.clsx)("kds-section-note", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("i", { className: "material-symbols-outlined", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children })
   ] })
 );
 KdsSectionNote.displayName = "KdsSectionNote";
 
 // src/components/core/KdsStatusBlock/KdsStatusBlock.tsx
-var import_react21 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var KdsStatusBlock = (0, import_react21.forwardRef)(
-  ({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "kds-status-block-title", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "kds-status-block-description", children: description })
+var import_react23 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var KdsStatusBlock = (0, import_react23.forwardRef)(
+  ({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "kds-status-block-title", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "kds-status-block-description", children: description })
     ] })
   ] })
 );
 KdsStatusBlock.displayName = "KdsStatusBlock";
 
 // src/components/core/KdsStepper/KdsStepper.tsx
-var import_react22 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var KdsStepper = (0, import_react22.forwardRef)(
-  ({ steps, current, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-stepper", className), "data-steps": steps, "data-current": current, ...props, children: Array.from({ length: steps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx.clsx)("kds-step", i < current && "completed", i === current && "current"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "kds-step-indicator", children: i < current ? "\u2713" : i + 1 }),
-    i < steps - 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "kds-step-line" })
-  ] }, i)) })
-);
-KdsStepper.displayName = "KdsStepper";
-
-// src/components/core/KdsCopyRow/KdsCopyRow.tsx
 var import_react24 = require("react");
-
-// src/components/core/hooks/useCopyToClipboard.ts
-var import_react23 = require("react");
-function useCopyToClipboard(resetMs = 1200) {
-  const [copied, setCopied] = (0, import_react23.useState)(false);
-  const copy = (0, import_react23.useCallback)(
-    async (text) => {
-      try {
-        await navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), resetMs);
-      } catch {
-      }
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var KdsStepper = (0, import_react24.forwardRef)(
+  ({ steps, current, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-stepper", className), ...props, children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx.clsx)("kds-step", i < current && "completed", i === current && "current"),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "kds-step-indicator" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "kds-step-label", children: label })
+      ]
     },
-    [resetMs]
-  );
-  return { copied, copy };
-}
+    `${i}-${label}`
+  )) })
+);
+KdsStepper.displayName = "KdsStepper";
 
 // src/components/core/KdsCopyRow/KdsCopyRow.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var KdsCopyRow = (0, import_react24.forwardRef)(
-  ({ label, value, className, ...props }, ref) => {
+var import_react25 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var KdsCopyRow = (0, import_react25.forwardRef)(
+  ({ label, value, copiedText = "Copiado", className, ...props }, ref) => {
     const { copied, copy } = useCopyToClipboard();
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-copy-row", copied && "copied", className), ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "kds-copy-row-label", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "kds-copy-row-value", children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { className: "kds-copy-row-btn", onClick: () => copy(value), "aria-label": `Copiar ${label}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { className: "material-symbols-outlined", children: copied ? "check" : "content_copy" }) })
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: (0, import_clsx.clsx)("kds-copy-row", copied && "copied", className),
+        "data-copy": value,
+        onClick: () => copy(value),
+        "aria-label": `Copiar ${label}: ${value}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "content_copy" }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-copy-row-label", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-copy-row-value", children: value })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "kds-copy-toast", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { className: "material-symbols-outlined", children: "check_circle" }),
+            " ",
+            copiedText
+          ] })
+        ]
+      }
+    );
   }
 );
 KdsCopyRow.displayName = "KdsCopyRow";
 
 // src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
-var import_react25 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var KdsCopyableTable = (0, import_react25.forwardRef)(
-  ({ 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__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-copyable-table", className), ...props, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "kds-copyable-table-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-copyable-table-label", children: row.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-copyable-table-value", children: row.value })
-      ] }, row.label)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { className: `kds-btn kds-btn-outlined kds-btn-block kds-copy-all-btn${copied ? " copied" : ""}`, onClick: handleCopyAll, "aria-label": "Copiar todo", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { className: "material-symbols-outlined", children: copied ? "check" : "content_copy" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: copied ? "Copiado" : "Copiar todos los datos" })
-      ] })
-    ] });
+var import_react26 = require("react");
+var import_jsx_runtime25 = require("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__ */ (0, import_jsx_runtime25.jsx)(
+    "div",
+    {
+      ref: forwardedRef,
+      className: (0, import_clsx.clsx)("kds-copyable-table", "kds-copyable-table--grid", className),
+      ...rest,
+      children: gridRows.map((cells, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "div",
+        {
+          className: "kds-copyable-table-row kds-copyable-table-row--grid",
+          "data-testid": "kds-grid-row",
+          children: cells.map((text, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+            "span",
+            {
+              className: (0, import_clsx.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 = (0, import_react26.useRef)(/* @__PURE__ */ new Map());
+  const settlingTimers = (0, import_react26.useRef)(/* @__PURE__ */ new Map());
+  const [copiedRows, setCopiedRows] = (0, import_react26.useState)(/* @__PURE__ */ new Set());
+  const [settlingRows, setSettlingRows] = (0, import_react26.useState)(/* @__PURE__ */ new Set());
+  const [allCopied, setAllCopied] = (0, import_react26.useState)(false);
+  const markCopied = (0, import_react26.useCallback)((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__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref: forwardedRef, className: (0, import_clsx.clsx)("kds-copyable-table", className), ...rest, children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.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__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kds-key", children: row.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kds-value", children: row.value })
+        ]
+      },
+      `${row.label}-${i}`
+    )) }),
+    showCopyAll && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: (0, import_clsx.clsx)(
+          "kds-btn",
+          "kds-btn-outlined",
+          "kds-btn-block",
+          "kds-copy-all-btn",
+          allCopied && "copied"
+        ),
+        onClick: handleCopyAll,
+        "aria-label": allCopied ? copiedAllLabel : copyAllLabel,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { className: "material-symbols-outlined", children: allCopied ? "check" : "content_copy" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
+        ]
+      }
+    )
+  ] });
+}
+var KdsCopyableTable = (0, import_react26.forwardRef)(
+  ({
+    rows = [],
+    variant = "copyable",
+    gridRows = [],
+    disabled = false,
+    copyAllLabel,
+    copiedAllLabel,
+    showCopyAll,
+    className,
+    ...props
+  }, ref) => {
+    if (variant === "grid") {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        GridVariant,
+        {
+          gridRows,
+          disabled,
+          className,
+          forwardedRef: ref,
+          rest: props
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      CopyableVariant,
+      {
+        rows,
+        copyAllLabel,
+        copiedAllLabel,
+        showCopyAll,
+        className,
+        forwardedRef: ref,
+        rest: props
+      }
+    );
   }
 );
 KdsCopyableTable.displayName = "KdsCopyableTable";
 
 // src/components/core/KdsExpandPanel/KdsExpandPanel.tsx
-var import_react26 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var KdsExpandPanel = (0, import_react26.forwardRef)(
+var import_react27 = require("react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var KdsExpandPanel = (0, import_react27.forwardRef)(
   ({ label, defaultExpanded = false, children, className, ...props }, ref) => {
-    const [expanded, setExpanded] = (0, import_react26.useState)(defaultExpanded);
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref, className, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    const [expanded, setExpanded] = (0, import_react27.useState)(defaultExpanded);
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "button",
         {
           className: "kds-expand-toggle",
           onClick: () => setExpanded((v) => !v),
           "aria-expanded": expanded,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: label }),
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: (0, import_clsx.clsx)("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: (0, import_clsx.clsx)("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
     ] });
   }
 );
 KdsExpandPanel.displayName = "KdsExpandPanel";
 
 // src/components/core/KdsCountdown/KdsCountdown.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/core/hooks/useCountdown.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 function calcRemaining(deadline) {
   const diff = Math.max(0, new Date(deadline).getTime() - Date.now());
   const totalSeconds = Math.floor(diff / 1e3);
@@ -1881,8 +2195,8 @@ function calcRemaining(deadline) {
   };
 }
 function useCountdown(deadline) {
-  const [state, setState] = (0, import_react27.useState)(() => calcRemaining(deadline));
-  (0, import_react27.useEffect)(() => {
+  const [state, setState] = (0, import_react28.useState)(() => calcRemaining(deadline));
+  (0, import_react28.useEffect)(() => {
     const tick = () => setState(calcRemaining(deadline));
     const id = setInterval(tick, 1e3);
     return () => clearInterval(id);
@@ -1891,13 +2205,13 @@ function useCountdown(deadline) {
 }
 
 // src/components/core/KdsCountdown/KdsCountdown.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var KdsCountdown = (0, import_react28.forwardRef)(
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var KdsCountdown = (0, import_react29.forwardRef)(
   ({ deadline, label, onExpire, className, ...props }, ref) => {
     const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
-    const onExpireRef = (0, import_react28.useRef)(onExpire);
+    const onExpireRef = (0, import_react29.useRef)(onExpire);
     onExpireRef.current = onExpire;
-    (0, import_react28.useEffect)(() => {
+    (0, import_react29.useEffect)(() => {
       if (expired) {
         onExpireRef.current?.();
       }
@@ -1906,9 +2220,9 @@ var KdsCountdown = (0, import_react28.forwardRef)(
       return null;
     }
     const pad = (n) => String(n).padStart(2, "0");
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-countdown", urgent && "urgent", className), ...props, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "kds-countdown-label", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "kds-countdown-value", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-countdown", urgent && "urgent", className), ...props, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "kds-countdown-label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "kds-countdown-value", children: [
         pad(hours),
         ":",
         pad(minutes),
@@ -1921,96 +2235,98 @@ var KdsCountdown = (0, import_react28.forwardRef)(
 KdsCountdown.displayName = "KdsCountdown";
 
 // src/components/core/KdsSegmentedTabs/KdsSegmentedTabs.tsx
-var import_react29 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var KdsSegmentedTabs = (0, import_react29.forwardRef)(
-  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(KdsTabs, { ref, variant: "segmented", ...props })
+var import_react30 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var KdsSegmentedTabs = (0, import_react30.forwardRef)(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KdsTabs, { ref, ...props })
 );
 KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
 
 // src/components/domain/KdsBankRow/KdsBankRow.tsx
-var import_react30 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var KdsBankRow = (0, import_react30.forwardRef)(
-  ({ name, logoUrl, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-    "button",
-    {
-      ref,
-      type: "button",
-      className: (0, import_clsx.clsx)("kds-bank-row", selected && "selected", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src: logoUrl, alt: name }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "initials", children: name.charAt(0) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "kds-bank-row-name", children: name }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
-      ]
-    }
-  )
+var import_react31 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var KdsBankRow = (0, import_react31.forwardRef)(
+  ({ name, logoUrl, selected, hideLogo, className, ...props }, ref) => {
+    const nameStr = typeof name === "string" ? name : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: (0, import_clsx.clsx)("kds-bank-row", selected && "selected", className),
+        ...props,
+        children: [
+          !hideLogo && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src: logoUrl, alt: nameStr }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "initials", children: nameStr.charAt(0) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "kds-bank-row-name", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
+        ]
+      }
+    );
+  }
 );
 KdsBankRow.displayName = "KdsBankRow";
 
 // src/components/domain/KdsBankList/KdsBankList.tsx
-var import_react31 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var KdsBankList = (0, import_react31.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bank-list", className), role: "list", ...props, children })
+var import_react32 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var KdsBankList = (0, import_react32.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bank-list", className), role: "list", ...props, children })
 );
 KdsBankList.displayName = "KdsBankList";
 
 // src/components/domain/KdsBankModal/KdsBankModal.tsx
-var import_react32 = require("react");
-var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var KdsBankModal = (0, import_react32.forwardRef)(
+var import_react33 = require("react");
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var KdsBankModal = (0, import_react33.forwardRef)(
   ({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
-    const [query, setQuery] = (0, import_react32.useState)("");
+    const [query, setQuery] = (0, import_react33.useState)("");
     const handleSearch = (value) => {
       setQuery(value);
       onSearch?.(value);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Root, { open, onOpenChange: (o) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Dialog.Root, { open, onOpenChange: (o) => {
       if (!o) onClose();
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Dialog2.Content, { ref, className: (0, import_clsx.clsx)("kds-bank-modal", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "kds-bank-modal-header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("i", { className: "material-symbols-outlined", children: "close" }) }) })
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Dialog.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Dialog.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Dialog.Content, { ref, className: (0, import_clsx.clsx)("kds-bank-modal", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "kds-bank-modal-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Dialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { className: "material-symbols-outlined", children: "close" }) }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        "input",
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        KdsSearchField,
         {
-          type: "text",
           placeholder: searchPlaceholder,
           value: query,
           onChange: (e) => handleSearch(e.target.value)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "kds-bank-modal-body", children })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "kds-bank-modal-body", children })
     ] }) }) }) });
   }
 );
 KdsBankModal.displayName = "KdsBankModal";
 
 // src/components/domain/KdsQrRow/KdsQrRow.tsx
-var import_react33 = require("react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var KdsQrRow = (0, import_react33.forwardRef)(
-  ({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { ref, type: "button", className: (0, import_clsx.clsx)("kds-qr-row", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "kds-qr-text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "title", children: name }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "sub", children: description })
+var import_react34 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var KdsQrRow = (0, import_react34.forwardRef)(
+  ({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("button", { ref, type: "button", className: (0, import_clsx.clsx)("kds-qr-row", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "kds-qr-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-qr-title", children: name }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-qr-subtitle", children: description })
     ] }),
-    badge && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "kds-qr-badge", children: badge }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { className: "material-symbols-outlined", children: "chevron_right" })
+    badge && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-qr-badge", children: badge }),
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", { className: "material-symbols-outlined", children: "chevron_right" })
   ] })
 );
 KdsQrRow.displayName = "KdsQrRow";
 
 // src/components/domain/KdsCardSelector/KdsCardSelector.tsx
-var import_react34 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var KdsCardSelector = (0, import_react34.forwardRef)(
-  ({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+var import_react35 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var KdsCardSelector = (0, import_react35.forwardRef)(
+  ({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "button",
     {
       ref,
@@ -2018,9 +2334,9 @@ var KdsCardSelector = (0, import_react34.forwardRef)(
       className: (0, import_clsx.clsx)("kds-card-selector", selected && "selected", className),
       ...props,
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-card-selector-title", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-card-selector-description", children: description })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-card-selector-title", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-card-selector-description", children: description })
       ]
     }
   )
@@ -2028,26 +2344,26 @@ var KdsCardSelector = (0, import_react34.forwardRef)(
 KdsCardSelector.displayName = "KdsCardSelector";
 
 // src/components/domain/KdsCardPlan/KdsCardPlan.tsx
-var import_react35 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var KdsCardPlan = (0, import_react35.forwardRef)(
-  ({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+var import_react36 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var KdsCardPlan = (0, import_react36.forwardRef)(
+  ({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       ref,
       className: (0, import_clsx.clsx)("kds-card-plan", recommended && "recommended", className),
       ...props,
       children: [
-        badgeText && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-card-plan-badge", children: badgeText }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "kds-card-plan-price", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: price }),
-          period && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "kds-card-plan-price", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "kds-price", children: price }),
+          period && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "kds-price-period", children: [
             "/",
             period
           ] })
         ] }),
-        features && features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: f }, i)) }),
+        badgeText && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "kds-card-plan-badge", children: badgeText }),
+        features && features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { children: f }, i)) }),
         action
       ]
     }
@@ -2056,50 +2372,410 @@ var KdsCardPlan = (0, import_react35.forwardRef)(
 KdsCardPlan.displayName = "KdsCardPlan";
 
 // src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
-var import_react36 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var KdsInvoiceSticky = (0, import_react36.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-elevated", "kds-invoice-sticky", className), ...props, children })
+var import_react37 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var KdsInvoiceSticky = (0, import_react37.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "article",
+    {
+      ref,
+      className: (0, import_clsx.clsx)("kds-card-elevated", "kds-invoice-sticky", className),
+      ...props,
+      children
+    }
+  )
 );
 KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
 
 // src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
-var import_react37 = require("react");
-var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var KdsBottomSheet = (0, import_react37.forwardRef)(
-  ({ open, onClose, title, children, actions, className, container }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog3.Root, { open, onOpenChange: (o) => {
-    if (!o) onClose();
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog3.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Dialog3.Content, { ref, className: (0, import_clsx.clsx)("kds-bottom-sheet", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bottom-sheet-grabber" }),
-    title && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog3.Title, { className: "kds-bottom-sheet-title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bottom-sheet-body", children }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bottom-sheet-actions", children: actions })
-  ] }) }) }) })
+var import_react38 = require("react");
+var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var KdsBottomSheet = (0, import_react38.forwardRef)(
+  ({
+    open,
+    onClose,
+    title,
+    description,
+    children,
+    actions,
+    showGrabber = true,
+    showCloseButton = false,
+    container,
+    className
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    Dialog2.Root,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (!o) onClose();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Dialog2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Dialog2.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+        Dialog2.Content,
+        {
+          ref,
+          className: (0, import_clsx.clsx)("kds-bottom-sheet", className),
+          onPointerDownOutside: (e) => {
+            const target = e.target;
+            if (target.closest(".kds-bottom-sheet")) e.preventDefault();
+          },
+          children: [
+            showGrabber && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
+            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "kds-bottom-sheet-close",
+                "aria-label": "Cerrar",
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { className: "material-symbols-outlined", children: "close" })
+              }
+            ) }),
+            title && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "kds-bottom-sheet-body", children }),
+            actions && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "kds-bottom-sheet-actions", children: actions })
+          ]
+        }
+      ) }) })
+    }
+  )
 );
 KdsBottomSheet.displayName = "KdsBottomSheet";
 
 // src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
-var import_react38 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var KdsSecureFooter = (0, import_react38.forwardRef)(
-  ({ variant = "default", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("footer", { ref, className: (0, import_clsx.clsx)("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { className: "material-symbols-outlined", children: "lock" }),
-    children || /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "Pago seguro con Khipu" })
+var import_react40 = require("react");
+
+// src/components/domain/KdsSecureFooter/KhipuWordmark.tsx
+var import_react39 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var KhipuWordmark = (0, import_react39.forwardRef)(
+  ({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 45 15",
+      role: "img",
+      "aria-label": "Khipu",
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("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__ */ (0, import_jsx_runtime37.jsx)("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__ */ (0, import_jsx_runtime37.jsx)("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__ */ (0, import_jsx_runtime37.jsx)("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__ */ (0, import_jsx_runtime37.jsx)("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__ */ (0, import_jsx_runtime37.jsx)("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__ */ (0, import_jsx_runtime37.jsx)("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__ */ (0, import_jsx_runtime37.jsx)("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
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var KdsSecureFooter = (0, import_react40.forwardRef)(
+  ({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("footer", { ref, className: (0, import_clsx.clsx)("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("svg", { className: "kds-secure-footer-lock", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("rect", { x: "4.5", y: "10.5", width: "15", height: "10", rx: "2.25" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M8 10.5V7a4 4 0 0 1 8 0v3.5" })
+    ] }),
+    children || /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Pago seguro procesado por" }),
+    showLogo && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(KhipuWordmark, {}),
+    psp && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "kds-secure-footer-sep", "aria-hidden": "true" }),
+      psp
+    ] })
   ] })
 );
 KdsSecureFooter.displayName = "KdsSecureFooter";
 
 // src/components/domain/KdsRecapList/KdsRecapList.tsx
-var import_react39 = require("react");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var KdsRecapList = (0, import_react39.forwardRef)(
-  ({ items, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { ref, className: (0, import_clsx.clsx)("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "k", children: item.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: (0, import_clsx.clsx)("v", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
+var import_react41 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var KdsRecapList = (0, import_react41.forwardRef)(
+  ({ items, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("ul", { ref, className: (0, import_clsx.clsx)("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "kds-key", children: item.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: (0, import_clsx.clsx)("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
   ] }, i)) })
 );
 KdsRecapList.displayName = "KdsRecapList";
+
+// src/components/domain/KdsMontoRow/KdsMontoRow.tsx
+var import_react42 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var KdsMontoRow = (0, import_react42.forwardRef)(
+  ({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-monto-row", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "kds-monto-row-title", children: title }),
+      deadline && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "kds-monto-row-deadline", children: deadline })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "kds-monto-row-value", children: value })
+  ] })
+);
+KdsMontoRow.displayName = "KdsMontoRow";
+
+// src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
+var import_react43 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var KdsMerchantTile = (0, import_react43.forwardRef)(
+  ({ name, logoUrl, initials, compact, className, ...props }, ref) => {
+    const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)("kds-merchant-tile", logoUrl && "logo", compact && "compact", className),
+        "aria-label": name,
+        ...props,
+        children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { src: logoUrl, alt: name }) : displayInitials
+      }
+    );
+  }
+);
+KdsMerchantTile.displayName = "KdsMerchantTile";
+
+// src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
+var import_react44 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var KdsInvoiceMerchant = (0, import_react44.forwardRef)(
+  ({ logoUrl, brandColor, className, style, ...props }, ref) => {
+    const [failed, setFailed] = (0, import_react44.useState)(false);
+    const showLogo = !!logoUrl && !failed;
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.clsx)("kds-invoice-merchant", className),
+        "aria-hidden": "true",
+        style: brandColor ? { background: brandColor, ...style } : style,
+        ...props,
+        children: showLogo ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("img", { src: logoUrl, alt: "", onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "material-symbols-outlined", children: "storefront" })
+      }
+    );
+  }
+);
+KdsInvoiceMerchant.displayName = "KdsInvoiceMerchant";
+
+// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
+var import_react45 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var KdsPaymentTotal = (0, import_react45.forwardRef)(
+  ({
+    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__ */ (0, import_jsx_runtime43.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx.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__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "kds-payment-total-title", children: title }),
+          !isEmail && titleMobile != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
+          label != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h6", { className: "kds-payment-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("h5", { className: "kds-payment-amount", children: [
+            currency,
+            " ",
+            integer,
+            fraction !== null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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
+var import_react46 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var KdsBillAttachment = (0, import_react46.forwardRef)(
+  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    "a",
+    {
+      ref,
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: (0, import_clsx.clsx)("kds-bill-attachment", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "material-symbols-outlined", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: filename })
+      ]
+    }
+  )
+);
+KdsBillAttachment.displayName = "KdsBillAttachment";
+var KdsBillAttachments = (0, import_react46.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
+);
+KdsBillAttachments.displayName = "KdsBillAttachments";
+
+// src/components/core/hooks/useStickyInvoiceCollapse.ts
+var import_react47 = require("react");
+function useStickyInvoiceCollapse(options = {}) {
+  const { onCollapseStart, collapseEnd = 20, mobileBreakpoint = 768 } = options;
+  const onCollapseStartRef = (0, import_react47.useRef)(onCollapseStart);
+  onCollapseStartRef.current = onCollapseStart;
+  (0, import_react47.useEffect)(() => {
+    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");
+      });
+    };
+    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
+var import_react48 = require("react");
+function useExpandToggle(options = {}) {
+  const { defaultOpen = false, open: controlledOpen, onOpenChange, id } = options;
+  const generatedId = (0, import_react48.useId)();
+  const panelId = id ?? `kds-expand-${generatedId}`;
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react48.useState)(defaultOpen);
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+  const setOpen = (0, import_react48.useCallback)(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = (0, import_react48.useCallback)(() => setOpen(!open), [open, setOpen]);
+  const getToggleProps = (0, import_react48.useCallback)(
+    () => ({
+      type: "button",
+      "aria-expanded": open,
+      "aria-controls": panelId,
+      onClick: () => toggle()
+    }),
+    [open, panelId, toggle]
+  );
+  const getPanelProps = (0, import_react48.useCallback)(
+    (baseClassName = "kds-expand-panel") => ({
+      id: panelId,
+      className: open ? `${baseClassName} open` : baseClassName,
+      hidden: !open
+    }),
+    [open, panelId]
+  );
+  return { open, setOpen, toggle, getToggleProps, getPanelProps };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   KdsAccordion,
@@ -2109,6 +2785,8 @@ KdsRecapList.displayName = "KdsRecapList";
   KdsBankList,
   KdsBankModal,
   KdsBankRow,
+  KdsBillAttachment,
+  KdsBillAttachments,
   KdsBottomSheet,
   KdsButton,
   KdsCard,
@@ -2119,24 +2797,25 @@ KdsRecapList.displayName = "KdsRecapList";
   KdsCardSelector,
   KdsCheckbox,
   KdsChip,
+  KdsCopyButton,
   KdsCopyRow,
   KdsCopyableTable,
   KdsCountdown,
   KdsDivider,
   KdsExpandPanel,
+  KdsInvoiceMerchant,
   KdsInvoiceSticky,
   KdsLinearProgress,
-  KdsLogoHeader,
-  KdsLogoHeaderCloseButton,
-  KdsLogoHeaderCode,
-  KdsLogoHeaderLogo,
-  KdsLogoHeaderSeparator,
-  KdsModal,
+  KdsMerchantTile,
+  KdsMontoRow,
+  KdsPaymentTotal,
   KdsQrRow,
   KdsRadioGroup,
   KdsRecapList,
+  KdsSearchField,
   KdsSectionNote,
   KdsSecureFooter,
+  KdsSecureLoader,
   KdsSegmentedTabs,
   KdsSelect,
   KdsSnackbar,
@@ -2172,6 +2851,8 @@ KdsRecapList.displayName = "KdsRecapList";
   useAutoHide,
   useCopyToClipboard,
   useCountdown,
+  useExpandToggle,
+  useStickyInvoiceCollapse,
   useTabsKeyboard,
   zIndex
 });