@khipu/design-system 0.2.0-alpha.50 → 0.2.0-alpha.52

package/dist/index.js

@@ -63,6 +63,7 @@ __export(index_exports, {
   KdsQrRow: () => KdsQrRow,
   KdsRadioGroup: () => KdsRadioGroup,
   KdsRecapList: () => KdsRecapList,
+  KdsSearchField: () => KdsSearchField,
   KdsSectionNote: () => KdsSectionNote,
   KdsSecureFooter: () => KdsSecureFooter,
   KdsSecureLoader: () => KdsSecureLoader,
@@ -1252,22 +1253,47 @@ 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, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: (0, import_clsx.clsx)("checkbox", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { ref, type: "checkbox", ...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
+    ] });
+  }
+);
+KdsSearchField.displayName = "KdsSearchField";
+
+// src/components/core/KdsCheckbox/KdsCheckbox.tsx
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+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 })
   ] })
 );
 KdsCheckbox.displayName = "KdsCheckbox";
 
 // src/components/core/KdsCard/KdsCard.tsx
-var import_react4 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var KdsCard = (0, import_react4.forwardRef)(
-  ({ variant = "elevated", dimmed, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var KdsCard = (0, import_react5.forwardRef)(
+  ({ variant = "elevated", dimmed, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "article",
     {
       ref,
@@ -1282,31 +1308,31 @@ var KdsCard = (0, import_react4.forwardRef)(
   )
 );
 KdsCard.displayName = "KdsCard";
-var KdsCardHeader = (0, import_react4.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-header", className), ...props, children })
+var KdsCardHeader = (0, import_react5.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-header", className), ...props, children })
 );
 KdsCardHeader.displayName = "KdsCardHeader";
-var KdsCardBody = (0, import_react4.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-body", className), ...props, children })
+var KdsCardBody = (0, import_react5.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-body", className), ...props, children })
 );
 KdsCardBody.displayName = "KdsCardBody";
-var KdsCardFooter = (0, import_react4.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-footer", className), ...props, children })
+var KdsCardFooter = (0, import_react5.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-footer", className), ...props, children })
 );
 KdsCardFooter.displayName = "KdsCardFooter";
 
 // src/components/core/KdsSpinner/KdsSpinner.tsx
-var import_react5 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+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_react5.forwardRef)(
+var KdsSpinner = (0, import_react6.forwardRef)(
   ({ size = "medium", label, className, ...props }, ref) => {
     const sizeClass = SIZE_CLASS[size];
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         ref,
@@ -1314,9 +1340,9 @@ var KdsSpinner = (0, import_react5.forwardRef)(
         role: "status",
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("progress", { className: (0, import_clsx.clsx)("circle indeterminate", sizeClass) }),
-          label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "kds-text-body-small kds-text-muted", children: label }),
-          !label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "kds-hidden", children: "Cargando" })
+          /* @__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" })
         ]
       }
     );
@@ -1325,16 +1351,16 @@ var KdsSpinner = (0, import_react5.forwardRef)(
 KdsSpinner.displayName = "KdsSpinner";
 
 // src/components/core/KdsSecureLoader/KdsSecureLoader.tsx
-var import_react6 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var KdsSecureLoader = (0, import_react6.forwardRef)(
-  ({ title, message, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("div", { className: "kds-secure-loader-text", children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "kds-secure-loader-title", children: title }),
-      message && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "kds-secure-loader-message", children: message })
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+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_runtime7.jsxs)("div", { className: "kds-secure-loader-spinner", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__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",
@@ -1343,23 +1369,23 @@ var KdsSecureLoader = (0, import_react6.forwardRef)(
           height: "100",
           fill: "none",
           "aria-hidden": "true",
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "44", cy: "44", r: "20.2", fill: "none" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("circle", { cx: "44", cy: "44", r: "20.2", fill: "none" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", { className: "material-symbols-outlined kds-secure-loader-lock", "aria-hidden": "true", children: "lock" })
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("i", { className: "material-symbols-outlined kds-secure-loader-lock", "aria-hidden": "true", children: "lock" })
     ] })
   ] })
 );
 KdsSecureLoader.displayName = "KdsSecureLoader";
 
 // src/components/core/KdsCopyButton/KdsCopyButton.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/core/hooks/useCopyToClipboard.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 function useCopyToClipboard(resetMs = 1200) {
-  const [copied, setCopied] = (0, import_react7.useState)(false);
-  const copy = (0, import_react7.useCallback)(
+  const [copied, setCopied] = (0, import_react8.useState)(false);
+  const copy = (0, import_react8.useCallback)(
     async (text) => {
       try {
         await navigator.clipboard.writeText(text);
@@ -1374,11 +1400,11 @@ function useCopyToClipboard(resetMs = 1200) {
 }
 
 // src/components/core/KdsCopyButton/KdsCopyButton.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var KdsCopyButton = (0, import_react8.forwardRef)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var KdsCopyButton = (0, import_react9.forwardRef)(
   ({ value, copiedText = "Copiado", className, ...props }, ref) => {
     const { copied, copy } = useCopyToClipboard();
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "button",
       {
         ref,
@@ -1388,11 +1414,11 @@ var KdsCopyButton = (0, import_react8.forwardRef)(
         "aria-label": `Copiar: ${value}`,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "kds-copy-button-label", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "kds-copy-button-value", "aria-hidden": copied || void 0, children: value }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "kds-copy-button-copied", "aria-hidden": !copied || void 0, children: copiedText })
+          /* @__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_runtime8.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: copied ? "check" : "content_copy" })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: copied ? "check" : "content_copy" })
         ]
       }
     );
@@ -1401,26 +1427,26 @@ var KdsCopyButton = (0, import_react8.forwardRef)(
 KdsCopyButton.displayName = "KdsCopyButton";
 
 // src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
-var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var KdsLinearProgress = (0, import_react9.forwardRef)(
-  ({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("progress", { ref, className: (0, import_clsx.clsx)("kds-progress", className), value, max, ...props })
+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_react10 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+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_react10.forwardRef)(
+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_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "div",
       {
         ref,
@@ -1428,19 +1454,19 @@ var KdsAlert = (0, import_react10.forwardRef)(
         className: (0, import_clsx.clsx)("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
         ...props,
         children: [
-          resolvedIcon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "kds-alert-icon", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("i", { className: "material-symbols-outlined", children: resolvedIcon }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "kds-alert-content", children: [
-            title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "kds-alert-title", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "kds-alert-description", 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_runtime10.jsx)(
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "button",
             {
               type: "button",
               className: "kds-alert-close",
               onClick: onClose,
               "aria-label": "Cerrar",
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("i", { className: "material-symbols-outlined", children: "close" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("i", { className: "material-symbols-outlined", children: "close" })
             }
           )
         ]
@@ -1451,8 +1477,8 @@ var KdsAlert = (0, import_react10.forwardRef)(
 KdsAlert.displayName = "KdsAlert";
 
 // src/components/core/KdsTypography/KdsTypography.tsx
-var import_react11 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var variantTag = {
   display1: "h1",
   display2: "h2",
@@ -1468,10 +1494,10 @@ var variantTag = {
   link: "span",
   strong: "span"
 };
-var KdsTypography = (0, import_react11.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_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Tag,
       {
         ref,
@@ -1489,12 +1515,12 @@ var KdsTypography = (0, import_react11.forwardRef)(
 KdsTypography.displayName = "KdsTypography";
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-var import_react13 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // src/components/core/hooks/useTabsKeyboard.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useTabsKeyboard(tabCount, activeIndex, onChange) {
-  const onKeyDown = (0, import_react12.useCallback)(
+  const onKeyDown = (0, import_react13.useCallback)(
     (e) => {
       let next = activeIndex;
       if (e.key === "ArrowRight") next = (activeIndex + 1) % tabCount;
@@ -1514,12 +1540,12 @@ function useTabsKeyboard(tabCount, activeIndex, onChange) {
 }
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var KdsTabs = (0, import_react13.forwardRef)(
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var KdsTabs = (0, import_react14.forwardRef)(
   ({ activeIndex, onChange, children, className, style, ...props }, ref) => {
-    const tabCount = import_react13.Children.count(children);
+    const tabCount = import_react14.Children.count(children);
     const { onKeyDown } = useTabsKeyboard(tabCount, activeIndex, onChange);
-    const mergedStyle = (0, import_react13.useMemo)(
+    const mergedStyle = (0, import_react14.useMemo)(
       () => ({
         ...style,
         "--_tab-count": tabCount,
@@ -1527,7 +1553,7 @@ var KdsTabs = (0, import_react13.forwardRef)(
       }),
       [tabCount, activeIndex, style]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         ref,
@@ -1536,9 +1562,9 @@ var KdsTabs = (0, import_react13.forwardRef)(
         style: mergedStyle,
         onKeyDown,
         ...props,
-        children: import_react13.Children.map(children, (child, i) => {
-          if (!import_react13.default.isValidElement(child)) return child;
-          return import_react13.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)
           });
@@ -1548,8 +1574,8 @@ var KdsTabs = (0, import_react13.forwardRef)(
   }
 );
 KdsTabs.displayName = "KdsTabs";
-var KdsTab = (0, import_react13.forwardRef)(
-  ({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var KdsTab = (0, import_react14.forwardRef)(
+  ({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       ref,
@@ -1565,8 +1591,8 @@ var KdsTab = (0, import_react13.forwardRef)(
   )
 );
 KdsTab.displayName = "KdsTab";
-var KdsTabPanel = (0, import_react13.forwardRef)(
-  ({ active, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var KdsTabPanel = (0, import_react14.forwardRef)(
+  ({ active, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       ref,
@@ -1581,13 +1607,13 @@ var KdsTabPanel = (0, import_react13.forwardRef)(
 KdsTabPanel.displayName = "KdsTabPanel";
 
 // src/components/core/KdsRadioGroup/KdsRadioGroup.tsx
-var import_react14 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var KdsRadioGroup = (0, import_react14.forwardRef)(
-  ({ label, name, options, value, onChange, size, 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: (0, import_clsx.clsx)("radio", size), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+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, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("fieldset", { ref, className: (0, import_clsx.clsx)("kds-radio-group", 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",
@@ -1598,16 +1624,16 @@ var KdsRadioGroup = (0, import_react14.forwardRef)(
           onChange: () => onChange?.(opt.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: opt.label })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: opt.label })
     ] }, opt.value))
   ] })
 );
 KdsRadioGroup.displayName = "KdsRadioGroup";
 
 // src/components/core/KdsSelect/KdsSelect.tsx
-var import_react15 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var KdsSelect = (0, import_react15.forwardRef)(
+var import_react16 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var KdsSelect = (0, import_react16.forwardRef)(
   ({
     label,
     options,
@@ -1623,7 +1649,7 @@ var KdsSelect = (0, import_react15.forwardRef)(
     ...props
   }, ref) => {
     const fieldId = id || `kds-select-${label.toLowerCase().replace(/\s+/g, "-")}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: (0, import_clsx.clsx)(
@@ -1636,8 +1662,8 @@ var KdsSelect = (0, import_react15.forwardRef)(
           className
         ),
         children: [
-          prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("i", { className: "material-symbols-outlined", children: prefixIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", { className: "material-symbols-outlined", children: prefixIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "select",
             {
               ref,
@@ -1646,16 +1672,16 @@ var KdsSelect = (0, import_react15.forwardRef)(
               required,
               ...props,
               children: [
-                placeholder !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "", children: placeholder }),
-                options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+                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_runtime14.jsxs)("label", { htmlFor: fieldId, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("label", { htmlFor: fieldId, children: [
             label,
             required && " *"
           ] }),
-          helperText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "helper", children: helperText })
+          helperText && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "helper", children: helperText })
         ]
       }
     );
@@ -1664,13 +1690,13 @@ var KdsSelect = (0, import_react15.forwardRef)(
 KdsSelect.displayName = "KdsSelect";
 
 // src/components/core/KdsChip/KdsChip.tsx
-var import_react16 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var KdsChip = (0, import_react16.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 }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children }),
-    onDelete && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+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",
@@ -1680,7 +1706,7 @@ var KdsChip = (0, import_react16.forwardRef)(
           onDelete();
         },
         "aria-label": "Eliminar",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", { className: "material-symbols-outlined", children: "close" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", children: "close" })
       }
     )
   ] })
@@ -1688,15 +1714,15 @@ var KdsChip = (0, import_react16.forwardRef)(
 KdsChip.displayName = "KdsChip";
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/core/hooks/useAutoHide.ts
-var import_react17 = require("react");
+var import_react18 = require("react");
 function useAutoHide(durationMs, onHide) {
-  const [visible, setVisible] = (0, import_react17.useState)(true);
-  const onHideRef = (0, import_react17.useRef)(onHide);
+  const [visible, setVisible] = (0, import_react18.useState)(true);
+  const onHideRef = (0, import_react18.useRef)(onHide);
   onHideRef.current = onHide;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     if (durationMs <= 0) return;
     const timer = setTimeout(() => {
       setVisible(false);
@@ -1708,13 +1734,13 @@ function useAutoHide(durationMs, onHide) {
 }
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var DEFAULT_ICONS2 = {
   info: "info",
   success: "check_circle",
   error: "error"
 };
-var KdsSnackbar = (0, import_react18.forwardRef)(
+var KdsSnackbar = (0, import_react19.forwardRef)(
   ({
     message,
     type = "info",
@@ -1731,7 +1757,7 @@ var KdsSnackbar = (0, import_react18.forwardRef)(
     if (!open || !visible) return null;
     const resolvedIcon = icon === false ? null : icon ?? DEFAULT_ICONS2[type];
     const mergedStyle = autoDismiss ? { ...style, ["--kds-snackbar-duration"]: `${duration}ms` } : style ?? {};
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
       "div",
       {
         ref,
@@ -1741,16 +1767,16 @@ var KdsSnackbar = (0, import_react18.forwardRef)(
         style: mergedStyle,
         ...props,
         children: [
-          resolvedIcon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", children: resolvedIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "max", children: message }),
-          onClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          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_runtime16.jsx)("i", { className: "material-symbols-outlined", children: "close" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("i", { className: "material-symbols-outlined", children: "close" })
             }
           )
         ]
@@ -1762,7 +1788,7 @@ 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,
@@ -1773,9 +1799,9 @@ 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)(
+  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),
@@ -1784,7 +1810,7 @@ function KdsTooltip({
         collisionPadding: 8,
         children: [
           content,
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Arrow, { className: "kds-tooltip-arrow", width: 10, height: 5 })
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tooltip.Arrow, { className: "kds-tooltip-arrow", width: 10, height: 5 })
         ]
       }
     ) })
@@ -1792,68 +1818,68 @@ function KdsTooltip({
 }
 
 // src/components/core/KdsAccordion/KdsAccordion.tsx
-var import_react19 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var KdsAccordion = (0, import_react19.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_react19.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_react19.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_react20 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var KdsDivider = (0, import_react20.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_react21 = require("react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
-var KdsSectionNote = (0, import_react21.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_react22 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var KdsStatusBlock = (0, import_react22.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_react23 = require("react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var KdsStepper = (0, import_react23.forwardRef)(
-  ({ steps, current, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-stepper", className), ...props, children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+var import_react24 = require("react");
+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_runtime22.jsx)("div", { className: "kds-step-indicator" }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "kds-step-label", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "kds-step-indicator" }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "kds-step-label", children: label })
       ]
     },
     `${i}-${label}`
@@ -1862,12 +1888,12 @@ var KdsStepper = (0, import_react23.forwardRef)(
 KdsStepper.displayName = "KdsStepper";
 
 // src/components/core/KdsCopyRow/KdsCopyRow.tsx
-var import_react24 = require("react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var KdsCopyRow = (0, import_react24.forwardRef)(
+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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "button",
       {
         ref,
@@ -1878,13 +1904,13 @@ var KdsCopyRow = (0, import_react24.forwardRef)(
         "aria-label": `Copiar ${label}: ${value}`,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "content_copy" }),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { 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_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_runtime23.jsxs)("span", { className: "kds-copy-toast", "aria-hidden": "true", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { className: "material-symbols-outlined", children: "check_circle" }),
+          /* @__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
           ] })
@@ -1896,8 +1922,8 @@ var KdsCopyRow = (0, import_react24.forwardRef)(
 KdsCopyRow.displayName = "KdsCopyRow";
 
 // src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
-var import_react25 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 async function copyToClipboard(text) {
   try {
     if (navigator.clipboard?.writeText) {
@@ -1922,159 +1948,228 @@ async function copyToClipboard(text) {
   }
 }
 var TRANSITION_MS = 300;
-var KdsCopyableTable = (0, import_react25.forwardRef)(
-  ({
-    rows,
-    copyAllLabel = "Copiar todos los datos",
-    copiedAllLabel = "Datos copiados",
-    showCopyAll = true,
-    className,
-    ...props
-  }, ref) => {
-    const copiedTimers = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
-    const settlingTimers = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
-    const [copiedRows, setCopiedRows] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
-    const [settlingRows, setSettlingRows] = (0, import_react25.useState)(/* @__PURE__ */ new Set());
-    const [allCopied, setAllCopied] = (0, import_react25.useState)(false);
-    const markCopied = (0, import_react25.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;
-          });
+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.add(i);
+            next.delete(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_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, i) => /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)("span", { className: "kds-key", children: row.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-value", children: row.value })
-          ]
+          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);
+          }
         },
-        `${row.label}-${i}`
-      )) }),
-      showCopyAll && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-        "button",
+        "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,
         {
-          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_runtime24.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { className: "material-symbols-outlined", children: allCopied ? "check" : "content_copy" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
-          ]
+          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);
@@ -2087,8 +2182,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);
@@ -2097,13 +2192,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?.();
       }
@@ -2112,9 +2207,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),
@@ -2127,18 +2222,18 @@ 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, ...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)(
+var import_react31 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var KdsBankRow = (0, import_react31.forwardRef)(
+  ({ name, logoUrl, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "button",
     {
       ref,
@@ -2146,9 +2241,9 @@ var KdsBankRow = (0, import_react30.forwardRef)(
       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" })
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src: logoUrl, alt: name }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "initials", children: name.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" })
       ]
     }
   )
@@ -2156,67 +2251,66 @@ var KdsBankRow = (0, import_react30.forwardRef)(
 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 import_react33 = require("react");
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var KdsBankModal = (0, import_react32.forwardRef)(
+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)(Dialog.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)(Dialog.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Dialog.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)(Dialog.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { children: title }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog.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: "kds-qr-title", children: name }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "kds-qr-subtitle", 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,
@@ -2224,9 +2318,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 })
       ]
     }
   )
@@ -2234,26 +2328,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: [
-        /* @__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", { className: "kds-price", children: price }),
-          period && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "kds-price-period", 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
           ] })
         ] }),
-        badgeText && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-card-plan-badge", children: badgeText }),
-        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
       ]
     }
@@ -2262,18 +2356,18 @@ 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)("div", { 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 import_react38 = require("react");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var KdsBottomSheet = (0, import_react37.forwardRef)(
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var KdsBottomSheet = (0, import_react38.forwardRef)(
   ({
     open,
     onClose,
@@ -2285,14 +2379,14 @@ var KdsBottomSheet = (0, import_react37.forwardRef)(
     showCloseButton = false,
     container,
     className
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     Dialog2.Root,
     {
       open,
       onOpenChange: (o) => {
         if (!o) onClose();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      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,
@@ -2302,20 +2396,20 @@ var KdsBottomSheet = (0, import_react37.forwardRef)(
             if (target.closest(".kds-bottom-sheet")) e.preventDefault();
           },
           children: [
-            showGrabber && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
-            showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+            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_runtime35.jsx)("i", { className: "material-symbols-outlined", children: "close" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { className: "material-symbols-outlined", children: "close" })
               }
             ) }),
-            title && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
-            /* @__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 })
+            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 })
           ]
         }
       ) }) })
@@ -2325,55 +2419,55 @@ var KdsBottomSheet = (0, import_react37.forwardRef)(
 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_react39 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var KdsSecureFooter = (0, import_react39.forwardRef)(
+  ({ variant = "default", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("footer", { ref, className: (0, import_clsx.clsx)("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", { className: "material-symbols-outlined", children: "lock" }),
+    children || /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: "Pago seguro con Khipu" })
   ] })
 );
 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: "kds-key", children: item.label }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: (0, import_clsx.clsx)("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
+var import_react40 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var KdsRecapList = (0, import_react40.forwardRef)(
+  ({ items, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ul", { ref, className: (0, import_clsx.clsx)("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "kds-key", children: item.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.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_react40 = require("react");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var KdsMontoRow = (0, import_react40.forwardRef)(
-  ({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-monto-row", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "kds-monto-row-title", children: title }),
-      deadline && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "kds-monto-row-deadline", children: deadline })
+var import_react41 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var KdsMontoRow = (0, import_react41.forwardRef)(
+  ({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-monto-row", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-monto-row-title", children: title }),
+      deadline && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-monto-row-deadline", children: deadline })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "kds-monto-row-value", children: value })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "kds-monto-row-value", children: value })
   ] })
 );
 KdsMontoRow.displayName = "KdsMontoRow";
 
 // src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
-var import_react41 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
-var KdsMerchantTile = (0, import_react41.forwardRef)(
+var import_react42 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var KdsMerchantTile = (0, import_react42.forwardRef)(
   ({ name, logoUrl, initials, compact, className, ...props }, ref) => {
     const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.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_runtime39.jsx)("img", { src: logoUrl, alt: name }) : displayInitials
+        children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: logoUrl, alt: name }) : displayInitials
       }
     );
   }
@@ -2381,9 +2475,9 @@ var KdsMerchantTile = (0, import_react41.forwardRef)(
 KdsMerchantTile.displayName = "KdsMerchantTile";
 
 // src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
-var import_react42 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var KdsPaymentTotal = (0, import_react42.forwardRef)(
+var import_react43 = require("react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var KdsPaymentTotal = (0, import_react43.forwardRef)(
   ({
     variant = "default",
     tone = "brand",
@@ -2401,7 +2495,7 @@ var KdsPaymentTotal = (0, import_react42.forwardRef)(
     const { integer, fraction } = formatAmount(amount, decimals, locale);
     const isEmail = variant === "email";
     const isInfoTone = tone === "info";
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
       {
         ref,
@@ -2414,14 +2508,14 @@ var KdsPaymentTotal = (0, import_react42.forwardRef)(
         ),
         ...props,
         children: [
-          !isEmail && title != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h5", { className: "kds-payment-total-title", children: title }),
-          !isEmail && titleMobile != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
-          label != null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h6", { className: "kds-payment-label", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("h5", { className: "kds-payment-amount", children: [
+          !isEmail && title != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h5", { className: "kds-payment-total-title", children: title }),
+          !isEmail && titleMobile != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
+          label != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h6", { className: "kds-payment-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("h5", { className: "kds-payment-amount", children: [
             currency,
             " ",
             integer,
-            fraction !== null && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
+            fraction !== null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
           ] })
         ]
       }
@@ -2457,10 +2551,10 @@ function formatAmount(amount, decimals, locale) {
 }
 
 // src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
-var import_react43 = require("react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
-var KdsBillAttachment = (0, import_react43.forwardRef)(
-  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+var import_react44 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var KdsBillAttachment = (0, import_react44.forwardRef)(
+  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "a",
     {
       ref,
@@ -2470,15 +2564,15 @@ var KdsBillAttachment = (0, import_react43.forwardRef)(
       className: (0, import_clsx.clsx)("kds-bill-attachment", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("i", { className: "material-symbols-outlined", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: filename })
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("i", { className: "material-symbols-outlined", children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { children: filename })
       ]
     }
   )
 );
 KdsBillAttachment.displayName = "KdsBillAttachment";
-var KdsBillAttachments = (0, import_react43.forwardRef)(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
+var KdsBillAttachments = (0, import_react44.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
 );
 KdsBillAttachments.displayName = "KdsBillAttachments";
 // Annotate the CommonJS export names for ESM import in node:
@@ -2516,6 +2610,7 @@ KdsBillAttachments.displayName = "KdsBillAttachments";
   KdsQrRow,
   KdsRadioGroup,
   KdsRecapList,
+  KdsSearchField,
   KdsSectionNote,
   KdsSecureFooter,
   KdsSecureLoader,