@khipu/design-system 0.2.0-alpha.9 → 0.2.0-alpha.90

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;
     };
@@ -367,6 +368,7 @@ declare const fontWeights: {
     readonly bold: 700;
 };
 declare const fontSizes: {
+    readonly '2xs': "0.625rem";
     readonly xs: "0.75rem";
     readonly sm: "0.875rem";
     readonly base: "1rem";
@@ -376,6 +378,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;
@@ -694,6 +697,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                warm: string;
                 container: string;
                 contrastText: string;
             };
@@ -710,6 +714,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                blue: string;
                 container: string;
                 contrastText: string;
             };
@@ -822,6 +827,7 @@ declare const tokensByMode: {
             readonly bold: 700;
         };
         readonly fontSizes: {
+            readonly '2xs': "0.625rem";
             readonly xs: "0.75rem";
             readonly sm: "0.875rem";
             readonly base: "1rem";
@@ -831,6 +837,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;
@@ -1127,6 +1134,11 @@ declare const tokensByMode: {
             };
         };
         readonly responsiveBaseFontSizes: {
+            readonly '2xs': {
+                readonly mobile: "0.5625rem";
+                readonly tablet: "0.625rem";
+                readonly desktop: "0.625rem";
+            };
             readonly xs: {
                 readonly mobile: "0.6875rem";
                 readonly tablet: "0.75rem";
@@ -1285,6 +1297,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                warm: string;
                 container: string;
                 contrastText: string;
             };
@@ -1301,6 +1314,7 @@ declare const tokensByMode: {
                 main: string;
                 light: string;
                 dark: string;
+                blue: string;
                 container: string;
                 contrastText: string;
             };
@@ -1411,6 +1425,7 @@ declare const tokensByMode: {
             readonly bold: 700;
         };
         readonly fontSizes: {
+            readonly '2xs': "0.625rem";
             readonly xs: "0.75rem";
             readonly sm: "0.875rem";
             readonly base: "1rem";
@@ -1420,6 +1435,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;
@@ -1716,6 +1732,11 @@ declare const tokensByMode: {
             };
         };
         readonly responsiveBaseFontSizes: {
+            readonly '2xs': {
+                readonly mobile: "0.5625rem";
+                readonly tablet: "0.625rem";
+                readonly desktop: "0.625rem";
+            };
             readonly xs: {
                 readonly mobile: "0.6875rem";
                 readonly tablet: "0.75rem";
@@ -1881,6 +1902,7 @@ declare const tokens: {
             main: string;
             light: string;
             dark: string;
+            warm: string;
             container: string;
             contrastText: string;
         };
@@ -1897,6 +1919,7 @@ declare const tokens: {
             main: string;
             light: string;
             dark: string;
+            blue: string;
             container: string;
             contrastText: string;
         };
@@ -2009,6 +2032,7 @@ declare const tokens: {
         readonly bold: 700;
     };
     readonly fontSizes: {
+        readonly '2xs': "0.625rem";
         readonly xs: "0.75rem";
         readonly sm: "0.875rem";
         readonly base: "1rem";
@@ -2018,6 +2042,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;
@@ -2314,6 +2339,11 @@ declare const tokens: {
         };
     };
     readonly responsiveBaseFontSizes: {
+        readonly '2xs': {
+            readonly mobile: "0.5625rem";
+            readonly tablet: "0.625rem";
+            readonly desktop: "0.625rem";
+        };
         readonly xs: {
             readonly mobile: "0.6875rem";
             readonly tablet: "0.75rem";
@@ -2475,7 +2505,7 @@ type Typography = typeof typography;
  * Matches the Figma design: Pagos Automáticos - MUI v610
  */
 
-type KdsButtonVariant = 'primary' | 'secondary' | 'outlined' | 'outlined-white' | 'text' | 'success';
+type KdsButtonVariant = 'primary' | 'secondary' | 'outlined' | 'outlined-white' | 'text' | 'success' | 'warning' | 'error' | 'error-text';
 type KdsButtonSize = 'sm' | 'md';
 interface KdsButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual style variant */
@@ -2496,6 +2526,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,120 +2558,118 @@ 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.
+ *
+ * Variante `revealable` (campo de contraseña con mostrar/ocultar):
+ * - El toggle es un `<a role="button">` — BeerCSS posiciona como icono del field a
+ *   `:is(i, img, svg, progress.circle, a)` y da `pointer-events: all` solo a `<a>`/`.front`,
+ *   así que el anchor es el elemento interactivo idiomático del field (no `<button>`).
+ *
+ * @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" */
+    /**
+     * Variante angosta: el field toma un ancho reducido con el texto centrado, y
+     * deja de ser fullWidth. Pensado para inputs de pocos caracteres dispuestos en
+     * fila (ej. segmentos de coordenadas, código de verificación).
+     */
+    narrow?: boolean;
+    /** 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;
+    /**
+     * Campo de contraseña con toggle interactivo de mostrar/ocultar.
+     *
+     * Renderiza un botón "ojo" como suffix que alterna el `type` del input entre
+     * `password` (oculto) y `text` (visible). Cuando es `true`, el `type` se
+     * gestiona internamente (se ignora la prop `type`). No tiene efecto si el
+     * field es `readOnly`. Toma precedencia sobre `endIcon`.
+     */
+    revealable?: boolean;
+    /**
+     * aria-label del toggle de contraseña, para i18n.
+     * @default 'Mostrar u ocultar contraseña'
+     */
+    revealLabel?: string;
+    /**
+     * Muestra la marca ` *` en la label cuando el campo es `required`.
+     *
+     * El atributo `required` del input se aplica siempre que se pase `required`;
+     * esta prop solo controla la marca visual. Ponla en `false` para campos
+     * requeridos que no deben mostrar asterisco (el requerimiento se comunica de otra forma).
+     * @default true
+     */
+    requiredMark?: boolean;
 }
-/**
- * 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
+ * Khipu Design System - SearchField Component
+ *
+ * Campo de búsqueda reutilizable (input `type="search"`) con el mismo look que el
+ * search del `KdsBankModal`: borde sutil, radio md, foco con borde primario y halo.
+ * Sin label flotante. Pensado para usarse standalone (ej: lista de bancos inline en
+ * khenshin) o dentro del `KdsBankModal`, que lo consume como única fuente de verdad.
  *
- * Native HTML checkbox with BeerCSS styling.
+ * Acepta value, onChange, placeholder, etc. por spread de las props nativas del input.
  */
 
-interface KdsCheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    label?: string;
+interface KdsSearchFieldProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /** Muestra un ícono de lupa al inicio del campo (additive, off por defecto). */
+    withIcon?: boolean;
 }
-declare const KdsCheckbox: React__default.ForwardRefExoticComponent<KdsCheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
+declare const KdsSearchField: React__default.ForwardRefExoticComponent<KdsSearchFieldProps & React__default.RefAttributes<HTMLInputElement>>;
 
 /**
- * Khipu Design System - Modal Component
+ * Khipu Design System - Checkbox 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.
+ * Wrapper React que matchea exactamente el markup del taglib `mat:checkBox` de payment:
  *
- * Built on Radix Dialog with kds-bottom-sheet BeerCSS classes.
+ *   <label class="checkbox">
+ *     <input type="checkbox" id="..." name="..." value="..." [checked] [disabled]>
+ *     <span>Label</span>
+ *   </label>
  *
- * @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>
- * ```
+ * 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.
  */
-declare const KdsModal: React__default.ForwardRefExoticComponent<KdsModalProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsCheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Contenido del label mostrado al lado del sprite. Opcional (puede usar aria-label).
+     * Acepta texto o nodos (p. ej. un enlace embebido en "Acepto los términos…").
+     */
+    label?: React__default.ReactNode;
+}
+declare const KdsCheckbox: React__default.ForwardRefExoticComponent<KdsCheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
 
 /**
  * Khipu Design System - Card Component
@@ -2692,16 +2724,63 @@ 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>>;
 
+/**
+ * Khipu Design System - SecureLoader Component
+ *
+ * Loader de pantalla completa para flujos de pago: anillo circular animado con
+ * un candado centrado y, opcionalmente, dos líneas de texto (estado + detalle).
+ *
+ * El anillo es un arco fino (~2px) rotando, definido en `.kds-secure-loader-ring`.
+ * El texto es opcional y se pasa por props (`title`/`message`) porque su contenido
+ * lo provee el consumidor (i18n / estado de la operación).
+ */
+
+interface KdsSecureLoaderProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /** Frase de estado (línea principal) mostrada sobre el spinner. */
+    title?: string;
+    /** Detalle/submensaje (color primario) bajo el título. */
+    message?: string;
+}
+declare const KdsSecureLoader: React__default.ForwardRefExoticComponent<KdsSecureLoaderProps & React__default.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Khipu Design System - CopyButton Component
+ *
+ * Botón-chip compacto que muestra un valor y lo copia al portapapeles al click.
+ * Acción de copia inline (distinto de KdsCopyRow, que es una fila label+valor para
+ * mostrar datos del destinatario/recap). Porta el look del copy button de khenshin:
+ * fondo info suave, texto info-dark, icono copy info-main, esquinas redondeadas.
+ */
+
+interface KdsCopyButtonProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'children' | 'onClick'> {
+    /** Valor mostrado y copiado al portapapeles. */
+    value: string;
+    /** Texto que reemplaza brevemente al valor cuando se copia. Default "Copiado". */
+    copiedText?: string;
+}
+declare const KdsCopyButton: React__default.ForwardRefExoticComponent<KdsCopyButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
 /**
  * Khipu Design System - LinearProgress Component
  *
@@ -2717,53 +2796,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>>;
 
 /**
@@ -2776,7 +2836,7 @@ declare const KdsAlert: React__default.ForwardRefExoticComponent<KdsAlertProps &
 /**
  * Custom Khipu typography variants that map to specific design tokens
  */
-type KdsTypographyVariant = 'display1' | 'display2' | 'heading1' | 'heading2' | 'heading3' | 'body-large' | 'body' | 'body-small' | 'label' | 'label-small' | 'muted' | 'link';
+type KdsTypographyVariant = 'display1' | 'display2' | 'heading1' | 'heading2' | 'heading3' | 'body-large' | 'body' | 'body-small' | 'label' | 'label-small' | 'value' | 'code' | 'caption' | 'muted' | 'link' | 'strong';
 type ElementTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label';
 interface KdsTypographyProps extends React__default.HTMLAttributes<HTMLElement> {
     /**
@@ -2817,10 +2877,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,111 +2913,29 @@ 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 {
     value: string;
-    label: string;
+    /** Texto o nodo del label de la opción (permite contenido rico: montos, enlaces, tablas). */
+    label: React__default.ReactNode;
     disabled?: boolean;
 }
 interface KdsRadioGroupProps extends Omit<React__default.FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
@@ -2949,55 +2944,145 @@ 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';
+    /**
+     * Variante de presentación.
+     * - `'default'`: filas simples (radio + texto).
+     * - `'card'`: cada opción como fila con borde (estilo selección de banco/cuenta);
+     *   hover y opción seleccionada resaltada. Mantiene el control radio.
+     * @default 'default'
+     */
+    variant?: 'default' | 'card';
 }
 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>>;
 
@@ -3049,15 +3134,24 @@ declare const KdsSectionNote: React__default.ForwardRefExoticComponent<KdsSectio
 /**
  * Khipu Design System - StatusBlock Component
  *
- * Native HTML status block with BeerCSS styling.
+ * Bloque de resultado (icono + título + descripción) para pantallas de éxito/error/pendiente.
+ *
+ * Spacing: el padding vertical estándar es `--kds-spacing-2` (16px) — el mismo rhythm
+ * inter-elementos que usan `kds-btn-stack` y `kds-hr-dashed`. Usarlo standalone (sin
+ * envolverlo en wrappers con su propio padding) para no duplicar el espacio.
  */
 
-type KdsStatusType = 'success' | 'pending' | 'warn' | 'error';
+type KdsStatusType = 'success' | 'pending' | 'warn' | 'error' | 'info';
 interface KdsStatusBlockProps extends React__default.HTMLAttributes<HTMLDivElement> {
     status: KdsStatusType;
     icon?: string;
     title: string;
-    description?: string;
+    /**
+     * Texto descriptivo bajo el título. Acepta `ReactNode` para permitir énfasis
+     * en línea (p.ej. un lead-in en `<strong>` seguido del detalle). Se renderiza
+     * dentro de un `<p>`, así que usar solo contenido válido como hijo de párrafo.
+     */
+    description?: React__default.ReactNode;
     inline?: boolean;
 }
 declare const KdsStatusBlock: React__default.ForwardRefExoticComponent<KdsStatusBlockProps & React__default.RefAttributes<HTMLDivElement>>;
@@ -3065,27 +3159,139 @@ 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.
+ *
+ * Variante `'grid'` (aditiva): grilla read-only de N celdas de texto por fila,
+ * sin copy ni botón "Copiar todo". Las celdas reparten el ancho equitativamente.
+ * Útil para mostrar datos dentro de opciones de radio. Soporta `disabled`
+ * (atenúa el color del texto).
+ *
+ * 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[];
+    /**
+     * Filas key/value copiables (modo `'copyable'`). Opcional: default `[]`.
+     * En modo `'grid'` no se usa; usá `gridRows` en su lugar.
+     */
+    rows?: KdsCopyableTableRow[];
+    /**
+     * Variante de la tabla.
+     * - `'copyable'` (default): filas key/value que se copian individualmente al click.
+     * - `'grid'`: grilla read-only de N celdas de texto por fila, sin copy ni botón
+     *   "Copiar todo". Útil para mostrar datos dentro de opciones de radio.
+     */
+    variant?: 'copyable' | 'grid';
+    /**
+     * Datos de la grilla en modo `'grid'`: cada fila es un array de textos de celda.
+     * Las celdas se reparten el ancho equitativamente. Ignorado en modo `'copyable'`.
+     */
+    gridRows?: string[][];
+    /**
+     * Atenúa el color del texto de la grilla (modo `'grid'`). Sin efecto en `'copyable'`.
+     */
+    disabled?: boolean;
+    /** 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,13 +3308,66 @@ 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>>;
+
+/**
+ * Khipu Design System - Floating Action Button (FAB)
+ *
+ * A circular, icon-only floating button built with native HTML and kds-* CSS classes.
+ * Presentational only: pair it with `useHideOnScroll` and drive the `hidden` prop for
+ * hide-on-scroll behavior.
+ */
 
-interface KdsBankRowProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
-    name: string;
+type KdsFabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'corner' | 'none';
+interface KdsFabProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Material Symbols icon name, e.g. "close". */
+    icon: string;
+    /** Accessible label — required, since the button is icon-only. */
+    'aria-label': string;
+    /**
+     * Corner to pin to (fixed). `corner` mounts it centered OVER the top-right corner of the
+     * content column (`--kds-fab-column-width`), overlapping outward; `top-right` insets inside it.
+     * Use `none` to leave positioning to the consumer. Default `top-right`.
+     */
+    position?: KdsFabPosition;
+    /** When true, animates the button out (fade + slight move) and disables interaction. */
+    hidden?: boolean;
+}
+/**
+ * Floating action button — circular, icon-only, with an animated hide state.
+ *
+ * @example
+ * ```tsx
+ * // Static, pinned top-right
+ * <KdsFab icon="close" aria-label="Cancelar pago" onClick={openCancel} />
+ *
+ * // Hide on scroll down, show on scroll up
+ * const { hidden } = useHideOnScroll();
+ * <KdsFab icon="close" aria-label="Cancelar pago" hidden={hidden} onClick={openCancel} />
+ * ```
+ */
+declare const KdsFab: React__default.ForwardRefExoticComponent<KdsFabProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface KdsBankRowProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'name'> {
+    /**
+     * Contenido principal de la fila. Acepta texto o nodo — permite contenido en
+     * columnas por elemento (p. ej. tipo de cuenta · Nº · saldo) para selección de cuentas.
+     */
+    name: React__default.ReactNode;
     logoUrl?: string;
     selected?: boolean;
+    /**
+     * Oculta el slot de logo/iniciales. Útil para filas sin marca (p. ej. selección
+     * de cuenta de origen, que no tiene logo).
+     */
+    hideLogo?: boolean;
 }
 declare const KdsBankRow: React__default.ForwardRefExoticComponent<KdsBankRowProps & React__default.RefAttributes<HTMLButtonElement>>;
 
@@ -3160,24 +3419,67 @@ interface KdsCardPlanProps extends React__default.HTMLAttributes<HTMLDivElement>
 }
 declare const KdsCardPlan: React__default.ForwardRefExoticComponent<KdsCardPlanProps & React__default.RefAttributes<HTMLDivElement>>;
 
-interface KdsInvoiceStickyProps extends React__default.HTMLAttributes<HTMLDivElement> {
+interface KdsInvoiceStickyProps extends React__default.HTMLAttributes<HTMLElement> {
 }
-declare const KdsInvoiceSticky: React__default.ForwardRefExoticComponent<KdsInvoiceStickyProps & React__default.RefAttributes<HTMLDivElement>>;
+declare const KdsInvoiceSticky: React__default.ForwardRefExoticComponent<KdsInvoiceStickyProps & React__default.RefAttributes<HTMLElement>>;
+
+/**
+ * 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>>;
 
 interface KdsSecureFooterProps extends React__default.HTMLAttributes<HTMLElement> {
     variant?: 'default' | 'inside';
+    /** Muestra el logo de Khipu (a color). Default: true. */
+    showLogo?: boolean;
+    /**
+     * Logo del proveedor de pagos (PSP) que contrató a Khipu. Si se provee, se renderiza
+     * a la derecha del logo de Khipu separado por un divisor (ej. "Khipu | klap").
+     * El consumidor pasa el `<img>`/SVG del PSP — el DS no empaqueta logos de terceros.
+     */
+    psp?: React__default.ReactNode;
 }
 declare const KdsSecureFooter: React__default.ForwardRefExoticComponent<KdsSecureFooterProps & React__default.RefAttributes<HTMLElement>>;
 
@@ -3191,6 +3493,230 @@ 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>>;
+
+interface KdsInvoiceMerchantProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Logo URL del comercio. Si falla la carga (o no se provee), cae al ícono `storefront`. */
+    logoUrl?: string;
+    /** Color de marca de fondo (ej. del cobro). Si se omite, usa el fondo púrpura del DS. */
+    brandColor?: string;
+}
+/**
+ * KdsInvoiceMerchant — avatar cuadrado del comercio dentro del `kds-invoice-header`.
+ *
+ * Renderiza el markup canónico `.kds-invoice-merchant` (decorativo: `aria-hidden`), con el
+ * logo del comercio y fallback al ícono `storefront` si la imagen no carga. El fondo toma el
+ * color de marca del cobro cuando se provee. Dentro de `.kds-invoice-sticky` el tamaño colapsa
+ * con el scroll vía el CSS del DS (`--collapse-progress`).
+ *
+ * Reemplaza la imagen + `onerror` inline del header server-side por manejo de error en React.
+ *
+ * @css .kds-invoice-merchant, .kds-invoice-merchant img, .kds-invoice-merchant i
+ */
+declare const KdsInvoiceMerchant: React__default.ForwardRefExoticComponent<KdsInvoiceMerchantProps & 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>;
@@ -3218,6 +3744,151 @@ declare function useTabsKeyboard(tabCount: number, activeIndex: number, onChange
     onKeyDown: (e: React.KeyboardEvent) => void;
 };
 
+/**
+ * Options for {@link useStickyInvoiceCollapse}.
+ */
+interface UseStickyInvoiceCollapseOptions {
+    /**
+     * Called once each time the sticky header *starts* collapsing (scroll crosses the
+     * threshold, progress 0 → >0). Use it to close any open expand panel from React
+     * state — mirrors the vanilla DS behavior that closes `[data-expand-toggle]` panels
+     * as soon as the header begins to collapse. Not fired again until the header
+     * fully expands (progress returns to 0).
+     */
+    onCollapseStart?: () => void;
+    /**
+     * Scroll/collapse range end in px (header is fully collapsed at this scroll). Default 20.
+     */
+    collapseEnd?: number;
+    /**
+     * Max viewport width (px) for the collapse to apply. Desktop is always expanded. Default 768.
+     */
+    mobileBreakpoint?: number;
+}
+/**
+ * React port of the DS vanilla `initStickyInvoice` (`khipu-init.js`).
+ *
+ * On **mobile only** (< `mobileBreakpoint`), maps scroll (0 → `collapseEnd`px) to
+ * `--collapse-progress` (0 → 1) on `.kds-screen.active`; the scoped DS CSS interpolates
+ * the sticky-header collapse + box-shadow. Also caches `--collapse-collapsible-h`,
+ * toggles `.is-collapsed` on `.kds-invoice-sticky`, and closes any open expand panel as
+ * soon as the header starts collapsing (DOM `[data-expand-toggle]` / `.kds-expand-toggle`
+ * for uncontrolled consumers, plus the {@link UseStickyInvoiceCollapseOptions.onCollapseStart}
+ * callback for React-controlled toggles).
+ *
+ * Works standalone (`window.scrollY`) and **embedded in an iframe**, where the widget does
+ * not scroll internally and the parent posts the scroll offset via
+ * `postMessage({ type: 'VIEWPORT_OFFSET', offsetTop })`.
+ *
+ * This hook only reads/writes the DOM and `window` listeners; it renders nothing and
+ * returns nothing. Call it once near the root of the payment screen.
+ */
+declare function useStickyInvoiceCollapse(options?: UseStickyInvoiceCollapseOptions): void;
+
+/**
+ * Options for {@link useExpandToggle}.
+ */
+interface UseExpandToggleOptions {
+    /** Initial open state when uncontrolled. Default `false`. */
+    defaultOpen?: boolean;
+    /** Controlled open state. When provided, the hook is controlled and `onOpenChange` must drive updates. */
+    open?: boolean;
+    /** Called whenever the open state should change (toggle click). */
+    onOpenChange?: (open: boolean) => void;
+    /** Override the generated panel id (`aria-controls` / panel `id`). Defaults to a stable `useId()`. */
+    id?: string;
+}
+/** Props to spread on the `.kds-expand-toggle` `<button>`. */
+interface ExpandToggleProps {
+    type: 'button';
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+/** Props to spread on the `.kds-expand-panel` `<div>`. */
+interface ExpandPanelProps {
+    id: string;
+    className: string;
+    hidden: boolean;
+    /**
+     * Ref the hook uses to drive the panel's `max-height` off its own `scrollHeight`, so the
+     * expand animation fits any content length instead of clipping against a fixed CSS cap.
+     */
+    ref: (node: HTMLDivElement | null) => void;
+}
+/**
+ * Result of {@link useExpandToggle}.
+ */
+interface UseExpandToggleResult {
+    /** Current open state. */
+    open: boolean;
+    /** Imperatively set the open state (e.g. close on header collapse). */
+    setOpen: (open: boolean) => void;
+    /** Toggle the open state. */
+    toggle: () => void;
+    /** Prop-getter for the `.kds-expand-toggle` button — wires `aria-expanded`, `aria-controls`, `onClick`. */
+    getToggleProps: () => ExpandToggleProps;
+    /**
+     * Prop-getter for the `.kds-expand-panel` div — wires `id`, the `open` class and the
+     * `hidden` attribute. Pass the base class (defaults to `kds-expand-panel`).
+     */
+    getPanelProps: (baseClassName?: string) => ExpandPanelProps;
+}
+/**
+ * Accessible disclosure (expand/collapse) wiring for the DS `.kds-expand-toggle` +
+ * `.kds-expand-panel` pattern — the React equivalent of the vanilla `initExpandToggle`
+ * (`khipu-init.js`) for consumers that don't load the global DS JS.
+ *
+ * It links button and panel via a stable `aria-controls`/`id` pair (`useId`), reflects the
+ * open state through `aria-expanded` (which drives the caret rotation in CSS) and toggles the
+ * `open` class on the panel, sizing its `max-height` to the content's `scrollHeight` so the
+ * animation never clips. The `hidden` attribute is also set when closed — the DS provides a
+ * `.kds-expand-panel[hidden]` rule that keeps the panel `display:block` so the collapse still animates.
+ *
+ * Supports controlled (`open` + `onOpenChange`) and uncontrolled (`defaultOpen`) usage. Combine
+ * with `useStickyInvoiceCollapse({ onCollapseStart: () => setOpen(false) })` to close on scroll.
+ *
+ * @example
+ * const detail = useExpandToggle();
+ * <button className="kds-expand-toggle" {...detail.getToggleProps()}>…</button>
+ * <div {...detail.getPanelProps('kds-expand-panel')}>…</div>
+ */
+declare function useExpandToggle(options?: UseExpandToggleOptions): UseExpandToggleResult;
+
+/**
+ * Options for {@link useHideOnScroll}.
+ */
+interface UseHideOnScrollOptions {
+    /** Minimum scroll delta (px) before toggling, to avoid jitter. Default 8. */
+    threshold?: number;
+    /** Scroll offset (px) at/under which the element is always visible. Default 0. */
+    topOffset?: number;
+}
+/**
+ * Result of {@link useHideOnScroll}.
+ */
+interface UseHideOnScrollResult {
+    /** True when the element should be hidden (user scrolled down past the threshold). */
+    hidden: boolean;
+}
+/**
+ * Hide-on-scroll-down / show-on-scroll-up for floating UI (e.g. `KdsFab`).
+ *
+ * Returns `{ hidden }`: starts visible, hides once the user scrolls **down** past
+ * `threshold`, shows again as soon as they scroll **up**, and is always visible while
+ * within `topOffset` of the top. Coalesced through `requestAnimationFrame` so it stays cheap.
+ *
+ * Works standalone (`window.scrollY`) and **embedded in an iframe**, where the widget does
+ * not scroll internally and the parent posts the scroll offset via
+ * `postMessage({ type: 'VIEWPORT_OFFSET', offsetTop })` — the same mechanism as
+ * {@link useStickyInvoiceCollapse}.
+ *
+ * @example
+ * const { hidden } = useHideOnScroll();
+ * <KdsFab icon="close" aria-label="Cancelar" hidden={hidden} onClick={open} />
+ */
+declare function useHideOnScroll(options?: UseHideOnScrollOptions): UseHideOnScrollResult;
+
 /**
  * Khipu Design System - Core Utilities
  *
@@ -3235,5 +3906,12 @@ declare function getContrastColor(hex: string): string;
  * @param amount - 0 = original, 1 = white. Typical: 0.85 for container colors.
  */
 declare function lighten(hex: string, amount: number): string;
+/**
+ * Format an ISO 8601 string as "DD-MM-YYYY HH:mm" (24h) in the browser's local timezone.
+ * Returns "" for empty or invalid input. Numeric (not `Intl` locale-aware) so the 24h + numeric
+ * output matches server-side (ICU/Java) formatting regardless of locale.
+ * @param iso - ISO 8601 date-time, e.g. "2026-08-26T03:59:00.000Z"
+ */
+declare function formatDateTime(iso?: string): 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, type ExpandPanelProps, type ExpandToggleProps, 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, KdsCopyButton, type KdsCopyButtonProps, KdsCopyRow, type KdsCopyRowProps, KdsCopyableTable, type KdsCopyableTableProps, type KdsCopyableTableRow, KdsCountdown, type KdsCountdownProps, KdsDivider, type KdsDividerProps, KdsExpandPanel, type KdsExpandPanelProps, KdsFab, type KdsFabPosition, type KdsFabProps, KdsInvoiceMerchant, type KdsInvoiceMerchantProps, 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, KdsSearchField, type KdsSearchFieldProps, KdsSectionNote, type KdsSectionNoteProps, KdsSecureFooter, type KdsSecureFooterProps, KdsSecureLoader, type KdsSecureLoaderProps, 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, type UseExpandToggleOptions, type UseExpandToggleResult, type UseHideOnScrollOptions, type UseHideOnScrollResult, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, formatDateTime, getContrastColor, letterSpacings, lighten, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useExpandToggle, useHideOnScroll, useStickyInvoiceCollapse, useTabsKeyboard, zIndex };