@khipu/design-system 0.2.0-alpha.3 → 0.2.0-alpha.30

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default from 'react';
-import * as Select from '@radix-ui/react-select';
 export { clsx } from 'clsx';
 
 interface KdsThemeProviderProps {
@@ -239,6 +238,7 @@ declare const colors: {
         main: string;
         light: string;
         dark: string;
+        warm: string;
         container: string;
         contrastText: string;
     };
@@ -255,6 +255,7 @@ declare const colors: {
         main: string;
         light: string;
         dark: string;
+        blue: string;
         container: string;
         contrastText: string;
     };
@@ -376,6 +377,7 @@ declare const fontSizes: {
     readonly '2xl': "1.5rem";
     readonly '3xl': "1.875rem";
     readonly '4xl': "2.25rem";
+    readonly decimalSup: "0.5em";
 };
 declare const lineHeights: {
     readonly tight: 1.2;
@@ -478,8 +480,8 @@ declare const typography: {
     readonly button: {
         readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
         readonly fontWeight: 500;
-        readonly fontSize: "0.9375rem";
-        readonly lineHeight: "26px";
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "1.5";
         readonly letterSpacing: "0.46px";
         readonly textTransform: "uppercase";
     };
@@ -558,10 +560,10 @@ declare const semanticSpacing: {
         readonly padding: "16px 12px";
     };
     readonly button: {
-        readonly paddingY: "8px";
-        readonly paddingX: "22px";
-        readonly padding: "8px 22px";
-        readonly minHeight: "50px";
+        readonly paddingY: "0";
+        readonly paddingX: "16px";
+        readonly padding: "0 16px";
+        readonly minHeight: "44px";
         readonly iconSize: "20px";
     };
     readonly sectionGap: "32px";
@@ -608,7 +610,7 @@ declare const borderRadius: {
     readonly '2xl': "20px";
     readonly '3xl': "24px";
     readonly full: "9999px";
-    readonly button: "4px";
+    readonly button: "10px";
     readonly input: "4px";
     readonly card: "14px";
     readonly modal: "20px";
@@ -694,6 +696,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                warm: string;
                 container: string;
                 contrastText: string;
             };
@@ -710,6 +713,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                blue: string;
                 container: string;
                 contrastText: string;
             };
@@ -831,6 +835,7 @@ declare const tokensByMode: {
             readonly '2xl': "1.5rem";
             readonly '3xl': "1.875rem";
             readonly '4xl': "2.25rem";
+            readonly decimalSup: "0.5em";
         };
         readonly lineHeights: {
             readonly tight: 1.2;
@@ -933,8 +938,8 @@ declare const tokensByMode: {
             readonly button: {
                 readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
                 readonly fontWeight: 500;
-                readonly fontSize: "0.9375rem";
-                readonly lineHeight: "26px";
+                readonly fontSize: "0.875rem";
+                readonly lineHeight: "1.5";
                 readonly letterSpacing: "0.46px";
                 readonly textTransform: "uppercase";
             };
@@ -1013,10 +1018,10 @@ declare const tokensByMode: {
                 readonly padding: "16px 12px";
             };
             readonly button: {
-                readonly paddingY: "8px";
-                readonly paddingX: "22px";
-                readonly padding: "8px 22px";
-                readonly minHeight: "50px";
+                readonly paddingY: "0";
+                readonly paddingX: "16px";
+                readonly padding: "0 16px";
+                readonly minHeight: "44px";
                 readonly iconSize: "20px";
             };
             readonly sectionGap: "32px";
@@ -1177,7 +1182,7 @@ declare const tokensByMode: {
             readonly '2xl': "20px";
             readonly '3xl': "24px";
             readonly full: "9999px";
-            readonly button: "4px";
+            readonly button: "10px";
             readonly input: "4px";
             readonly card: "14px";
             readonly modal: "20px";
@@ -1285,6 +1290,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                warm: string;
                 container: string;
                 contrastText: string;
             };
@@ -1301,6 +1307,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                blue: string;
                 container: string;
                 contrastText: string;
             };
@@ -1420,6 +1427,7 @@ declare const tokensByMode: {
             readonly '2xl': "1.5rem";
             readonly '3xl': "1.875rem";
             readonly '4xl': "2.25rem";
+            readonly decimalSup: "0.5em";
         };
         readonly lineHeights: {
             readonly tight: 1.2;
@@ -1522,8 +1530,8 @@ declare const tokensByMode: {
             readonly button: {
                 readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
                 readonly fontWeight: 500;
-                readonly fontSize: "0.9375rem";
-                readonly lineHeight: "26px";
+                readonly fontSize: "0.875rem";
+                readonly lineHeight: "1.5";
                 readonly letterSpacing: "0.46px";
                 readonly textTransform: "uppercase";
             };
@@ -1602,10 +1610,10 @@ declare const tokensByMode: {
                 readonly padding: "16px 12px";
             };
             readonly button: {
-                readonly paddingY: "8px";
-                readonly paddingX: "22px";
-                readonly padding: "8px 22px";
-                readonly minHeight: "50px";
+                readonly paddingY: "0";
+                readonly paddingX: "16px";
+                readonly padding: "0 16px";
+                readonly minHeight: "44px";
                 readonly iconSize: "20px";
             };
             readonly sectionGap: "32px";
@@ -1766,7 +1774,7 @@ declare const tokensByMode: {
             readonly '2xl': "20px";
             readonly '3xl': "24px";
             readonly full: "9999px";
-            readonly button: "4px";
+            readonly button: "10px";
             readonly input: "4px";
             readonly card: "14px";
             readonly modal: "20px";
@@ -1881,6 +1889,7 @@ declare const tokens: {
             main: string;
             light: string;
             dark: string;
+            warm: string;
             container: string;
             contrastText: string;
         };
@@ -1897,6 +1906,7 @@ declare const tokens: {
             main: string;
             light: string;
             dark: string;
+            blue: string;
             container: string;
             contrastText: string;
         };
@@ -2018,6 +2028,7 @@ declare const tokens: {
         readonly '2xl': "1.5rem";
         readonly '3xl': "1.875rem";
         readonly '4xl': "2.25rem";
+        readonly decimalSup: "0.5em";
     };
     readonly lineHeights: {
         readonly tight: 1.2;
@@ -2120,8 +2131,8 @@ declare const tokens: {
         readonly button: {
             readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
             readonly fontWeight: 500;
-            readonly fontSize: "0.9375rem";
-            readonly lineHeight: "26px";
+            readonly fontSize: "0.875rem";
+            readonly lineHeight: "1.5";
             readonly letterSpacing: "0.46px";
             readonly textTransform: "uppercase";
         };
@@ -2200,10 +2211,10 @@ declare const tokens: {
             readonly padding: "16px 12px";
         };
         readonly button: {
-            readonly paddingY: "8px";
-            readonly paddingX: "22px";
-            readonly padding: "8px 22px";
-            readonly minHeight: "50px";
+            readonly paddingY: "0";
+            readonly paddingX: "16px";
+            readonly padding: "0 16px";
+            readonly minHeight: "44px";
             readonly iconSize: "20px";
         };
         readonly sectionGap: "32px";
@@ -2364,7 +2375,7 @@ declare const tokens: {
         readonly '2xl': "20px";
         readonly '3xl': "24px";
         readonly full: "9999px";
-        readonly button: "4px";
+        readonly button: "10px";
         readonly input: "4px";
         readonly card: "14px";
         readonly modal: "20px";
@@ -2496,6 +2507,10 @@ interface KdsButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonE
  *
  * Built with native HTML and kds-* CSS classes from the BeerCSS bundle.
  *
+ * Compose with: para apilar CTAs al pie de una card, envolver en
+ * `.kds-btn-stack` (NO usar gap/margin inline) — primario arriba, outlined
+ * debajo, todos `fullWidth`. Ver `Patterns/CSS-only → ButtonStack`.
+ *
  * @example
  * ```tsx
  * <KdsButton variant="primary">
@@ -2524,121 +2539,65 @@ declare const KdsButton: React__default.ForwardRefExoticComponent<KdsButtonProps
 /**
  * Khipu Design System - TextField Component
  *
- * A text input component built with native HTML and BeerCSS floating labels.
- * Matches the Figma design: Pagos Automáticos - MUI v610
+ * Matchea exactamente el markup que genera `matFieldImpl()` del taglib `mat:textField` de payment:
+ *
+ *   <div class="field label border [prefix] [suffix] [invalid|valid|info|warning]">
+ *     <i class="material-symbols-outlined">prefixIcon</i>    // si startIcon
+ *     <input type="..." id="..." name="..." value="..." placeholder=" " [required] [disabled]>
+ *     <label for="...">Label [*]</label>
+ *     <i class="material-symbols-outlined">suffixIcon</i>    // si endIcon
+ *     <span class="helper">errorMessage o help</span>        // si helperText
+ *   </div>
+ *
+ * Reglas críticas del truco floating-label de BeerCSS:
+ * - `placeholder=" "` (un espacio) — NUNCA aceptar placeholder real del consumidor.
+ *   BeerCSS usa `input:placeholder-shown ~ label` para mantener la label abajo cuando el input
+ *   está vacío. Si pasas un placeholder real, el label se queda siempre arriba y se superpone.
+ * - El wrapper DEBE tener `.prefix` cuando hay icono al inicio (alinea la label al lado del icono).
+ * - El wrapper DEBE tener `.suffix` cuando hay icono al final.
+ *
+ * @gsp `mat:textField`, `mat:emailField`, `mat:passwordField`, `mat:numberField` (taglib `matFieldImpl`)
  */
 
-interface KdsTextFieldProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    /** Label text for the field */
+interface KdsTextFieldProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size' | 'placeholder'> {
+    /** Floating label. */
     label: string;
-    /** Helper text shown below field (error or info) */
+    /** Helper text bajo el field (error o info). */
     helperText?: string;
-    /** Error state - applies invalid class and red styling */
+    /** Estado inválido — aplica `.invalid` al wrapper. */
     error?: boolean;
-    /** Full width field (default: true) */
+    /** Full width (default: true). */
     fullWidth?: boolean;
-    /** Material Symbols icon name at the start of input, e.g. "search" */
+    /** Material Symbol al inicio del input (aplica clase `.prefix`). */
     startIcon?: string;
-    /** Material Symbols icon name at the end of input, e.g. "visibility_off" */
+    /** Material Symbol al final del input (aplica clase `.suffix`). */
     endIcon?: string;
 }
-/**
- * Text input field with label, validation, and icons.
- *
- * Built with native HTML and BeerCSS floating labels.
- * The label animates up when the input has focus or value.
- *
- * @example
- * ```tsx
- * <KdsTextField
- *   label="RUT Suscriptor"
- *   placeholder="12.345.678-9"
- * />
- *
- * <KdsTextField
- *   label="Buscar por nombre"
- *   startIcon="search"
- * />
- *
- * <KdsTextField
- *   label="Contraseña"
- *   type="password"
- *   error
- *   helperText="Contraseña incorrecta"
- * />
- *
- * <KdsTextField
- *   label="Monto"
- *   value="$1.000"
- *   readOnly
- * />
- * ```
- */
 declare const KdsTextField: React__default.ForwardRefExoticComponent<KdsTextFieldProps & React__default.RefAttributes<HTMLInputElement>>;
 
 /**
  * Khipu Design System - Checkbox Component
  *
- * Native HTML checkbox with BeerCSS styling.
+ * Wrapper React que matchea exactamente el markup del taglib `mat:checkBox` de payment:
+ *
+ *   <label class="checkbox">
+ *     <input type="checkbox" id="..." name="..." value="..." [checked] [disabled]>
+ *     <span>Label</span>
+ *   </label>
+ *
+ * BeerCSS oculta el input via `opacity: 0` y renderiza un sprite vía `::before` con
+ * `content: "check_box_outline_blank"` usando la fuente Material Symbols Outlined.
+ *
+ * NO agregamos `htmlFor` al label porque el `<input>` está anidado dentro: la
+ * asociación es implícita y `for` puede causar doble-disparo del click event.
  */
 
 interface KdsCheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Texto del label mostrado al lado del sprite. Opcional (puede usar aria-label). */
     label?: string;
 }
 declare const KdsCheckbox: React__default.ForwardRefExoticComponent<KdsCheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
 
-/**
- * Khipu Design System - Modal Component
- *
- * A modal dialog component built on Radix Dialog with Khipu design system styling.
- * Uses kds-bottom-sheet BeerCSS classes for visual presentation.
- */
-
-type KdsModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-interface KdsModalProps {
-    /** Controls modal visibility */
-    open: boolean;
-    /** Callback when modal should close */
-    onClose: () => void;
-    /** Modal title */
-    title?: string;
-    /** Modal description text */
-    description?: string;
-    /** Footer content (usually action buttons) */
-    footer?: React__default.ReactNode;
-    /** Modal content */
-    children: React__default.ReactNode;
-    /** Modal max width */
-    size?: KdsModalSize;
-    /** Show close button */
-    showCloseButton?: boolean;
-    /** Additional CSS class */
-    className?: string;
-}
-/**
- * Modal dialog component for displaying content that requires attention.
- *
- * Built on Radix Dialog with kds-bottom-sheet BeerCSS classes.
- *
- * @example
- * ```tsx
- * <KdsModal
- *   open={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   title="Confirmar pago"
- *   footer={
- *     <>
- *       <button onClick={handleCancel}>Cancelar</button>
- *       <button onClick={handleConfirm}>Confirmar</button>
- *     </>
- *   }
- * >
- *   <p>¿Estás seguro de que deseas realizar este pago?</p>
- * </KdsModal>
- * ```
- */
-declare const KdsModal: React__default.ForwardRefExoticComponent<KdsModalProps & React__default.RefAttributes<HTMLDivElement>>;
-
 /**
  * Khipu Design System - Card Component
  *
@@ -2692,12 +2651,23 @@ declare const KdsCardFooter: React__default.ForwardRefExoticComponent<KdsCardSec
 /**
  * Khipu Design System - Spinner Component
  *
- * Native HTML spinner with BeerCSS loader styling.
+ * Spinner circular animado usando el patrón nativo de BeerCSS:
+ *   <progress class="circle [small|large] indeterminate"></progress>
+ *
+ * Tamaños (BeerCSS):
+ * - `small` → 1.5rem (24px)
+ * - default → 2.5rem (40px)
+ * - `large` → 3.5rem (56px)
+ *
+ * El `<progress>` indeterminate aplica animación `to-rotate 1s linear infinite` con
+ * gradient cónico (currentColor / `--active`).
  */
 
 type KdsSpinnerSize = 'small' | 'medium' | 'large';
 interface KdsSpinnerProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /** Tamaño del spinner. Default `medium` (sin modifier = 2.5rem). */
     size?: KdsSpinnerSize;
+    /** Texto bajo el spinner (visible). Si se omite, se usa "Cargando" como sr-only para a11y. */
     label?: string;
 }
 declare const KdsSpinner: React__default.ForwardRefExoticComponent<KdsSpinnerProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -2717,53 +2687,34 @@ declare const KdsLinearProgress: React__default.ForwardRefExoticComponent<KdsLin
 /**
  * Khipu Design System - Alert Component
  *
- * An alert component built with native HTML and kds-* CSS classes.
- * Matches the Figma design: Pagos Automáticos - MUI v610
+ * Alert con icon opcional, content y close button.
+ *
+ * Specs (CSS-derived):
+ * - `.kds-alert`: flex, align-items center, gap 8px, padding 16px, border-radius md, border 1px
+ * - `.kds-alert-icon`: 24px, flex-shrink 0
+ * - `.kds-alert-content`: flex 1, min-width 0 (permite ellipsis del texto)
+ * - Variantes: kds-info / kds-success / kds-warning / kds-error
+ * - `.kds-alert-inline` reduce padding y bottom-margin
  */
 
 type KdsAlertSeverity = 'success' | 'info' | 'warning' | 'error';
 interface KdsAlertProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    /** Alert severity/type */
+    /** Alert severity/type. */
     severity: KdsAlertSeverity;
-    /** Alert title */
+    /** Alert title (negrita arriba). */
     title?: string;
-    /** Material Symbols icon name, e.g. "info" */
-    icon?: string;
-    /** Inline variant (compact display) */
+    /**
+     * Material Symbols icon name. Si es `true` (o se omite y hay otra prop), se usa el default por severity.
+     * Pasar `false` para ocultar el icon. Pasar un string custom para override.
+     */
+    icon?: string | boolean;
+    /** Inline variant (compact display, sin border-radius grande). */
     inline?: boolean;
-    /** Alert content */
+    /** Alert body. */
     children: React__default.ReactNode;
-    /** Closable alert */
+    /** Callback para cerrar — renderiza icon-button discreto a la derecha. */
     onClose?: () => void;
 }
-/**
- * Alert component for displaying important messages.
- *
- * Built with native HTML and kds-* CSS classes from the BeerCSS bundle.
- *
- * @example
- * ```tsx
- * // Info alert (like in subscription details)
- * <KdsAlert severity="info">
- *   El tope mensual corresponde al monto máximo posible a cobrar mensualmente.
- * </KdsAlert>
- *
- * // Success alert
- * <KdsAlert severity="success" title="¡Todo listo!">
- *   Espera la confirmación por parte de tu banco
- * </KdsAlert>
- *
- * // Warning alert
- * <KdsAlert severity="warning" onClose={() => setOpen(false)}>
- *   Tu sesión expirará pronto
- * </KdsAlert>
- *
- * // Error alert
- * <KdsAlert severity="error">
- *   Ha ocurrido un error al procesar tu pago
- * </KdsAlert>
- * ```
- */
 declare const KdsAlert: React__default.ForwardRefExoticComponent<KdsAlertProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
@@ -2817,10 +2768,27 @@ interface KdsTypographyProps extends React__default.HTMLAttributes<HTMLElement>
  */
 declare const KdsTypography: React__default.ForwardRefExoticComponent<KdsTypographyProps & React__default.RefAttributes<HTMLElement>>;
 
+/**
+ * Khipu Design System - Tabs Component
+ *
+ * Matchea exactamente el markup que usa producción payment:
+ *
+ *   <div class="kds-segmented-tabs" role="tablist">
+ *     <button type="button" class="active" role="tab" aria-selected="true">Personas</button>
+ *     <button type="button" role="tab" aria-selected="false">Empresas</button>
+ *   </div>
+ *
+ * Solo existe la variante segmented — producción payment no usa otra cosa, y el
+ * "standard" Material Design 3 underline tab no está en el Khipu DS.
+ *
+ * @gsp `_choosePaymentMethodFormMaterial.gsp` (líneas 18-25)
+ */
+
 interface KdsTabsProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Índice 0-based del tab activo. */
     activeIndex: number;
+    /** Callback cuando cambia el tab activo. */
     onChange: (index: number) => void;
-    variant?: 'standard' | 'segmented';
 }
 declare const KdsTabs: React__default.ForwardRefExoticComponent<KdsTabsProps & React__default.RefAttributes<HTMLDivElement>>;
 interface KdsTabInternalProps {
@@ -2836,106 +2804,23 @@ interface KdsTabPanelProps extends React__default.HTMLAttributes<HTMLDivElement>
 declare const KdsTabPanel: React__default.ForwardRefExoticComponent<KdsTabPanelProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
- * Khipu Design System - LogoHeader Component
- *
- * A header bar component that displays the Khipu logo, a transaction code,
- * and a close button. Used at the top of payment flow screens.
- *
- * Built with composable sub-components for maximum flexibility.
- */
-
-interface KdsLogoHeaderProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    /** Content - typically LogoHeader sub-components */
-    children?: React__default.ReactNode;
-}
-interface KdsLogoHeaderLogoProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    /** Custom logo content. Defaults to Khipu text logo */
-    children?: React__default.ReactNode;
-}
-interface KdsLogoHeaderSeparatorProps extends React__default.HTMLAttributes<HTMLSpanElement> {
-    /** Separator character. Defaults to "|" */
-    children?: React__default.ReactNode;
-}
-interface KdsLogoHeaderCodeProps extends React__default.HTMLAttributes<HTMLSpanElement> {
-    /** Transaction or reference code to display */
-    children: React__default.ReactNode;
-}
-interface KdsLogoHeaderCloseButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Callback fired when the close button is clicked */
-    onClose?: () => void;
-}
-/**
- * Logo section of the LogoHeader.
- *
- * @example
- * ```tsx
- * <KdsLogoHeaderLogo />
- *
- * <KdsLogoHeaderLogo>
- *   <img src="/custom-logo.svg" alt="Custom Logo" />
- * </KdsLogoHeaderLogo>
- * ```
- */
-declare const KdsLogoHeaderLogo: React__default.ForwardRefExoticComponent<KdsLogoHeaderLogoProps & React__default.RefAttributes<HTMLDivElement>>;
-/**
- * Separator element between logo and code.
- *
- * @example
- * ```tsx
- * <KdsLogoHeaderSeparator />
- *
- * <KdsLogoHeaderSeparator>•</KdsLogoHeaderSeparator>
- * ```
- */
-declare const KdsLogoHeaderSeparator: React__default.ForwardRefExoticComponent<KdsLogoHeaderSeparatorProps & React__default.RefAttributes<HTMLSpanElement>>;
-/**
- * Transaction code section.
- *
- * @example
- * ```tsx
- * <KdsLogoHeaderCode>HUSK-P7ZZ-XGYG</KdsLogoHeaderCode>
- * ```
- */
-declare const KdsLogoHeaderCode: React__default.ForwardRefExoticComponent<KdsLogoHeaderCodeProps & React__default.RefAttributes<HTMLSpanElement>>;
-/**
- * Close button for the header.
+ * Khipu Design System - RadioGroup Component
  *
- * @example
- * ```tsx
- * <KdsLogoHeaderCloseButton onClose={() => handleClose()} />
- * ```
- */
-declare const KdsLogoHeaderCloseButton: React__default.ForwardRefExoticComponent<KdsLogoHeaderCloseButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
-/**
- * LogoHeader bar component.
+ * Native HTML radio group with BeerCSS `.radio` class.
  *
- * A composable header component that can be used with sub-components
- * for maximum flexibility, or with default children for quick usage.
+ * Contrato BeerCSS:
+ *   <fieldset class="kds-radio-group">
+ *     <legend>Label</legend>
+ *     <label class="radio">
+ *       <input type="radio" name="x" value="a" />
+ *       <span>Opción A</span>
+ *     </label>
+ *     ...
+ *   </fieldset>
  *
- * @example
- * ```tsx
- * // Composable usage
- * <KdsLogoHeader>
- *   <KdsLogoHeaderLogo />
- *   <KdsLogoHeaderSeparator />
- *   <KdsLogoHeaderCode>HUSK-P7ZZ-XGYG</KdsLogoHeaderCode>
- *   <KdsLogoHeaderCloseButton onClose={() => handleClose()} />
- * </KdsLogoHeader>
- *
- * // Simple usage with defaults
- * <KdsLogoHeader>
- *   <KdsLogoHeaderLogo />
- *   <KdsLogoHeaderSeparator />
- *   <KdsLogoHeaderCode>ABC-1234-XYZ</KdsLogoHeaderCode>
- * </KdsLogoHeader>
- * ```
- */
-declare const KdsLogoHeader: React__default.ForwardRefExoticComponent<KdsLogoHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
-
-/**
- * Khipu Design System - RadioGroup Component
- *
- * Native HTML radio group with BeerCSS styling.
+ * Specs:
+ * - Input oculto, sprite circular generado por `:is(.checkbox, .radio) > span::before`
+ * - Tamaño default 18x18; modifiers `.small` (14px) / `.large` (22px)
  */
 
 interface KdsRadioOption {
@@ -2949,55 +2834,137 @@ interface KdsRadioGroupProps extends Omit<React__default.FieldsetHTMLAttributes<
     options: KdsRadioOption[];
     value?: string;
     onChange?: (value: string) => void;
+    /** Tamaño del sprite del radio (aplicado a cada opción). */
+    size?: 'small' | 'large';
 }
 declare const KdsRadioGroup: React__default.ForwardRefExoticComponent<KdsRadioGroupProps & React__default.RefAttributes<HTMLFieldSetElement>>;
 
 /**
  * Khipu Design System - Select Component
  *
- * A select dropdown component built on Radix UI Select with BeerCSS field styling.
+ * Native HTML `<select>` wrapped en el patrón BeerCSS `field label border`.
+ * Matchea exactamente el markup que genera la taglib `mat:select` de payment.
+ *
+ * Markup canónico:
+ *
+ *   <div class="field label border [prefix] [invalid|valid|info|warning]">
+ *     <i class="material-symbols-outlined">prefixIcon</i>  // opcional
+ *     <select id="..." name="..." [required] [disabled]>
+ *       <option value="">Placeholder...</option>           // opcional (noSelection)
+ *       <option value="bci">BCI</option>
+ *       ...
+ *     </select>
+ *     <label for="...">Banco *</label>
+ *     <span class="helper">errorMessage o help</span>      // opcional
+ *   </div>
+ *
+ * BeerCSS dibuja el chevron automáticamente, el floating label, focus ring, etc.
+ *
+ * @gsp `mat:select` taglib (MaterialTagLib.groovy:260)
  */
 
-interface KdsSelectProps {
+interface KdsSelectOption {
+    /** Valor del `<option>` (string serializable). */
     value: string;
-    onValueChange: (value: string) => void;
+    /** Texto visible del `<option>`. */
+    label: string;
+    /** Si está disabled. */
+    disabled?: boolean;
+}
+interface KdsSelectProps extends Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
+    /** Floating label. */
+    label: string;
+    /** Lista de opciones del select. */
+    options: KdsSelectOption[];
+    /**
+     * Texto del primer `<option>` con value="" (placeholder). Si está vacío, no se renderiza.
+     * Equivalente a `noSelection` del taglib.
+     */
     placeholder?: string;
-    label?: string;
+    /** Helper text bajo el field (error o info). */
+    helperText?: string;
+    /** Estado inválido — aplica clase `.invalid` al wrapper. */
     error?: boolean;
-    helperText?: React__default.ReactNode;
-    disabled?: boolean;
+    /** Material Symbols icon al inicio del field (aplica clase `.prefix`). */
+    prefixIcon?: string;
+    /** Full width (default: true). */
     fullWidth?: boolean;
-    children: React__default.ReactNode;
-    className?: string;
-}
-interface KdsSelectItemProps extends Select.SelectItemProps {
-    children: React__default.ReactNode;
 }
-declare const KdsSelect: React__default.ForwardRefExoticComponent<KdsSelectProps & React__default.RefAttributes<HTMLDivElement>> & {
-    Item: React__default.ForwardRefExoticComponent<KdsSelectItemProps & React__default.RefAttributes<HTMLDivElement>>;
-};
+declare const KdsSelect: React__default.ForwardRefExoticComponent<KdsSelectProps & React__default.RefAttributes<HTMLSelectElement>>;
 
 /**
  * Khipu Design System - Chip Component
  *
- * Native HTML chip with BeerCSS kds-badge styling.
+ * Chip/badge inline con color, icon opcional y close opcional (deletable).
+ *
+ * Specs (CSS-derived):
+ * - `.kds-badge`: inline-flex, align-items center, gap 4px, padding 2px 8px, radius sm
+ * - `font-size: xs`, `font-weight: medium`, `line-height: 1.5`
+ * - Icon prefix `<i>`: 14px, inline
+ * - Close button (`.kds-badge-close`): 16×16 circular discreto, NO usa kds-btn
+ *
+ * Variantes de color: primary | success | error | warning | info
  */
 
 type KdsChipColor = 'primary' | 'success' | 'error' | 'warning' | 'info';
 interface KdsChipProps extends React__default.HTMLAttributes<HTMLSpanElement> {
+    /** Color variant. */
     color?: KdsChipColor;
+    /** Material Symbol opcional al inicio del chip. */
     icon?: string;
+    /**
+     * Callback cuando se hace click en el icon de cerrar.
+     * Si está definido, renderiza un icon-button discreto (NO usa kds-btn).
+     */
     onDelete?: () => void;
 }
 declare const KdsChip: React__default.ForwardRefExoticComponent<KdsChipProps & React__default.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Khipu Design System - Snackbar Component
+ *
+ * Matchea exactamente el markup que genera `Khipu.showSnackbar()` y
+ * `initFlashMessages()` (`src/beercss/customizations/khipu-init.js`):
+ *
+ *   <div class="snackbar active [info|success|error]"
+ *        data-auto-dismiss="true"
+ *        style="--kds-snackbar-duration: 5000ms">
+ *     <i class="material-symbols-outlined">[icon]</i>
+ *     <span class="max">message</span>
+ *     <button class="kds-snackbar-close" aria-label="Cerrar">
+ *       <i class="material-symbols-outlined">close</i>
+ *     </button>
+ *   </div>
+ *
+ * Features:
+ * - Icon prefix automático según `type` (info / check_circle / error).
+ * - Progress bar lineal en la parte inferior animado durante `duration` ms (CSS `::after`).
+ * - Close button con estilo `.kds-snackbar-close` (icon-only, blanco semi-transparente).
+ *
+ * @gsp `_paymentFlashSnackbars.gsp` (markup base) + `khipu-init.js → initFlashMessages()` (close + dismiss timer)
+ */
+
 type KdsSnackbarType = 'success' | 'error' | 'info';
-interface KdsSnackbarProps extends React__default.HTMLAttributes<HTMLDivElement> {
+interface KdsSnackbarProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'role'> {
+    /** Mensaje del snackbar. */
     message: string;
+    /** Variante semántica. Default `info`. */
     type?: KdsSnackbarType;
+    /**
+     * Duración en ms antes de auto-dismiss. Default `5000`.
+     * También controla la duración del progress bar (CSS var `--kds-snackbar-duration`).
+     * Pasa `0` para deshabilitar auto-dismiss (no progress bar).
+     */
     duration?: number;
+    /** Callback al cerrar (click en X o tras auto-dismiss). */
     onClose?: () => void;
+    /** Controla visibilidad. Default `true`. */
     open?: boolean;
+    /**
+     * Material Symbol icon name. Si se omite, usa el default por `type`.
+     * Pasa `false` para ocultar el icon prefix.
+     */
+    icon?: string | false;
 }
 declare const KdsSnackbar: React__default.ForwardRefExoticComponent<KdsSnackbarProps & React__default.RefAttributes<HTMLDivElement>>;
 
@@ -3052,7 +3019,7 @@ declare const KdsSectionNote: React__default.ForwardRefExoticComponent<KdsSectio
  * Native HTML status block with BeerCSS styling.
  */
 
-type KdsStatusType = 'success' | 'pending' | 'warn' | 'error';
+type KdsStatusType = 'success' | 'pending' | 'warn' | 'error' | 'info';
 interface KdsStatusBlockProps extends React__default.HTMLAttributes<HTMLDivElement> {
     status: KdsStatusType;
     icon?: string;
@@ -3065,27 +3032,114 @@ declare const KdsStatusBlock: React__default.ForwardRefExoticComponent<KdsStatus
 /**
  * Khipu Design System - Stepper Component
  *
- * Native HTML stepper with BeerCSS styling.
+ * Matchea exactamente el markup del taglib `mat:stepper` de payment:
+ *
+ *   <div class="kds-stepper">
+ *     <div class="kds-step [completed|current]">
+ *       <div class="kds-step-indicator"></div>   <!-- vacío: número/check via CSS -->
+ *       <div class="kds-step-label">Label</div>
+ *     </div>
+ *     ...
+ *   </div>
+ *
+ * Specs CSS-driven:
+ * - La línea conectora horizontal es `.kds-stepper::before` (NO un `<div>`).
+ * - El check de completed viene de `.kds-step-indicator::after { content: "check" }`.
+ * - El número del step está oculto (`font-size: 0`) — el design no usa números.
+ *
+ * @gsp `mat:stepper` taglib (MaterialTagLib.groovy:817)
  */
 
 interface KdsStepperProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    steps: number;
+    /** Labels de cada step. La longitud del array determina el número de pasos. */
+    steps: string[];
+    /**
+     * Índice 0-based del step actual.
+     * - Steps `< current` → `.completed` (verde con check)
+     * - Step `== current` → `.current` (azul info)
+     * - Steps `> current` → pending (gris)
+     */
     current: number;
 }
 declare const KdsStepper: React__default.ForwardRefExoticComponent<KdsStepperProps & React__default.RefAttributes<HTMLDivElement>>;
 
-interface KdsCopyRowProps extends React__default.HTMLAttributes<HTMLDivElement> {
+/**
+ * Khipu Design System - CopyRow Component
+ *
+ * Fila clickeable que copia su `value` al portapapeles. El ROW completo es el botón.
+ *
+ * Markup canónico (mirrors `src/beercss/demo/payment-components.html`):
+ *
+ *   <button class="kds-copy-row" data-copy="value">
+ *     <i class="material-symbols-outlined">content_copy</i>   ← icon a la IZQUIERDA
+ *     <div>
+ *       <span class="kds-copy-row-label">Banco</span>
+ *       <span class="kds-copy-row-value">Banco Security</span>
+ *     </div>
+ *     <span class="kds-copy-toast">
+ *       <i class="material-symbols-outlined">check_circle</i> Copiado
+ *     </span>
+ *   </button>
+ *
+ * Cuando `.copied`:
+ *   - bg → success-soft, border → success-main
+ *   - `.kds-copy-toast` aparece (position absolute right, opacity 0 → 1)
+ */
+
+interface KdsCopyRowProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'children' | 'onClick'> {
+    /** Label arriba (uppercase caption). */
     label: string;
+    /** Valor mostrado y copiado al portapapeles. */
     value: string;
+    /** Texto del toast cuando se copia. Default: "Copiado". */
+    copiedText?: string;
 }
-declare const KdsCopyRow: React__default.ForwardRefExoticComponent<KdsCopyRowProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const KdsCopyRow: React__default.ForwardRefExoticComponent<KdsCopyRowProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Khipu Design System - CopyableTable Component
+ *
+ * Tabla compacta con filas que se copian individualmente al click, y un
+ * botón "Copiar todos los datos" que cambia el color de todas las filas al copy.
+ *
+ * Contrato HTML (matchea el CSS .kds-copyable-table del DS):
+ * ```html
+ * <div class="kds-copyable-table" id="destination-copy-list">
+ *   <div class="kds-copyable-table-row" data-copy="value-to-copy">
+ *     <span class="kds-key">Banco</span>
+ *     <span class="kds-value">Banco Security</span>
+ *   </div>
+ *   ...
+ * </div>
+ * <button class="kds-btn kds-btn-outlined kds-btn-block kds-copy-all-btn"
+ *         data-copy-all="#destination-copy-list">
+ *   <span class="kds-icon"><i class="material-symbols-outlined">content_copy</i></span>
+ *   <span>Copiar todos los datos</span>
+ * </button>
+ * ```
+ *
+ * Specs:
+ * - Row: flex space-between, padding 10px 8px, border-top divider, font sm, cursor pointer
+ * - Row hover: bg primary-faint + icon copy aparece en `.kds-value::after`
+ * - Row `.copied`: bg success-soft, `.kds-value` color success-dark, icon → check
+ * - Copy-all-btn: kds-btn-outlined-block + bg primary-faint
+ * - Copy-all-btn `.copied`: bg success-soft
+ */
 
 interface KdsCopyableTableRow {
     label: string;
     value: string;
+    /** Override del valor a copiar (default: `value`). */
+    copy?: string;
 }
 interface KdsCopyableTableProps extends React__default.HTMLAttributes<HTMLDivElement> {
     rows: KdsCopyableTableRow[];
+    /** Texto del botón "Copiar todo". Default: "Copiar todos los datos". */
+    copyAllLabel?: string;
+    /** Texto cuando se copió todo. Default: "Datos copiados". */
+    copiedAllLabel?: string;
+    /** Si `false`, no muestra el botón "Copiar todo". */
+    showCopyAll?: boolean;
 }
 declare const KdsCopyableTable: React__default.ForwardRefExoticComponent<KdsCopyableTableProps & React__default.RefAttributes<HTMLDivElement>>;
 
@@ -3102,8 +3156,14 @@ interface KdsCountdownProps extends React__default.HTMLAttributes<HTMLDivElement
 }
 declare const KdsCountdown: React__default.ForwardRefExoticComponent<KdsCountdownProps & React__default.RefAttributes<HTMLDivElement>>;
 
-type KdsSegmentedTabsProps = Omit<KdsTabsProps, 'variant'>;
-declare const KdsSegmentedTabs: React$1.ForwardRefExoticComponent<KdsSegmentedTabsProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * KdsSegmentedTabs — alias semántico de `KdsTabs`.
+ *
+ * Mantenido por backwards-compat con código que importa `KdsSegmentedTabs`.
+ * `KdsTabs` ahora ya renderiza directamente segmented (la única variante del DS).
+ */
+type KdsSegmentedTabsProps = KdsTabsProps;
+declare const KdsSegmentedTabs: React$1.ForwardRefExoticComponent<KdsTabsProps & React$1.RefAttributes<HTMLDivElement>>;
 
 interface KdsBankRowProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     name: string;
@@ -3164,15 +3224,50 @@ interface KdsInvoiceStickyProps extends React__default.HTMLAttributes<HTMLDivEle
 }
 declare const KdsInvoiceSticky: React__default.ForwardRefExoticComponent<KdsInvoiceStickyProps & React__default.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Khipu Design System - BottomSheet Component
+ *
+ * Bottom-sheet (modal que sube desde abajo en mobile, centrado en desktop) basado
+ * en Radix Dialog. Único componente de modales del DS — `KdsModal` fue unificado aquí.
+ *
+ * Contrato HTML (matchea CSS `.kds-bottom-sheet*` de khipu-components.css):
+ *
+ *   <div class="kds-bottom-sheet-scrim open">
+ *     <div class="kds-bottom-sheet">
+ *       <div class="kds-bottom-sheet-grabber" />                  <!-- opcional -->
+ *       <button class="kds-bottom-sheet-close">X</button>          <!-- opcional -->
+ *       <h2 class="kds-bottom-sheet-title">...</h2>                <!-- opcional -->
+ *       <p class="kds-bottom-sheet-description">...</p>            <!-- opcional -->
+ *       <div class="kds-bottom-sheet-body">children</div>
+ *       <div class="kds-bottom-sheet-actions">actions</div>        <!-- opcional -->
+ *     </div>
+ *   </div>
+ *
+ * IMPORTANTE: el scrim DEBE llevar la clase `.open` SIEMPRE (Radix maneja mount/unmount).
+ * Sin `.open`, el scrim queda `display: none` y no se ve.
+ */
+
 interface KdsBottomSheetProps {
+    /** Controla la visibilidad. */
     open: boolean;
+    /** Callback cuando se debe cerrar (close button / ESC / click fuera). */
     onClose: () => void;
+    /** Título — renderiza `<h2 class="kds-bottom-sheet-title">`. */
     title?: string;
+    /** Descripción opcional bajo el título (`<p class="kds-bottom-sheet-description">`). */
+    description?: string;
+    /** Contenido del body. */
     children: React__default.ReactNode;
+    /** Botones de acción (footer). Renderiza dentro de `.kds-bottom-sheet-actions`. */
     actions?: React__default.ReactNode;
-    className?: string;
-    /** Portal container — pass a ref to mount inside a specific element instead of document.body */
+    /** Mostrar grabber (handle) visual en el top. Default: true. */
+    showGrabber?: boolean;
+    /** Mostrar X de cierre en el top-right. Default: false. */
+    showCloseButton?: boolean;
+    /** Portal container — útil para Storybook o anchors específicos. */
     container?: HTMLElement | null;
+    /** Clase adicional al sheet. */
+    className?: string;
 }
 declare const KdsBottomSheet: React__default.ForwardRefExoticComponent<KdsBottomSheetProps & React__default.RefAttributes<HTMLDivElement>>;
 
@@ -3191,6 +3286,210 @@ interface KdsRecapListProps extends React__default.HTMLAttributes<HTMLUListEleme
 }
 declare const KdsRecapList: React__default.ForwardRefExoticComponent<KdsRecapListProps & React__default.RefAttributes<HTMLUListElement>>;
 
+interface KdsMontoRowProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /** Título principal (e.g. "Monto a transferir"). */
+    title: string;
+    /** Valor destacado (e.g. "$3.300"). */
+    value: string;
+    /**
+     * Texto secundario opcional bajo el título (deadline/subtitle).
+     * Acepta un nodo React para incluir line-breaks o formato.
+     */
+    deadline?: React__default.ReactNode;
+}
+/**
+ * KdsMontoRow — bloque destacado de monto con título + deadline opcional + valor.
+ *
+ * Layout (spec):
+ * - `display: flex; justify-content: space-between`
+ * - `padding: 14px 0 8px`
+ * - `border-top: 1px dashed var(--kds-border-medium)`
+ *
+ * Tipografía:
+ * - `.kds-monto-row-title`: `font-size: sm`, `font-weight: 500`
+ * - `.kds-monto-row-deadline`: `font-size: xs`, `color: text-secondary`
+ * - `.kds-monto-row-value`: `font-size: 24px`, `font-weight: 700`, `letter-spacing: tight`
+ *
+ * @gsp `_manualVerifyChileMaterial.gsp` y demás manualVerify
+ * @css .kds-monto-row, .kds-monto-row-title, .kds-monto-row-deadline, .kds-monto-row-value
+ */
+declare const KdsMontoRow: React__default.ForwardRefExoticComponent<KdsMontoRowProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsMerchantTileProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Nombre del merchant (usado para alt del logo o initials fallback). */
+    name: string;
+    /** URL del logo del merchant. Si está presente, renderiza `<img>` dentro del tile. */
+    logoUrl?: string;
+    /** Initials custom (2-3 letras). Si no se provee, usa las primeras 2 letras de `name`. */
+    initials?: string;
+    /** Variante compacta: 40×40 en vez de 56×56. */
+    compact?: boolean;
+}
+/**
+ * KdsMerchantTile — tile cuadrado con logo del comercio o initials.
+ *
+ * Layout (spec):
+ * - `56 x 56` (default) / `40 x 40` (compact)
+ * - `border-radius: var(--kds-radius-card)`
+ * - `background: var(--kds-color-primary-deep)` (#5B3DB5)
+ * - `color: white`, `display: grid; place-items: center`
+ * - Initials: `font-size: xl` (20px), `font-weight: 700`, `letter-spacing: 0.02em`
+ *
+ * Variante logo:
+ * - Agrega clase `.logo`, padding `var(--kds-spacing-0-5)` (4px)
+ * - `<img>` interna: `object-fit: cover`, `border-radius: var(--kds-radius-md)`
+ *
+ * Compose with: este componente SOLO renderiza el tile cuadrado. Para el header
+ * de comercio completo ("estás pagando a" + nombre), envolver en el patrón
+ * `.kds-merchant`:
+ * ```html
+ * <div class="kds-merchant">
+ *   <!-- KdsMerchantTile → .kds-merchant-tile -->
+ *   <div class="kds-merchant-meta">
+ *     <span class="kds-merchant-label">Estás pagando a</span>
+ *     <strong>Comercial Santiago SpA</strong>
+ *   </div>
+ * </div>
+ * ```
+ * Spacing canónico: `.kds-merchant` gap `var(--kds-spacing-1-75)`; label
+ * `margin-bottom: var(--kds-spacing-0-25)`. Ver `Patterns/CSS-only → MerchantHeader`.
+ *
+ * @css .kds-merchant-tile, .kds-merchant-tile.logo, .kds-merchant.compact .kds-merchant-tile
+ */
+declare const KdsMerchantTile: React__default.ForwardRefExoticComponent<KdsMerchantTileProps & React__default.RefAttributes<HTMLDivElement>>;
+
+type KdsPaymentTotalVariant = 'default' | 'email';
+/**
+ * Color tone for the amount value.
+ * - `brand`: default Khipu purple (current behaviour).
+ * - `info`: khipu-blue (#5A5FE0) — LigoPay QR / transfer flows.
+ */
+type KdsPaymentTotalTone = 'brand' | 'info';
+interface KdsPaymentTotalProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * Variante visual.
+     * - `default`: monto destacado en color primario (QR / payment view).
+     * - `email`: monto compacto en color de texto primario (email templates).
+     * @default 'default'
+     */
+    variant?: KdsPaymentTotalVariant;
+    /**
+     * Tono de color del monto. Combinable con cualquier `variant`.
+     * - `brand` (default): purple Khipu / texto primario según variante.
+     * - `info`: khipu-blue (#5A5FE0) — pantallas QR/transfer de LigoPay.
+     * @default 'brand'
+     */
+    tone?: KdsPaymentTotalTone;
+    /**
+     * Si `true`, aplica el modificador `kds-payment-total--centered`: remueve el
+     * `padding-left` asimétrico (que existe por defecto para la vista QR de
+     * LigoPay) y centra todo el texto interno. Combinable con `variant` y `tone`.
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Monto a mostrar.
+     * - `number`: el componente formatea (entera + decimal) con `Intl.NumberFormat`.
+     * - `string`: ya formateado (e.g. `"1,500.50"` o `"1500.50"`). Si contiene `.`,
+     *   la parte tras el punto se renderiza como superíndice decimal.
+     */
+    amount: number | string;
+    /**
+     * Símbolo de moneda. Default `'S/'` (sol peruano) para mantener paridad con el origen
+     * en paylink-ligopay. Pásalo explícito para otras monedas (`'$'`, `'CLP$'`, etc.).
+     * @default 'S/'
+     */
+    currency?: string;
+    /**
+     * Cantidad de decimales. `0` o `null` ocultan el superíndice decimal.
+     * Aplica sólo cuando `amount` es `number` o cuando contiene un `.`.
+     * @default 2
+     */
+    decimals?: number | null;
+    /**
+     * Locale BCP-47 para `Intl.NumberFormat` (separadores miles/decimal).
+     * Aplica sólo cuando `amount` es `number`.
+     * @default 'es-PE'
+     */
+    locale?: string;
+    /**
+     * Etiqueta sobre el monto (e.g. `"Monto a pagar"`).
+     * @default 'Monto a pagar'
+     */
+    label?: React__default.ReactNode;
+    /**
+     * Título principal (desktop). En la variante `default` aparece arriba; en `email`
+     * se omite. Pasa `null` para ocultarlo en `default` también.
+     * @default 'Escanea el QR'
+     */
+    title?: React__default.ReactNode;
+    /**
+     * Título alternativo para mobile en variante `default`. En desktop se oculta vía CSS.
+     * Pasa `null` para omitirlo.
+     * @default 'Descarga el QR'
+     */
+    titleMobile?: React__default.ReactNode;
+}
+/**
+ * KdsPaymentTotal — bloque de "monto a pagar" usado en pantallas de pago QR y emails de cobro.
+ *
+ * Portado desde el taglib `<kh:paymentTotal>` de paylink-ligopay
+ * (`KhipuTagLib.groovy:131-177` + `materialize-config.css → .payment-total`).
+ *
+ * **Variantes:**
+ * - `default`: amount grande (`3rem`) en color primario Khipu — vista QR de pago.
+ * - `email`: amount compacto (`1.5rem`) en color texto primario — plantillas email.
+ *
+ * **Layout responsive (default):**
+ * - Desktop: padding-left 80px, title visible (titleMobile oculto).
+ * - Mobile (≤ 1024px): centrado, sólo titleMobile visible.
+ * - La variante `email` mantiene alineación izquierda en todos los breakpoints.
+ *
+ * **Decimal handling:**
+ * - Si `amount` es `number`, se formatea con `Intl.NumberFormat(locale)`.
+ * - Si `amount` es `string` con `.`, la parte tras el punto va al `<sup>`.
+ * - `decimals={0}` o `null` desactivan el superíndice.
+ *
+ * @gsp Origen: paylink-ligopay/grails-app/taglib/com/khipu/payment/paylink/ligopay/KhipuTagLib.groovy
+ * @css .kds-payment-total, .kds-payment-total--email, .kds-payment-total-title,
+ *      .kds-payment-total-title-mobile, .kds-payment-label, .kds-payment-amount,
+ *      .kds-payment-total-decimal-sup
+ */
+declare const KdsPaymentTotal: React__default.ForwardRefExoticComponent<KdsPaymentTotalProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsBillAttachmentProps extends Omit<React__default.AnchorHTMLAttributes<HTMLAnchorElement>, 'children'> {
+    /** Nombre del archivo a descargar. */
+    filename: string;
+    /** URL absoluta o relativa del archivo. */
+    href: string;
+    /** Icon Material Symbols. Default: `attach_file`. */
+    icon?: string;
+}
+/**
+ * KdsBillAttachment — link de descarga para adjuntos de la factura/bill.
+ *
+ * Layout (spec):
+ * - `display: inline-flex; align-items: center; justify-content: flex-start`
+ * - `width: fit-content`
+ * - `color: var(--kds-color-info-main)`, `font-size: sm` (14px), `font-weight: 500`
+ * - `text-decoration: none` → hover `underline` solo en el span
+ * - Icon: `font-size: lg` (16px)
+ *
+ * @gsp `mat:billAttachments` taglib (introducida en commit 1a8e228c9)
+ * @css .kds-bill-attachment, .kds-bill-attachments
+ */
+declare const KdsBillAttachment: React__default.ForwardRefExoticComponent<KdsBillAttachmentProps & React__default.RefAttributes<HTMLAnchorElement>>;
+interface KdsBillAttachmentsProps extends React__default.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * KdsBillAttachments — contenedor vertical de varios `KdsBillAttachment`.
+ *
+ * Layout (spec):
+ * - `display: flex; flex-direction: column`
+ * - `gap: var(--kds-spacing-0-75)` (6px)
+ */
+declare const KdsBillAttachments: React__default.ForwardRefExoticComponent<KdsBillAttachmentsProps & React__default.RefAttributes<HTMLDivElement>>;
+
 declare function useCopyToClipboard(resetMs?: number): {
     copied: boolean;
     copy: (text: string) => Promise<void>;
@@ -3236,4 +3535,4 @@ declare function getContrastColor(hex: string): string;
  */
 declare function lighten(hex: string, amount: number): string;
 
-export { type Colors, KdsAccordion, KdsAccordionDetails, type KdsAccordionDetailsProps, type KdsAccordionProps, KdsAccordionSummary, type KdsAccordionSummaryProps, KdsAlert, type KdsAlertProps, type KdsAlertSeverity, KdsBankList, type KdsBankListProps, KdsBankModal, type KdsBankModalProps, KdsBankRow, type KdsBankRowProps, KdsBottomSheet, type KdsBottomSheetProps, KdsButton, type KdsButtonProps, type KdsButtonSize, type KdsButtonVariant, KdsCard, KdsCardBody, KdsCardFooter, KdsCardHeader, KdsCardPlan, type KdsCardPlanProps, type KdsCardProps, type KdsCardSectionProps, KdsCardSelector, type KdsCardSelectorProps, type KdsCardVariant, KdsCheckbox, type KdsCheckboxProps, KdsChip, type KdsChipColor, type KdsChipProps, KdsCopyRow, type KdsCopyRowProps, KdsCopyableTable, type KdsCopyableTableProps, type KdsCopyableTableRow, KdsCountdown, type KdsCountdownProps, KdsDivider, type KdsDividerProps, KdsExpandPanel, type KdsExpandPanelProps, KdsInvoiceSticky, type KdsInvoiceStickyProps, KdsLinearProgress, type KdsLinearProgressProps, KdsLogoHeader, KdsLogoHeaderCloseButton, type KdsLogoHeaderCloseButtonProps, KdsLogoHeaderCode, type KdsLogoHeaderCodeProps, KdsLogoHeaderLogo, type KdsLogoHeaderLogoProps, type KdsLogoHeaderProps, KdsLogoHeaderSeparator, type KdsLogoHeaderSeparatorProps, KdsModal, type KdsModalProps, type KdsModalSize, KdsQrRow, type KdsQrRowProps, KdsRadioGroup, type KdsRadioGroupProps, type KdsRadioOption, type KdsRecapItem, KdsRecapList, type KdsRecapListProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSegmentedTabs, type KdsSegmentedTabsProps, KdsSelect, type KdsSelectItemProps, type KdsSelectProps, KdsSnackbar, type KdsSnackbarProps, type KdsSnackbarType, KdsSpinner, type KdsSpinnerProps, type KdsSpinnerSize, KdsStatusBlock, type KdsStatusBlockProps, type KdsStatusType, KdsStepper, type KdsStepperProps, KdsTab, KdsTabPanel, type KdsTabPanelProps, type KdsTabProps, KdsTabs, type KdsTabsProps, KdsTextField, type KdsTextFieldProps, KdsThemeProvider, type KdsThemeProviderProps, KdsTooltip, type KdsTooltipPlacement, type KdsTooltipProps, KdsTypography, type KdsTypographyProps, type KdsTypographyVariant, type ThemeMode, type Tokens, type TokensByMode, type Typography as TypographyTokens, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useTabsKeyboard, zIndex };
+export { type Colors, KdsAccordion, KdsAccordionDetails, type KdsAccordionDetailsProps, type KdsAccordionProps, KdsAccordionSummary, type KdsAccordionSummaryProps, KdsAlert, type KdsAlertProps, type KdsAlertSeverity, KdsBankList, type KdsBankListProps, KdsBankModal, type KdsBankModalProps, KdsBankRow, type KdsBankRowProps, KdsBillAttachment, type KdsBillAttachmentProps, KdsBillAttachments, type KdsBillAttachmentsProps, KdsBottomSheet, type KdsBottomSheetProps, KdsButton, type KdsButtonProps, type KdsButtonSize, type KdsButtonVariant, KdsCard, KdsCardBody, KdsCardFooter, KdsCardHeader, KdsCardPlan, type KdsCardPlanProps, type KdsCardProps, type KdsCardSectionProps, KdsCardSelector, type KdsCardSelectorProps, type KdsCardVariant, KdsCheckbox, type KdsCheckboxProps, KdsChip, type KdsChipColor, type KdsChipProps, KdsCopyRow, type KdsCopyRowProps, KdsCopyableTable, type KdsCopyableTableProps, type KdsCopyableTableRow, KdsCountdown, type KdsCountdownProps, KdsDivider, type KdsDividerProps, KdsExpandPanel, type KdsExpandPanelProps, KdsInvoiceSticky, type KdsInvoiceStickyProps, KdsLinearProgress, type KdsLinearProgressProps, KdsMerchantTile, type KdsMerchantTileProps, KdsMontoRow, type KdsMontoRowProps, KdsPaymentTotal, type KdsPaymentTotalProps, type KdsPaymentTotalVariant, KdsQrRow, type KdsQrRowProps, KdsRadioGroup, type KdsRadioGroupProps, type KdsRadioOption, type KdsRecapItem, KdsRecapList, type KdsRecapListProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSegmentedTabs, type KdsSegmentedTabsProps, KdsSelect, type KdsSelectOption, type KdsSelectProps, KdsSnackbar, type KdsSnackbarProps, type KdsSnackbarType, KdsSpinner, type KdsSpinnerProps, type KdsSpinnerSize, KdsStatusBlock, type KdsStatusBlockProps, type KdsStatusType, KdsStepper, type KdsStepperProps, KdsTab, KdsTabPanel, type KdsTabPanelProps, type KdsTabProps, KdsTabs, type KdsTabsProps, KdsTextField, type KdsTextFieldProps, KdsThemeProvider, type KdsThemeProviderProps, KdsTooltip, type KdsTooltipPlacement, type KdsTooltipProps, KdsTypography, type KdsTypographyProps, type KdsTypographyVariant, type ThemeMode, type Tokens, type TokensByMode, type Typography as TypographyTokens, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useTabsKeyboard, zIndex };