@khipu/design-system 0.1.0-alpha.55 → 0.2.0-alpha.2

package/dist/index.d.mts

@@ -1,130 +1,28 @@
-import * as _mui_material_styles from '@mui/material/styles';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default from 'react';
-import { ThemeOptions } from '@mui/material';
-import { ButtonProps } from '@mui/material/Button';
-import { TextFieldProps } from '@mui/material/TextField';
-import { CheckboxProps } from '@mui/material/Checkbox';
-import { DialogProps } from '@mui/material/Dialog';
-import { CardProps } from '@mui/material/Card';
-import { CardHeaderProps } from '@mui/material/CardHeader';
-import { CardContentProps } from '@mui/material/CardContent';
-import { CardActionsProps } from '@mui/material/CardActions';
-import { CircularProgressProps } from '@mui/material/CircularProgress';
-import { LinearProgressProps } from '@mui/material/LinearProgress';
-import { AlertProps } from '@mui/material/Alert';
-import { TypographyProps } from '@mui/material/Typography';
-import { TabsProps } from '@mui/material/Tabs';
-import { TabProps } from '@mui/material/Tab';
-import { BoxProps } from '@mui/material/Box';
-export { default as Box, BoxProps } from '@mui/material/Box';
-import { IconButtonProps } from '@mui/material/IconButton';
-export { default as IconButton, IconButtonProps } from '@mui/material/IconButton';
-import { RadioGroupProps } from '@mui/material/RadioGroup';
-import { RadioProps } from '@mui/material/Radio';
-import { SelectProps } from '@mui/material/Select';
-import { MenuItemProps } from '@mui/material/MenuItem';
-import { ChipProps } from '@mui/material/Chip';
-import { SnackbarProps } from '@mui/material/Snackbar';
-import { TooltipProps } from '@mui/material/Tooltip';
-import { AccordionProps } from '@mui/material/Accordion';
-import { AccordionSummaryProps } from '@mui/material/AccordionSummary';
-import { AccordionDetailsProps } from '@mui/material/AccordionDetails';
-export { default as InputAdornment, InputAdornmentProps } from '@mui/material/InputAdornment';
-export { default as Divider, DividerProps } from '@mui/material/Divider';
-export { default as Link, LinkProps } from '@mui/material/Link';
-export { default as Stack, StackProps } from '@mui/material/Stack';
-export { default as Grid, GridProps } from '@mui/material/Grid';
-export { default as Container, ContainerProps } from '@mui/material/Container';
-export { default as SearchIcon } from '@mui/icons-material/Search';
-export { default as ChevronRightIcon } from '@mui/icons-material/ChevronRight';
-export { default as ChevronLeftIcon } from '@mui/icons-material/ChevronLeft';
-export { default as CloseIcon } from '@mui/icons-material/Close';
-export { default as CheckIcon } from '@mui/icons-material/Check';
-export { default as CheckCircleIcon } from '@mui/icons-material/CheckCircle';
-export { default as PersonIcon } from '@mui/icons-material/Person';
-export { default as LockIcon } from '@mui/icons-material/Lock';
-export { default as LockOutlinedIcon } from '@mui/icons-material/LockOutlined';
-export { default as MailOutlineIcon } from '@mui/icons-material/MailOutline';
-export { default as ExpandMoreIcon } from '@mui/icons-material/ExpandMore';
-export { default as ExpandLessIcon } from '@mui/icons-material/ExpandLess';
-export { default as InfoIcon } from '@mui/icons-material/Info';
-export { default as WarningIcon } from '@mui/icons-material/Warning';
-export { default as ErrorIcon } from '@mui/icons-material/Error';
-export { default as VisibilityIcon } from '@mui/icons-material/Visibility';
-export { default as VisibilityOffIcon } from '@mui/icons-material/VisibilityOff';
-export { default as ContentCopyIcon } from '@mui/icons-material/ContentCopy';
-export { default as KeyboardArrowUpIcon } from '@mui/icons-material/KeyboardArrowUp';
-export { default as KeyboardArrowDownIcon } from '@mui/icons-material/KeyboardArrowDown';
+import * as Select from '@radix-ui/react-select';
+export { clsx } from 'clsx';
 
-declare const khipuTheme: _mui_material_styles.Theme;
-
-type KhipuTheme = typeof khipuTheme;
-
-interface KhipuThemeProviderProps {
-    /** Child components */
-    children: React__default.ReactNode;
-    /** Include CSS baseline reset */
-    includeCssBaseline?: boolean;
-    /** Override palette.primary.main */
+interface KdsThemeProviderProps {
+    /** Override primary color for merchant branding */
     primaryColor?: string;
-    /** Override palette.primary.light */
-    primaryColorVariant?: string;
-    /** Override typography.fontFamily */
-    fontFamily?: string;
-    /** Override palette.text.primary */
-    textColor?: string;
-    /** Override palette.background.default */
-    backgroundColor?: string;
-    /** Override palette.background.paper */
-    pageBackgroundColor?: string;
-    /** Override palette.mode ('light' | 'dark') */
+    /** Light or dark mode */
     mode?: 'light' | 'dark';
-    /** Override button text color (primary.contrastText) */
-    buttonFontColor?: string;
-    /** Override palette.text.disabled */
-    disabledFontColor?: string;
-    /** Override palette.action.disabledBackground */
-    disabledBackgroundColor?: string;
-    /** Font size multiplier for responsive sizing */
-    fontSizeMultiplier?: number;
-    /** Additional MUI theme overrides for full flexibility */
-    themeOverrides?: ThemeOptions;
+    children: React__default.ReactNode;
 }
 /**
- * Provides the Khipu design system theme to all child components.
- * Supports dynamic overrides for merchant-specific customization at runtime.
+ * Lightweight theme provider using CSS custom properties.
+ * Replaces MUI's KhipuThemeProvider.
  *
  * @example
  * ```tsx
- * import { KhipuThemeProvider } from '@khipu/design-system';
- *
- * // Basic usage
- * function App() {
- *   return (
- *     <KhipuThemeProvider>
- *       <YourApp />
- *     </KhipuThemeProvider>
- *   );
- * }
- *
- * // With dynamic merchant overrides
- * function MerchantApp({ style }) {
- *   return (
- *     <KhipuThemeProvider
- *       primaryColor={style.primaryColor}
- *       fontFamily={style.fontFamily}
- *       mode={style.theme}
- *       backgroundColor={style.backgroundColor}
- *     >
- *       <YourApp />
- *     </KhipuThemeProvider>
- *   );
- * }
+ * <KdsThemeProvider primaryColor="#FF0000">
+ *   <App />
+ * </KdsThemeProvider>
  * ```
  */
-declare function KhipuThemeProvider({ children, includeCssBaseline, themeOverrides, ...dynamicProps }: KhipuThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function KdsThemeProvider({ primaryColor, mode, children }: KdsThemeProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Color tokens organized by theme mode
@@ -1228,6 +1126,48 @@ declare const tokensByMode: {
                 readonly desktop: "0.75rem";
             };
         };
+        readonly responsiveBaseFontSizes: {
+            readonly xs: {
+                readonly mobile: "0.6875rem";
+                readonly tablet: "0.75rem";
+                readonly desktop: "0.75rem";
+            };
+            readonly sm: {
+                readonly mobile: "0.8125rem";
+                readonly tablet: "0.875rem";
+                readonly desktop: "0.875rem";
+            };
+            readonly base: {
+                readonly mobile: "0.875rem";
+                readonly tablet: "1rem";
+                readonly desktop: "1rem";
+            };
+            readonly lg: {
+                readonly mobile: "1rem";
+                readonly tablet: "1.125rem";
+                readonly desktop: "1.125rem";
+            };
+            readonly xl: {
+                readonly mobile: "1.125rem";
+                readonly tablet: "1.25rem";
+                readonly desktop: "1.25rem";
+            };
+            readonly '2xl': {
+                readonly mobile: "1.25rem";
+                readonly tablet: "1.5rem";
+                readonly desktop: "1.5rem";
+            };
+            readonly '3xl': {
+                readonly mobile: "1.5rem";
+                readonly tablet: "1.875rem";
+                readonly desktop: "1.875rem";
+            };
+            readonly '4xl': {
+                readonly mobile: "1.875rem";
+                readonly tablet: "2.25rem";
+                readonly desktop: "2.25rem";
+            };
+        };
         readonly borderRadius: {
             readonly none: "0px";
             readonly sm: "4px";
@@ -1775,6 +1715,48 @@ declare const tokensByMode: {
                 readonly desktop: "0.75rem";
             };
         };
+        readonly responsiveBaseFontSizes: {
+            readonly xs: {
+                readonly mobile: "0.6875rem";
+                readonly tablet: "0.75rem";
+                readonly desktop: "0.75rem";
+            };
+            readonly sm: {
+                readonly mobile: "0.8125rem";
+                readonly tablet: "0.875rem";
+                readonly desktop: "0.875rem";
+            };
+            readonly base: {
+                readonly mobile: "0.875rem";
+                readonly tablet: "1rem";
+                readonly desktop: "1rem";
+            };
+            readonly lg: {
+                readonly mobile: "1rem";
+                readonly tablet: "1.125rem";
+                readonly desktop: "1.125rem";
+            };
+            readonly xl: {
+                readonly mobile: "1.125rem";
+                readonly tablet: "1.25rem";
+                readonly desktop: "1.25rem";
+            };
+            readonly '2xl': {
+                readonly mobile: "1.25rem";
+                readonly tablet: "1.5rem";
+                readonly desktop: "1.5rem";
+            };
+            readonly '3xl': {
+                readonly mobile: "1.5rem";
+                readonly tablet: "1.875rem";
+                readonly desktop: "1.875rem";
+            };
+            readonly '4xl': {
+                readonly mobile: "1.875rem";
+                readonly tablet: "2.25rem";
+                readonly desktop: "2.25rem";
+            };
+        };
         readonly borderRadius: {
             readonly none: "0px";
             readonly sm: "4px";
@@ -2331,6 +2313,48 @@ declare const tokens: {
             readonly desktop: "0.75rem";
         };
     };
+    readonly responsiveBaseFontSizes: {
+        readonly xs: {
+            readonly mobile: "0.6875rem";
+            readonly tablet: "0.75rem";
+            readonly desktop: "0.75rem";
+        };
+        readonly sm: {
+            readonly mobile: "0.8125rem";
+            readonly tablet: "0.875rem";
+            readonly desktop: "0.875rem";
+        };
+        readonly base: {
+            readonly mobile: "0.875rem";
+            readonly tablet: "1rem";
+            readonly desktop: "1rem";
+        };
+        readonly lg: {
+            readonly mobile: "1rem";
+            readonly tablet: "1.125rem";
+            readonly desktop: "1.125rem";
+        };
+        readonly xl: {
+            readonly mobile: "1.125rem";
+            readonly tablet: "1.25rem";
+            readonly desktop: "1.25rem";
+        };
+        readonly '2xl': {
+            readonly mobile: "1.25rem";
+            readonly tablet: "1.5rem";
+            readonly desktop: "1.5rem";
+        };
+        readonly '3xl': {
+            readonly mobile: "1.5rem";
+            readonly tablet: "1.875rem";
+            readonly desktop: "1.875rem";
+        };
+        readonly '4xl': {
+            readonly mobile: "1.875rem";
+            readonly tablet: "2.25rem";
+            readonly desktop: "2.25rem";
+        };
+    };
     readonly borderRadius: {
         readonly none: "0px";
         readonly sm: "4px";
@@ -2447,92 +2471,93 @@ type Typography = typeof typography;
 /**
  * Khipu Design System - Button Component
  *
- * A button component built on MUI Button with Khipu design system styling.
+ * A button component built with native HTML and kds-* CSS classes.
  * Matches the Figma design: Pagos Automáticos - MUI v610
  */
 
-type KdsButtonVariant = 'contained' | 'outlined' | 'text';
-type KdsButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
-type KdsButtonSize = 'small' | 'medium' | 'large';
-interface KdsButtonProps extends Omit<ButtonProps, 'variant' | 'color' | 'size'> {
+type KdsButtonVariant = 'primary' | 'secondary' | 'outlined' | 'outlined-white' | 'text' | 'success';
+type KdsButtonSize = 'sm' | 'md';
+interface KdsButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual style variant */
     variant?: KdsButtonVariant;
-    /** Color scheme */
-    color?: KdsButtonColor;
     /** Button size */
     size?: KdsButtonSize;
     /** Full width button */
     fullWidth?: boolean;
     /** Loading state - shows spinner and disables button */
     loading?: boolean;
-    /** Icon before label */
-    startIcon?: React__default.ReactNode;
-    /** Icon after label */
-    endIcon?: React__default.ReactNode;
-    /** Content */
-    children: React__default.ReactNode;
+    /** Material Symbols icon name before label, e.g. "download" */
+    startIcon?: string;
+    /** Material Symbols icon name after label, e.g. "arrow_forward" */
+    endIcon?: string;
 }
 /**
  * Primary action button component.
  *
- * Built on MUI Button with Khipu design system styling.
+ * Built with native HTML and kds-* CSS classes from the BeerCSS bundle.
  *
  * @example
  * ```tsx
- * <KdsButton variant="contained" color="primary">
- *   INGRESAR
+ * <KdsButton variant="primary">
+ *   Continuar
  * </KdsButton>
  *
- * <KdsButton variant="outlined" color="info">
- *   RECHAZAR
+ * <KdsButton variant="outlined">
+ *   Cancelar
  * </KdsButton>
  *
- * <KdsButton variant="contained" color="success" fullWidth>
- *   VOLVER AL COMERCIO
+ * <KdsButton variant="success" fullWidth>
+ *   Finalizar
  * </KdsButton>
  *
  * <KdsButton loading>
- *   Processing...
+ *   Procesando...
+ * </KdsButton>
+ *
+ * <KdsButton startIcon="download">
+ *   Descargar comprobante
  * </KdsButton>
  * ```
  */
-declare const KdsButton: React__default.ForwardRefExoticComponent<Omit<KdsButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+declare const KdsButton: React__default.ForwardRefExoticComponent<KdsButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Khipu Design System - TextField Component
  *
- * A text input component built on MUI TextField with Khipu design system styling.
+ * A text input component built with native HTML and BeerCSS floating labels.
  * Matches the Figma design: Pagos Automáticos - MUI v610
  */
 
-type KdsTextFieldVariant = 'outlined' | 'filled' | 'standard';
-type KdsTextFieldSize = 'small' | 'medium';
-interface KdsTextFieldProps extends Omit<TextFieldProps, 'variant' | 'size'> {
-    /** Visual variant */
-    variant?: KdsTextFieldVariant;
-    /** Input size */
-    size?: KdsTextFieldSize;
-    /** Icon/element at the start of input */
-    startAdornment?: React__default.ReactNode;
-    /** Icon/element at the end of input */
-    endAdornment?: React__default.ReactNode;
+interface KdsTextFieldProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Label text for the field */
+    label: string;
+    /** Helper text shown below field (error or info) */
+    helperText?: string;
+    /** Error state - applies invalid class and red styling */
+    error?: boolean;
+    /** Full width field (default: true) */
+    fullWidth?: boolean;
+    /** Material Symbols icon name at the start of input, e.g. "search" */
+    startIcon?: string;
+    /** Material Symbols icon name at the end of input, e.g. "visibility_off" */
+    endIcon?: string;
 }
 /**
- * Text input field with label, validation, and adornments.
+ * Text input field with label, validation, and icons.
  *
- * Built on MUI TextField with Khipu design system styling.
+ * 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"
- *   endAdornment={<PersonIcon />}
  * />
  *
  * <KdsTextField
  *   label="Buscar por nombre"
- *   variant="outlined"
+ *   startIcon="search"
  * />
  *
  * <KdsTextField
@@ -2541,115 +2566,70 @@ interface KdsTextFieldProps extends Omit<TextFieldProps, 'variant' | 'size'> {
  *   error
  *   helperText="Contraseña incorrecta"
  * />
+ *
+ * <KdsTextField
+ *   label="Monto"
+ *   value="$1.000"
+ *   readOnly
+ * />
  * ```
  */
-declare const KdsTextField: React__default.ForwardRefExoticComponent<Omit<KdsTextFieldProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
+declare const KdsTextField: React__default.ForwardRefExoticComponent<KdsTextFieldProps & React__default.RefAttributes<HTMLInputElement>>;
 
 /**
  * Khipu Design System - Checkbox Component
  *
- * A checkbox component built on MUI Checkbox with Khipu design system styling.
- * Matches the Figma design: Pagos Automáticos - MUI v610
+ * Native HTML checkbox with BeerCSS styling.
  */
 
-type KdsCheckboxColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
-type KdsCheckboxSize = 'small' | 'medium';
-interface KdsCheckboxProps extends Omit<CheckboxProps, 'color' | 'size'> {
-    /** Label text or element */
-    label?: React__default.ReactNode;
-    /** Color scheme */
-    color?: KdsCheckboxColor;
-    /** Size */
-    size?: KdsCheckboxSize;
+interface KdsCheckboxProps extends Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    label?: string;
 }
-/**
- * Checkbox component for binary choices.
- *
- * Built on MUI Checkbox with Khipu design system styling.
- *
- * @example
- * ```tsx
- * <KdsCheckbox
- *   label="Acepto los términos y condiciones de uso"
- *   checked={accepted}
- *   onChange={(e) => setAccepted(e.target.checked)}
- * />
- *
- * <KdsCheckbox
- *   label={
- *     <>
- *       Acepto los <a href="/terms">términos y condiciones</a>
- *     </>
- *   }
- * />
- *
- * <KdsCheckbox indeterminate />
- * ```
- */
-declare const KdsCheckbox: React__default.ForwardRefExoticComponent<Omit<KdsCheckboxProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+declare const KdsCheckbox: React__default.ForwardRefExoticComponent<KdsCheckboxProps & React__default.RefAttributes<HTMLInputElement>>;
 
 /**
  * Khipu Design System - Modal Component
  *
- * A modal dialog component built on MUI Dialog with Khipu design system styling.
- * Matches the Figma design: Pagos Automáticos - MUI v610
+ * 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 extends Omit<DialogProps, 'maxWidth' | 'title' | 'fullScreen'> {
+interface KdsModalProps {
     /** Controls modal visibility */
     open: boolean;
     /** Callback when modal should close */
     onClose: () => void;
     /** Modal title */
-    title?: React__default.ReactNode;
-    /** Modal content */
-    children: React__default.ReactNode;
+    title?: string;
+    /** Modal description text */
+    description?: string;
     /** Footer content (usually action buttons) */
     footer?: React__default.ReactNode;
-    /** Modal max width (ignored when fullScreen is true) */
+    /** Modal content */
+    children: React__default.ReactNode;
+    /** Modal max width */
     size?: KdsModalSize;
     /** Show close button */
     showCloseButton?: boolean;
-    /** Render as a fullScreen dialog with AppBar header and slide transition */
-    fullScreen?: boolean;
+    /** Additional CSS class */
+    className?: string;
 }
 /**
  * Modal dialog component for displaying content that requires attention.
  *
- * Built on MUI Dialog with Khipu design system styling.
+ * Built on Radix Dialog with kds-bottom-sheet BeerCSS classes.
  *
  * @example
  * ```tsx
- * // Token authorization modal
  * <KdsModal
  *   open={isOpen}
  *   onClose={() => setIsOpen(false)}
- *   title={
- *     <>
- *       Autoriza la operación desde tu App{' '}
- *       <Typography component="span" color="info.main">tokenPass</Typography>
- *     </>
- *   }
- *   footer={
- *     <Button disabled fullWidth>CONTINUAR</Button>
- *   }
- * >
- *   <Box sx={{ textAlign: 'center' }}>
- *     <img src={tokenImage} alt="TokenPass" />
- *     <Typography color="text.disabled">3:27 restantes</Typography>
- *   </Box>
- * </KdsModal>
- *
- * // Confirmation modal
- * <KdsModal
- *   open={isOpen}
- *   onClose={handleCancel}
  *   title="Confirmar pago"
  *   footer={
  *     <>
- *       <Button variant="text" onClick={handleCancel}>Cancelar</Button>
- *       <Button onClick={handleConfirm}>Confirmar</Button>
+ *       <button onClick={handleCancel}>Cancelar</button>
+ *       <button onClick={handleConfirm}>Confirmar</button>
  *     </>
  *   }
  * >
@@ -2657,173 +2637,100 @@ interface KdsModalProps extends Omit<DialogProps, 'maxWidth' | 'title' | 'fullSc
  * </KdsModal>
  * ```
  */
-declare const KdsModal: React__default.FC<KdsModalProps>;
+declare const KdsModal: React__default.ForwardRefExoticComponent<KdsModalProps & React__default.RefAttributes<HTMLDivElement>>;
 
-type KdsCardVariant = 'elevation' | 'outlined';
-type KdsCardElevation = 0 | 1 | 2 | 3 | 4 | 6 | 8 | 12 | 16 | 24;
-type KdsCardPadding = 'none' | 'sm' | 'md' | 'lg';
-interface KdsCardProps extends Omit<CardProps, 'variant'> {
+/**
+ * Khipu Design System - Card Component
+ *
+ * A card component built with native HTML and kds-* CSS classes.
+ * Matches the Figma design: Pagos Automáticos - MUI v610
+ */
+
+type KdsCardVariant = 'elevated' | 'outlined';
+interface KdsCardProps extends React__default.HTMLAttributes<HTMLElement> {
     /** Visual variant */
     variant?: KdsCardVariant;
-    /** Elevation level (only for elevation variant) */
-    elevation?: KdsCardElevation;
-    /** Padding size from Figma design tokens */
-    padding?: KdsCardPadding;
-    /** Clickable card with hover effect */
-    clickable?: boolean;
-    /** Click handler for clickable cards */
-    onCardClick?: () => void;
-}
-interface KdsCardHeaderProps extends CardHeaderProps {
+    /** Dimmed appearance */
+    dimmed?: boolean;
 }
-interface KdsCardContentProps extends CardContentProps {
-}
-interface KdsCardActionsProps extends CardActionsProps {
+interface KdsCardSectionProps extends React__default.HTMLAttributes<HTMLDivElement> {
 }
 /**
  * Card container component for grouping related content.
  *
- * Built on MUI Card with Khipu design system styling.
+ * Built with native HTML and kds-* CSS classes.
  *
  * @example
  * ```tsx
- * // Bank selection card
- * <KdsCard variant="outlined" clickable onCardClick={() => selectBank('estado')}>
- *   <CardContent sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
- *     <img src={bankLogo} alt="Banco Estado" />
- *     <Typography variant="body1" fontWeight={600}>
- *       Banco Estado
- *     </Typography>
- *   </CardContent>
+ * // Basic card
+ * <KdsCard>
+ *   <KdsCardBody>Content</KdsCardBody>
  * </KdsCard>
  *
- * // Account card
- * <KdsCard variant="outlined">
- *   <CardContent>
- *     <Typography variant="body2" fontWeight={600}>
- *       Cuenta Corriente N° ***002344
- *     </Typography>
- *     <Typography variant="body2" color="info.light">
- *       Disponible $1.000.000
- *     </Typography>
- *   </CardContent>
+ * // Card with header and footer
+ * <KdsCard>
+ *   <KdsCardHeader>Title</KdsCardHeader>
+ *   <KdsCardBody>Content</KdsCardBody>
+ *   <KdsCardFooter>Footer</KdsCardFooter>
  * </KdsCard>
  * ```
  */
-declare const KdsCard: React.ForwardRefExoticComponent<Omit<KdsCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const KdsCard: React__default.ForwardRefExoticComponent<KdsCardProps & React__default.RefAttributes<HTMLElement>>;
 /**
- * Card header with title, subtitle, avatar, and action areas.
+ * Card header section.
  */
-declare const KdsCardHeader: React.ForwardRefExoticComponent<Omit<KdsCardHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const KdsCardHeader: React__default.ForwardRefExoticComponent<KdsCardSectionProps & React__default.RefAttributes<HTMLDivElement>>;
 /**
  * Main content area of the card.
  */
-declare const KdsCardContent: React.ForwardRefExoticComponent<Omit<KdsCardContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const KdsCardBody: React__default.ForwardRefExoticComponent<KdsCardSectionProps & React__default.RefAttributes<HTMLDivElement>>;
 /**
- * Actions area at the bottom of the card, typically for buttons.
+ * Card footer section, typically for actions.
  */
-declare const KdsCardActions: React.ForwardRefExoticComponent<Omit<KdsCardActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const KdsCardFooter: React__default.ForwardRefExoticComponent<KdsCardSectionProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
  * Khipu Design System - Spinner Component
  *
- * A loading spinner component built on MUI CircularProgress with Khipu design system styling.
- * Matches the Figma design: Pagos Automáticos - MUI v610
+ * Native HTML spinner with BeerCSS loader styling.
  */
 
 type KdsSpinnerSize = 'small' | 'medium' | 'large';
-type KdsSpinnerColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
-interface KdsSpinnerProps extends Omit<CircularProgressProps, 'size' | 'color'> {
-    /** Spinner size */
+interface KdsSpinnerProps extends React__default.HTMLAttributes<HTMLDivElement> {
     size?: KdsSpinnerSize;
-    /** Spinner color */
-    color?: KdsSpinnerColor;
-    /** Custom size in pixels */
-    customSize?: number;
-    /** Accessible label */
     label?: string;
 }
-/**
- * Loading spinner component.
- *
- * Built on MUI CircularProgress with Khipu design system styling.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <KdsSpinner size="medium" color="primary" />
- *
- * // Inside a button
- * <Button loading>
- *   Processing...
- * </Button>
- *
- * // Centered in container
- * <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
- *   <KdsSpinner size="large" />
- * </Box>
- * ```
- */
-declare const KdsSpinner: React__default.FC<KdsSpinnerProps>;
+declare const KdsSpinner: React__default.ForwardRefExoticComponent<KdsSpinnerProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
  * Khipu Design System - LinearProgress Component
  *
- * A linear progress indicator built on MUI LinearProgress with Khipu design system styling.
- * Matches the Figma design: Pagos Automáticos - MUI v610
+ * Native HTML progress element with BeerCSS styling.
  */
 
-type KdsLinearProgressColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
-type KdsLinearProgressVariant = 'determinate' | 'indeterminate' | 'buffer' | 'query';
-interface KdsLinearProgressProps extends Omit<LinearProgressProps, 'color' | 'variant'> {
-    /** Progress bar color */
-    color?: KdsLinearProgressColor;
-    /** Variant */
-    variant?: KdsLinearProgressVariant;
-    /** Progress value (0-100) for determinate variant */
+interface KdsLinearProgressProps extends React__default.HTMLAttributes<HTMLProgressElement> {
     value?: number;
+    max?: number;
 }
-/**
- * Linear progress indicator component.
- *
- * Built on MUI LinearProgress with Khipu design system styling.
- * Used to show progress at the top of screens in the payment flow.
- *
- * @example
- * ```tsx
- * // Indeterminate progress (loading)
- * <KdsLinearProgress color="info" />
- *
- * // Determinate progress (shows percentage)
- * <KdsLinearProgress color="info" variant="determinate" value={50} />
- *
- * // At top of payment screen
- * <Box sx={{ width: '100%' }}>
- *   <KdsLinearProgress color="info" />
- *   <Box sx={{ p: 3 }}>
- *     {content}
- *   </Box>
- * </Box>
- * ```
- */
-declare const KdsLinearProgress: React__default.FC<KdsLinearProgressProps>;
+declare const KdsLinearProgress: React__default.ForwardRefExoticComponent<KdsLinearProgressProps & React__default.RefAttributes<HTMLProgressElement>>;
 
 /**
  * Khipu Design System - Alert Component
  *
- * An alert component built on MUI Alert with Khipu design system styling.
+ * An alert component built with native HTML and kds-* CSS classes.
  * Matches the Figma design: Pagos Automáticos - MUI v610
  */
 
 type KdsAlertSeverity = 'success' | 'info' | 'warning' | 'error';
-type KdsAlertVariant = 'standard' | 'filled' | 'outlined';
-interface KdsAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'title'> {
+interface KdsAlertProps extends React__default.HTMLAttributes<HTMLDivElement> {
     /** Alert severity/type */
-    severity?: KdsAlertSeverity;
-    /** Visual variant */
-    variant?: KdsAlertVariant;
+    severity: KdsAlertSeverity;
     /** Alert title */
-    title?: React__default.ReactNode;
+    title?: string;
+    /** Material Symbols icon name, e.g. "info" */
+    icon?: string;
+    /** Inline variant (compact display) */
+    inline?: boolean;
     /** Alert content */
     children: React__default.ReactNode;
     /** Closable alert */
@@ -2832,7 +2739,7 @@ interface KdsAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'title
 /**
  * Alert component for displaying important messages.
  *
- * Built on MUI Alert with Khipu design system styling.
+ * Built with native HTML and kds-* CSS classes from the BeerCSS bundle.
  *
  * @example
  * ```tsx
@@ -2857,167 +2764,103 @@ interface KdsAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'title
  * </KdsAlert>
  * ```
  */
-declare const KdsAlert: React__default.FC<KdsAlertProps>;
+declare const KdsAlert: React__default.ForwardRefExoticComponent<KdsAlertProps & React__default.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Khipu Design System - Typography Component
+ *
+ * Native HTML + kds-* classes for consistent text styles based on design tokens.
+ * Renders semantic HTML elements (h1-h6, p, span, label) with corresponding CSS classes.
+ */
 
 /**
  * Custom Khipu typography variants that map to specific design tokens
  */
-type KdsTypographyVariant = 'display1' | 'display2' | 'heading1' | 'heading2' | 'heading3' | 'bodyLarge' | 'body' | 'bodySmall' | 'label' | 'labelSmall' | 'cardTitle' | 'cardSubtitle' | 'muted' | 'link';
-interface KdsTypographyProps extends Omit<TypographyProps, 'variant'> {
+type KdsTypographyVariant = 'display1' | 'display2' | 'heading1' | 'heading2' | 'heading3' | 'body-large' | 'body' | 'body-small' | 'label' | 'label-small' | 'muted' | 'link';
+type ElementTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label';
+interface KdsTypographyProps extends React__default.HTMLAttributes<HTMLElement> {
     /**
      * The typography variant to use
      * @default 'body'
      */
-    variant?: KdsTypographyVariant | TypographyProps['variant'];
+    variant?: KdsTypographyVariant;
     /**
      * Text color preset
      */
-    color?: 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'error' | 'success' | 'info' | 'inherit';
+    color?: 'primary' | 'secondary' | 'muted' | 'error' | 'success' | 'inherit';
     /**
-     * Whether to truncate text with ellipsis
+     * Override the default HTML element for the variant
      */
-    truncate?: boolean;
-    /**
-     * Maximum number of lines before truncating (requires truncate=true)
-     */
-    maxLines?: number;
+    as?: ElementTag;
 }
 /**
  * Typography component for consistent text styling across the Khipu design system.
  *
  * @example
- * // Display text
+ * // Display text - renders as <h1> with kds-text-display1
  * <KdsTypography variant="display1">Hero Headline</KdsTypography>
  *
- * // Heading
- * <KdsTypography variant="heading3">Page Title</KdsTypography>
+ * // Heading - renders as <h2> with kds-text-heading2
+ * <KdsTypography variant="heading2">Section Title</KdsTypography>
  *
- * // Body text
+ * // Body text - renders as <p> with kds-text-body
  * <KdsTypography variant="body">Regular body text</KdsTypography>
  *
- * // Label
+ * // Label - renders as <span> with kds-text-label
  * <KdsTypography variant="label">Section Label</KdsTypography>
  *
  * // With color
- * <KdsTypography variant="body" color="tertiary">Muted text</KdsTypography>
- *
- * // Truncated text
- * <KdsTypography variant="body" truncate maxLines={2}>Long text...</KdsTypography>
- */
-declare const KdsTypography: React.ForwardRefExoticComponent<Omit<KdsTypographyProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-
-/**
- * Khipu Design System - Tabs Component
- *
- * A tabs component for switching between different views or content sections.
- * Matches the Figma design: Pagos Instantaneos - MUI v610
+ * <KdsTypography variant="body" color="muted">Muted text</KdsTypography>
  *
- * Built with composable sub-components for flexibility.
+ * // Override element with as prop
+ * <KdsTypography variant="heading1" as="div">Custom element</KdsTypography>
  */
+declare const KdsTypography: React__default.ForwardRefExoticComponent<KdsTypographyProps & React__default.RefAttributes<HTMLElement>>;
 
-type KdsTabsColor = 'primary' | 'secondary' | 'info';
-type KdsTabsVariant = 'standard' | 'fullWidth' | 'scrollable';
-interface KdsTabsProps extends Omit<TabsProps, 'onChange' | 'textColor' | 'indicatorColor'> {
-    /** The value of the currently selected Tab */
-    value: string | number;
-    /** Callback fired when a Tab is selected */
-    onChange: (event: React__default.SyntheticEvent, newValue: string | number) => void;
-    /** The color of the tabs */
-    color?: KdsTabsColor;
-    /** The variant of the tabs layout */
-    variant?: KdsTabsVariant;
-    /** Tab content - should be Tab components */
-    children: React__default.ReactNode;
+interface KdsTabsProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    activeIndex: number;
+    onChange: (index: number) => void;
+    variant?: 'standard' | 'segmented';
 }
-interface KdsTabProps extends Omit<TabProps, 'wrapped'> {
-    /** The label displayed on the tab */
-    label: string;
-    /** The value of the tab, used for selection */
-    value: string | number;
-    /** Icon element placed before the label */
-    icon?: React__default.ReactElement;
-    /** Whether the tab is disabled */
-    disabled?: boolean;
+declare const KdsTabs: React__default.ForwardRefExoticComponent<KdsTabsProps & React__default.RefAttributes<HTMLDivElement>>;
+interface KdsTabInternalProps {
+    _active?: boolean;
+    _onClick?: () => void;
 }
-interface KdsTabPanelProps extends BoxProps {
-    /** The value that corresponds to this panel */
-    value: string | number;
-    /** The currently selected value from Tabs */
-    selectedValue: string | number;
-    /** Content of the tab panel */
-    children: React__default.ReactNode;
+interface KdsTabProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
 }
-/**
- * Individual Tab component.
- *
- * @example
- * ```tsx
- * <KdsTab label="PERSONAS" value="personas" />
- * ```
- */
-declare const KdsTab: React__default.ForwardRefExoticComponent<Omit<KdsTabProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
-/**
- * Tab Panel component for displaying content associated with a tab.
- *
- * @example
- * ```tsx
- * <KdsTabPanel value="personas" selectedValue={currentTab}>
- *   Content for personas tab
- * </KdsTabPanel>
- * ```
- */
-declare const KdsTabPanel: React__default.ForwardRefExoticComponent<Omit<KdsTabPanelProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
-/**
- * Tabs container component.
- *
- * A composable tabs component for navigation between different views.
- *
- * @example
- * ```tsx
- * const [value, setValue] = useState('personas');
- *
- * <KdsTabs value={value} onChange={(e, v) => setValue(v)} variant="fullWidth">
- *   <KdsTab label="PERSONAS" value="personas" />
- *   <KdsTab label="EMPRESAS" value="empresas" />
- * </KdsTabs>
- *
- * <KdsTabPanel value="personas" selectedValue={value}>
- *   Personas content
- * </KdsTabPanel>
- * <KdsTabPanel value="empresas" selectedValue={value}>
- *   Empresas content
- * </KdsTabPanel>
- * ```
- */
-declare const KdsTabs: React__default.ForwardRefExoticComponent<Omit<KdsTabsProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const KdsTab: React__default.ForwardRefExoticComponent<KdsTabProps & KdsTabInternalProps & React__default.RefAttributes<HTMLButtonElement>>;
+interface KdsTabPanelProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    active: boolean;
+}
+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.
- * Matches the Figma design: Pagos Instantaneos - MUI v610
  *
  * Built with composable sub-components for maximum flexibility.
  */
 
-interface KdsLogoHeaderProps extends BoxProps {
+interface KdsLogoHeaderProps extends React__default.HTMLAttributes<HTMLDivElement> {
     /** Content - typically LogoHeader sub-components */
     children?: React__default.ReactNode;
 }
-interface KdsLogoHeaderLogoProps extends BoxProps {
+interface KdsLogoHeaderLogoProps extends React__default.HTMLAttributes<HTMLDivElement> {
     /** Custom logo content. Defaults to Khipu text logo */
     children?: React__default.ReactNode;
 }
-interface KdsLogoHeaderSeparatorProps extends BoxProps {
+interface KdsLogoHeaderSeparatorProps extends React__default.HTMLAttributes<HTMLSpanElement> {
     /** Separator character. Defaults to "|" */
     children?: React__default.ReactNode;
 }
-interface KdsLogoHeaderCodeProps extends BoxProps {
+interface KdsLogoHeaderCodeProps extends React__default.HTMLAttributes<HTMLSpanElement> {
     /** Transaction or reference code to display */
     children: React__default.ReactNode;
 }
-interface KdsLogoHeaderCloseButtonProps extends Omit<IconButtonProps, 'children'> {
+interface KdsLogoHeaderCloseButtonProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Callback fired when the close button is clicked */
     onClose?: () => void;
 }
@@ -3033,7 +2876,7 @@ interface KdsLogoHeaderCloseButtonProps extends Omit<IconButtonProps, 'children'
  * </KdsLogoHeaderLogo>
  * ```
  */
-declare const KdsLogoHeaderLogo: React__default.ForwardRefExoticComponent<Omit<KdsLogoHeaderLogoProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const KdsLogoHeaderLogo: React__default.ForwardRefExoticComponent<KdsLogoHeaderLogoProps & React__default.RefAttributes<HTMLDivElement>>;
 /**
  * Separator element between logo and code.
  *
@@ -3044,7 +2887,7 @@ declare const KdsLogoHeaderLogo: React__default.ForwardRefExoticComponent<Omit<K
  * <KdsLogoHeaderSeparator>•</KdsLogoHeaderSeparator>
  * ```
  */
-declare const KdsLogoHeaderSeparator: React__default.ForwardRefExoticComponent<Omit<KdsLogoHeaderSeparatorProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
+declare const KdsLogoHeaderSeparator: React__default.ForwardRefExoticComponent<KdsLogoHeaderSeparatorProps & React__default.RefAttributes<HTMLSpanElement>>;
 /**
  * Transaction code section.
  *
@@ -3053,7 +2896,7 @@ declare const KdsLogoHeaderSeparator: React__default.ForwardRefExoticComponent<O
  * <KdsLogoHeaderCode>HUSK-P7ZZ-XGYG</KdsLogoHeaderCode>
  * ```
  */
-declare const KdsLogoHeaderCode: React__default.ForwardRefExoticComponent<Omit<KdsLogoHeaderCodeProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
+declare const KdsLogoHeaderCode: React__default.ForwardRefExoticComponent<KdsLogoHeaderCodeProps & React__default.RefAttributes<HTMLSpanElement>>;
 /**
  * Close button for the header.
  *
@@ -3062,7 +2905,7 @@ declare const KdsLogoHeaderCode: React__default.ForwardRefExoticComponent<Omit<K
  * <KdsLogoHeaderCloseButton onClose={() => handleClose()} />
  * ```
  */
-declare const KdsLogoHeaderCloseButton: React__default.ForwardRefExoticComponent<Omit<KdsLogoHeaderCloseButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+declare const KdsLogoHeaderCloseButton: React__default.ForwardRefExoticComponent<KdsLogoHeaderCloseButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 /**
  * LogoHeader bar component.
  *
@@ -3087,211 +2930,310 @@ declare const KdsLogoHeaderCloseButton: React__default.ForwardRefExoticComponent
  * </KdsLogoHeader>
  * ```
  */
-declare const KdsLogoHeader: React__default.ForwardRefExoticComponent<Omit<KdsLogoHeaderProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const KdsLogoHeader: React__default.ForwardRefExoticComponent<KdsLogoHeaderProps & React__default.RefAttributes<HTMLDivElement>>;
 
 /**
  * Khipu Design System - RadioGroup Component
  *
- * A radio group component built on MUI RadioGroup with Khipu design system styling.
+ * Native HTML radio group with BeerCSS styling.
  */
 
-type KdsRadioColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'default';
-type KdsRadioSize = 'small' | 'medium';
 interface KdsRadioOption {
-    /** Option value */
     value: string;
-    /** Option label */
-    label: React__default.ReactNode;
-    /** Whether this option is disabled */
-    disabled?: boolean;
-}
-interface KdsRadioGroupProps extends Omit<RadioGroupProps, 'color'> {
-    /** Group label */
-    label?: React__default.ReactNode;
-    /** Radio options (shorthand for creating Radio + FormControlLabel) */
-    options?: KdsRadioOption[];
-    /** Color scheme for radio buttons */
-    color?: KdsRadioColor;
-    /** Size of radio buttons */
-    size?: KdsRadioSize;
-    /** Whether the entire group is required */
-    required?: boolean;
-    /** Whether the entire group is disabled */
+    label: string;
     disabled?: boolean;
-    /** Error state */
-    error?: boolean;
 }
-interface KdsRadioProps extends Omit<RadioProps, 'color' | 'size'> {
-    /** Color scheme */
-    color?: KdsRadioColor;
-    /** Size */
-    size?: KdsRadioSize;
+interface KdsRadioGroupProps extends Omit<React__default.FieldsetHTMLAttributes<HTMLFieldSetElement>, 'onChange'> {
+    label?: string;
+    name: string;
+    options: KdsRadioOption[];
+    value?: string;
+    onChange?: (value: string) => void;
 }
-declare const KdsRadio: React__default.ForwardRefExoticComponent<Omit<KdsRadioProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
-/**
- * Radio group component for selecting one option from a set.
- *
- * @example
- * ```tsx
- * <KdsRadioGroup
- *   label="Tipo de cuenta"
- *   value={value}
- *   onChange={(e) => setValue(e.target.value)}
- *   options={[
- *     { value: 'corriente', label: 'Cuenta Corriente' },
- *     { value: 'vista', label: 'Cuenta Vista' },
- *   ]}
- * />
- * ```
- */
-declare const KdsRadioGroup: React__default.ForwardRefExoticComponent<Omit<KdsRadioGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const KdsRadioGroup: React__default.ForwardRefExoticComponent<KdsRadioGroupProps & React__default.RefAttributes<HTMLFieldSetElement>>;
 
 /**
  * Khipu Design System - Select Component
  *
- * A select dropdown component built on MUI Select with Khipu design system styling.
+ * A select dropdown component built on Radix UI Select with BeerCSS field styling.
  */
 
-type KdsSelectVariant = 'outlined' | 'filled' | 'standard';
-type KdsSelectSize = 'small' | 'medium';
-interface KdsSelectOption {
-    /** Option value */
-    value: string | number;
-    /** Option label */
-    label: React__default.ReactNode;
-    /** Whether this option is disabled */
-    disabled?: boolean;
-}
-interface KdsSelectProps extends Omit<SelectProps, 'variant' | 'size'> {
-    /** Visual variant */
-    variant?: KdsSelectVariant;
-    /** Size */
-    size?: KdsSelectSize;
-    /** Select options (shorthand for creating MenuItems) */
-    options?: KdsSelectOption[];
-    /** Helper text below the select */
+interface KdsSelectProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    placeholder?: string;
+    label?: string;
+    error?: boolean;
     helperText?: React__default.ReactNode;
-    /** Whether the field is full width */
+    disabled?: boolean;
     fullWidth?: boolean;
+    children: React__default.ReactNode;
+    className?: string;
 }
-interface KdsMenuItemProps extends MenuItemProps {
+interface KdsSelectItemProps extends Select.SelectItemProps {
+    children: React__default.ReactNode;
 }
-declare const KdsMenuItem: React__default.ForwardRefExoticComponent<Omit<KdsMenuItemProps, "ref"> & React__default.RefAttributes<HTMLLIElement>>;
+declare const KdsSelect: React__default.ForwardRefExoticComponent<KdsSelectProps & React__default.RefAttributes<HTMLDivElement>> & {
+    Item: React__default.ForwardRefExoticComponent<KdsSelectItemProps & React__default.RefAttributes<HTMLDivElement>>;
+};
+
 /**
- * Select dropdown component for choosing one option from a list.
+ * Khipu Design System - Chip Component
  *
- * @example
- * ```tsx
- * <KdsSelect
- *   label="Banco"
- *   value={bank}
- *   onChange={(e) => setBank(e.target.value)}
- *   options={[
- *     { value: 'bci', label: 'BCI' },
- *     { value: 'santander', label: 'Santander' },
- *   ]}
- * />
- * ```
+ * Native HTML chip with BeerCSS kds-badge styling.
  */
-declare const KdsSelect: React__default.ForwardRefExoticComponent<Omit<KdsSelectProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-type KdsChipVariant = 'filled' | 'outlined';
-type KdsChipColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
-type KdsChipSize = 'small' | 'medium';
-interface KdsChipProps extends Omit<ChipProps, 'variant' | 'color' | 'size'> {
-    /** Visual variant */
-    variant?: KdsChipVariant;
-    /** Color scheme */
+type KdsChipColor = 'primary' | 'success' | 'error' | 'warning' | 'info';
+interface KdsChipProps extends React__default.HTMLAttributes<HTMLSpanElement> {
     color?: KdsChipColor;
-    /** Size */
-    size?: KdsChipSize;
+    icon?: string;
+    onDelete?: () => void;
+}
+declare const KdsChip: React__default.ForwardRefExoticComponent<KdsChipProps & React__default.RefAttributes<HTMLSpanElement>>;
+
+type KdsSnackbarType = 'success' | 'error' | 'info';
+interface KdsSnackbarProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    message: string;
+    type?: KdsSnackbarType;
+    duration?: number;
+    onClose?: () => void;
+    open?: boolean;
 }
+declare const KdsSnackbar: React__default.ForwardRefExoticComponent<KdsSnackbarProps & React__default.RefAttributes<HTMLDivElement>>;
+
+type KdsTooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+interface KdsTooltipProps {
+    content: React__default.ReactNode;
+    children: React__default.ReactNode;
+    placement?: KdsTooltipPlacement;
+    className?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    delayDuration?: number;
+}
+declare function KdsTooltip({ content, children, placement, className, open, defaultOpen, onOpenChange, delayDuration, }: KdsTooltipProps): react_jsx_runtime.JSX.Element;
+
+interface KdsAccordionProps extends React__default.DetailsHTMLAttributes<HTMLDetailsElement> {
+}
+declare const KdsAccordion: React__default.ForwardRefExoticComponent<KdsAccordionProps & React__default.RefAttributes<HTMLDetailsElement>>;
+interface KdsAccordionSummaryProps extends React__default.HTMLAttributes<HTMLElement> {
+}
+declare const KdsAccordionSummary: React__default.ForwardRefExoticComponent<KdsAccordionSummaryProps & React__default.RefAttributes<HTMLElement>>;
+interface KdsAccordionDetailsProps extends React__default.HTMLAttributes<HTMLDivElement> {
+}
+declare const KdsAccordionDetails: React__default.ForwardRefExoticComponent<KdsAccordionDetailsProps & React__default.RefAttributes<HTMLDivElement>>;
+
 /**
- * Chip component for displaying compact information, tags, or actions.
+ * Khipu Design System - Divider Component
  *
- * @example
- * ```tsx
- * <KdsChip label="ABC123" size="small" variant="outlined" />
- * <KdsChip label="Pagado" color="success" />
- * <KdsChip label="Pendiente" color="warning" onDelete={() => {}} />
- * ```
+ * Native HTML divider with BeerCSS styling.
  */
-declare const KdsChip: React.ForwardRefExoticComponent<Omit<KdsChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-type KdsSnackbarAnchorVertical = 'top' | 'bottom';
-type KdsSnackbarAnchorHorizontal = 'left' | 'center' | 'right';
-interface KdsSnackbarProps extends Omit<SnackbarProps, 'anchorOrigin'> {
-    /** Vertical position */
-    vertical?: KdsSnackbarAnchorVertical;
-    /** Horizontal position */
-    horizontal?: KdsSnackbarAnchorHorizontal;
-    /** Show close button */
-    showCloseButton?: boolean;
+interface KdsDividerProps extends React__default.HTMLAttributes<HTMLHRElement> {
+    dashed?: boolean;
 }
+declare const KdsDivider: React__default.ForwardRefExoticComponent<KdsDividerProps & React__default.RefAttributes<HTMLHRElement>>;
+
 /**
- * Snackbar component for brief notifications.
+ * Khipu Design System - SectionNote Component
  *
- * @example
- * ```tsx
- * <KdsSnackbar
- *   open={open}
- *   autoHideDuration={5000}
- *   onClose={handleClose}
- *   message="Copiado al portapapeles"
- * />
- * ```
+ * Native HTML section note with BeerCSS styling.
  */
-declare const KdsSnackbar: React.ForwardRefExoticComponent<Omit<KdsSnackbarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+interface KdsSectionNoteProps extends React__default.HTMLAttributes<HTMLParagraphElement> {
+    icon?: string;
+}
+declare const KdsSectionNote: React__default.ForwardRefExoticComponent<KdsSectionNoteProps & React__default.RefAttributes<HTMLParagraphElement>>;
 
 /**
- * Khipu Design System - Tooltip Component
+ * Khipu Design System - StatusBlock Component
  *
- * A tooltip component built on MUI Tooltip with Khipu design system styling.
+ * Native HTML status block with BeerCSS styling.
  */
 
-type KdsTooltipPlacement = TooltipProps['placement'];
-interface KdsTooltipProps extends Omit<TooltipProps, 'arrow'> {
-    /** Show arrow pointing to the reference element */
-    arrow?: boolean;
+type KdsStatusType = 'success' | 'pending' | 'warn' | 'error';
+interface KdsStatusBlockProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    status: KdsStatusType;
+    icon?: string;
+    title: string;
+    description?: string;
+    inline?: boolean;
 }
+declare const KdsStatusBlock: React__default.ForwardRefExoticComponent<KdsStatusBlockProps & React__default.RefAttributes<HTMLDivElement>>;
+
 /**
- * Tooltip component for displaying additional information on hover.
+ * Khipu Design System - Stepper Component
  *
- * @example
- * ```tsx
- * <KdsTooltip title="Copiar al portapapeles">
- *   <IconButton><ContentCopy /></IconButton>
- * </KdsTooltip>
- * ```
+ * Native HTML stepper with BeerCSS styling.
  */
-declare const KdsTooltip: React__default.FC<KdsTooltipProps>;
 
-type KdsAccordionVariant = 'elevation' | 'outlined';
-interface KdsAccordionProps extends Omit<AccordionProps, 'variant'> {
-    /** Visual variant */
-    variant?: KdsAccordionVariant;
+interface KdsStepperProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    steps: number;
+    current: number;
 }
-interface KdsAccordionSummaryProps extends AccordionSummaryProps {
+declare const KdsStepper: React__default.ForwardRefExoticComponent<KdsStepperProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsCopyRowProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    value: string;
 }
-interface KdsAccordionDetailsProps extends AccordionDetailsProps {
+declare const KdsCopyRow: React__default.ForwardRefExoticComponent<KdsCopyRowProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsCopyableTableRow {
+    label: string;
+    value: string;
+}
+interface KdsCopyableTableProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    rows: KdsCopyableTableRow[];
+}
+declare const KdsCopyableTable: React__default.ForwardRefExoticComponent<KdsCopyableTableProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsExpandPanelProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    label: string;
+    defaultExpanded?: boolean;
+}
+declare const KdsExpandPanel: React__default.ForwardRefExoticComponent<KdsExpandPanelProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsCountdownProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    deadline: string;
+    label?: string;
+    onExpire?: () => void;
+}
+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>>;
+
+interface KdsBankRowProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    name: string;
+    logoUrl?: string;
+    selected?: boolean;
+}
+declare const KdsBankRow: React__default.ForwardRefExoticComponent<KdsBankRowProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface KdsBankListProps extends React__default.HTMLAttributes<HTMLDivElement> {
+}
+declare const KdsBankList: React__default.ForwardRefExoticComponent<KdsBankListProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsBankModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    searchPlaceholder?: string;
+    onSearch?: (query: string) => void;
+    children: React__default.ReactNode;
+    className?: string;
+    /** Portal container — pass a ref to mount inside a specific element instead of document.body */
+    container?: HTMLElement | null;
 }
-declare const KdsAccordionSummary: React.ForwardRefExoticComponent<Omit<KdsAccordionSummaryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const KdsAccordionDetails: React.ForwardRefExoticComponent<Omit<KdsAccordionDetailsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const KdsBankModal: React__default.ForwardRefExoticComponent<KdsBankModalProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsQrRowProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Primary label (e.g. "Pagar escaneando QR") */
+    name: string;
+    /** Secondary description line */
+    description?: string;
+    /** Badge text (e.g. "Rápido") */
+    badge?: string;
+    /** Material icon name for the avatar. Defaults to "qr_code_2" */
+    icon?: string;
+}
+declare const KdsQrRow: React__default.ForwardRefExoticComponent<KdsQrRowProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface KdsCardSelectorProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon?: string;
+    title: string;
+    description?: string;
+    selected?: boolean;
+}
+declare const KdsCardSelector: React__default.ForwardRefExoticComponent<KdsCardSelectorProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface KdsCardPlanProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    price: string;
+    period?: string;
+    features?: string[];
+    recommended?: boolean;
+    badgeText?: string;
+    action?: React__default.ReactNode;
+}
+declare const KdsCardPlan: React__default.ForwardRefExoticComponent<KdsCardPlanProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsInvoiceStickyProps extends React__default.HTMLAttributes<HTMLDivElement> {
+}
+declare const KdsInvoiceSticky: React__default.ForwardRefExoticComponent<KdsInvoiceStickyProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsBottomSheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    className?: string;
+    /** Portal container — pass a ref to mount inside a specific element instead of document.body */
+    container?: HTMLElement | null;
+}
+declare const KdsBottomSheet: React__default.ForwardRefExoticComponent<KdsBottomSheetProps & React__default.RefAttributes<HTMLDivElement>>;
+
+interface KdsSecureFooterProps extends React__default.HTMLAttributes<HTMLElement> {
+    variant?: 'default' | 'inside';
+}
+declare const KdsSecureFooter: React__default.ForwardRefExoticComponent<KdsSecureFooterProps & React__default.RefAttributes<HTMLElement>>;
+
+interface KdsRecapItem {
+    label: string;
+    value?: string;
+    placeholder?: string;
+}
+interface KdsRecapListProps extends React__default.HTMLAttributes<HTMLUListElement> {
+    items: KdsRecapItem[];
+}
+declare const KdsRecapList: React__default.ForwardRefExoticComponent<KdsRecapListProps & React__default.RefAttributes<HTMLUListElement>>;
+
+declare function useCopyToClipboard(resetMs?: number): {
+    copied: boolean;
+    copy: (text: string) => Promise<void>;
+};
+
+declare function useAutoHide(durationMs: number, onHide?: () => void): {
+    visible: boolean;
+    setVisible: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+};
+
+interface CountdownResult {
+    hours: number;
+    minutes: number;
+    seconds: number;
+    expired: boolean;
+    urgent: boolean;
+}
+declare function useCountdown(deadline: string): CountdownResult;
+
 /**
- * Accordion component for expandable/collapsible content sections.
+ * Provides an onKeyDown handler for tab lists.
+ * Handles ArrowLeft/ArrowRight navigation per WAI-ARIA Tabs pattern.
+ */
+declare function useTabsKeyboard(tabCount: number, activeIndex: number, onChange: (index: number) => void): {
+    onKeyDown: (e: React.KeyboardEvent) => void;
+};
+
+/**
+ * Khipu Design System - Core Utilities
  *
- * @example
- * ```tsx
- * <KdsAccordion>
- *   <KdsAccordionSummary>
- *     <Typography>Detalles del pago</Typography>
- *   </KdsAccordionSummary>
- *   <KdsAccordionDetails>
- *     <Typography>Contenido expandible aqui</Typography>
- *   </KdsAccordionDetails>
- * </KdsAccordion>
- * ```
+ * Shared helpers for CSS-based React components.
+ */
+
+/**
+ * Return a contrast text color (white or near-black) for the given background hex.
+ * Uses WCAG luminance threshold.
+ */
+declare function getContrastColor(hex: string): string;
+/**
+ * Lighten a hex color by mixing it toward white.
+ * @param hex - Source color, e.g. "#8347AD"
+ * @param amount - 0 = original, 1 = white. Typical: 0.85 for container colors.
  */
-declare const KdsAccordion: React.ForwardRefExoticComponent<Omit<KdsAccordionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function lighten(hex: string, amount: number): string;
 
-export { type Colors, KdsAccordion, KdsAccordionDetails, type KdsAccordionDetailsProps, type KdsAccordionProps, KdsAccordionSummary, type KdsAccordionSummaryProps, type KdsAccordionVariant, KdsAlert, type KdsAlertProps, type KdsAlertSeverity, type KdsAlertVariant, KdsButton, type KdsButtonColor, type KdsButtonProps, type KdsButtonSize, type KdsButtonVariant, KdsCard, KdsCardActions, type KdsCardActionsProps, KdsCardContent, type KdsCardContentProps, type KdsCardElevation, KdsCardHeader, type KdsCardHeaderProps, type KdsCardProps, type KdsCardVariant, KdsCheckbox, type KdsCheckboxColor, type KdsCheckboxProps, type KdsCheckboxSize, KdsChip, type KdsChipColor, type KdsChipProps, type KdsChipSize, type KdsChipVariant, KdsLinearProgress, type KdsLinearProgressColor, type KdsLinearProgressProps, type KdsLinearProgressVariant, KdsLogoHeader, KdsLogoHeaderCloseButton, type KdsLogoHeaderCloseButtonProps, KdsLogoHeaderCode, type KdsLogoHeaderCodeProps, KdsLogoHeaderLogo, type KdsLogoHeaderLogoProps, type KdsLogoHeaderProps, KdsLogoHeaderSeparator, type KdsLogoHeaderSeparatorProps, KdsMenuItem, type KdsMenuItemProps, KdsModal, type KdsModalProps, type KdsModalSize, KdsRadio, type KdsRadioColor, KdsRadioGroup, type KdsRadioGroupProps, type KdsRadioOption, type KdsRadioProps, type KdsRadioSize, KdsSelect, type KdsSelectOption, type KdsSelectProps, type KdsSelectSize, type KdsSelectVariant, KdsSnackbar, type KdsSnackbarAnchorHorizontal, type KdsSnackbarAnchorVertical, type KdsSnackbarProps, KdsSpinner, type KdsSpinnerColor, type KdsSpinnerProps, type KdsSpinnerSize, KdsTab, KdsTabPanel, type KdsTabPanelProps, type KdsTabProps, KdsTabs, type KdsTabsColor, type KdsTabsProps, type KdsTabsVariant, KdsTextField, type KdsTextFieldProps, type KdsTextFieldSize, type KdsTextFieldVariant, KdsTooltip, type KdsTooltipPlacement, type KdsTooltipProps, KdsTypography, type KdsTypographyProps, type KdsTypographyVariant, type KhipuTheme, KhipuThemeProvider, type KhipuThemeProviderProps, type ThemeMode, type Tokens, type TokensByMode, type Typography as TypographyTokens, borderRadius, breakpoints, colors, colorsByMode, fontFamilies, fontSizes, fontWeights, khipuTheme, letterSpacings, lineHeights, semanticSpacing, shadows, spacing, tokens, tokensByMode, transitions, typography, zIndex };
+export { type Colors, KdsAccordion, KdsAccordionDetails, type KdsAccordionDetailsProps, type KdsAccordionProps, KdsAccordionSummary, type KdsAccordionSummaryProps, KdsAlert, type KdsAlertProps, type KdsAlertSeverity, KdsBankList, type KdsBankListProps, KdsBankModal, type KdsBankModalProps, KdsBankRow, type KdsBankRowProps, 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 };