@khipu/design-system 0.2.0-alpha.4 → 0.2.0-alpha.41

package/dist/index.mjs

@@ -347,6 +347,8 @@ var semanticColors = {
     // From Figma: warning/light
     dark: "#E65100",
     // From Figma: warning/dark
+    warm: "#8A6D1A",
+    // Warm/olive variant for header icons (LigoPay handoff v2)
     container: "#FFFBEB",
     // Light amber background for chips/badges
     contrastText: "#FFFFFF"
@@ -365,6 +367,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"
@@ -407,8 +411,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,
@@ -1040,7 +1046,7 @@ var KdsButton = forwardRef(
       children: [
         !loading && startIcon && /* @__PURE__ */ jsx2("span", { className: "kds-icon", children: /* @__PURE__ */ jsx2("i", { className: "material-symbols-outlined", children: startIcon }) }),
         loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx2("span", { className: "loader small" }),
+          /* @__PURE__ */ jsx2("progress", { className: "circle indeterminate small" }),
           /* @__PURE__ */ jsx2("span", { children })
         ] }) : /* @__PURE__ */ jsx2("span", { children }),
         !loading && endIcon && /* @__PURE__ */ jsx2("span", { className: "kds-icon", children: /* @__PURE__ */ jsx2("i", { className: "material-symbols-outlined", children: endIcon }) })
@@ -1062,11 +1068,13 @@ var KdsTextField = forwardRef2(
     readOnly,
     startIcon,
     endIcon,
+    required,
     className,
     id,
     ...props
   }, ref) => {
     const fieldId = id || `kds-field-${label.toLowerCase().replace(/\s+/g, "-")}`;
+    const hasSuffix = !!endIcon || readOnly;
     return /* @__PURE__ */ jsxs2(
       "div",
       {
@@ -1074,6 +1082,8 @@ var KdsTextField = forwardRef2(
           "field",
           "label",
           "border",
+          startIcon && "prefix",
+          hasSuffix && "suffix",
           error && "invalid",
           readOnly && "locked",
           fullWidth && "kds-w-full",
@@ -1086,12 +1096,16 @@ var KdsTextField = forwardRef2(
             {
               ref,
               id: fieldId,
-              placeholder: " ",
               readOnly,
-              ...props
+              required,
+              ...props,
+              placeholder: " "
             }
           ),
-          /* @__PURE__ */ jsx3("label", { htmlFor: fieldId, children: label }),
+          /* @__PURE__ */ jsxs2("label", { htmlFor: fieldId, children: [
+            label,
+            required && " *"
+          ] }),
           readOnly && /* @__PURE__ */ jsx3("i", { className: "material-symbols-outlined", children: "lock" }),
           endIcon && !readOnly && /* @__PURE__ */ jsx3("i", { className: "material-symbols-outlined", children: endIcon }),
           helperText && /* @__PURE__ */ jsx3("span", { className: "helper", children: helperText })
@@ -1106,78 +1120,18 @@ KdsTextField.displayName = "KdsTextField";
 import { forwardRef as forwardRef3 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var KdsCheckbox = forwardRef3(
-  ({ label, className, id, ...props }, ref) => {
-    const fieldId = id || `kds-cb-${label?.toLowerCase().replace(/\s+/g, "-") || "check"}`;
-    return /* @__PURE__ */ jsxs3("label", { className: clsx("field", className), htmlFor: fieldId, children: [
-      /* @__PURE__ */ jsx4("input", { ref, type: "checkbox", id: fieldId, ...props }),
-      /* @__PURE__ */ jsx4("span", { children: label })
-    ] });
-  }
+  ({ label, className, ...props }, ref) => /* @__PURE__ */ jsxs3("label", { className: clsx("checkbox", className), children: [
+    /* @__PURE__ */ jsx4("input", { ref, type: "checkbox", ...props }),
+    /* @__PURE__ */ jsx4("span", { children: label })
+  ] })
 );
 KdsCheckbox.displayName = "KdsCheckbox";
 
-// src/components/core/KdsModal/KdsModal.tsx
-import { forwardRef as forwardRef4 } from "react";
-import * as Dialog from "@radix-ui/react-dialog";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var KdsModal = forwardRef4(
-  ({
-    open,
-    onClose,
-    title,
-    description,
-    footer,
-    children,
-    size = "md",
-    showCloseButton = true,
-    className
-  }, ref) => /* @__PURE__ */ jsx5(
-    Dialog.Root,
-    {
-      open,
-      onOpenChange: (o) => {
-        if (!o) onClose();
-      },
-      children: /* @__PURE__ */ jsxs4(Dialog.Portal, { children: [
-        /* @__PURE__ */ jsx5(Dialog.Overlay, { className: "kds-bottom-sheet-scrim" }),
-        /* @__PURE__ */ jsxs4(
-          Dialog.Content,
-          {
-            ref,
-            className: clsx(
-              "kds-bottom-sheet",
-              `kds-bottom-sheet-${size}`,
-              className
-            ),
-            children: [
-              title && /* @__PURE__ */ jsxs4("div", { className: "kds-bottom-sheet-header", children: [
-                /* @__PURE__ */ jsx5(Dialog.Title, { className: "kds-bottom-sheet-title", children: title }),
-                showCloseButton && /* @__PURE__ */ jsx5(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    className: "kds-bottom-sheet-close",
-                    "aria-label": "Cerrar",
-                    children: /* @__PURE__ */ jsx5("i", { className: "material-symbols-outlined", children: "close" })
-                  }
-                ) })
-              ] }),
-              description && /* @__PURE__ */ jsx5(Dialog.Description, { className: "kds-bottom-sheet-description", children: description }),
-              /* @__PURE__ */ jsx5("div", { className: "kds-bottom-sheet-body", children }),
-              footer && /* @__PURE__ */ jsx5("div", { className: "kds-bottom-sheet-actions", children: footer })
-            ]
-          }
-        )
-      ] })
-    }
-  )
-);
-KdsModal.displayName = "KdsModal";
-
 // src/components/core/KdsCard/KdsCard.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var KdsCard = forwardRef5(
-  ({ variant = "elevated", dimmed, children, className, ...props }, ref) => /* @__PURE__ */ jsx6(
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var KdsCard = forwardRef4(
+  ({ variant = "elevated", dimmed, children, className, ...props }, ref) => /* @__PURE__ */ jsx5(
     "article",
     {
       ref,
@@ -1192,30 +1146,64 @@ var KdsCard = forwardRef5(
   )
 );
 KdsCard.displayName = "KdsCard";
-var KdsCardHeader = forwardRef5(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: clsx("kds-card-header", className), ...props, children })
+var KdsCardHeader = forwardRef4(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: clsx("kds-card-header", className), ...props, children })
 );
 KdsCardHeader.displayName = "KdsCardHeader";
-var KdsCardBody = forwardRef5(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: clsx("kds-card-body", className), ...props, children })
+var KdsCardBody = forwardRef4(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: clsx("kds-card-body", className), ...props, children })
 );
 KdsCardBody.displayName = "KdsCardBody";
-var KdsCardFooter = forwardRef5(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: clsx("kds-card-footer", className), ...props, children })
+var KdsCardFooter = forwardRef4(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx5("div", { ref, className: clsx("kds-card-footer", className), ...props, children })
 );
 KdsCardFooter.displayName = "KdsCardFooter";
 
 // src/components/core/KdsSpinner/KdsSpinner.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIZE_CLASS = {
+  small: "small",
+  medium: null,
+  large: "large"
+};
+var KdsSpinner = forwardRef5(
+  ({ size = "medium", label, className, ...props }, ref) => {
+    const sizeClass = SIZE_CLASS[size];
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        ref,
+        className: clsx("kds-flex kds-flex-col kds-items-center kds-gap-2", className),
+        role: "status",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx6("progress", { className: clsx("circle indeterminate", sizeClass) }),
+          label && /* @__PURE__ */ jsx6("span", { className: "kds-text-body-small kds-text-muted", children: label }),
+          !label && /* @__PURE__ */ jsx6("span", { className: "kds-hidden", children: "Cargando" })
+        ]
+      }
+    );
+  }
+);
+KdsSpinner.displayName = "KdsSpinner";
+
+// src/components/core/KdsSecureLoader/KdsSecureLoader.tsx
 import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var KdsSpinner = forwardRef6(
-  ({ size = "medium", label, className, ...props }, ref) => /* @__PURE__ */ jsxs5("div", { ref, className: clsx("kds-flex kds-flex-col kds-items-center kds-gap-2", className), role: "status", ...props, children: [
-    /* @__PURE__ */ jsx7("span", { className: clsx("loader", size) }),
-    label && /* @__PURE__ */ jsx7("span", { className: "kds-text-body-small kds-text-muted", children: label }),
-    !label && /* @__PURE__ */ jsx7("span", { className: "kds-hidden", children: "Cargando" })
+var KdsSecureLoader = forwardRef6(
+  ({ title, message, className, ...props }, ref) => /* @__PURE__ */ jsxs5("div", { ref, className: clsx("kds-secure-loader", className), role: "status", "aria-busy": "true", ...props, children: [
+    (title || message) && /* @__PURE__ */ jsxs5("div", { className: "kds-secure-loader-text", children: [
+      title && /* @__PURE__ */ jsx7("p", { className: "kds-secure-loader-title", children: title }),
+      message && /* @__PURE__ */ jsx7("p", { className: "kds-secure-loader-message", children: message })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "kds-secure-loader-spinner", children: [
+      /* @__PURE__ */ jsx7("svg", { className: "kds-secure-loader-ring", viewBox: "22 22 44 44", "aria-hidden": "true", children: /* @__PURE__ */ jsx7("circle", { cx: "44", cy: "44", r: "20.2" }) }),
+      /* @__PURE__ */ jsx7("i", { className: "material-symbols-outlined kds-secure-loader-lock", "aria-hidden": "true", children: "lock" })
+    ] })
   ] })
 );
-KdsSpinner.displayName = "KdsSpinner";
+KdsSecureLoader.displayName = "KdsSecureLoader";
 
 // src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
 import { forwardRef as forwardRef7 } from "react";
@@ -1228,24 +1216,42 @@ KdsLinearProgress.displayName = "KdsLinearProgress";
 // src/components/core/KdsAlert/KdsAlert.tsx
 import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_ICONS = {
+  success: "check_circle",
+  info: "info",
+  warning: "warning",
+  error: "error"
+};
 var KdsAlert = forwardRef8(
-  ({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      ref,
-      role: "alert",
-      className: clsx("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx9("div", { className: "kds-alert-icon", children: /* @__PURE__ */ jsx9("i", { className: "material-symbols-outlined", children: icon }) }),
-        /* @__PURE__ */ jsxs6("div", { className: "kds-alert-content", children: [
-          title && /* @__PURE__ */ jsx9("p", { className: "kds-alert-title", children: title }),
-          /* @__PURE__ */ jsx9("p", { className: "kds-alert-description", children })
-        ] }),
-        onClose && /* @__PURE__ */ jsx9("button", { className: "kds-btn kds-btn-text kds-btn-sm", onClick: onClose, "aria-label": "Cerrar", children: /* @__PURE__ */ jsx9("i", { className: "material-symbols-outlined", children: "close" }) })
-      ]
-    }
-  )
+  ({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => {
+    const resolvedIcon = icon === false ? null : typeof icon === "string" ? icon : DEFAULT_ICONS[severity];
+    return /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        ref,
+        role: "alert",
+        className: clsx("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
+        ...props,
+        children: [
+          resolvedIcon && /* @__PURE__ */ jsx9("div", { className: "kds-alert-icon", children: /* @__PURE__ */ jsx9("i", { className: "material-symbols-outlined", children: resolvedIcon }) }),
+          /* @__PURE__ */ jsxs6("div", { className: "kds-alert-content", children: [
+            title && /* @__PURE__ */ jsx9("p", { className: "kds-alert-title", children: title }),
+            /* @__PURE__ */ jsx9("p", { className: "kds-alert-description", children })
+          ] }),
+          onClose && /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              className: "kds-alert-close",
+              onClick: onClose,
+              "aria-label": "Cerrar",
+              children: /* @__PURE__ */ jsx9("i", { className: "material-symbols-outlined", children: "close" })
+            }
+          )
+        ]
+      }
+    );
+  }
 );
 KdsAlert.displayName = "KdsAlert";
 
@@ -1314,23 +1320,23 @@ function useTabsKeyboard(tabCount, activeIndex, onChange) {
 // src/components/core/KdsTabs/KdsTabs.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
 var KdsTabs = forwardRef10(
-  ({ activeIndex, onChange, variant = "standard", children, className, style, ...props }, ref) => {
+  ({ activeIndex, onChange, children, className, style, ...props }, ref) => {
     const tabCount = Children.count(children);
     const { onKeyDown } = useTabsKeyboard(tabCount, activeIndex, onChange);
-    const mergedStyle = useMemo(() => {
-      if (variant !== "segmented") return style;
-      return {
+    const mergedStyle = useMemo(
+      () => ({
         ...style,
         "--_tab-count": tabCount,
         "--_active-idx": activeIndex
-      };
-    }, [variant, tabCount, activeIndex, style]);
+      }),
+      [tabCount, activeIndex, style]
+    );
     return /* @__PURE__ */ jsx11(
       "div",
       {
         ref,
         role: "tablist",
-        className: clsx(variant === "segmented" ? "kds-segmented-tabs" : "kds-tabs", className),
+        className: clsx("kds-segmented-tabs", className),
         style: mergedStyle,
         onKeyDown,
         ...props,
@@ -1351,6 +1357,7 @@ var KdsTab = forwardRef10(
     "button",
     {
       ref,
+      type: "button",
       role: "tab",
       "aria-selected": _active,
       tabIndex: _active ? 0 : -1,
@@ -1377,103 +1384,14 @@ var KdsTabPanel = forwardRef10(
 );
 KdsTabPanel.displayName = "KdsTabPanel";
 
-// src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
-import { forwardRef as forwardRef11 } from "react";
-
-// src/assets/images/khipu-logo-color.svg
-var khipu_logo_color_default = "./khipu-logo-color-TV75AKOV.svg";
-
-// src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var KhipuLogo = () => /* @__PURE__ */ jsx12(
-  "img",
-  {
-    src: khipu_logo_color_default,
-    alt: "Khipu",
-    className: "kds-logo-header-logo-img"
-  }
-);
-var KdsLogoHeaderLogo = forwardRef11(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
-      "div",
-      {
-        ref,
-        className: clsx("kds-logo-header-logo", className),
-        ...props,
-        children: children || /* @__PURE__ */ jsx12(KhipuLogo, {})
-      }
-    );
-  }
-);
-KdsLogoHeaderLogo.displayName = "KdsLogoHeaderLogo";
-var KdsLogoHeaderSeparator = forwardRef11(
-  ({ children = "|", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
-      "span",
-      {
-        ref,
-        className: clsx("kds-logo-header-separator", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-KdsLogoHeaderSeparator.displayName = "KdsLogoHeaderSeparator";
-var KdsLogoHeaderCode = forwardRef11(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
-      "span",
-      {
-        ref,
-        className: clsx("kds-logo-header-code", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-KdsLogoHeaderCode.displayName = "KdsLogoHeaderCode";
-var KdsLogoHeaderCloseButton = forwardRef11(
-  ({ onClose, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12("div", { className: "kds-logo-header-close-wrapper", children: /* @__PURE__ */ jsx12(
-      "button",
-      {
-        ref,
-        onClick: onClose,
-        className: clsx("kds-btn kds-btn-icon", className),
-        "aria-label": "close",
-        ...props,
-        children: /* @__PURE__ */ jsx12("i", { className: "material-symbols-outlined", children: "close" })
-      }
-    ) });
-  }
-);
-KdsLogoHeaderCloseButton.displayName = "KdsLogoHeaderCloseButton";
-var KdsLogoHeader = forwardRef11(
-  ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
-      "div",
-      {
-        ref,
-        className: clsx("kds-brand-row", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-KdsLogoHeader.displayName = "KdsLogoHeader";
-
 // src/components/core/KdsRadioGroup/KdsRadioGroup.tsx
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var KdsRadioGroup = forwardRef12(
-  ({ label, name, options, value, onChange, className, ...props }, ref) => /* @__PURE__ */ jsxs7("fieldset", { ref, className: clsx("kds-radio-group", className), ...props, children: [
-    label && /* @__PURE__ */ jsx13("legend", { children: label }),
-    options.map((opt) => /* @__PURE__ */ jsxs7("label", { className: "field", children: [
-      /* @__PURE__ */ jsx13(
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+var KdsRadioGroup = forwardRef11(
+  ({ label, name, options, value, onChange, size, className, ...props }, ref) => /* @__PURE__ */ jsxs7("fieldset", { ref, className: clsx("kds-radio-group", className), ...props, children: [
+    label && /* @__PURE__ */ jsx12("legend", { children: label }),
+    options.map((opt) => /* @__PURE__ */ jsxs7("label", { className: clsx("radio", size), children: [
+      /* @__PURE__ */ jsx12(
         "input",
         {
           type: "radio",
@@ -1484,78 +1402,97 @@ var KdsRadioGroup = forwardRef12(
           onChange: () => onChange?.(opt.value)
         }
       ),
-      /* @__PURE__ */ jsx13("span", { children: opt.label })
+      /* @__PURE__ */ jsx12("span", { children: opt.label })
     ] }, opt.value))
   ] })
 );
 KdsRadioGroup.displayName = "KdsRadioGroup";
 
 // src/components/core/KdsSelect/KdsSelect.tsx
-import { forwardRef as forwardRef13 } from "react";
-import * as Select from "@radix-ui/react-select";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-var KdsSelectRoot = forwardRef13(
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var KdsSelect = forwardRef12(
   ({
-    value,
-    onValueChange,
-    placeholder,
     label,
-    error,
+    options,
+    placeholder,
     helperText,
-    disabled,
+    error,
+    prefixIcon,
     fullWidth = true,
-    children,
-    className
-  }, ref) => /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      ref,
-      className: clsx(
-        "kds-select",
-        error && "kds-select-error",
-        fullWidth && "kds-select-full",
-        className
-      ),
-      children: [
-        label && /* @__PURE__ */ jsx14("label", { className: "kds-select-label", children: label }),
-        /* @__PURE__ */ jsxs8(Select.Root, { value, onValueChange, disabled, children: [
-          /* @__PURE__ */ jsxs8(Select.Trigger, { className: "kds-select-trigger", children: [
-            /* @__PURE__ */ jsx14(Select.Value, { placeholder }),
-            /* @__PURE__ */ jsx14(Select.Icon, { className: "kds-select-icon", children: /* @__PURE__ */ jsx14("i", { className: "material-symbols-outlined", children: "expand_more" }) })
+    disabled,
+    required,
+    className,
+    id,
+    ...props
+  }, ref) => {
+    const fieldId = id || `kds-select-${label.toLowerCase().replace(/\s+/g, "-")}`;
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: clsx(
+          "field",
+          "label",
+          "border",
+          prefixIcon && "prefix",
+          error && "invalid",
+          fullWidth && "kds-w-full",
+          className
+        ),
+        children: [
+          prefixIcon && /* @__PURE__ */ jsx13("i", { className: "material-symbols-outlined", children: prefixIcon }),
+          /* @__PURE__ */ jsxs8(
+            "select",
+            {
+              ref,
+              id: fieldId,
+              disabled,
+              required,
+              ...props,
+              children: [
+                placeholder !== void 0 && /* @__PURE__ */ jsx13("option", { value: "", children: placeholder }),
+                options.map((opt) => /* @__PURE__ */ jsx13("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs8("label", { htmlFor: fieldId, children: [
+            label,
+            required && " *"
           ] }),
-          /* @__PURE__ */ jsx14(Select.Portal, { children: /* @__PURE__ */ jsx14(Select.Content, { className: "kds-select-content", position: "popper", sideOffset: 4, children: /* @__PURE__ */ jsx14(Select.Viewport, { className: "kds-select-viewport", children }) }) })
-        ] }),
-        helperText && /* @__PURE__ */ jsx14("span", { className: clsx("kds-select-helper", error && "kds-select-helper-error"), children: helperText })
-      ]
-    }
-  )
-);
-KdsSelectRoot.displayName = "KdsSelect";
-var KdsSelectItem = forwardRef13(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs8(Select.Item, { ref, className: clsx("kds-select-item", className), ...props, children: [
-    /* @__PURE__ */ jsx14(Select.ItemText, { children }),
-    /* @__PURE__ */ jsx14(Select.ItemIndicator, { className: "kds-select-item-indicator", children: /* @__PURE__ */ jsx14("i", { className: "material-symbols-outlined", children: "check" }) })
-  ] })
+          helperText && /* @__PURE__ */ jsx13("span", { className: "helper", children: helperText })
+        ]
+      }
+    );
+  }
 );
-KdsSelectItem.displayName = "KdsSelect.Item";
-var KdsSelect = Object.assign(KdsSelectRoot, {
-  Item: KdsSelectItem
-});
+KdsSelect.displayName = "KdsSelect";
 
 // src/components/core/KdsChip/KdsChip.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
-var KdsChip = forwardRef14(
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+var KdsChip = forwardRef13(
   ({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ jsxs9("span", { ref, className: clsx("kds-badge", color, className), ...props, children: [
-    icon && /* @__PURE__ */ jsx15("i", { className: "material-symbols-outlined", children: icon }),
-    children,
-    onDelete && /* @__PURE__ */ jsx15("button", { className: "kds-btn kds-btn-text kds-btn-sm", onClick: onDelete, "aria-label": "Eliminar", children: /* @__PURE__ */ jsx15("i", { className: "material-symbols-outlined", children: "close" }) })
+    icon && /* @__PURE__ */ jsx14("i", { className: "material-symbols-outlined", children: icon }),
+    /* @__PURE__ */ jsx14("span", { children }),
+    onDelete && /* @__PURE__ */ jsx14(
+      "button",
+      {
+        type: "button",
+        className: "kds-badge-close",
+        onClick: (e) => {
+          e.stopPropagation();
+          onDelete();
+        },
+        "aria-label": "Eliminar",
+        children: /* @__PURE__ */ jsx14("i", { className: "material-symbols-outlined", children: "close" })
+      }
+    )
   ] })
 );
 KdsChip.displayName = "KdsChip";
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 
 // src/components/core/hooks/useAutoHide.ts
 import { useState, useEffect, useRef } from "react";
@@ -1575,22 +1512,61 @@ function useAutoHide(durationMs, onHide) {
 }
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-var KdsSnackbar = forwardRef15(
-  ({ message, type, duration = 5e3, onClose, open = true, className, ...props }, ref) => {
-    const { visible } = useAutoHide(duration, onClose);
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var DEFAULT_ICONS2 = {
+  info: "info",
+  success: "check_circle",
+  error: "error"
+};
+var KdsSnackbar = forwardRef14(
+  ({
+    message,
+    type = "info",
+    duration = 5e3,
+    onClose,
+    open = true,
+    icon,
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const autoDismiss = duration > 0;
+    const { visible } = useAutoHide(autoDismiss ? duration : 0, onClose);
     if (!open || !visible) return null;
-    return /* @__PURE__ */ jsxs10("div", { ref, role: "status", className: clsx("snackbar", "active", type, className), ...props, children: [
-      /* @__PURE__ */ jsx16("span", { children: message }),
-      onClose && /* @__PURE__ */ jsx16("button", { onClick: onClose, "aria-label": "Cerrar", children: /* @__PURE__ */ jsx16("i", { className: "material-symbols-outlined", children: "close" }) })
-    ] });
+    const resolvedIcon = icon === false ? null : icon ?? DEFAULT_ICONS2[type];
+    const mergedStyle = autoDismiss ? { ...style, ["--kds-snackbar-duration"]: `${duration}ms` } : style ?? {};
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: clsx("snackbar", "active", type, className),
+        "data-auto-dismiss": autoDismiss ? "true" : void 0,
+        style: mergedStyle,
+        ...props,
+        children: [
+          resolvedIcon && /* @__PURE__ */ jsx15("i", { className: "material-symbols-outlined", children: resolvedIcon }),
+          /* @__PURE__ */ jsx15("span", { className: "max", children: message }),
+          onClose && /* @__PURE__ */ jsx15(
+            "button",
+            {
+              type: "button",
+              className: "kds-snackbar-close",
+              onClick: onClose,
+              "aria-label": "Cerrar",
+              children: /* @__PURE__ */ jsx15("i", { className: "material-symbols-outlined", children: "close" })
+            }
+          )
+        ]
+      }
+    );
   }
 );
 KdsSnackbar.displayName = "KdsSnackbar";
 
 // src/components/core/KdsTooltip/KdsTooltip.tsx
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function KdsTooltip({
   content,
   children,
@@ -1601,80 +1577,96 @@ function KdsTooltip({
   onOpenChange,
   delayDuration = 300
 }) {
-  return /* @__PURE__ */ jsx17(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ jsxs11(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
-    /* @__PURE__ */ jsx17(Tooltip.Trigger, { asChild: true, children }),
-    /* @__PURE__ */ jsx17(Tooltip.Portal, { children: /* @__PURE__ */ jsxs11(Tooltip.Content, { className: clsx("kds-tooltip", className), side: placement, sideOffset: 4, children: [
-      content,
-      /* @__PURE__ */ jsx17(Tooltip.Arrow, { className: "kds-tooltip-arrow" })
-    ] }) })
+  return /* @__PURE__ */ jsx16(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ jsxs11(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx16(Tooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx16(Tooltip.Portal, { children: /* @__PURE__ */ jsxs11(
+      Tooltip.Content,
+      {
+        className: clsx("kds-tooltip", className),
+        side: placement,
+        sideOffset: 6,
+        collisionPadding: 8,
+        children: [
+          content,
+          /* @__PURE__ */ jsx16(Tooltip.Arrow, { className: "kds-tooltip-arrow", width: 10, height: 5 })
+        ]
+      }
+    ) })
   ] }) });
 }
 
 // src/components/core/KdsAccordion/KdsAccordion.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
-var KdsAccordion = forwardRef16(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx18("details", { ref, className: clsx("kds-accordion", className), ...props, children })
+import { forwardRef as forwardRef15 } from "react";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+var KdsAccordion = forwardRef15(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx17("details", { ref, className: clsx("kds-accordion", className), ...props, children })
 );
 KdsAccordion.displayName = "KdsAccordion";
-var KdsAccordionSummary = forwardRef16(
+var KdsAccordionSummary = forwardRef15(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs12("summary", { ref, className: clsx("kds-accordion-summary", className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx18("i", { className: "material-symbols-outlined", children: "expand_more" })
+    /* @__PURE__ */ jsx17("i", { className: "material-symbols-outlined", children: "expand_more" })
   ] })
 );
 KdsAccordionSummary.displayName = "KdsAccordionSummary";
-var KdsAccordionDetails = forwardRef16(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx18("div", { ref, className: clsx("kds-accordion-details", className), ...props, children })
+var KdsAccordionDetails = forwardRef15(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx17("div", { ref, className: clsx("kds-accordion-details", className), ...props, children })
 );
 KdsAccordionDetails.displayName = "KdsAccordionDetails";
 
 // src/components/core/KdsDivider/KdsDivider.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var KdsDivider = forwardRef17(
-  ({ dashed, className, ...props }, ref) => /* @__PURE__ */ jsx19("hr", { ref, className: clsx(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var KdsDivider = forwardRef16(
+  ({ dashed, className, ...props }, ref) => /* @__PURE__ */ jsx18("hr", { ref, className: clsx(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
 );
 KdsDivider.displayName = "KdsDivider";
 
 // src/components/core/KdsSectionNote/KdsSectionNote.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
-var KdsSectionNote = forwardRef18(
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var KdsSectionNote = forwardRef17(
   ({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ jsxs13("p", { ref, className: clsx("kds-section-note", className), ...props, children: [
-    /* @__PURE__ */ jsx20("i", { className: "material-symbols-outlined", children: icon }),
-    /* @__PURE__ */ jsx20("span", { children })
+    /* @__PURE__ */ jsx19("i", { className: "material-symbols-outlined", children: icon }),
+    /* @__PURE__ */ jsx19("span", { children })
   ] })
 );
 KdsSectionNote.displayName = "KdsSectionNote";
 
 // src/components/core/KdsStatusBlock/KdsStatusBlock.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
-var KdsStatusBlock = forwardRef19(
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+var KdsStatusBlock = forwardRef18(
   ({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ jsxs14("div", { ref, className: clsx("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
-    /* @__PURE__ */ jsx21("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ jsx21("i", { className: "material-symbols-outlined", children: icon }) }),
+    /* @__PURE__ */ jsx20("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ jsx20("i", { className: "material-symbols-outlined", children: icon }) }),
     /* @__PURE__ */ jsxs14("div", { children: [
-      /* @__PURE__ */ jsx21("h2", { className: "kds-status-block-title", children: title }),
-      description && /* @__PURE__ */ jsx21("p", { className: "kds-status-block-description", children: description })
+      /* @__PURE__ */ jsx20("h2", { className: "kds-status-block-title", children: title }),
+      description && /* @__PURE__ */ jsx20("p", { className: "kds-status-block-description", children: description })
     ] })
   ] })
 );
 KdsStatusBlock.displayName = "KdsStatusBlock";
 
 // src/components/core/KdsStepper/KdsStepper.tsx
-import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
-var KdsStepper = forwardRef20(
-  ({ steps, current, className, ...props }, ref) => /* @__PURE__ */ jsx22("div", { ref, className: clsx("kds-stepper", className), "data-steps": steps, "data-current": current, ...props, children: Array.from({ length: steps }, (_, i) => /* @__PURE__ */ jsxs15("div", { className: clsx("kds-step", i < current && "completed", i === current && "current"), children: [
-    /* @__PURE__ */ jsx22("div", { className: "kds-step-indicator", children: i < current ? "\u2713" : i + 1 }),
-    i < steps - 1 && /* @__PURE__ */ jsx22("div", { className: "kds-step-line" })
-  ] }, i)) })
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var KdsStepper = forwardRef19(
+  ({ steps, current, className, ...props }, ref) => /* @__PURE__ */ jsx21("div", { ref, className: clsx("kds-stepper", className), ...props, children: steps.map((label, i) => /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      className: clsx("kds-step", i < current && "completed", i === current && "current"),
+      children: [
+        /* @__PURE__ */ jsx21("div", { className: "kds-step-indicator" }),
+        /* @__PURE__ */ jsx21("div", { className: "kds-step-label", children: label })
+      ]
+    },
+    `${i}-${label}`
+  )) })
 );
 KdsStepper.displayName = "KdsStepper";
 
 // src/components/core/KdsCopyRow/KdsCopyRow.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 
 // src/components/core/hooks/useCopyToClipboard.ts
 import { useState as useState2, useCallback as useCallback2 } from "react";
@@ -1695,49 +1687,194 @@ function useCopyToClipboard(resetMs = 1200) {
 }
 
 // src/components/core/KdsCopyRow/KdsCopyRow.tsx
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
-var KdsCopyRow = forwardRef21(
-  ({ label, value, className, ...props }, ref) => {
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var KdsCopyRow = forwardRef20(
+  ({ label, value, copiedText = "Copiado", className, ...props }, ref) => {
     const { copied, copy } = useCopyToClipboard();
-    return /* @__PURE__ */ jsxs16("div", { ref, className: clsx("kds-copy-row", copied && "copied", className), ...props, children: [
-      /* @__PURE__ */ jsx23("span", { className: "kds-copy-row-label", children: label }),
-      /* @__PURE__ */ jsx23("span", { className: "kds-copy-row-value", children: value }),
-      /* @__PURE__ */ jsx23("button", { className: "kds-copy-row-btn", onClick: () => copy(value), "aria-label": `Copiar ${label}`, children: /* @__PURE__ */ jsx23("i", { className: "material-symbols-outlined", children: copied ? "check" : "content_copy" }) })
-    ] });
+    return /* @__PURE__ */ jsxs16(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: clsx("kds-copy-row", copied && "copied", className),
+        "data-copy": value,
+        onClick: () => copy(value),
+        "aria-label": `Copiar ${label}: ${value}`,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx22("i", { className: "material-symbols-outlined", "aria-hidden": "true", children: "content_copy" }),
+          /* @__PURE__ */ jsxs16("div", { children: [
+            /* @__PURE__ */ jsx22("span", { className: "kds-copy-row-label", children: label }),
+            /* @__PURE__ */ jsx22("span", { className: "kds-copy-row-value", children: value })
+          ] }),
+          /* @__PURE__ */ jsxs16("span", { className: "kds-copy-toast", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx22("i", { className: "material-symbols-outlined", children: "check_circle" }),
+            " ",
+            copiedText
+          ] })
+        ]
+      }
+    );
   }
 );
 KdsCopyRow.displayName = "KdsCopyRow";
 
 // src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
-import { forwardRef as forwardRef22 } from "react";
-import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-var KdsCopyableTable = forwardRef22(
-  ({ rows, className, ...props }, ref) => {
-    const { copied, copy } = useCopyToClipboard();
-    const handleCopyAll = () => {
+import { forwardRef as forwardRef21, useState as useState3, useRef as useRef2, useCallback as useCallback3 } from "react";
+import { Fragment as Fragment2, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+async function copyToClipboard(text) {
+  try {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+  }
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  try {
+    document.execCommand("copy");
+    return true;
+  } catch {
+    return false;
+  } finally {
+    document.body.removeChild(ta);
+  }
+}
+var TRANSITION_MS = 300;
+var KdsCopyableTable = forwardRef21(
+  ({
+    rows,
+    copyAllLabel = "Copiar todos los datos",
+    copiedAllLabel = "Datos copiados",
+    showCopyAll = true,
+    className,
+    ...props
+  }, ref) => {
+    const copiedTimers = useRef2(/* @__PURE__ */ new Map());
+    const settlingTimers = useRef2(/* @__PURE__ */ new Map());
+    const [copiedRows, setCopiedRows] = useState3(/* @__PURE__ */ new Set());
+    const [settlingRows, setSettlingRows] = useState3(/* @__PURE__ */ new Set());
+    const [allCopied, setAllCopied] = useState3(false);
+    const markCopied = useCallback3((indexes, duration = 1500) => {
+      setCopiedRows((prev) => {
+        const next = new Set(prev);
+        indexes.forEach((i) => next.add(i));
+        return next;
+      });
+      indexes.forEach((i) => {
+        const st = settlingTimers.current.get(i);
+        if (st) {
+          clearTimeout(st);
+          settlingTimers.current.delete(i);
+        }
+      });
+      setSettlingRows((prev) => {
+        const next = new Set(prev);
+        indexes.forEach((i) => next.delete(i));
+        return next;
+      });
+      indexes.forEach((i) => {
+        const existing = copiedTimers.current.get(i);
+        if (existing) clearTimeout(existing);
+        const t = setTimeout(() => {
+          setCopiedRows((prev) => {
+            const next = new Set(prev);
+            next.delete(i);
+            return next;
+          });
+          setSettlingRows((prev) => {
+            const next = new Set(prev);
+            next.add(i);
+            return next;
+          });
+          copiedTimers.current.delete(i);
+          const settlingT = setTimeout(() => {
+            setSettlingRows((prev) => {
+              const next = new Set(prev);
+              next.delete(i);
+              return next;
+            });
+            settlingTimers.current.delete(i);
+          }, TRANSITION_MS);
+          settlingTimers.current.set(i, settlingT);
+        }, duration);
+        copiedTimers.current.set(i, t);
+      });
+    }, []);
+    const handleRowCopy = async (row, index) => {
+      const ok = await copyToClipboard(row.copy ?? row.value);
+      if (ok) markCopied([index]);
+    };
+    const handleCopyAll = async () => {
       const text = rows.map((r) => `${r.label}: ${r.value}`).join("\n");
-      copy(text);
+      const ok = await copyToClipboard(text);
+      if (ok) {
+        markCopied(rows.map((_, i) => i));
+        setAllCopied(true);
+        setTimeout(() => setAllCopied(false), 2e3);
+      }
     };
     return /* @__PURE__ */ jsxs17(Fragment2, { children: [
-      /* @__PURE__ */ jsx24("div", { ref, className: clsx("kds-copyable-table", className), ...props, children: rows.map((row) => /* @__PURE__ */ jsxs17("div", { className: "kds-copyable-table-row", children: [
-        /* @__PURE__ */ jsx24("span", { className: "kds-copyable-table-label", children: row.label }),
-        /* @__PURE__ */ jsx24("span", { className: "kds-copyable-table-value", children: row.value })
-      ] }, row.label)) }),
-      /* @__PURE__ */ jsxs17("button", { className: `kds-btn kds-btn-outlined kds-btn-block kds-copy-all-btn${copied ? " copied" : ""}`, onClick: handleCopyAll, "aria-label": "Copiar todo", children: [
-        /* @__PURE__ */ jsx24("span", { className: "kds-icon", children: /* @__PURE__ */ jsx24("i", { className: "material-symbols-outlined", children: copied ? "check" : "content_copy" }) }),
-        /* @__PURE__ */ jsx24("span", { children: copied ? "Copiado" : "Copiar todos los datos" })
-      ] })
+      /* @__PURE__ */ jsx23("div", { ref, className: clsx("kds-copyable-table", className), ...props, children: rows.map((row, i) => /* @__PURE__ */ jsxs17(
+        "div",
+        {
+          className: clsx(
+            "kds-copyable-table-row",
+            copiedRows.has(i) && "copied",
+            settlingRows.has(i) && "settling"
+          ),
+          role: "button",
+          tabIndex: 0,
+          onClick: () => handleRowCopy(row, i),
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleRowCopy(row, i);
+            }
+          },
+          "aria-label": `Copiar ${row.label}: ${row.value}`,
+          children: [
+            /* @__PURE__ */ jsx23("span", { className: "kds-key", children: row.label }),
+            /* @__PURE__ */ jsx23("span", { className: "kds-value", children: row.value })
+          ]
+        },
+        `${row.label}-${i}`
+      )) }),
+      showCopyAll && /* @__PURE__ */ jsxs17(
+        "button",
+        {
+          type: "button",
+          className: clsx(
+            "kds-btn",
+            "kds-btn-outlined",
+            "kds-btn-block",
+            "kds-copy-all-btn",
+            allCopied && "copied"
+          ),
+          onClick: handleCopyAll,
+          "aria-label": allCopied ? copiedAllLabel : copyAllLabel,
+          children: [
+            /* @__PURE__ */ jsx23("span", { className: "kds-icon", children: /* @__PURE__ */ jsx23("i", { className: "material-symbols-outlined", children: allCopied ? "check" : "content_copy" }) }),
+            /* @__PURE__ */ jsx23("span", { children: allCopied ? copiedAllLabel : copyAllLabel })
+          ]
+        }
+      )
     ] });
   }
 );
 KdsCopyableTable.displayName = "KdsCopyableTable";
 
 // src/components/core/KdsExpandPanel/KdsExpandPanel.tsx
-import { forwardRef as forwardRef23, useState as useState3 } from "react";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
-var KdsExpandPanel = forwardRef23(
+import { forwardRef as forwardRef22, useState as useState4 } from "react";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var KdsExpandPanel = forwardRef22(
   ({ label, defaultExpanded = false, children, className, ...props }, ref) => {
-    const [expanded, setExpanded] = useState3(defaultExpanded);
+    const [expanded, setExpanded] = useState4(defaultExpanded);
     return /* @__PURE__ */ jsxs18("div", { ref, className, ...props, children: [
       /* @__PURE__ */ jsxs18(
         "button",
@@ -1746,22 +1883,22 @@ var KdsExpandPanel = forwardRef23(
           onClick: () => setExpanded((v) => !v),
           "aria-expanded": expanded,
           children: [
-            /* @__PURE__ */ jsx25("span", { children: label }),
-            /* @__PURE__ */ jsx25("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
+            /* @__PURE__ */ jsx24("span", { children: label }),
+            /* @__PURE__ */ jsx24("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx25("div", { className: clsx("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
+      /* @__PURE__ */ jsx24("div", { className: clsx("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
     ] });
   }
 );
 KdsExpandPanel.displayName = "KdsExpandPanel";
 
 // src/components/core/KdsCountdown/KdsCountdown.tsx
-import { forwardRef as forwardRef24, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { forwardRef as forwardRef23, useEffect as useEffect3, useRef as useRef3 } from "react";
 
 // src/components/core/hooks/useCountdown.ts
-import { useState as useState4, useEffect as useEffect2 } from "react";
+import { useState as useState5, useEffect as useEffect2 } from "react";
 function calcRemaining(deadline) {
   const diff = Math.max(0, new Date(deadline).getTime() - Date.now());
   const totalSeconds = Math.floor(diff / 1e3);
@@ -1774,7 +1911,7 @@ function calcRemaining(deadline) {
   };
 }
 function useCountdown(deadline) {
-  const [state, setState] = useState4(() => calcRemaining(deadline));
+  const [state, setState] = useState5(() => calcRemaining(deadline));
   useEffect2(() => {
     const tick = () => setState(calcRemaining(deadline));
     const id = setInterval(tick, 1e3);
@@ -1784,11 +1921,11 @@ function useCountdown(deadline) {
 }
 
 // src/components/core/KdsCountdown/KdsCountdown.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
-var KdsCountdown = forwardRef24(
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+var KdsCountdown = forwardRef23(
   ({ deadline, label, onExpire, className, ...props }, ref) => {
     const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
-    const onExpireRef = useRef2(onExpire);
+    const onExpireRef = useRef3(onExpire);
     onExpireRef.current = onExpire;
     useEffect3(() => {
       if (expired) {
@@ -1800,7 +1937,7 @@ var KdsCountdown = forwardRef24(
     }
     const pad = (n) => String(n).padStart(2, "0");
     return /* @__PURE__ */ jsxs19("div", { ref, className: clsx("kds-countdown", urgent && "urgent", className), ...props, children: [
-      label && /* @__PURE__ */ jsx26("span", { className: "kds-countdown-label", children: label }),
+      label && /* @__PURE__ */ jsx25("span", { className: "kds-countdown-label", children: label }),
       /* @__PURE__ */ jsxs19("span", { className: "kds-countdown-value", children: [
         pad(hours),
         ":",
@@ -1814,17 +1951,17 @@ var KdsCountdown = forwardRef24(
 KdsCountdown.displayName = "KdsCountdown";
 
 // src/components/core/KdsSegmentedTabs/KdsSegmentedTabs.tsx
-import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var KdsSegmentedTabs = forwardRef25(
-  (props, ref) => /* @__PURE__ */ jsx27(KdsTabs, { ref, variant: "segmented", ...props })
+import { forwardRef as forwardRef24 } from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var KdsSegmentedTabs = forwardRef24(
+  (props, ref) => /* @__PURE__ */ jsx26(KdsTabs, { ref, ...props })
 );
 KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
 
 // src/components/domain/KdsBankRow/KdsBankRow.tsx
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
-var KdsBankRow = forwardRef26(
+import { forwardRef as forwardRef25 } from "react";
+import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+var KdsBankRow = forwardRef25(
   ({ name, logoUrl, selected, className, ...props }, ref) => /* @__PURE__ */ jsxs20(
     "button",
     {
@@ -1833,9 +1970,9 @@ var KdsBankRow = forwardRef26(
       className: clsx("kds-bank-row", selected && "selected", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx28("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ jsx28("img", { src: logoUrl, alt: name }) : /* @__PURE__ */ jsx28("span", { className: "initials", children: name.charAt(0) }) }),
-        /* @__PURE__ */ jsx28("span", { className: "kds-bank-row-name", children: name }),
-        /* @__PURE__ */ jsx28("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
+        /* @__PURE__ */ jsx27("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ jsx27("img", { src: logoUrl, alt: name }) : /* @__PURE__ */ jsx27("span", { className: "initials", children: name.charAt(0) }) }),
+        /* @__PURE__ */ jsx27("span", { className: "kds-bank-row-name", children: name }),
+        /* @__PURE__ */ jsx27("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
       ]
     }
   )
@@ -1843,32 +1980,32 @@ var KdsBankRow = forwardRef26(
 KdsBankRow.displayName = "KdsBankRow";
 
 // src/components/domain/KdsBankList/KdsBankList.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var KdsBankList = forwardRef27(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx29("div", { ref, className: clsx("kds-bank-list", className), role: "list", ...props, children })
+import { forwardRef as forwardRef26 } from "react";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var KdsBankList = forwardRef26(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx28("div", { ref, className: clsx("kds-bank-list", className), role: "list", ...props, children })
 );
 KdsBankList.displayName = "KdsBankList";
 
 // src/components/domain/KdsBankModal/KdsBankModal.tsx
-import { forwardRef as forwardRef28, useState as useState5 } from "react";
-import * as Dialog2 from "@radix-ui/react-dialog";
-import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
-var KdsBankModal = forwardRef28(
+import { forwardRef as forwardRef27, useState as useState6 } from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+var KdsBankModal = forwardRef27(
   ({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
-    const [query, setQuery] = useState5("");
+    const [query, setQuery] = useState6("");
     const handleSearch = (value) => {
       setQuery(value);
       onSearch?.(value);
     };
-    return /* @__PURE__ */ jsx30(Dialog2.Root, { open, onOpenChange: (o) => {
+    return /* @__PURE__ */ jsx29(Dialog.Root, { open, onOpenChange: (o) => {
       if (!o) onClose();
-    }, children: /* @__PURE__ */ jsx30(Dialog2.Portal, { container, children: /* @__PURE__ */ jsx30(Dialog2.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ jsxs21(Dialog2.Content, { ref, className: clsx("kds-bank-modal", className), children: [
+    }, children: /* @__PURE__ */ jsx29(Dialog.Portal, { container, children: /* @__PURE__ */ jsx29(Dialog.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ jsxs21(Dialog.Content, { ref, className: clsx("kds-bank-modal", className), children: [
       /* @__PURE__ */ jsxs21("div", { className: "kds-bank-modal-header", children: [
-        /* @__PURE__ */ jsx30(Dialog2.Title, { asChild: true, children: /* @__PURE__ */ jsx30("h3", { children: title }) }),
-        /* @__PURE__ */ jsx30(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx30("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ jsx30("i", { className: "material-symbols-outlined", children: "close" }) }) })
+        /* @__PURE__ */ jsx29(Dialog.Title, { asChild: true, children: /* @__PURE__ */ jsx29("h3", { children: title }) }),
+        /* @__PURE__ */ jsx29(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx29("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ jsx29("i", { className: "material-symbols-outlined", children: "close" }) }) })
       ] }),
-      /* @__PURE__ */ jsx30("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx29("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ jsx29(
         "input",
         {
           type: "text",
@@ -1877,32 +2014,32 @@ var KdsBankModal = forwardRef28(
           onChange: (e) => handleSearch(e.target.value)
         }
       ) }),
-      /* @__PURE__ */ jsx30("div", { className: "kds-bank-modal-body", children })
+      /* @__PURE__ */ jsx29("div", { className: "kds-bank-modal-body", children })
     ] }) }) }) });
   }
 );
 KdsBankModal.displayName = "KdsBankModal";
 
 // src/components/domain/KdsQrRow/KdsQrRow.tsx
-import { forwardRef as forwardRef29 } from "react";
-import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
-var KdsQrRow = forwardRef29(
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx30, jsxs as jsxs22 } from "react/jsx-runtime";
+var KdsQrRow = forwardRef28(
   ({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ jsxs22("button", { ref, type: "button", className: clsx("kds-qr-row", className), ...props, children: [
-    /* @__PURE__ */ jsx31("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsx31("i", { className: "material-symbols-outlined", children: icon }) }),
+    /* @__PURE__ */ jsx30("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsx30("i", { className: "material-symbols-outlined", children: icon }) }),
     /* @__PURE__ */ jsxs22("span", { className: "kds-qr-text", children: [
-      /* @__PURE__ */ jsx31("span", { className: "title", children: name }),
-      description && /* @__PURE__ */ jsx31("span", { className: "sub", children: description })
+      /* @__PURE__ */ jsx30("span", { className: "kds-qr-title", children: name }),
+      description && /* @__PURE__ */ jsx30("span", { className: "kds-qr-subtitle", children: description })
     ] }),
-    badge && /* @__PURE__ */ jsx31("span", { className: "kds-qr-badge", children: badge }),
-    /* @__PURE__ */ jsx31("i", { className: "material-symbols-outlined", children: "chevron_right" })
+    badge && /* @__PURE__ */ jsx30("span", { className: "kds-qr-badge", children: badge }),
+    /* @__PURE__ */ jsx30("i", { className: "material-symbols-outlined", children: "chevron_right" })
   ] })
 );
 KdsQrRow.displayName = "KdsQrRow";
 
 // src/components/domain/KdsCardSelector/KdsCardSelector.tsx
-import { forwardRef as forwardRef30 } from "react";
-import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
-var KdsCardSelector = forwardRef30(
+import { forwardRef as forwardRef29 } from "react";
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+var KdsCardSelector = forwardRef29(
   ({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ jsxs23(
     "button",
     {
@@ -1911,9 +2048,9 @@ var KdsCardSelector = forwardRef30(
       className: clsx("kds-card-selector", selected && "selected", className),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx32("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ jsx32("i", { className: "material-symbols-outlined", children: icon }) }),
-        /* @__PURE__ */ jsx32("span", { className: "kds-card-selector-title", children: title }),
-        description && /* @__PURE__ */ jsx32("span", { className: "kds-card-selector-description", children: description })
+        icon && /* @__PURE__ */ jsx31("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ jsx31("i", { className: "material-symbols-outlined", children: icon }) }),
+        /* @__PURE__ */ jsx31("span", { className: "kds-card-selector-title", children: title }),
+        description && /* @__PURE__ */ jsx31("span", { className: "kds-card-selector-description", children: description })
       ]
     }
   )
@@ -1921,9 +2058,9 @@ var KdsCardSelector = forwardRef30(
 KdsCardSelector.displayName = "KdsCardSelector";
 
 // src/components/domain/KdsCardPlan/KdsCardPlan.tsx
-import { forwardRef as forwardRef31 } from "react";
-import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
-var KdsCardPlan = forwardRef31(
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
+var KdsCardPlan = forwardRef30(
   ({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ jsxs24(
     "div",
     {
@@ -1931,16 +2068,16 @@ var KdsCardPlan = forwardRef31(
       className: clsx("kds-card-plan", recommended && "recommended", className),
       ...props,
       children: [
-        badgeText && /* @__PURE__ */ jsx33("span", { className: "kds-card-plan-badge", children: badgeText }),
-        /* @__PURE__ */ jsx33("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ jsx33("h3", { children: title }) }),
+        /* @__PURE__ */ jsx32("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ jsx32("h3", { children: title }) }),
         /* @__PURE__ */ jsxs24("div", { className: "kds-card-plan-price", children: [
-          /* @__PURE__ */ jsx33("span", { children: price }),
-          period && /* @__PURE__ */ jsxs24("span", { children: [
+          /* @__PURE__ */ jsx32("span", { className: "kds-price", children: price }),
+          period && /* @__PURE__ */ jsxs24("span", { className: "kds-price-period", children: [
             "/",
             period
           ] })
         ] }),
-        features && features.length > 0 && /* @__PURE__ */ jsx33("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ jsx33("li", { children: f }, i)) }),
+        badgeText && /* @__PURE__ */ jsx32("span", { className: "kds-card-plan-badge", children: badgeText }),
+        features && features.length > 0 && /* @__PURE__ */ jsx32("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ jsx32("li", { children: f }, i)) }),
         action
       ]
     }
@@ -1949,50 +2086,225 @@ var KdsCardPlan = forwardRef31(
 KdsCardPlan.displayName = "KdsCardPlan";
 
 // src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
-import { forwardRef as forwardRef32 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
-var KdsInvoiceSticky = forwardRef32(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx34("div", { ref, className: clsx("kds-card-elevated", "kds-invoice-sticky", className), ...props, children })
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var KdsInvoiceSticky = forwardRef31(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx33("div", { ref, className: clsx("kds-card-elevated", "kds-invoice-sticky", className), ...props, children })
 );
 KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
 
 // src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
-import { forwardRef as forwardRef33 } from "react";
-import * as Dialog3 from "@radix-ui/react-dialog";
-import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
-var KdsBottomSheet = forwardRef33(
-  ({ open, onClose, title, children, actions, className, container }, ref) => /* @__PURE__ */ jsx35(Dialog3.Root, { open, onOpenChange: (o) => {
-    if (!o) onClose();
-  }, children: /* @__PURE__ */ jsx35(Dialog3.Portal, { container, children: /* @__PURE__ */ jsx35(Dialog3.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ jsxs25(Dialog3.Content, { ref, className: clsx("kds-bottom-sheet", className), children: [
-    /* @__PURE__ */ jsx35("div", { className: "kds-bottom-sheet-grabber" }),
-    title && /* @__PURE__ */ jsx35(Dialog3.Title, { className: "kds-bottom-sheet-title", children: title }),
-    /* @__PURE__ */ jsx35("div", { className: "kds-bottom-sheet-body", children }),
-    actions && /* @__PURE__ */ jsx35("div", { className: "kds-bottom-sheet-actions", children: actions })
-  ] }) }) }) })
+import { forwardRef as forwardRef32 } from "react";
+import * as Dialog2 from "@radix-ui/react-dialog";
+import { jsx as jsx34, jsxs as jsxs25 } from "react/jsx-runtime";
+var KdsBottomSheet = forwardRef32(
+  ({
+    open,
+    onClose,
+    title,
+    description,
+    children,
+    actions,
+    showGrabber = true,
+    showCloseButton = false,
+    container,
+    className
+  }, ref) => /* @__PURE__ */ jsx34(
+    Dialog2.Root,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (!o) onClose();
+      },
+      children: /* @__PURE__ */ jsx34(Dialog2.Portal, { container, children: /* @__PURE__ */ jsx34(Dialog2.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ jsxs25(
+        Dialog2.Content,
+        {
+          ref,
+          className: clsx("kds-bottom-sheet", className),
+          onPointerDownOutside: (e) => {
+            const target = e.target;
+            if (target.closest(".kds-bottom-sheet")) e.preventDefault();
+          },
+          children: [
+            showGrabber && /* @__PURE__ */ jsx34("div", { className: "kds-bottom-sheet-grabber", "aria-hidden": "true" }),
+            showCloseButton && /* @__PURE__ */ jsx34(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx34(
+              "button",
+              {
+                type: "button",
+                className: "kds-bottom-sheet-close",
+                "aria-label": "Cerrar",
+                children: /* @__PURE__ */ jsx34("i", { className: "material-symbols-outlined", children: "close" })
+              }
+            ) }),
+            title && /* @__PURE__ */ jsx34(Dialog2.Title, { className: "kds-bottom-sheet-title", children: title }),
+            description && /* @__PURE__ */ jsx34(Dialog2.Description, { className: "kds-bottom-sheet-description", children: description }),
+            /* @__PURE__ */ jsx34("div", { className: "kds-bottom-sheet-body", children }),
+            actions && /* @__PURE__ */ jsx34("div", { className: "kds-bottom-sheet-actions", children: actions })
+          ]
+        }
+      ) }) })
+    }
+  )
 );
 KdsBottomSheet.displayName = "KdsBottomSheet";
 
 // src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
-import { forwardRef as forwardRef34 } from "react";
-import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
-var KdsSecureFooter = forwardRef34(
+import { forwardRef as forwardRef33 } from "react";
+import { jsx as jsx35, jsxs as jsxs26 } from "react/jsx-runtime";
+var KdsSecureFooter = forwardRef33(
   ({ variant = "default", children, className, ...props }, ref) => /* @__PURE__ */ jsxs26("footer", { ref, className: clsx("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
-    /* @__PURE__ */ jsx36("i", { className: "material-symbols-outlined", children: "lock" }),
-    children || /* @__PURE__ */ jsx36("span", { children: "Pago seguro con Khipu" })
+    /* @__PURE__ */ jsx35("i", { className: "material-symbols-outlined", children: "lock" }),
+    children || /* @__PURE__ */ jsx35("span", { children: "Pago seguro con Khipu" })
   ] })
 );
 KdsSecureFooter.displayName = "KdsSecureFooter";
 
 // src/components/domain/KdsRecapList/KdsRecapList.tsx
-import { forwardRef as forwardRef35 } from "react";
-import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
-var KdsRecapList = forwardRef35(
-  ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx37("ul", { ref, className: clsx("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxs27("li", { children: [
-    /* @__PURE__ */ jsx37("span", { className: "k", children: item.label }),
-    /* @__PURE__ */ jsx37("span", { className: clsx("v", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
+import { forwardRef as forwardRef34 } from "react";
+import { jsx as jsx36, jsxs as jsxs27 } from "react/jsx-runtime";
+var KdsRecapList = forwardRef34(
+  ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx36("ul", { ref, className: clsx("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxs27("li", { children: [
+    /* @__PURE__ */ jsx36("span", { className: "kds-key", children: item.label }),
+    /* @__PURE__ */ jsx36("span", { className: clsx("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
   ] }, i)) })
 );
 KdsRecapList.displayName = "KdsRecapList";
+
+// src/components/domain/KdsMontoRow/KdsMontoRow.tsx
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx37, jsxs as jsxs28 } from "react/jsx-runtime";
+var KdsMontoRow = forwardRef35(
+  ({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ jsxs28("div", { ref, className: clsx("kds-monto-row", className), ...props, children: [
+    /* @__PURE__ */ jsxs28("div", { children: [
+      /* @__PURE__ */ jsx37("div", { className: "kds-monto-row-title", children: title }),
+      deadline && /* @__PURE__ */ jsx37("div", { className: "kds-monto-row-deadline", children: deadline })
+    ] }),
+    /* @__PURE__ */ jsx37("div", { className: "kds-monto-row-value", children: value })
+  ] })
+);
+KdsMontoRow.displayName = "KdsMontoRow";
+
+// src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
+import { forwardRef as forwardRef36 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var KdsMerchantTile = forwardRef36(
+  ({ name, logoUrl, initials, compact, className, ...props }, ref) => {
+    const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
+    return /* @__PURE__ */ jsx38(
+      "div",
+      {
+        ref,
+        className: clsx("kds-merchant-tile", logoUrl && "logo", compact && "compact", className),
+        "aria-label": name,
+        ...props,
+        children: logoUrl ? /* @__PURE__ */ jsx38("img", { src: logoUrl, alt: name }) : displayInitials
+      }
+    );
+  }
+);
+KdsMerchantTile.displayName = "KdsMerchantTile";
+
+// src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
+import { forwardRef as forwardRef37 } from "react";
+import { jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
+var KdsPaymentTotal = forwardRef37(
+  ({
+    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__ */ jsxs29(
+      "div",
+      {
+        ref,
+        className: clsx(
+          "kds-payment-total",
+          isEmail && "kds-payment-total--email",
+          isInfoTone && "kds-payment-total--tone-info",
+          centered && "kds-payment-total--centered",
+          className
+        ),
+        ...props,
+        children: [
+          !isEmail && title != null && /* @__PURE__ */ jsx39("h5", { className: "kds-payment-total-title", children: title }),
+          !isEmail && titleMobile != null && /* @__PURE__ */ jsx39("h5", { className: "kds-payment-total-title-mobile", children: titleMobile }),
+          label != null && /* @__PURE__ */ jsx39("h6", { className: "kds-payment-label", children: label }),
+          /* @__PURE__ */ jsxs29("h5", { className: "kds-payment-amount", children: [
+            currency,
+            " ",
+            integer,
+            fraction !== null && /* @__PURE__ */ jsx39("sup", { className: "kds-payment-total-decimal-sup", children: fraction })
+          ] })
+        ]
+      }
+    );
+  }
+);
+KdsPaymentTotal.displayName = "KdsPaymentTotal";
+function formatAmount(amount, decimals, locale) {
+  const showDecimals = typeof decimals === "number" && decimals > 0;
+  if (typeof amount === "number") {
+    if (showDecimals) {
+      const fixed = amount.toFixed(decimals);
+      const [int, frac] = fixed.split(".");
+      const formattedInt2 = new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(
+        Number(int)
+      );
+      return { integer: formattedInt2, fraction: frac ?? null };
+    }
+    const formattedInt = new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(
+      Math.trunc(amount)
+    );
+    return { integer: formattedInt, fraction: null };
+  }
+  const str = amount.trim();
+  const dotIdx = str.indexOf(".");
+  if (dotIdx === -1 || !showDecimals) {
+    return { integer: str, fraction: null };
+  }
+  return {
+    integer: str.slice(0, dotIdx),
+    fraction: str.slice(dotIdx + 1)
+  };
+}
+
+// src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
+import { forwardRef as forwardRef38 } from "react";
+import { jsx as jsx40, jsxs as jsxs30 } from "react/jsx-runtime";
+var KdsBillAttachment = forwardRef38(
+  ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ jsxs30(
+    "a",
+    {
+      ref,
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: clsx("kds-bill-attachment", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx40("i", { className: "material-symbols-outlined", children: icon }),
+        /* @__PURE__ */ jsx40("span", { children: filename })
+      ]
+    }
+  )
+);
+KdsBillAttachment.displayName = "KdsBillAttachment";
+var KdsBillAttachments = forwardRef38(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx40("div", { ref, className: clsx("kds-bill-attachments", className), ...props, children })
+);
+KdsBillAttachments.displayName = "KdsBillAttachments";
 export {
   KdsAccordion,
   KdsAccordionDetails,
@@ -2001,6 +2313,8 @@ export {
   KdsBankList,
   KdsBankModal,
   KdsBankRow,
+  KdsBillAttachment,
+  KdsBillAttachments,
   KdsBottomSheet,
   KdsButton,
   KdsCard,
@@ -2018,17 +2332,15 @@ export {
   KdsExpandPanel,
   KdsInvoiceSticky,
   KdsLinearProgress,
-  KdsLogoHeader,
-  KdsLogoHeaderCloseButton,
-  KdsLogoHeaderCode,
-  KdsLogoHeaderLogo,
-  KdsLogoHeaderSeparator,
-  KdsModal,
+  KdsMerchantTile,
+  KdsMontoRow,
+  KdsPaymentTotal,
   KdsQrRow,
   KdsRadioGroup,
   KdsRecapList,
   KdsSectionNote,
   KdsSecureFooter,
+  KdsSecureLoader,
   KdsSegmentedTabs,
   KdsSelect,
   KdsSnackbar,