@khipu/design-system 0.3.5-alpha.35 → 0.3.5-alpha.36

package/dist/index.d.ts

@@ -29,7 +29,7 @@ interface KdsThemeProviderProps {
  */
 declare function KdsThemeProvider({ primaryColor, mode, children }: KdsThemeProviderProps): react_jsx_runtime.JSX.Element;
 
-declare const KDS_VERSION = "0.3.5-alpha.35";
+declare const KDS_VERSION = "0.3.5-alpha.36";
 
 /**
  * Color tokens organized by theme mode
@@ -2772,6 +2772,30 @@ interface KdsSecureLoaderProps extends React__default.HTMLAttributes<HTMLDivElem
 }
 declare const KdsSecureLoader: React__default.ForwardRefExoticComponent<KdsSecureLoaderProps & React__default.RefAttributes<HTMLDivElement>>;
 
+type KdsProgressChecklistStatus = 'pending' | 'active' | 'done' | 'error';
+interface KdsProgressChecklistItem {
+    /** Stable key; falls back to the label. */
+    id?: string;
+    label: string;
+    status: KdsProgressChecklistStatus;
+}
+interface KdsProgressChecklistProps extends React__default.HTMLAttributes<HTMLUListElement> {
+    items: KdsProgressChecklistItem[];
+    /**
+     * Status text read by screen readers after each label (visually hidden), for i18n.
+     * @default { pending: 'pendiente', active: 'en curso', done: 'listo', error: 'con error' }
+     */
+    statusLabels?: Partial<Record<KdsProgressChecklistStatus, string>>;
+}
+/**
+ * Progress checklist: a list of steps that advance pending → active → done (or error),
+ * e.g. the automatic validation after the business information in onboarding.
+ *
+ * The list is an `aria-live="polite"` region, so status changes are announced; each item
+ * also carries its status as visually hidden text.
+ */
+declare const KdsProgressChecklist: React__default.ForwardRefExoticComponent<KdsProgressChecklistProps & React__default.RefAttributes<HTMLUListElement>>;
+
 /**
  * Khipu Design System - CopyButton Component
  *
@@ -2986,7 +3010,21 @@ declare const KdsRadioGroup: React__default.ForwardRefExoticComponent<KdsRadioGr
  *
  * BeerCSS dibuja el chevron automáticamente, el floating label, focus ring, etc.
  *
- * @gsp `mat:select` taglib (MaterialTagLib.groovy:260)
+ * Variante `readOnly` (valor precargado que no se edita, ej. datos que vienen del banco):
+ * `<select>` no soporta `readonly` y `disabled` no envía el valor en el form, así que se
+ * renderiza el mismo markup que `KdsTextField readOnly` (`.field.locked` + candado) con el
+ * texto de la opción elegida, más un `<input type="hidden">` que lleva `name` y el value:
+ *
+ *   <div class="field label border suffix locked">
+ *     <input type="text" id="..." value="Santander" placeholder=" " readonly>
+ *     <label for="...">Banco</label>
+ *     <i class="material-symbols-outlined" aria-hidden="true">lock</i>
+ *     <input type="hidden" name="bank" value="santander">
+ *   </div>
+ *
+ * En ese modo el `ref` no se asigna (no hay `<select>` en el DOM).
+ *
+ * @gsp `mat:select` taglib (MaterialTagLib.groovy:260); readOnly → `mat:fieldLocked` + `g:hiddenField`
  */
 
 interface KdsSelectOption {
@@ -3015,6 +3053,16 @@ interface KdsSelectProps extends Omit<React__default.SelectHTMLAttributes<HTMLSe
     prefixIcon?: string;
     /** Full width (default: true). */
     fullWidth?: boolean;
+    /**
+     * Solo lectura: muestra el texto de la opción elegida en un field `.locked` con candado y
+     * envía el value por un `<input type="hidden">` (lleva `name` y `form`). `disabled` tiene
+     * precedencia.
+     *
+     * En este modo no hay `<select>` en el DOM: el `ref` queda en `null` y solo pasan al input
+     * visible los atributos `aria-*`, `data-*` y `title` (no los handlers de evento del select).
+     * `required` se muestra como `*` en la label pero no se aplica: un campo readonly no se valida.
+     */
+    readOnly?: boolean;
 }
 declare const KdsSelect: React__default.ForwardRefExoticComponent<KdsSelectProps & React__default.RefAttributes<HTMLSelectElement>>;
 
@@ -3202,7 +3250,7 @@ declare const KdsStatusBlock: React__default.ForwardRefExoticComponent<KdsStatus
  *
  *   <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-indicator"></div>   <!-- vacío: check via CSS -->
  *       <div class="kds-step-label">Label</div>
  *     </div>
  *     ...
@@ -3211,7 +3259,14 @@ declare const KdsStatusBlock: React__default.ForwardRefExoticComponent<KdsStatus
  * 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.
+ * - Sin `numbered` el número del step está oculto (`font-size: 0`).
+ *
+ * Modificadores opcionales (aditivos; sin ellos el markup es el de arriba):
+ * - `.kds-stepper--numbered`: número dentro del indicador (`numbered`).
+ * - `.kds-stepper--primary`: paso actual en color de marca (`color="primary"`).
+ * - `.kds-stepper--current-label`: con el stepper angosto (≤ 560px de ancho propio,
+ *   container query) solo se ve la etiqueta del paso actual (`currentLabelOnly`).
+ * El paso actual lleva `aria-current="step"`.
  *
  * @gsp `mat:stepper` taglib (MaterialTagLib.groovy:817)
  */
@@ -3222,10 +3277,28 @@ interface KdsStepperProps extends React__default.HTMLAttributes<HTMLDivElement>
     /**
      * Índice 0-based del step actual.
      * - Steps `< current` → `.completed` (verde con check)
-     * - Step `== current` → `.current` (azul info)
+     * - Step `== current` → `.current` (azul info, o primary con `color="primary"`)
      * - Steps `> current` → pending (gris)
      */
     current: number;
+    /**
+     * Muestra el número de paso (1-based) dentro del indicador. Los pasos completados
+     * mantienen el check. Aplica `.kds-stepper--numbered`.
+     */
+    numbered?: boolean;
+    /**
+     * Color del paso actual: `info` (default, como hasta ahora) o `primary` (color de marca).
+     * `primary` aplica `.kds-stepper--primary`.
+     * @default 'info'
+     */
+    color?: 'info' | 'primary';
+    /**
+     * Con el stepper angosto (≤ 560px de su propio ancho, no del viewport: container query)
+     * muestra solo la etiqueta del paso actual; las demás
+     * quedan ocultas visualmente pero disponibles para lectores de pantalla.
+     * Aplica `.kds-stepper--current-label`.
+     */
+    currentLabelOnly?: boolean;
 }
 declare const KdsStepper: React__default.ForwardRefExoticComponent<KdsStepperProps & React__default.RefAttributes<HTMLDivElement>>;
 
@@ -3457,6 +3530,201 @@ interface KdsBankModalProps {
 }
 declare const KdsBankModal: React__default.ForwardRefExoticComponent<KdsBankModalProps & React__default.RefAttributes<HTMLDivElement>>;
 
+interface KdsContractProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Contract body, rendered inside the scrollable `.kds-contract-content`. */
+    children: React__default.ReactNode;
+    /** Accessible name of the scrollable region. @default 'Contrato' */
+    contentLabel?: string;
+    /** Checkbox label. @default 'Declaro que leí y acepto el contrato' */
+    acceptLabel?: React__default.ReactNode;
+    /** Shown (and used as the checkbox description) until the end is reached. */
+    hint?: string;
+    /** Checkbox `name`, for form submission. */
+    name?: string;
+    /** Controlled checked state of the acceptance checkbox. */
+    accepted?: boolean;
+    /** Called with the new checked state. */
+    onAcceptedChange?: (accepted: boolean) => void;
+    /** Called once, when the content has been scrolled to the end (or fits without scroll). */
+    onReadComplete?: () => void;
+}
+/**
+ * Contract that must be read to the end before it can be accepted: the acceptance checkbox
+ * stays disabled until `.kds-contract-content` is scrolled to the bottom (or right away if
+ * it fits). Server-side pages get the same behaviour from `[data-kds-contract]` in the
+ * BeerCSS bundle (`Khipu.initContract`).
+ */
+declare const KdsContract: React__default.ForwardRefExoticComponent<KdsContractProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsFeedbackCardProps extends Omit<React__default.HTMLAttributes<HTMLElement>, 'title' | 'onSubmit'> {
+    /** Question shown as the card title (also its accessible name). */
+    title: string;
+    description?: string;
+    /** Material Symbol in the icon tile. @default 'auto_awesome' */
+    icon?: string;
+    /** The answer control (e.g. a KdsSelect). Hidden once submitted. */
+    children?: React__default.ReactNode;
+    /** Enables the submit button (e.g. once an option is chosen). */
+    canSubmit: boolean;
+    onSubmit: () => void;
+    /** @default 'Enviar' */
+    submitLabel?: string;
+    /** Shows the thank-you state instead of the question. */
+    submitted?: boolean;
+    /** @default '¡Gracias por contarnos!' */
+    thanksTitle?: string;
+    /** @default 'Tu respuesta nos ayuda a llegar a más negocios como el tuyo.' */
+    thanksDescription?: string;
+}
+/**
+ * Optional feedback card (e.g. "¿Cómo nos conociste?" on a success screen): icon, question,
+ * an answer control and a submit button; after submitting it turns into a thank-you note in
+ * the same `aria-live` region, so the change is announced. It never blocks the page.
+ */
+declare const KdsFeedbackCard: React__default.ForwardRefExoticComponent<KdsFeedbackCardProps & React__default.RefAttributes<HTMLElement>>;
+
+interface KdsConsentItem {
+    /** Material Symbol shown before the text (decorative). */
+    icon?: string;
+    text: React__default.ReactNode;
+}
+interface KdsConsentSection {
+    /** Section title, e.g. "Datos solicitados", "Vigencia de la autorización", "Finalidad". */
+    title: string;
+    items: KdsConsentItem[];
+}
+interface KdsConsentCardProps extends Omit<React__default.HTMLAttributes<HTMLElement>, 'title'> {
+    /** Who asks for access, e.g. "Khipu". */
+    requester: string;
+    /** What access is asked for, e.g. the bank name. */
+    resource: string;
+    /**
+     * Replaces the default heading "<requester> solicita acceso a <resource>" (e.g. for
+     * another language). It is still the card's accessible name.
+     */
+    heading?: React__default.ReactNode;
+    subtitle?: string;
+    /** Logo shown above the title (e.g. a KdsMerchantTile). */
+    logo?: React__default.ReactNode;
+    /** What is requested, for how long and what for. Texts come from the consumer. */
+    sections: KdsConsentSection[];
+    onAccept: () => void;
+    onReject: () => void;
+    /** Accept in progress: shows `loadingLabel` and disables both actions. */
+    loading?: boolean;
+    /** @default 'Autorizar' */
+    acceptLabel?: string;
+    /** @default 'Rechazar' */
+    rejectLabel?: string;
+    /** @default 'Autorizando' */
+    loadingLabel?: string;
+}
+/**
+ * Access consent: "<requester> solicita acceso a <resource>", the data requested, its
+ * validity and purpose, and Authorize / Reject. Sections are configurable so the legal
+ * texts stay with the consumer. The secure footer goes outside the card, as a sibling
+ * under `.kds-screen` (inside a `.kds-card-elevated` it is hidden by design).
+ */
+declare const KdsConsentCard: React__default.ForwardRefExoticComponent<KdsConsentCardProps & React__default.RefAttributes<HTMLElement>>;
+
+interface KdsSidebarItem {
+    label: string;
+    href: string;
+    /** Material Symbol (decorative). */
+    icon?: string;
+    /** Current page: `.active` + `aria-current="page"`. */
+    active?: boolean;
+    /** Opens in a new tab. */
+    external?: boolean;
+}
+interface KdsSidebarHeader {
+    title: string;
+    subtitle?: string;
+    /** Material Symbol shown instead of the avatar (e.g. 'settings'). */
+    icon?: string;
+    /** Avatar initial, used when there is no icon. */
+    avatar?: string;
+    /**
+     * Context switcher content (e.g. `.kds-sidebar-nav-item` links). When given, the header
+     * becomes a toggle (`role="button"`, keyboard operable) for the floating dropdown.
+     */
+    menu?: React__default.ReactNode;
+}
+interface KdsSidebarProps extends React__default.HTMLAttributes<HTMLElement> {
+    header: KdsSidebarHeader;
+    items: KdsSidebarItem[];
+    /** Accessible name of the item nav. @default 'Menú de la cuenta' */
+    navLabel?: string;
+    /** Mobile drawer state (≤ 768px). */
+    open?: boolean;
+    /** Called by the drawer's close button and Escape while open. */
+    onClose?: () => void;
+    /** Title of the mobile drawer bar. @default 'Menú' */
+    mobileTitle?: string;
+    /** aria-label of the drawer close button. @default 'Cerrar menú' */
+    closeLabel?: string;
+}
+/**
+ * Side navigation of the logged-in panel, on the existing `.kds-sidebar` classes (same
+ * markup as payment's `_materialSidebar.gsp` + `mat:sidebarHeader`/`mat:sidebarNav`, with
+ * the items inside `nav.kds-sidebar-nav` like the DS demo). Desktop: sticky floating card.
+ * Mobile: full-width drawer driven by `open`/`onClose`.
+ */
+declare const KdsSidebar: React__default.ForwardRefExoticComponent<KdsSidebarProps & React__default.RefAttributes<HTMLElement>>;
+
+interface KdsNavbarProps extends React__default.HTMLAttributes<HTMLElement> {
+    /** Logo or brand text inside `a.kds-navbar-brand`. */
+    brand: React__default.ReactNode;
+    /** @default '/' */
+    brandHref?: string;
+    /**
+     * `primary`: brand-colored bar (logged-in panel). `surface`: light bar with a bottom
+     * border (logged-out pages).
+     * @default 'primary'
+     */
+    variant?: 'primary' | 'surface';
+    /** Renders the mobile hamburger (`.kds-hamburger-btn`) when given. */
+    onMenuClick?: () => void;
+    /** Hamburger `aria-expanded` (the sidebar drawer state). */
+    menuOpen?: boolean;
+    /** Hamburger `aria-controls`: the sidebar `id`. */
+    menuControls?: string;
+    /** Hamburger aria-label. @default 'Menú' */
+    menuLabel?: string;
+    /** Right-hand actions (after the flexible spacer). */
+    children?: React__default.ReactNode;
+}
+/**
+ * Top bar of the panel, on the existing classes (same markup as payment's
+ * `_materialNavbar.gsp`): `nav.primary` / `nav.surface`, `.kds-container-center`,
+ * optional `.kds-hamburger-btn` (mobile only), `a.kds-navbar-brand`, a `.max` spacer and
+ * the actions.
+ */
+declare const KdsNavbar: React__default.ForwardRefExoticComponent<KdsNavbarProps & React__default.RefAttributes<HTMLElement>>;
+
+interface KdsFooterLink {
+    label: string;
+    href: string;
+    /** Opens in a new tab (`target="_blank" rel="noopener noreferrer"`). */
+    external?: boolean;
+}
+interface KdsFooterColumn {
+    title: string;
+    links: KdsFooterLink[];
+}
+interface KdsFooterProps extends React__default.HTMLAttributes<HTMLElement> {
+    columns: KdsFooterColumn[];
+    /** Bottom part after the columns: social links, addresses, copyright. */
+    children?: React__default.ReactNode;
+}
+/**
+ * Site footer of the panel, on the existing classes (same markup as payment's
+ * `_materialFooter.gsp`): `footer.primary`, `.kds-container-center`, a `.kds-grid` of
+ * columns (12 / 6 / 2 cols by breakpoint) each with an `h6` title and a
+ * `nav.kds-footer-nav` named by that title.
+ */
+declare const KdsFooter: React__default.ForwardRefExoticComponent<KdsFooterProps & React__default.RefAttributes<HTMLElement>>;
+
 interface KdsQrRowProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     /** Primary label (e.g. "Pagar escaneando QR") */
     name: string;
@@ -3469,13 +3737,48 @@ interface KdsQrRowProps extends Omit<React__default.ButtonHTMLAttributes<HTMLBut
 }
 declare const KdsQrRow: React__default.ForwardRefExoticComponent<KdsQrRowProps & React__default.RefAttributes<HTMLButtonElement>>;
 
-interface KdsCardSelectorProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+interface KdsCardSelectorProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
     icon?: string;
     title: string;
     description?: string;
+    /** Button mode: highlights the card (`.selected`). */
     selected?: boolean;
+    /**
+     * Radio mode (requires `name` and `value`): the card becomes a native radio option
+     * (`.kds-card-selector--radio`): a `<div>` with an `<input type="radio">` and the title as
+     * its label stretched over the card. Needed for block content such as lists in
+     * `children`, which a `<button>` cannot hold. Cards sharing a `name` form one group
+     * (arrow keys, form submit) without JS. Explicit opt-in: without it, `name`/`value` stay
+     * on the `<button>` as before (e.g. a submit button).
+     */
+    radio?: boolean;
+    /** Button mode: the button's `name`. Radio mode: the radio group name. */
+    name?: string;
+    /** Button mode: the button's `value`. Radio mode: the value submitted for this option. */
+    value?: string;
+    /** Radio mode: controlled checked state. */
+    checked?: boolean;
+    /** Radio mode: called with `value` when the user picks this card. */
+    onCheckedChange?: (value: string) => void;
+    /**
+     * Extra content under the description (`.kds-card-selector-details`). In button mode it
+     * must be inline content (it renders in a `<span>`); use radio mode for lists or blocks.
+     */
+    children?: React__default.ReactNode;
 }
-declare const KdsCardSelector: React__default.ForwardRefExoticComponent<KdsCardSelectorProps & React__default.RefAttributes<HTMLButtonElement>>;
+/**
+ * The ref points to the `<button>` in button mode and to the card `<div>` in radio mode.
+ */
+declare const KdsCardSelector: React__default.ForwardRefExoticComponent<KdsCardSelectorProps & React__default.RefAttributes<HTMLElement>>;
+interface KdsCardSelectorGroupProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /** Accessible name of the group (e.g. "Tipo de contribuyente"). */
+    label: string;
+}
+/**
+ * Wraps radio-mode KdsCardSelector cards in a labelled `role="radiogroup"` laid out with
+ * the `.kds-card-selector-group` grid: as many columns as fit in the group's own width.
+ */
+declare const KdsCardSelectorGroup: React__default.ForwardRefExoticComponent<KdsCardSelectorGroupProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface KdsCardPlanProps extends React__default.HTMLAttributes<HTMLDivElement> {
     title: string;
@@ -3485,8 +3788,34 @@ interface KdsCardPlanProps extends React__default.HTMLAttributes<HTMLDivElement>
     recommended?: boolean;
     badgeText?: string;
     action?: React__default.ReactNode;
+    /** Short line under the title, e.g. "Incluye descuentos por volumen." */
+    description?: string;
+    /** Shows a check icon before each feature (decorative). */
+    checkFeatures?: boolean;
+    /**
+     * Radio group name. Together with `value` it makes the card selectable: it renders a
+     * native `<input type="radio">` and the title becomes its label, stretched over the
+     * whole card. Cards sharing a `name` form one group (arrow keys, form submit).
+     */
+    name?: string;
+    /** Value submitted for this plan when it is selected. Requires `name`. */
+    value?: string;
+    /** Controlled checked state of the radio. */
+    selected?: boolean;
+    /** Called with `value` when the user selects this card. */
+    onSelectedChange?: (value: string) => void;
 }
 declare const KdsCardPlan: React__default.ForwardRefExoticComponent<KdsCardPlanProps & React__default.RefAttributes<HTMLDivElement>>;
+interface KdsCardPlanGroupProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    /** Accessible name of the group (e.g. "Plan de cobro"). */
+    label: string;
+}
+/**
+ * Wraps selectable KdsCardPlan cards in a labelled `role="radiogroup"` laid out with the
+ * `.kds-card-plan-group` grid: as many columns as fit in the group's own width (cards
+ * keep their 260px minimum), so it also works inside a narrow card next to a sidebar.
+ */
+declare const KdsCardPlanGroup: React__default.ForwardRefExoticComponent<KdsCardPlanGroupProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface KdsInvoiceStickyProps extends React__default.HTMLAttributes<HTMLElement> {
 }
@@ -3512,7 +3841,9 @@ declare const KdsInvoiceHeaderSkeleton: React__default.ForwardRefExoticComponent
 /**
  * Khipu Design System - BottomSheet Component
  *
- * Bottom-sheet (modal que sube desde abajo en mobile, centrado en desktop) basado
+ * Bottom-sheet (modal que sube desde abajo: en mobile ocupa todo el ancho pegado al borde;
+ * cuando la pantalla es más ancha que el sheet (420px) flota sobre el borde inferior con
+ * todas las esquinas redondeadas) 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):
@@ -3521,13 +3852,18 @@ declare const KdsInvoiceHeaderSkeleton: React__default.ForwardRefExoticComponent
  *     <div class="kds-bottom-sheet">
  *       <div class="kds-bottom-sheet-grabber" />                  <!-- opcional -->
  *       <button class="kds-bottom-sheet-close">X</button>          <!-- opcional -->
+ *       <div class="kds-bottom-sheet-icon">...</div>               <!-- 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>
+ *       <p class="kds-bottom-sheet-hint">...</p>                   <!-- opcional -->
  *       <div class="kds-bottom-sheet-actions">actions</div>        <!-- opcional -->
  *     </div>
  *   </div>
  *
+ * Variante diálogo (`variant="dialog"`): `kds-bottom-sheet-scrim--dialog` en el scrim y
+ * `kds-bottom-sheet--dialog` en el sheet; con texto centrado suma `kds-bottom-sheet--center`.
+ *
  * IMPORTANTE: el scrim DEBE llevar la clase `.open` SIEMPRE (Radix maneja mount/unmount).
  * Sin `.open`, el scrim queda `display: none` y no se ve.
  */
@@ -3558,6 +3894,28 @@ interface KdsBottomSheetProps extends React__default.HTMLAttributes<HTMLDivEleme
      * (90dvh) y estira el body para contenido largo como documentos o textos legales.
      */
     size?: 'auto' | 'full';
+    /**
+     * `false` para un sheet que no se puede cerrar mientras dura un proceso (p. ej. una
+     * validación automática): ignora Escape y el click fuera, y no muestra grabber ni X.
+     * Lo cierra el consumidor poniendo `open={false}` al terminar. Default: true.
+     */
+    dismissible?: boolean;
+    /**
+     * `sheet` (default): bottom sheet con texto centrado. `dialog`: modal corriente con texto
+     * a la izquierda — en escritorio (>520px) centrado en pantalla con las acciones lado a lado
+     * (la primera acción queda a la derecha); en mobile sigue siendo bottom sheet con las
+     * acciones apiladas. Pasa la acción principal primero en `actions`.
+     */
+    variant?: 'sheet' | 'dialog';
+    /**
+     * Alineación del texto en la variante `dialog`: `start` (default, modal corriente) o
+     * `center` (modal de estado, p. ej. con un spinner arriba). El sheet siempre va centrado.
+     */
+    align?: 'start' | 'center';
+    /** Ícono o loader sobre el título (p. ej. `<KdsSpinner />`), en `.kds-bottom-sheet-icon`. */
+    icon?: React__default.ReactNode;
+    /** Nota breve sobre las acciones (p. ej. "No cierres esta ventana."). */
+    hint?: React__default.ReactNode;
 }
 declare const KdsBottomSheet: React__default.ForwardRefExoticComponent<KdsBottomSheetProps & React__default.RefAttributes<HTMLDivElement>>;
 
@@ -4110,4 +4468,4 @@ declare function formatDate(iso?: string): string;
  */
 declare function formatTime(iso?: string): string;
 
-export { type Colors, type ExpandPanelProps, type ExpandToggleProps, KDS_VERSION, 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, KdsDocumentFrame, type KdsDocumentFrameProps, KdsEmptyState, type KdsEmptyStateProps, KdsExpandPanel, type KdsExpandPanelProps, KdsFab, type KdsFabPosition, type KdsFabProps, KdsInvoiceHeaderSkeleton, type KdsInvoiceHeaderSkeletonProps, 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, LIGHT_LOGO_LUMINANCE_THRESHOLD, type LogoBackdrop, type ThemeMode, type Tokens, type TokensByMode, type Typography as TypographyTokens, type UseExpandToggleOptions, type UseExpandToggleResult, type UseHideOnScrollOptions, type UseHideOnScrollResult, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, centerFieldInViewport, colors, colorsByMode, focusFirstInvalidField, fontFamilies, fontSizes, fontWeights, formatDate, formatDateTime, formatTime, getContrastColor, guideToFirstInvalidFieldOnBlur, letterSpacings, lighten, lineHeights, measureLogoLuminance, pickLogoBackdrop, runAfterPointerGesture, scrollToFirstInvalidField, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useExpandToggle, useHideOnScroll, useLogoBackdrop, useMediaQuery, useStickyInvoiceCollapse, useTabsKeyboard, zIndex };
+export { type Colors, type ExpandPanelProps, type ExpandToggleProps, KDS_VERSION, 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, KdsCardPlanGroup, type KdsCardPlanGroupProps, type KdsCardPlanProps, type KdsCardProps, type KdsCardSectionProps, KdsCardSelector, KdsCardSelectorGroup, type KdsCardSelectorGroupProps, type KdsCardSelectorProps, type KdsCardVariant, KdsCheckbox, type KdsCheckboxProps, KdsChip, type KdsChipColor, type KdsChipProps, KdsConsentCard, type KdsConsentCardProps, type KdsConsentItem, type KdsConsentSection, KdsContract, type KdsContractProps, KdsCopyButton, type KdsCopyButtonProps, KdsCopyRow, type KdsCopyRowProps, KdsCopyableTable, type KdsCopyableTableProps, type KdsCopyableTableRow, KdsCountdown, type KdsCountdownProps, KdsDivider, type KdsDividerProps, KdsDocumentFrame, type KdsDocumentFrameProps, KdsEmptyState, type KdsEmptyStateProps, KdsExpandPanel, type KdsExpandPanelProps, KdsFab, type KdsFabPosition, type KdsFabProps, KdsFeedbackCard, type KdsFeedbackCardProps, KdsFooter, type KdsFooterColumn, type KdsFooterLink, type KdsFooterProps, KdsInvoiceHeaderSkeleton, type KdsInvoiceHeaderSkeletonProps, KdsInvoiceMerchant, type KdsInvoiceMerchantProps, KdsInvoiceSticky, type KdsInvoiceStickyProps, KdsLinearProgress, type KdsLinearProgressProps, KdsMerchantTile, type KdsMerchantTileProps, KdsMontoRow, type KdsMontoRowProps, KdsNavbar, type KdsNavbarProps, KdsPaymentTotal, type KdsPaymentTotalProps, type KdsPaymentTotalVariant, KdsProgressChecklist, type KdsProgressChecklistItem, type KdsProgressChecklistProps, type KdsProgressChecklistStatus, 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, KdsSidebar, type KdsSidebarHeader, type KdsSidebarItem, type KdsSidebarProps, 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, LIGHT_LOGO_LUMINANCE_THRESHOLD, type LogoBackdrop, type ThemeMode, type Tokens, type TokensByMode, type Typography as TypographyTokens, type UseExpandToggleOptions, type UseExpandToggleResult, type UseHideOnScrollOptions, type UseHideOnScrollResult, type UseStickyInvoiceCollapseOptions, borderRadius, breakpoints, centerFieldInViewport, colors, colorsByMode, focusFirstInvalidField, fontFamilies, fontSizes, fontWeights, formatDate, formatDateTime, formatTime, getContrastColor, guideToFirstInvalidFieldOnBlur, letterSpacings, lighten, lineHeights, measureLogoLuminance, pickLogoBackdrop, runAfterPointerGesture, scrollToFirstInvalidField, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, useAutoHide, useCopyToClipboard, useCountdown, useExpandToggle, useHideOnScroll, useLogoBackdrop, useMediaQuery, useStickyInvoiceCollapse, useTabsKeyboard, zIndex };