@khipu/design-system 0.1.0-alpha.12

package/dist/index.d.mts

@@ -0,0 +1,1390 @@
+import * as _mui_material_styles from '@mui/material/styles';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+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';
+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';
+
+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;
+}
+/**
+ * Provides the Khipu design system theme to all child components.
+ *
+ * @example
+ * ```tsx
+ * import { KhipuThemeProvider } from '@khipu/design-system';
+ *
+ * function App() {
+ *   return (
+ *     <KhipuThemeProvider>
+ *       <YourApp />
+ *     </KhipuThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function KhipuThemeProvider({ children, includeCssBaseline, }: KhipuThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Default color export (light mode for backward compatibility)
+ *
+ * @deprecated Use `colorsByMode.light` or `colorsByMode.dark` instead
+ * This export maintains backward compatibility with existing code.
+ */
+declare const colors: {
+    readonly success: {
+        readonly main: "#2E7D32";
+        readonly light: "#4CAF50";
+        readonly dark: "#1B5E20";
+        readonly contrastText: "#FFFFFF";
+    };
+    readonly warning: {
+        readonly main: "#ED6C02";
+        readonly light: "#FF9800";
+        readonly dark: "#E65100";
+        readonly contrastText: "#FFFFFF";
+    };
+    readonly error: {
+        readonly main: "#D32F2F";
+        readonly light: "#EF5350";
+        readonly dark: "#C62828";
+        readonly contrastText: "#FFFFFF";
+    };
+    readonly info: {
+        readonly main: "#0288D1";
+        readonly light: "#03A9F4";
+        readonly dark: "#01579B";
+        readonly contrastText: "#FFFFFF";
+    };
+    readonly primary: {
+        readonly main: "#4CAF50";
+        readonly light: "#81C784";
+        readonly dark: "#388E3C";
+        readonly contrastText: "#FFFFFF";
+        readonly states: {
+            readonly hover: "rgba(131, 71, 173, 0.04)";
+            readonly selected: "rgba(131, 71, 173, 0.08)";
+            readonly focus: "rgba(131, 71, 173, 0.12)";
+            readonly focusVisible: "rgba(131, 71, 173, 0.30)";
+            readonly outlinedBorder: "rgba(131, 71, 173, 0.50)";
+        };
+    };
+    readonly secondary: {
+        readonly main: "#3CB4E5";
+        readonly light: "#6AC6EB";
+        readonly dark: "#198EBE";
+        readonly contrastText: "#FFFFFF";
+    };
+    readonly text: {
+        readonly primary: "rgba(0, 0, 0, 0.87)";
+        readonly secondary: "rgba(0, 0, 0, 0.60)";
+        readonly disabled: "rgba(0, 0, 0, 0.38)";
+        readonly hint: "rgba(0, 0, 0, 0.38)";
+    };
+    readonly background: {
+        readonly default: "#FFFFFF";
+        readonly paper: "#FFFFFF";
+        readonly elevated: "#FAFAFA";
+    };
+    readonly action: {
+        readonly active: "rgba(0, 0, 0, 0.56)";
+        readonly hover: "rgba(0, 0, 0, 0.04)";
+        readonly selected: "rgba(0, 0, 0, 0.08)";
+        readonly disabled: "rgba(0, 0, 0, 0.38)";
+        readonly disabledBackground: "rgba(0, 0, 0, 0.12)";
+        readonly focus: "rgba(0, 0, 0, 0.12)";
+    };
+    readonly divider: "rgba(0, 0, 0, 0.12)";
+    readonly components: {
+        readonly input: {
+            readonly outlined: {
+                readonly enabledBorder: "rgba(0, 0, 0, 0.23)";
+                readonly hoverBorder: "rgba(0, 0, 0, 0.87)";
+            };
+        };
+    };
+};
+declare const fontFamilies: {
+    readonly primary: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+    readonly secondary: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+    readonly mono: "\"Roboto Mono\", \"SF Mono\", \"Monaco\", monospace";
+};
+declare const fontWeights: {
+    readonly light: 300;
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semiBold: 600;
+    readonly bold: 700;
+};
+declare const fontSizes: {
+    readonly xs: "0.75rem";
+    readonly sm: "0.875rem";
+    readonly base: "1rem";
+    readonly lg: "1.125rem";
+    readonly xl: "1.25rem";
+    readonly '2xl': "1.5rem";
+    readonly '3xl': "1.875rem";
+    readonly '4xl': "2.25rem";
+};
+declare const lineHeights: {
+    readonly tight: 1.2;
+    readonly snug: 1.375;
+    readonly normal: 1.5;
+    readonly relaxed: 1.66;
+    readonly loose: 2;
+};
+declare const letterSpacings: {
+    readonly tighter: "-0.05em";
+    readonly tight: "-0.025em";
+    readonly normal: "0.15px";
+    readonly wide: "0.4px";
+    readonly wider: "0.46px";
+    readonly widest: "1px";
+};
+declare const typography: {
+    readonly h1: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 700;
+        readonly fontSize: "2.5rem";
+        readonly lineHeight: 1.2;
+        readonly letterSpacing: "-0.01562em";
+    };
+    readonly h2: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 700;
+        readonly fontSize: "2rem";
+        readonly lineHeight: 1.2;
+        readonly letterSpacing: "-0.00833em";
+    };
+    readonly h3: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 600;
+        readonly fontSize: "1.75rem";
+        readonly lineHeight: 1.2;
+        readonly letterSpacing: "0em";
+    };
+    readonly h4: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 600;
+        readonly fontSize: "1.5rem";
+        readonly lineHeight: 1.235;
+        readonly letterSpacing: "0.00735em";
+    };
+    readonly h5: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 600;
+        readonly fontSize: "1.25rem";
+        readonly lineHeight: 1.334;
+        readonly letterSpacing: "0em";
+    };
+    readonly h6: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 600;
+        readonly fontSize: "1.25rem";
+        readonly lineHeight: "32px";
+        readonly letterSpacing: "0.15px";
+    };
+    readonly subtitle1: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 400;
+        readonly fontSize: "1rem";
+        readonly lineHeight: 1.75;
+        readonly letterSpacing: "0.00938em";
+    };
+    readonly subtitle2: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 500;
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: 1.57;
+        readonly letterSpacing: "0.00714em";
+    };
+    readonly body1: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 400;
+        readonly fontSize: "1rem";
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0.15px";
+    };
+    readonly body2: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 400;
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: 1.43;
+        readonly letterSpacing: "0.01071em";
+    };
+    readonly button: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 500;
+        readonly fontSize: "0.9375rem";
+        readonly lineHeight: "26px";
+        readonly letterSpacing: "0.46px";
+        readonly textTransform: "uppercase";
+    };
+    readonly caption: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 400;
+        readonly fontSize: "0.75rem";
+        readonly lineHeight: 1.66;
+        readonly letterSpacing: "0.4px";
+    };
+    readonly overline: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 400;
+        readonly fontSize: "0.75rem";
+        readonly lineHeight: "15px";
+        readonly letterSpacing: "1px";
+        readonly textTransform: "uppercase";
+    };
+    readonly inputValue: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 400;
+        readonly fontSize: "1rem";
+        readonly lineHeight: "24px";
+        readonly letterSpacing: "0.15px";
+    };
+    readonly inputLabel: {
+        readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly fontWeight: 400;
+        readonly fontSize: "0.75rem";
+        readonly lineHeight: "12px";
+        readonly letterSpacing: "0.15px";
+    };
+};
+declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "8px";
+    readonly 2: "16px";
+    readonly 3: "24px";
+    readonly 4: "32px";
+    readonly 5: "40px";
+    readonly 6: "48px";
+    readonly 7: "56px";
+    readonly 8: "64px";
+    readonly 9: "72px";
+    readonly 10: "80px";
+    readonly 11: "88px";
+    readonly 12: "96px";
+};
+declare const semanticSpacing: {
+    readonly card: {
+        readonly paddingY: "10px";
+        readonly paddingX: "20px";
+        readonly padding: "10px 20px";
+        readonly gap: "16px";
+        readonly listGap: "12px";
+    };
+    readonly box: {
+        readonly paddingY: "32px";
+        readonly paddingX: "20px";
+        readonly padding: "32px 20px";
+    };
+    readonly input: {
+        readonly paddingY: "16px";
+        readonly paddingX: "12px";
+        readonly padding: "16px 12px";
+    };
+    readonly button: {
+        readonly paddingY: "8px";
+        readonly paddingX: "22px";
+        readonly padding: "8px 22px";
+    };
+    readonly sectionGap: "32px";
+    readonly formGap: "20px";
+    readonly inlineGap: "8px";
+    readonly stackGap: "16px";
+    readonly modalPadding: "24px";
+};
+declare const borderRadius: {
+    readonly none: "0px";
+    readonly sm: "4px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly '2xl': "20px";
+    readonly '3xl': "24px";
+    readonly full: "9999px";
+    readonly button: "4px";
+    readonly input: "4px";
+    readonly card: "20px";
+    readonly modal: "20px";
+    readonly chip: "16px";
+    readonly avatar: "100px";
+    readonly iconContainer: "10px";
+};
+declare const shadows: {
+    readonly none: "none";
+    readonly elevation2: "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)";
+    readonly button: "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)";
+    readonly card: "none";
+    readonly modal: "0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)";
+    readonly dropdown: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)";
+};
+declare const zIndex: {
+    readonly mobileStepper: 1000;
+    readonly fab: 1050;
+    readonly speedDial: 1050;
+    readonly appBar: 1100;
+    readonly drawer: 1200;
+    readonly modal: 1300;
+    readonly snackbar: 1400;
+    readonly tooltip: 1500;
+};
+declare const transitions: {
+    readonly duration: {
+        readonly shortest: 150;
+        readonly shorter: 200;
+        readonly short: 250;
+        readonly standard: 300;
+        readonly complex: 375;
+        readonly enteringScreen: 225;
+        readonly leavingScreen: 195;
+    };
+    readonly easing: {
+        readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly easeOut: "cubic-bezier(0.0, 0, 0.2, 1)";
+        readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly sharp: "cubic-bezier(0.4, 0, 0.6, 1)";
+    };
+};
+declare const breakpoints: {
+    readonly xs: "444px";
+    readonly sm: "600px";
+    readonly md: "900px";
+    readonly lg: "1200px";
+    readonly xl: "1536px";
+};
+/**
+ * Default token export (light mode for backward compatibility)
+ *
+ * @deprecated Use `tokensByMode.light` or `tokensByMode.dark` instead
+ * This export maintains backward compatibility with existing code.
+ */
+declare const tokens: {
+    readonly colors: {
+        readonly success: {
+            readonly main: "#2E7D32";
+            readonly light: "#4CAF50";
+            readonly dark: "#1B5E20";
+            readonly contrastText: "#FFFFFF";
+        };
+        readonly warning: {
+            readonly main: "#ED6C02";
+            readonly light: "#FF9800";
+            readonly dark: "#E65100";
+            readonly contrastText: "#FFFFFF";
+        };
+        readonly error: {
+            readonly main: "#D32F2F";
+            readonly light: "#EF5350";
+            readonly dark: "#C62828";
+            readonly contrastText: "#FFFFFF";
+        };
+        readonly info: {
+            readonly main: "#0288D1";
+            readonly light: "#03A9F4";
+            readonly dark: "#01579B";
+            readonly contrastText: "#FFFFFF";
+        };
+        readonly primary: {
+            readonly main: "#4CAF50";
+            readonly light: "#81C784";
+            readonly dark: "#388E3C";
+            readonly contrastText: "#FFFFFF";
+            readonly states: {
+                readonly hover: "rgba(131, 71, 173, 0.04)";
+                readonly selected: "rgba(131, 71, 173, 0.08)";
+                readonly focus: "rgba(131, 71, 173, 0.12)";
+                readonly focusVisible: "rgba(131, 71, 173, 0.30)";
+                readonly outlinedBorder: "rgba(131, 71, 173, 0.50)";
+            };
+        };
+        readonly secondary: {
+            readonly main: "#3CB4E5";
+            readonly light: "#6AC6EB";
+            readonly dark: "#198EBE";
+            readonly contrastText: "#FFFFFF";
+        };
+        readonly text: {
+            readonly primary: "rgba(0, 0, 0, 0.87)";
+            readonly secondary: "rgba(0, 0, 0, 0.60)";
+            readonly disabled: "rgba(0, 0, 0, 0.38)";
+            readonly hint: "rgba(0, 0, 0, 0.38)";
+        };
+        readonly background: {
+            readonly default: "#FFFFFF";
+            readonly paper: "#FFFFFF";
+            readonly elevated: "#FAFAFA";
+        };
+        readonly action: {
+            readonly active: "rgba(0, 0, 0, 0.56)";
+            readonly hover: "rgba(0, 0, 0, 0.04)";
+            readonly selected: "rgba(0, 0, 0, 0.08)";
+            readonly disabled: "rgba(0, 0, 0, 0.38)";
+            readonly disabledBackground: "rgba(0, 0, 0, 0.12)";
+            readonly focus: "rgba(0, 0, 0, 0.12)";
+        };
+        readonly divider: "rgba(0, 0, 0, 0.12)";
+        readonly components: {
+            readonly input: {
+                readonly outlined: {
+                    readonly enabledBorder: "rgba(0, 0, 0, 0.23)";
+                    readonly hoverBorder: "rgba(0, 0, 0, 0.87)";
+                };
+            };
+        };
+    };
+    readonly fontFamilies: {
+        readonly primary: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly secondary: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+        readonly mono: "\"Roboto Mono\", \"SF Mono\", \"Monaco\", monospace";
+    };
+    readonly fontWeights: {
+        readonly light: 300;
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semiBold: 600;
+        readonly bold: 700;
+    };
+    readonly fontSizes: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+    };
+    readonly lineHeights: {
+        readonly tight: 1.2;
+        readonly snug: 1.375;
+        readonly normal: 1.5;
+        readonly relaxed: 1.66;
+        readonly loose: 2;
+    };
+    readonly letterSpacings: {
+        readonly tighter: "-0.05em";
+        readonly tight: "-0.025em";
+        readonly normal: "0.15px";
+        readonly wide: "0.4px";
+        readonly wider: "0.46px";
+        readonly widest: "1px";
+    };
+    readonly typography: {
+        readonly h1: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 700;
+            readonly fontSize: "2.5rem";
+            readonly lineHeight: 1.2;
+            readonly letterSpacing: "-0.01562em";
+        };
+        readonly h2: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 700;
+            readonly fontSize: "2rem";
+            readonly lineHeight: 1.2;
+            readonly letterSpacing: "-0.00833em";
+        };
+        readonly h3: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 600;
+            readonly fontSize: "1.75rem";
+            readonly lineHeight: 1.2;
+            readonly letterSpacing: "0em";
+        };
+        readonly h4: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 600;
+            readonly fontSize: "1.5rem";
+            readonly lineHeight: 1.235;
+            readonly letterSpacing: "0.00735em";
+        };
+        readonly h5: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 600;
+            readonly fontSize: "1.25rem";
+            readonly lineHeight: 1.334;
+            readonly letterSpacing: "0em";
+        };
+        readonly h6: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 600;
+            readonly fontSize: "1.25rem";
+            readonly lineHeight: "32px";
+            readonly letterSpacing: "0.15px";
+        };
+        readonly subtitle1: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 400;
+            readonly fontSize: "1rem";
+            readonly lineHeight: 1.75;
+            readonly letterSpacing: "0.00938em";
+        };
+        readonly subtitle2: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 500;
+            readonly fontSize: "0.875rem";
+            readonly lineHeight: 1.57;
+            readonly letterSpacing: "0.00714em";
+        };
+        readonly body1: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 400;
+            readonly fontSize: "1rem";
+            readonly lineHeight: 1.5;
+            readonly letterSpacing: "0.15px";
+        };
+        readonly body2: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 400;
+            readonly fontSize: "0.875rem";
+            readonly lineHeight: 1.43;
+            readonly letterSpacing: "0.01071em";
+        };
+        readonly button: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 500;
+            readonly fontSize: "0.9375rem";
+            readonly lineHeight: "26px";
+            readonly letterSpacing: "0.46px";
+            readonly textTransform: "uppercase";
+        };
+        readonly caption: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 400;
+            readonly fontSize: "0.75rem";
+            readonly lineHeight: 1.66;
+            readonly letterSpacing: "0.4px";
+        };
+        readonly overline: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 400;
+            readonly fontSize: "0.75rem";
+            readonly lineHeight: "15px";
+            readonly letterSpacing: "1px";
+            readonly textTransform: "uppercase";
+        };
+        readonly inputValue: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 400;
+            readonly fontSize: "1rem";
+            readonly lineHeight: "24px";
+            readonly letterSpacing: "0.15px";
+        };
+        readonly inputLabel: {
+            readonly fontFamily: "\"Public Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"";
+            readonly fontWeight: 400;
+            readonly fontSize: "0.75rem";
+            readonly lineHeight: "12px";
+            readonly letterSpacing: "0.15px";
+        };
+    };
+    readonly spacing: {
+        readonly 0: "0px";
+        readonly 1: "8px";
+        readonly 2: "16px";
+        readonly 3: "24px";
+        readonly 4: "32px";
+        readonly 5: "40px";
+        readonly 6: "48px";
+        readonly 7: "56px";
+        readonly 8: "64px";
+        readonly 9: "72px";
+        readonly 10: "80px";
+        readonly 11: "88px";
+        readonly 12: "96px";
+    };
+    readonly semanticSpacing: {
+        readonly card: {
+            readonly paddingY: "10px";
+            readonly paddingX: "20px";
+            readonly padding: "10px 20px";
+            readonly gap: "16px";
+            readonly listGap: "12px";
+        };
+        readonly box: {
+            readonly paddingY: "32px";
+            readonly paddingX: "20px";
+            readonly padding: "32px 20px";
+        };
+        readonly input: {
+            readonly paddingY: "16px";
+            readonly paddingX: "12px";
+            readonly padding: "16px 12px";
+        };
+        readonly button: {
+            readonly paddingY: "8px";
+            readonly paddingX: "22px";
+            readonly padding: "8px 22px";
+        };
+        readonly sectionGap: "32px";
+        readonly formGap: "20px";
+        readonly inlineGap: "8px";
+        readonly stackGap: "16px";
+        readonly modalPadding: "24px";
+    };
+    readonly borderRadius: {
+        readonly none: "0px";
+        readonly sm: "4px";
+        readonly md: "8px";
+        readonly lg: "12px";
+        readonly xl: "16px";
+        readonly '2xl': "20px";
+        readonly '3xl': "24px";
+        readonly full: "9999px";
+        readonly button: "4px";
+        readonly input: "4px";
+        readonly card: "20px";
+        readonly modal: "20px";
+        readonly chip: "16px";
+        readonly avatar: "100px";
+        readonly iconContainer: "10px";
+    };
+    readonly borders: {
+        readonly card: "1px solid rgba(0, 0, 0, 0.42)";
+        readonly cardSelected: "2px solid #8347AD";
+        readonly inputOutlined: "1px solid rgba(0, 0, 0, 0.23)";
+        readonly inputStandard: "1px solid rgba(0, 0, 0, 0.42)";
+        readonly buttonOutlinedPrimary: "1px solid rgba(131, 71, 173, 0.5)";
+        readonly buttonOutlinedInfo: "1px solid rgba(2, 136, 209, 0.5)";
+        readonly divider: "1px solid #e0e0e0";
+        readonly container: "1px solid rgba(58, 53, 65, 0.3)";
+    };
+    readonly shadows: {
+        readonly none: "none";
+        readonly elevation2: "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)";
+        readonly button: "0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)";
+        readonly card: "none";
+        readonly modal: "0px 11px 15px -7px rgba(0,0,0,0.2), 0px 24px 38px 3px rgba(0,0,0,0.14), 0px 9px 46px 8px rgba(0,0,0,0.12)";
+        readonly dropdown: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)";
+    };
+    readonly zIndex: {
+        readonly mobileStepper: 1000;
+        readonly fab: 1050;
+        readonly speedDial: 1050;
+        readonly appBar: 1100;
+        readonly drawer: 1200;
+        readonly modal: 1300;
+        readonly snackbar: 1400;
+        readonly tooltip: 1500;
+    };
+    readonly transitions: {
+        readonly duration: {
+            readonly shortest: 150;
+            readonly shorter: 200;
+            readonly short: 250;
+            readonly standard: 300;
+            readonly complex: 375;
+            readonly enteringScreen: 225;
+            readonly leavingScreen: 195;
+        };
+        readonly easing: {
+            readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly easeOut: "cubic-bezier(0.0, 0, 0.2, 1)";
+            readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly sharp: "cubic-bezier(0.4, 0, 0.6, 1)";
+        };
+    };
+    readonly breakpoints: {
+        readonly xs: "444px";
+        readonly sm: "600px";
+        readonly md: "900px";
+        readonly lg: "1200px";
+        readonly xl: "1536px";
+    };
+};
+type Tokens = typeof tokens;
+type Colors = typeof colors;
+type Typography = typeof typography;
+
+/**
+ * Khipu Design System - Button Component
+ *
+ * A button component built on MUI Button with Khipu design system styling.
+ * 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'> {
+    /** 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;
+}
+/**
+ * Primary action button component.
+ *
+ * Built on MUI Button with Khipu design system styling.
+ *
+ * @example
+ * ```tsx
+ * <KdsButton variant="contained" color="primary">
+ *   INGRESAR
+ * </KdsButton>
+ *
+ * <KdsButton variant="outlined" color="info">
+ *   RECHAZAR
+ * </KdsButton>
+ *
+ * <KdsButton variant="contained" color="success" fullWidth>
+ *   VOLVER AL COMERCIO
+ * </KdsButton>
+ *
+ * <KdsButton loading>
+ *   Processing...
+ * </KdsButton>
+ * ```
+ */
+declare const KdsButton: React__default.ForwardRefExoticComponent<Omit<KdsButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Khipu Design System - TextField Component
+ *
+ * A text input component built on MUI TextField with Khipu design system styling.
+ * 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;
+}
+/**
+ * Text input field with label, validation, and adornments.
+ *
+ * Built on MUI TextField with Khipu design system styling.
+ *
+ * @example
+ * ```tsx
+ * <KdsTextField
+ *   label="RUT Suscriptor"
+ *   placeholder="12.345.678-9"
+ *   endAdornment={<PersonIcon />}
+ * />
+ *
+ * <KdsTextField
+ *   label="Buscar por nombre"
+ *   variant="outlined"
+ * />
+ *
+ * <KdsTextField
+ *   label="Contraseña"
+ *   type="password"
+ *   error
+ *   helperText="Contraseña incorrecta"
+ * />
+ * ```
+ */
+declare const KdsTextField: React__default.ForwardRefExoticComponent<Omit<KdsTextFieldProps, "ref"> & 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
+ */
+
+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;
+}
+/**
+ * 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>>;
+
+/**
+ * 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
+ */
+
+type KdsModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface KdsModalProps extends Omit<DialogProps, 'maxWidth' | 'title'> {
+    /** Controls modal visibility */
+    open: boolean;
+    /** Callback when modal should close */
+    onClose: () => void;
+    /** Modal title */
+    title?: React__default.ReactNode;
+    /** Modal content */
+    children: React__default.ReactNode;
+    /** Footer content (usually action buttons) */
+    footer?: React__default.ReactNode;
+    /** Modal max width */
+    size?: KdsModalSize;
+    /** Show close button */
+    showCloseButton?: boolean;
+}
+/**
+ * Modal dialog component for displaying content that requires attention.
+ *
+ * Built on MUI Dialog with Khipu design system styling.
+ *
+ * @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>
+ *     </>
+ *   }
+ * >
+ *   <p>¿Estás seguro de que deseas realizar este pago?</p>
+ * </KdsModal>
+ * ```
+ */
+declare const KdsModal: React__default.FC<KdsModalProps>;
+
+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'> {
+    /** 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 {
+}
+interface KdsCardContentProps extends CardContentProps {
+}
+interface KdsCardActionsProps extends CardActionsProps {
+}
+/**
+ * Card container component for grouping related content.
+ *
+ * Built on MUI Card with Khipu design system styling.
+ *
+ * @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>
+ * </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>
+ * </KdsCard>
+ * ```
+ */
+declare const KdsCard: React.ForwardRefExoticComponent<Omit<KdsCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Card header with title, subtitle, avatar, and action areas.
+ */
+declare const KdsCardHeader: React.ForwardRefExoticComponent<Omit<KdsCardHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Main content area of the card.
+ */
+declare const KdsCardContent: React.ForwardRefExoticComponent<Omit<KdsCardContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Actions area at the bottom of the card, typically for buttons.
+ */
+declare const KdsCardActions: React.ForwardRefExoticComponent<Omit<KdsCardActionsProps, "ref"> & React.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
+ */
+
+type KdsSpinnerSize = 'small' | 'medium' | 'large';
+type KdsSpinnerColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+interface KdsSpinnerProps extends Omit<CircularProgressProps, 'size' | 'color'> {
+    /** Spinner size */
+    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>;
+
+/**
+ * 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
+ */
+
+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 */
+    value?: 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>;
+
+/**
+ * Khipu Design System - Alert Component
+ *
+ * An alert component built on MUI Alert with Khipu design system styling.
+ * 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'> {
+    /** Alert severity/type */
+    severity?: KdsAlertSeverity;
+    /** Visual variant */
+    variant?: KdsAlertVariant;
+    /** Alert title */
+    title?: React__default.ReactNode;
+    /** Alert content */
+    children: React__default.ReactNode;
+    /** Closable alert */
+    onClose?: () => void;
+}
+/**
+ * Alert component for displaying important messages.
+ *
+ * Built on MUI Alert with Khipu design system styling.
+ *
+ * @example
+ * ```tsx
+ * // Info alert (like in subscription details)
+ * <KdsAlert severity="info">
+ *   El tope mensual corresponde al monto máximo posible a cobrar mensualmente.
+ * </KdsAlert>
+ *
+ * // Success alert
+ * <KdsAlert severity="success" title="¡Todo listo!">
+ *   Espera la confirmación por parte de tu banco
+ * </KdsAlert>
+ *
+ * // Warning alert
+ * <KdsAlert severity="warning" onClose={() => setOpen(false)}>
+ *   Tu sesión expirará pronto
+ * </KdsAlert>
+ *
+ * // Error alert
+ * <KdsAlert severity="error">
+ *   Ha ocurrido un error al procesar tu pago
+ * </KdsAlert>
+ * ```
+ */
+declare const KdsAlert: React__default.FC<KdsAlertProps>;
+
+/**
+ * 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'> {
+    /**
+     * The typography variant to use
+     * @default 'body'
+     */
+    variant?: KdsTypographyVariant | TypographyProps['variant'];
+    /**
+     * Text color preset
+     */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'error' | 'success' | 'info' | 'inherit';
+    /**
+     * Whether to truncate text with ellipsis
+     */
+    truncate?: boolean;
+    /**
+     * Maximum number of lines before truncating (requires truncate=true)
+     */
+    maxLines?: number;
+}
+/**
+ * Typography component for consistent text styling across the Khipu design system.
+ *
+ * @example
+ * // Display text
+ * <KdsTypography variant="display1">Hero Headline</KdsTypography>
+ *
+ * // Heading
+ * <KdsTypography variant="heading3">Page Title</KdsTypography>
+ *
+ * // Body text
+ * <KdsTypography variant="body">Regular body text</KdsTypography>
+ *
+ * // 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
+ *
+ * Built with composable sub-components for flexibility.
+ */
+
+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 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;
+}
+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;
+}
+/**
+ * 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>>;
+
+/**
+ * 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 {
+    /** Content - typically LogoHeader sub-components */
+    children?: React__default.ReactNode;
+}
+interface KdsLogoHeaderLogoProps extends BoxProps {
+    /** Custom logo content. Defaults to Khipu text logo */
+    children?: React__default.ReactNode;
+}
+interface KdsLogoHeaderSeparatorProps extends BoxProps {
+    /** Separator character. Defaults to "|" */
+    children?: React__default.ReactNode;
+}
+interface KdsLogoHeaderCodeProps extends BoxProps {
+    /** Transaction or reference code to display */
+    children: React__default.ReactNode;
+}
+interface KdsLogoHeaderCloseButtonProps extends Omit<IconButtonProps, 'children'> {
+    /** Callback fired when the close button is clicked */
+    onClose?: () => void;
+}
+/**
+ * Logo section of the LogoHeader.
+ *
+ * @example
+ * ```tsx
+ * <KdsLogoHeaderLogo />
+ *
+ * <KdsLogoHeaderLogo>
+ *   <img src="/custom-logo.svg" alt="Custom Logo" />
+ * </KdsLogoHeaderLogo>
+ * ```
+ */
+declare const KdsLogoHeaderLogo: React__default.ForwardRefExoticComponent<Omit<KdsLogoHeaderLogoProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+/**
+ * Separator element between logo and code.
+ *
+ * @example
+ * ```tsx
+ * <KdsLogoHeaderSeparator />
+ *
+ * <KdsLogoHeaderSeparator>•</KdsLogoHeaderSeparator>
+ * ```
+ */
+declare const KdsLogoHeaderSeparator: React__default.ForwardRefExoticComponent<Omit<KdsLogoHeaderSeparatorProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
+/**
+ * Transaction code section.
+ *
+ * @example
+ * ```tsx
+ * <KdsLogoHeaderCode>HUSK-P7ZZ-XGYG</KdsLogoHeaderCode>
+ * ```
+ */
+declare const KdsLogoHeaderCode: React__default.ForwardRefExoticComponent<Omit<KdsLogoHeaderCodeProps, "ref"> & React__default.RefAttributes<HTMLSpanElement>>;
+/**
+ * Close button for the header.
+ *
+ * @example
+ * ```tsx
+ * <KdsLogoHeaderCloseButton onClose={() => handleClose()} />
+ * ```
+ */
+declare const KdsLogoHeaderCloseButton: React__default.ForwardRefExoticComponent<Omit<KdsLogoHeaderCloseButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+/**
+ * LogoHeader bar component.
+ *
+ * A composable header component that can be used with sub-components
+ * for maximum flexibility, or with default children for quick usage.
+ *
+ * @example
+ * ```tsx
+ * // Composable usage
+ * <KdsLogoHeader>
+ *   <KdsLogoHeaderLogo />
+ *   <KdsLogoHeaderSeparator />
+ *   <KdsLogoHeaderCode>HUSK-P7ZZ-XGYG</KdsLogoHeaderCode>
+ *   <KdsLogoHeaderCloseButton onClose={() => handleClose()} />
+ * </KdsLogoHeader>
+ *
+ * // Simple usage with defaults
+ * <KdsLogoHeader>
+ *   <KdsLogoHeaderLogo />
+ *   <KdsLogoHeaderSeparator />
+ *   <KdsLogoHeaderCode>ABC-1234-XYZ</KdsLogoHeaderCode>
+ * </KdsLogoHeader>
+ * ```
+ */
+declare const KdsLogoHeader: React__default.ForwardRefExoticComponent<Omit<KdsLogoHeaderProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+
+export { type Colors, 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, KdsLinearProgress, type KdsLinearProgressColor, type KdsLinearProgressProps, type KdsLinearProgressVariant, KdsLogoHeader, KdsLogoHeaderCloseButton, type KdsLogoHeaderCloseButtonProps, KdsLogoHeaderCode, type KdsLogoHeaderCodeProps, KdsLogoHeaderLogo, type KdsLogoHeaderLogoProps, type KdsLogoHeaderProps, KdsLogoHeaderSeparator, type KdsLogoHeaderSeparatorProps, KdsModal, type KdsModalProps, type KdsModalSize, 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, KdsTypography, type KdsTypographyProps, type KdsTypographyVariant, type KhipuTheme, KhipuThemeProvider, type KhipuThemeProviderProps, type Tokens, type Typography as TypographyTokens, borderRadius, breakpoints, colors, fontFamilies, fontSizes, fontWeights, khipuTheme, letterSpacings, lineHeights, semanticSpacing, shadows, spacing, tokens, transitions, typography, zIndex };