@khipu/design-system 0.1.0-alpha.12

package/dist/index.js

@@ -0,0 +1,2276 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Box: () => import_Box5.default,
+  CheckCircleIcon: () => import_CheckCircle.default,
+  CheckIcon: () => import_Check.default,
+  ChevronLeftIcon: () => import_ChevronLeft.default,
+  ChevronRightIcon: () => import_ChevronRight.default,
+  CloseIcon: () => import_Close3.default,
+  Container: () => import_Container.default,
+  Divider: () => import_Divider.default,
+  ErrorIcon: () => import_Error.default,
+  ExpandLessIcon: () => import_ExpandLess.default,
+  ExpandMoreIcon: () => import_ExpandMore.default,
+  Grid: () => import_Grid.default,
+  IconButton: () => import_IconButton3.default,
+  InfoIcon: () => import_Info.default,
+  InputAdornment: () => import_InputAdornment2.default,
+  KdsAlert: () => KdsAlert,
+  KdsButton: () => KdsButton,
+  KdsCard: () => KdsCard,
+  KdsCardActions: () => KdsCardActions,
+  KdsCardContent: () => KdsCardContent,
+  KdsCardHeader: () => KdsCardHeader,
+  KdsCheckbox: () => KdsCheckbox,
+  KdsLinearProgress: () => KdsLinearProgress,
+  KdsLogoHeader: () => KdsLogoHeader,
+  KdsLogoHeaderCloseButton: () => KdsLogoHeaderCloseButton,
+  KdsLogoHeaderCode: () => KdsLogoHeaderCode,
+  KdsLogoHeaderLogo: () => KdsLogoHeaderLogo,
+  KdsLogoHeaderSeparator: () => KdsLogoHeaderSeparator,
+  KdsModal: () => KdsModal,
+  KdsSpinner: () => KdsSpinner,
+  KdsTab: () => KdsTab,
+  KdsTabPanel: () => KdsTabPanel,
+  KdsTabs: () => KdsTabs,
+  KdsTextField: () => KdsTextField,
+  KdsTypography: () => KdsTypography,
+  KhipuThemeProvider: () => KhipuThemeProvider,
+  Link: () => import_Link.default,
+  LockIcon: () => import_Lock.default,
+  LockOutlinedIcon: () => import_LockOutlined.default,
+  MailOutlineIcon: () => import_MailOutline.default,
+  PersonIcon: () => import_Person.default,
+  SearchIcon: () => import_Search.default,
+  Stack: () => import_Stack.default,
+  VisibilityIcon: () => import_Visibility.default,
+  VisibilityOffIcon: () => import_VisibilityOff.default,
+  WarningIcon: () => import_Warning.default,
+  borderRadius: () => borderRadius,
+  breakpoints: () => breakpoints,
+  colors: () => colors,
+  fontFamilies: () => fontFamilies,
+  fontSizes: () => fontSizes,
+  fontWeights: () => fontWeights,
+  khipuTheme: () => khipuTheme,
+  letterSpacings: () => letterSpacings,
+  lineHeights: () => lineHeights,
+  semanticSpacing: () => semanticSpacing,
+  shadows: () => shadows,
+  spacing: () => spacing,
+  tokens: () => tokens,
+  transitions: () => transitions,
+  typography: () => typography,
+  zIndex: () => zIndex
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/theme/index.ts
+var import_styles = require("@mui/material/styles");
+
+// src/tokens/index.ts
+var lightModeColors = {
+  // Primary palette - Purple (Khipu brand)
+  primary: {
+    main: "#4CAF50",
+    light: "#81C784",
+    dark: "#388E3C",
+    contrastText: "#FFFFFF",
+    states: {
+      hover: "rgba(131, 71, 173, 0.04)",
+      selected: "rgba(131, 71, 173, 0.08)",
+      focus: "rgba(131, 71, 173, 0.12)",
+      focusVisible: "rgba(131, 71, 173, 0.30)",
+      outlinedBorder: "rgba(131, 71, 173, 0.50)"
+    }
+  },
+  // Secondary palette - Cyan/Turquoise
+  secondary: {
+    main: "#3CB4E5",
+    light: "#6AC6EB",
+    dark: "#198EBE",
+    contrastText: "#FFFFFF"
+  },
+  // Text colors (based on black with opacity)
+  text: {
+    primary: "rgba(0, 0, 0, 0.87)",
+    secondary: "rgba(0, 0, 0, 0.60)",
+    disabled: "rgba(0, 0, 0, 0.38)",
+    hint: "rgba(0, 0, 0, 0.38)"
+  },
+  // Background colors
+  background: {
+    default: "#FFFFFF",
+    paper: "#FFFFFF",
+    elevated: "#FAFAFA"
+  },
+  // Action colors
+  action: {
+    active: "rgba(0, 0, 0, 0.56)",
+    hover: "rgba(0, 0, 0, 0.04)",
+    selected: "rgba(0, 0, 0, 0.08)",
+    disabled: "rgba(0, 0, 0, 0.38)",
+    disabledBackground: "rgba(0, 0, 0, 0.12)",
+    focus: "rgba(0, 0, 0, 0.12)"
+  },
+  // Divider
+  divider: "rgba(0, 0, 0, 0.12)",
+  // Component-specific colors
+  components: {
+    input: {
+      outlined: {
+        enabledBorder: "rgba(0, 0, 0, 0.23)",
+        hoverBorder: "rgba(0, 0, 0, 0.87)"
+      }
+    }
+  }
+};
+var darkModeColors = {
+  // Primary palette - Purple (Khipu brand) - From Figma K-Tokens
+  primary: {
+    main: "#E3B5FF",
+    light: "#F1D6FF",
+    dark: "#4C0676",
+    contrastText: "rgba(76, 6, 118, 0.87)",
+    states: {
+      hover: "rgba(227, 181, 255, 0.08)",
+      selected: "rgba(227, 181, 255, 0.16)",
+      focus: "rgba(227, 181, 255, 0.24)",
+      focusVisible: "rgba(227, 181, 255, 0.40)",
+      outlinedBorder: "rgba(227, 181, 255, 0.50)"
+    }
+  },
+  // Secondary palette - Cyan/Turquoise - From Figma K-Tokens
+  secondary: {
+    main: "#B5EAFF",
+    light: "#D6F3FF",
+    dark: "#065676",
+    contrastText: "rgba(6, 86, 118, 0.87)"
+  },
+  // Text colors (based on white with opacity) - From Figma K-Tokens
+  text: {
+    primary: "rgba(255, 255, 255, 1)",
+    secondary: "rgba(255, 255, 255, 0.70)",
+    disabled: "rgba(255, 255, 255, 0.38)",
+    hint: "rgba(255, 255, 255, 0.38)"
+  },
+  // Background colors - From Figma K-Tokens
+  background: {
+    default: "#181818",
+    paper: "#121212",
+    elevated: "#2C2C2C"
+  },
+  // Action colors (based on white with opacity) - From Figma K-Tokens
+  action: {
+    active: "rgba(255, 255, 255, 0.56)",
+    hover: "rgba(255, 255, 255, 0.08)",
+    selected: "rgba(255, 255, 255, 0.16)",
+    disabled: "rgba(255, 255, 255, 0.38)",
+    disabledBackground: "rgba(255, 255, 255, 0.12)",
+    focus: "rgba(255, 255, 255, 0.12)"
+  },
+  // Divider
+  divider: "rgba(255, 255, 255, 0.12)",
+  // Component-specific colors - From Figma K-Tokens
+  components: {
+    input: {
+      outlined: {
+        enabledBorder: "rgba(255, 255, 255, 0.23)",
+        hoverBorder: "rgba(255, 255, 255, 1)"
+      }
+    }
+  }
+};
+var semanticColors = {
+  success: {
+    main: "#2E7D32",
+    light: "#4CAF50",
+    dark: "#1B5E20",
+    contrastText: "#FFFFFF"
+  },
+  warning: {
+    main: "#ED6C02",
+    light: "#FF9800",
+    dark: "#E65100",
+    contrastText: "#FFFFFF"
+  },
+  error: {
+    main: "#D32F2F",
+    light: "#EF5350",
+    dark: "#C62828",
+    contrastText: "#FFFFFF"
+  },
+  info: {
+    main: "#0288D1",
+    light: "#03A9F4",
+    dark: "#01579B",
+    contrastText: "#FFFFFF"
+  }
+};
+var colors = {
+  ...lightModeColors,
+  ...semanticColors
+};
+var fontFamilies = {
+  primary: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  secondary: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  mono: '"Roboto Mono", "SF Mono", "Monaco", monospace'
+};
+var fontWeights = {
+  light: 300,
+  regular: 400,
+  medium: 500,
+  semiBold: 600,
+  bold: 700
+};
+var fontSizes = {
+  xs: "0.75rem",
+  // 12px
+  sm: "0.875rem",
+  // 14px
+  base: "1rem",
+  // 16px
+  lg: "1.125rem",
+  // 18px
+  xl: "1.25rem",
+  // 20px
+  "2xl": "1.5rem",
+  // 24px
+  "3xl": "1.875rem",
+  // 30px
+  "4xl": "2.25rem"
+  // 36px
+};
+var lineHeights = {
+  tight: 1.2,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.66,
+  loose: 2
+};
+var letterSpacings = {
+  tighter: "-0.05em",
+  tight: "-0.025em",
+  normal: "0.15px",
+  wide: "0.4px",
+  wider: "0.46px",
+  widest: "1px"
+};
+var typography = {
+  h1: {
+    fontFamily: fontFamilies.primary,
+    fontWeight: fontWeights.bold,
+    fontSize: "2.5rem",
+    lineHeight: 1.2,
+    letterSpacing: "-0.01562em"
+  },
+  h2: {
+    fontFamily: fontFamilies.primary,
+    fontWeight: fontWeights.bold,
+    fontSize: "2rem",
+    lineHeight: 1.2,
+    letterSpacing: "-0.00833em"
+  },
+  h3: {
+    fontFamily: fontFamilies.primary,
+    fontWeight: fontWeights.semiBold,
+    fontSize: "1.75rem",
+    lineHeight: 1.2,
+    letterSpacing: "0em"
+  },
+  h4: {
+    fontFamily: fontFamilies.primary,
+    fontWeight: fontWeights.semiBold,
+    fontSize: "1.5rem",
+    lineHeight: 1.235,
+    letterSpacing: "0.00735em"
+  },
+  h5: {
+    fontFamily: fontFamilies.primary,
+    fontWeight: fontWeights.semiBold,
+    fontSize: "1.25rem",
+    lineHeight: 1.334,
+    letterSpacing: "0em"
+  },
+  h6: {
+    fontFamily: fontFamilies.primary,
+    fontWeight: fontWeights.semiBold,
+    fontSize: "1.25rem",
+    // 20px
+    lineHeight: "32px",
+    letterSpacing: "0.15px"
+  },
+  subtitle1: {
+    fontFamily: fontFamilies.secondary,
+    fontWeight: fontWeights.regular,
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    letterSpacing: "0.00938em"
+  },
+  subtitle2: {
+    fontFamily: fontFamilies.secondary,
+    fontWeight: fontWeights.medium,
+    fontSize: "0.875rem",
+    lineHeight: 1.57,
+    letterSpacing: "0.00714em"
+  },
+  body1: {
+    fontFamily: fontFamilies.secondary,
+    fontWeight: fontWeights.regular,
+    fontSize: "1rem",
+    // 16px
+    lineHeight: 1.5,
+    letterSpacing: "0.15px"
+  },
+  body2: {
+    fontFamily: fontFamilies.secondary,
+    fontWeight: fontWeights.regular,
+    fontSize: "0.875rem",
+    lineHeight: 1.43,
+    letterSpacing: "0.01071em"
+  },
+  button: {
+    fontFamily: fontFamilies.secondary,
+    fontWeight: fontWeights.medium,
+    fontSize: "0.9375rem",
+    // 15px
+    lineHeight: "26px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  },
+  caption: {
+    fontFamily: fontFamilies.secondary,
+    fontWeight: fontWeights.regular,
+    fontSize: "0.75rem",
+    // 12px
+    lineHeight: 1.66,
+    letterSpacing: "0.4px"
+  },
+  overline: {
+    fontFamily: fontFamilies.primary,
+    fontWeight: fontWeights.regular,
+    fontSize: "0.75rem",
+    // 12px
+    lineHeight: "15px",
+    letterSpacing: "1px",
+    textTransform: "uppercase"
+  },
+  inputValue: {
+    fontFamily: fontFamilies.secondary,
+    fontWeight: fontWeights.regular,
+    fontSize: "1rem",
+    lineHeight: "24px",
+    letterSpacing: "0.15px"
+  },
+  inputLabel: {
+    fontFamily: fontFamilies.secondary,
+    fontWeight: fontWeights.regular,
+    fontSize: "0.75rem",
+    lineHeight: "12px",
+    letterSpacing: "0.15px"
+  }
+};
+var spacing = {
+  0: "0px",
+  1: "8px",
+  2: "16px",
+  3: "24px",
+  4: "32px",
+  5: "40px",
+  6: "48px",
+  7: "56px",
+  8: "64px",
+  9: "72px",
+  10: "80px",
+  11: "88px",
+  12: "96px"
+};
+var semanticSpacing = {
+  // Card spacing
+  card: {
+    paddingY: "10px",
+    paddingX: "20px",
+    padding: "10px 20px",
+    gap: "16px",
+    // Internal gap between card elements
+    listGap: "12px"
+    // Gap between cards in a list
+  },
+  // Box/Container spacing
+  box: {
+    paddingY: "32px",
+    paddingX: "20px",
+    padding: "32px 20px"
+  },
+  // Input spacing
+  input: {
+    paddingY: "16px",
+    paddingX: "12px",
+    padding: "16px 12px"
+  },
+  // Button spacing
+  button: {
+    paddingY: "8px",
+    paddingX: "22px",
+    padding: "8px 22px"
+  },
+  // Layout gaps
+  sectionGap: "32px",
+  formGap: "20px",
+  inlineGap: "8px",
+  stackGap: "16px",
+  // Modal
+  modalPadding: "24px"
+};
+var borderRadius = {
+  none: "0px",
+  sm: "4px",
+  // Default MUI/Figma border radius
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  "2xl": "20px",
+  "3xl": "24px",
+  full: "9999px",
+  // Component-specific
+  button: "4px",
+  input: "4px",
+  card: "20px",
+  modal: "20px",
+  chip: "16px",
+  avatar: "100px",
+  iconContainer: "10px"
+};
+var shadows = {
+  none: "none",
+  // From Figma: elevation/2 (used on primary buttons)
+  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)",
+  // Semantic shadows from Figma
+  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)",
+  // elevation/2
+  card: "none",
+  // Figma cards use borders, not shadows
+  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)",
+  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)"
+};
+var borders = {
+  // Card borders (no shadow in Figma)
+  card: "1px solid rgba(0, 0, 0, 0.42)",
+  cardSelected: "2px solid #8347AD",
+  // Input borders
+  inputOutlined: "1px solid rgba(0, 0, 0, 0.23)",
+  inputStandard: "1px solid rgba(0, 0, 0, 0.42)",
+  // Button borders
+  buttonOutlinedPrimary: "1px solid rgba(131, 71, 173, 0.5)",
+  buttonOutlinedInfo: "1px solid rgba(2, 136, 209, 0.5)",
+  // Dividers
+  divider: "1px solid #e0e0e0",
+  container: "1px solid rgba(58, 53, 65, 0.3)"
+};
+var zIndex = {
+  mobileStepper: 1e3,
+  fab: 1050,
+  speedDial: 1050,
+  appBar: 1100,
+  drawer: 1200,
+  modal: 1300,
+  snackbar: 1400,
+  tooltip: 1500
+};
+var transitions = {
+  duration: {
+    shortest: 150,
+    shorter: 200,
+    short: 250,
+    standard: 300,
+    complex: 375,
+    enteringScreen: 225,
+    leavingScreen: 195
+  },
+  easing: {
+    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+    easeOut: "cubic-bezier(0.0, 0, 0.2, 1)",
+    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+    sharp: "cubic-bezier(0.4, 0, 0.6, 1)"
+  }
+};
+var breakpoints = {
+  xs: "444px",
+  sm: "600px",
+  md: "900px",
+  lg: "1200px",
+  xl: "1536px"
+};
+var tokensByMode = {
+  light: {
+    colors: { ...lightModeColors, ...semanticColors },
+    fontFamilies,
+    fontWeights,
+    fontSizes,
+    lineHeights,
+    letterSpacings,
+    typography,
+    spacing,
+    semanticSpacing,
+    borderRadius,
+    borders,
+    shadows,
+    zIndex,
+    transitions,
+    breakpoints
+  },
+  dark: {
+    colors: { ...darkModeColors, ...semanticColors },
+    fontFamilies,
+    fontWeights,
+    fontSizes,
+    lineHeights,
+    letterSpacings,
+    typography,
+    spacing,
+    semanticSpacing,
+    borderRadius,
+    borders,
+    shadows,
+    zIndex,
+    transitions,
+    breakpoints
+  }
+};
+var tokens = {
+  colors,
+  fontFamilies,
+  fontWeights,
+  fontSizes,
+  lineHeights,
+  letterSpacings,
+  typography,
+  spacing,
+  semanticSpacing,
+  borderRadius,
+  borders,
+  shadows,
+  zIndex,
+  transitions,
+  breakpoints
+};
+
+// src/theme/index.ts
+var figmaColors = {
+  ...colors,
+  // Add states to info color (not in tokens yet)
+  info: {
+    ...colors.info,
+    states: {
+      outlinedBorder: "rgba(2, 136, 209, 0.5)"
+    }
+  },
+  // Add input colors (not in tokens yet)
+  input: {
+    outlined: {
+      enabledBorder: "rgba(0, 0, 0, 0.23)",
+      hoverBorder: "rgba(0, 0, 0, 0.87)",
+      standardBorder: "rgba(0, 0, 0, 0.42)"
+    }
+  },
+  // Add alert colors (not in tokens yet)
+  alert: {
+    info: {
+      background: "#E5F6FD",
+      color: "#014361"
+    },
+    success: {
+      background: "#EDF7ED",
+      color: "#1E4620"
+    }
+  }
+};
+var figmaTypography = {
+  fontFamily: {
+    primary: fontFamilies.primary,
+    secondary: fontFamilies.secondary,
+    display: fontFamilies.primary
+  },
+  fontWeight: fontWeights,
+  fontSize: {
+    xs: fontSizes.xs,
+    sm: fontSizes.sm,
+    base: fontSizes.base,
+    button: "0.9375rem",
+    // Not in tokens yet
+    md: "0.875rem",
+    // Not in tokens yet
+    lg: fontSizes.lg,
+    xl: fontSizes.xl
+  }
+};
+var palette = {
+  primary: {
+    main: figmaColors.primary.main,
+    light: figmaColors.primary.light,
+    dark: figmaColors.primary.dark,
+    contrastText: figmaColors.primary.contrastText
+  },
+  secondary: {
+    main: "#9C27B0",
+    light: "#BA68C8",
+    dark: "#7B1FA2",
+    contrastText: "#FFFFFF"
+  },
+  success: {
+    main: figmaColors.success.main,
+    light: figmaColors.success.light,
+    dark: figmaColors.success.dark,
+    contrastText: figmaColors.success.contrastText
+  },
+  warning: {
+    main: figmaColors.warning.main,
+    light: figmaColors.warning.light,
+    dark: figmaColors.warning.dark,
+    contrastText: figmaColors.warning.contrastText
+  },
+  error: {
+    main: figmaColors.error.main,
+    light: figmaColors.error.light,
+    dark: figmaColors.error.dark,
+    contrastText: figmaColors.error.contrastText
+  },
+  info: {
+    main: figmaColors.info.main,
+    light: figmaColors.info.light,
+    dark: figmaColors.info.dark,
+    contrastText: figmaColors.info.contrastText
+  },
+  text: {
+    primary: figmaColors.text.primary,
+    secondary: figmaColors.text.secondary,
+    disabled: figmaColors.text.disabled
+  },
+  background: {
+    default: figmaColors.background.default,
+    paper: figmaColors.background.paper
+  },
+  action: {
+    active: figmaColors.action.active,
+    hover: figmaColors.action.hover,
+    selected: figmaColors.action.selected,
+    disabled: figmaColors.action.disabled,
+    disabledBackground: figmaColors.action.disabledBackground,
+    focus: figmaColors.action.focus
+  },
+  divider: figmaColors.divider
+};
+var typography2 = {
+  fontFamily: `${figmaTypography.fontFamily.primary}, ${figmaTypography.fontFamily.secondary}, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`,
+  // Headings - Public Sans SemiBold
+  h1: {
+    fontFamily: figmaTypography.fontFamily.primary,
+    fontWeight: figmaTypography.fontWeight.bold,
+    fontSize: "2.5rem",
+    lineHeight: 1.2,
+    letterSpacing: "-0.01562em"
+  },
+  h2: {
+    fontFamily: figmaTypography.fontFamily.primary,
+    fontWeight: figmaTypography.fontWeight.bold,
+    fontSize: "2rem",
+    lineHeight: 1.2,
+    letterSpacing: "-0.00833em"
+  },
+  h3: {
+    fontFamily: figmaTypography.fontFamily.primary,
+    fontWeight: figmaTypography.fontWeight.semiBold,
+    fontSize: "1.75rem",
+    lineHeight: 1.2,
+    letterSpacing: "0em"
+  },
+  h4: {
+    fontFamily: figmaTypography.fontFamily.primary,
+    fontWeight: figmaTypography.fontWeight.semiBold,
+    fontSize: "1.5rem",
+    lineHeight: 1.235,
+    letterSpacing: "0.00735em"
+  },
+  // H5 - Inter Medium 24px (from Figma Light/Typography/H5)
+  h5: {
+    fontFamily: figmaTypography.fontFamily.display,
+    fontWeight: figmaTypography.fontWeight.medium,
+    fontSize: "1.5rem",
+    // 24px
+    lineHeight: 1.334,
+    letterSpacing: "0em"
+  },
+  // H6 - Public Sans SemiBold 20px (from Figma Light/Typography/H6)
+  h6: {
+    fontFamily: figmaTypography.fontFamily.primary,
+    fontWeight: figmaTypography.fontWeight.semiBold,
+    fontSize: "1.25rem",
+    // 20px
+    lineHeight: "32px",
+    letterSpacing: "0.15px"
+  },
+  // Subtitle1 - Roboto Regular 16px
+  subtitle1: {
+    fontFamily: figmaTypography.fontFamily.secondary,
+    fontWeight: figmaTypography.fontWeight.regular,
+    fontSize: "1rem",
+    lineHeight: 1.75,
+    letterSpacing: "0.15px"
+  },
+  // Subtitle2 - Roboto Medium 14px
+  subtitle2: {
+    fontFamily: figmaTypography.fontFamily.secondary,
+    fontWeight: figmaTypography.fontWeight.medium,
+    fontSize: "0.875rem",
+    lineHeight: 1.57,
+    letterSpacing: "0.1px"
+  },
+  // Body1 - From Figma typography/body1: Roboto Regular 16px
+  body1: {
+    fontFamily: figmaTypography.fontFamily.secondary,
+    fontWeight: figmaTypography.fontWeight.regular,
+    fontSize: "1rem",
+    // 16px
+    lineHeight: 1.5,
+    letterSpacing: "0.15px"
+  },
+  // Body2 - Roboto Regular 14px
+  body2: {
+    fontFamily: figmaTypography.fontFamily.secondary,
+    fontWeight: figmaTypography.fontWeight.regular,
+    fontSize: "0.875rem",
+    // 14px
+    lineHeight: 1.43,
+    letterSpacing: "0.17px"
+  },
+  // Button - From Figma button/large: Roboto Medium 15px
+  button: {
+    fontFamily: figmaTypography.fontFamily.secondary,
+    fontWeight: figmaTypography.fontWeight.medium,
+    fontSize: "0.9375rem",
+    // 15px
+    lineHeight: "26px",
+    letterSpacing: "0.46px",
+    textTransform: "uppercase"
+  },
+  // Caption - From Figma typography/caption: Roboto Regular 12px
+  caption: {
+    fontFamily: figmaTypography.fontFamily.secondary,
+    fontWeight: figmaTypography.fontWeight.regular,
+    fontSize: "0.75rem",
+    // 12px
+    lineHeight: 1.66,
+    letterSpacing: "0.4px"
+  },
+  // Overline - From Figma Light/Typography/Overline: Public Sans Regular 12px
+  overline: {
+    fontFamily: figmaTypography.fontFamily.primary,
+    fontWeight: figmaTypography.fontWeight.regular,
+    fontSize: "0.75rem",
+    // 12px
+    lineHeight: "15px",
+    letterSpacing: "1px",
+    textTransform: "uppercase"
+  }
+};
+var shape = {
+  borderRadius: 4
+  // borderRadius from Figma
+};
+var components = {
+  // CSS Baseline - Font imports
+  MuiCssBaseline: {
+    styleOverrides: `
+      @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+    `
+  },
+  // ==========================================================================
+  // BUTTON - Figma button/large specs
+  // ==========================================================================
+  MuiButton: {
+    styleOverrides: {
+      root: {
+        fontFamily: figmaTypography.fontFamily.secondary,
+        fontWeight: figmaTypography.fontWeight.medium,
+        fontSize: "0.9375rem",
+        // 15px
+        lineHeight: "26px",
+        letterSpacing: "0.46px",
+        textTransform: "uppercase",
+        borderRadius: 4,
+        minHeight: 50,
+        padding: "8px 22px",
+        // Disabled state from Figma
+        "&.Mui-disabled": {
+          backgroundColor: figmaColors.action.disabledBackground,
+          color: figmaColors.action.disabled
+        }
+      },
+      contained: {
+        // elevation/2 from Figma
+        boxShadow: "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)",
+        "&:hover": {
+          boxShadow: "0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12)"
+        }
+      },
+      containedPrimary: {
+        backgroundColor: figmaColors.primary.main,
+        color: figmaColors.primary.contrastText,
+        "&:hover": {
+          backgroundColor: figmaColors.primary.dark
+        }
+      },
+      containedSuccess: {
+        // Success button uses success.light (#4CAF50) from Figma
+        backgroundColor: figmaColors.success.light,
+        color: figmaColors.success.contrastText,
+        "&:hover": {
+          backgroundColor: figmaColors.success.main
+        }
+      },
+      containedInfo: {
+        backgroundColor: figmaColors.info.light,
+        color: figmaColors.info.contrastText,
+        "&:hover": {
+          backgroundColor: figmaColors.info.main
+        }
+      },
+      outlined: {
+        borderWidth: 1,
+        "&:hover": {
+          borderWidth: 1
+        }
+      },
+      outlinedPrimary: {
+        borderColor: figmaColors.primary.states.outlinedBorder,
+        color: figmaColors.primary.main,
+        "&:hover": {
+          backgroundColor: figmaColors.primary.states.hover,
+          borderColor: figmaColors.primary.main
+        }
+      },
+      outlinedInfo: {
+        // From Figma: info/_states/outlinedBorder
+        borderColor: figmaColors.info.states.outlinedBorder,
+        color: figmaColors.info.main,
+        "&:hover": {
+          backgroundColor: "rgba(2, 136, 209, 0.04)",
+          borderColor: figmaColors.info.main
+        }
+      },
+      sizeSmall: {
+        padding: "6px 16px",
+        fontSize: "0.8125rem",
+        minHeight: 32
+      },
+      sizeMedium: {
+        padding: "8px 22px",
+        fontSize: "0.9375rem",
+        minHeight: 42
+      },
+      sizeLarge: {
+        padding: "8px 22px",
+        fontSize: "0.9375rem",
+        minHeight: 50
+      }
+    },
+    defaultProps: {
+      disableElevation: false
+    }
+  },
+  // ==========================================================================
+  // TEXT FIELD - Figma input specs
+  // ==========================================================================
+  MuiTextField: {
+    styleOverrides: {
+      root: {
+        "& .MuiOutlinedInput-root": {
+          borderRadius: 4,
+          fontFamily: figmaTypography.fontFamily.secondary,
+          fontSize: "1rem",
+          // 16px from _fontSize/1rem
+          lineHeight: "24px",
+          letterSpacing: "0.15px",
+          "& fieldset": {
+            borderColor: figmaColors.input.outlined.enabledBorder,
+            borderWidth: 1
+          },
+          "&:hover fieldset": {
+            borderColor: figmaColors.input.outlined.hoverBorder
+          },
+          "&.Mui-focused fieldset": {
+            borderColor: figmaColors.primary.main,
+            borderWidth: 2
+          }
+        },
+        "& .MuiInputLabel-root": {
+          fontFamily: figmaTypography.fontFamily.secondary,
+          fontSize: "1rem",
+          letterSpacing: "0.15px",
+          color: figmaColors.text.secondary,
+          "&.Mui-focused": {
+            color: figmaColors.primary.main
+          },
+          "&.MuiInputLabel-shrink": {
+            fontSize: "0.75rem",
+            // 12px when shrunk
+            lineHeight: "12px",
+            letterSpacing: "0.15px"
+          }
+        },
+        "& .MuiInputBase-input": {
+          fontFamily: figmaTypography.fontFamily.secondary,
+          fontSize: "1rem",
+          fontWeight: figmaTypography.fontWeight.regular,
+          lineHeight: "24px",
+          letterSpacing: "0.15px",
+          color: figmaColors.text.primary,
+          padding: "16px 12px",
+          "&::placeholder": {
+            color: figmaColors.text.secondary,
+            opacity: 1
+          }
+        },
+        // Adornment styling
+        "& .MuiInputAdornment-root": {
+          color: figmaColors.action.active
+        }
+      }
+    },
+    defaultProps: {
+      variant: "outlined",
+      fullWidth: true
+    }
+  },
+  MuiOutlinedInput: {
+    styleOverrides: {
+      root: {
+        "& .MuiOutlinedInput-notchedOutline": {
+          borderColor: figmaColors.input.outlined.enabledBorder
+        },
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          borderColor: figmaColors.input.outlined.hoverBorder
+        },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          borderColor: figmaColors.primary.main,
+          borderWidth: 2
+        }
+      },
+      input: {
+        padding: "16px 12px"
+      }
+    }
+  },
+  MuiInputLabel: {
+    styleOverrides: {
+      root: {
+        fontFamily: figmaTypography.fontFamily.secondary,
+        "&.Mui-focused": {
+          color: figmaColors.primary.main
+        }
+      },
+      shrink: {
+        fontSize: "0.75rem"
+      }
+    }
+  },
+  // ==========================================================================
+  // CHECKBOX - Figma checkbox specs with purple checked state
+  // ==========================================================================
+  MuiCheckbox: {
+    styleOverrides: {
+      root: {
+        padding: 9,
+        color: figmaColors.action.active,
+        "&.Mui-checked": {
+          color: figmaColors.primary.main
+        },
+        "&.MuiCheckbox-indeterminate": {
+          color: figmaColors.primary.main
+        },
+        "&:hover": {
+          backgroundColor: figmaColors.primary.states.hover
+        }
+      },
+      colorPrimary: {
+        "&.Mui-checked": {
+          color: figmaColors.primary.main
+        }
+      }
+    },
+    defaultProps: {
+      color: "primary"
+    }
+  },
+  MuiFormControlLabel: {
+    styleOverrides: {
+      root: {
+        marginLeft: -9,
+        marginRight: 0
+      },
+      label: {
+        fontFamily: figmaTypography.fontFamily.secondary,
+        fontSize: "1rem",
+        fontWeight: figmaTypography.fontWeight.regular,
+        lineHeight: 1.5,
+        letterSpacing: "0.15px",
+        color: figmaColors.text.secondary
+      }
+    }
+  },
+  // ==========================================================================
+  // CARD - Figma card specs with 6px border radius and outlined border
+  // ==========================================================================
+  MuiCard: {
+    styleOverrides: {
+      root: {
+        borderRadius: 6,
+        // Default shadow from Figma --joy-shadow-xs
+        boxShadow: "0px 1px 2px 0px rgba(187, 187, 187, 0.12)"
+      }
+    }
+  },
+  MuiCardActionArea: {
+    styleOverrides: {
+      root: {
+        "&:hover": {
+          backgroundColor: figmaColors.action.hover
+        }
+      }
+    }
+  },
+  MuiCardContent: {
+    styleOverrides: {
+      root: {
+        padding: "16px 20px",
+        "&:last-child": {
+          paddingBottom: "16px"
+        }
+      }
+    }
+  },
+  // ==========================================================================
+  // LINEAR PROGRESS - Figma info color (#03A9F4) progress bar
+  // ==========================================================================
+  MuiLinearProgress: {
+    styleOverrides: {
+      root: {
+        height: 4,
+        borderRadius: 0,
+        "&.MuiLinearProgress-colorInfo": {
+          backgroundColor: `rgba(3, 169, 244, 0.4)`,
+          "& .MuiLinearProgress-bar": {
+            backgroundColor: figmaColors.info.light
+            // #03A9F4
+          }
+        },
+        "&.MuiLinearProgress-colorPrimary": {
+          backgroundColor: `rgba(131, 71, 173, 0.4)`,
+          "& .MuiLinearProgress-bar": {
+            backgroundColor: figmaColors.primary.main
+            // #8347AD
+          }
+        }
+      },
+      bar: {
+        borderRadius: 0
+      }
+    },
+    defaultProps: {
+      color: "info"
+    }
+  },
+  // ==========================================================================
+  // CIRCULAR PROGRESS
+  // ==========================================================================
+  MuiCircularProgress: {
+    styleOverrides: {
+      colorPrimary: {
+        color: figmaColors.primary.main
+      }
+    },
+    defaultProps: {
+      color: "primary"
+    }
+  },
+  // ==========================================================================
+  // ALERT - Figma alert backgrounds and colors
+  // ==========================================================================
+  MuiAlert: {
+    styleOverrides: {
+      root: {
+        borderRadius: 4,
+        fontFamily: figmaTypography.fontFamily.secondary,
+        fontSize: "0.875rem",
+        lineHeight: 1.43,
+        letterSpacing: "0.17px",
+        padding: "6px 16px"
+      },
+      standardInfo: {
+        backgroundColor: figmaColors.alert.info.background,
+        // #E5F6FD
+        color: figmaColors.alert.info.color,
+        // #014361
+        "& .MuiAlert-icon": {
+          color: figmaColors.alert.info.color
+        }
+      },
+      standardSuccess: {
+        backgroundColor: figmaColors.alert.success.background,
+        // #EDF7ED
+        color: figmaColors.alert.success.color,
+        // #1E4620
+        "& .MuiAlert-icon": {
+          color: figmaColors.success.main
+        }
+      },
+      standardWarning: {
+        backgroundColor: "#FFF4E5",
+        color: "#663C00",
+        "& .MuiAlert-icon": {
+          color: figmaColors.warning.main
+        }
+      },
+      standardError: {
+        backgroundColor: "#FDEDED",
+        color: "#5F2120",
+        "& .MuiAlert-icon": {
+          color: figmaColors.error.main
+        }
+      },
+      icon: {
+        padding: "7px 0",
+        marginRight: 12
+      }
+    }
+  },
+  MuiAlertTitle: {
+    styleOverrides: {
+      root: {
+        fontFamily: figmaTypography.fontFamily.secondary,
+        fontWeight: figmaTypography.fontWeight.medium,
+        fontSize: "1rem",
+        lineHeight: 1.5,
+        marginBottom: 4
+      }
+    }
+  },
+  // ==========================================================================
+  // DIALOG/MODAL - Figma modal specs
+  // ==========================================================================
+  MuiDialog: {
+    styleOverrides: {
+      paper: {
+        borderRadius: 12,
+        boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
+      }
+    }
+  },
+  MuiDialogTitle: {
+    styleOverrides: {
+      root: {
+        fontFamily: figmaTypography.fontFamily.primary,
+        fontWeight: figmaTypography.fontWeight.semiBold,
+        fontSize: "1.25rem",
+        lineHeight: "32px",
+        letterSpacing: "0.15px",
+        padding: "16px 24px"
+      }
+    }
+  },
+  MuiDialogContent: {
+    styleOverrides: {
+      root: {
+        padding: "16px 24px"
+      }
+    }
+  },
+  MuiDialogActions: {
+    styleOverrides: {
+      root: {
+        padding: "16px 24px",
+        gap: 8
+      }
+    }
+  },
+  // ==========================================================================
+  // TOOLTIP - Figma tooltip specs
+  // ==========================================================================
+  MuiTooltip: {
+    styleOverrides: {
+      tooltip: {
+        backgroundColor: "rgba(97, 97, 97, 0.9)",
+        fontFamily: figmaTypography.fontFamily.secondary,
+        fontWeight: figmaTypography.fontWeight.medium,
+        fontSize: "0.875rem",
+        lineHeight: "24px",
+        letterSpacing: "0.17px",
+        borderRadius: 4,
+        padding: "4px 8px"
+      }
+    }
+  },
+  // ==========================================================================
+  // TYPOGRAPHY COMPONENT
+  // ==========================================================================
+  MuiTypography: {
+    styleOverrides: {
+      root: {
+        // Default to body text styling
+      }
+    }
+  },
+  // ==========================================================================
+  // DIVIDER
+  // ==========================================================================
+  MuiDivider: {
+    styleOverrides: {
+      root: {
+        borderColor: "#DDDEE0"
+      }
+    }
+  },
+  // ==========================================================================
+  // LINK
+  // ==========================================================================
+  MuiLink: {
+    styleOverrides: {
+      root: {
+        color: figmaColors.info.main,
+        textDecoration: "none",
+        "&:hover": {
+          textDecoration: "underline"
+        }
+      }
+    }
+  },
+  // ==========================================================================
+  // ICON BUTTON
+  // ==========================================================================
+  MuiIconButton: {
+    styleOverrides: {
+      root: {
+        color: figmaColors.text.secondary,
+        "&:hover": {
+          backgroundColor: figmaColors.action.hover
+        }
+      }
+    }
+  }
+};
+var khipuTheme = (0, import_styles.createTheme)({
+  palette,
+  typography: typography2,
+  shape,
+  components
+});
+
+// src/theme/ThemeProvider.tsx
+var import_material = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+function KhipuThemeProvider({
+  children,
+  includeCssBaseline = true
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.ThemeProvider, { theme: khipuTheme, children: [
+    includeCssBaseline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.CssBaseline, {}),
+    children
+  ] });
+}
+
+// src/components/core/KdsButton/KdsButton.tsx
+var import_react = require("react");
+var import_Button = __toESM(require("@mui/material/Button"));
+var import_CircularProgress = __toESM(require("@mui/material/CircularProgress"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var KdsButton = (0, import_react.forwardRef)(
+  ({
+    variant = "contained",
+    color = "primary",
+    size = "large",
+    fullWidth = false,
+    loading = false,
+    disabled = false,
+    startIcon,
+    endIcon,
+    children,
+    sx,
+    ...props
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_Button.default,
+      {
+        ref,
+        variant,
+        color,
+        size,
+        fullWidth,
+        disabled: isDisabled,
+        startIcon: loading ? void 0 : startIcon,
+        endIcon: loading ? void 0 : endIcon,
+        sx: {
+          // Additional custom styles can be merged here
+          ...sx
+        },
+        ...props,
+        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_CircularProgress.default,
+            {
+              size: 20,
+              color: "inherit",
+              sx: { mr: 1 }
+            }
+          ),
+          children
+        ] }) : children
+      }
+    );
+  }
+);
+KdsButton.displayName = "KdsButton";
+
+// src/components/core/KdsTextField/KdsTextField.tsx
+var import_react2 = require("react");
+var import_TextField = __toESM(require("@mui/material/TextField"));
+var import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var KdsTextField = (0, import_react2.forwardRef)(
+  ({
+    variant = "outlined",
+    size = "medium",
+    fullWidth = true,
+    startAdornment,
+    endAdornment,
+    InputProps,
+    ...props
+  }, ref) => {
+    const mergedInputProps = {
+      ...InputProps,
+      ...startAdornment && {
+        startAdornment: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_InputAdornment.default, { position: "start", children: startAdornment })
+      },
+      ...endAdornment && {
+        endAdornment: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_InputAdornment.default, { position: "end", children: endAdornment })
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_TextField.default,
+      {
+        inputRef: ref,
+        variant,
+        size,
+        fullWidth,
+        InputProps: mergedInputProps,
+        ...props
+      }
+    );
+  }
+);
+KdsTextField.displayName = "KdsTextField";
+
+// src/components/core/KdsCheckbox/KdsCheckbox.tsx
+var import_react3 = require("react");
+var import_Checkbox = __toESM(require("@mui/material/Checkbox"));
+var import_FormControlLabel = __toESM(require("@mui/material/FormControlLabel"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var KdsCheckbox = (0, import_react3.forwardRef)(
+  ({
+    label,
+    color = "primary",
+    size = "medium",
+    disabled = false,
+    ...props
+  }, ref) => {
+    const checkbox = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_Checkbox.default,
+      {
+        ref,
+        color,
+        size,
+        disabled,
+        ...props
+      }
+    );
+    if (label) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_FormControlLabel.default,
+        {
+          control: checkbox,
+          label,
+          disabled
+        }
+      );
+    }
+    return checkbox;
+  }
+);
+KdsCheckbox.displayName = "KdsCheckbox";
+
+// src/components/core/KdsModal/KdsModal.tsx
+var import_Dialog = __toESM(require("@mui/material/Dialog"));
+var import_DialogTitle = __toESM(require("@mui/material/DialogTitle"));
+var import_DialogContent = __toESM(require("@mui/material/DialogContent"));
+var import_DialogActions = __toESM(require("@mui/material/DialogActions"));
+var import_IconButton = __toESM(require("@mui/material/IconButton"));
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var KdsModal = ({
+  open,
+  onClose,
+  title,
+  children,
+  footer,
+  size = "sm",
+  showCloseButton = true,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_Dialog.default,
+    {
+      open,
+      onClose,
+      maxWidth: size,
+      fullWidth: true,
+      PaperProps: {
+        sx: {
+          borderRadius: "12px",
+          boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
+        }
+      },
+      ...props,
+      children: [
+        (title || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          import_DialogTitle.default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: title ? "space-between" : "flex-end",
+              fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+              fontFeatureSettings: "'liga' off, 'clig' off",
+              fontWeight: 600,
+              fontSize: "1.25rem",
+              lineHeight: "32px",
+              letterSpacing: "0.15px",
+              textAlign: "center",
+              py: 2,
+              px: 3
+            },
+            children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Box.default, { sx: { flex: 1 }, children: title }),
+              showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_IconButton.default,
+                {
+                  "aria-label": "Cerrar",
+                  onClick: onClose,
+                  sx: {
+                    color: "text.secondary",
+                    ml: "auto"
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Close.default, {})
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_DialogContent.default,
+          {
+            sx: {
+              px: 3,
+              py: 2
+            },
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_DialogActions.default,
+          {
+            sx: {
+              px: 3,
+              py: 2,
+              gap: 1
+            },
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+};
+KdsModal.displayName = "KdsModal";
+
+// src/components/core/KdsCard/KdsCard.tsx
+var import_react4 = require("react");
+var import_Card = __toESM(require("@mui/material/Card"));
+var import_CardHeader = __toESM(require("@mui/material/CardHeader"));
+var import_CardContent = __toESM(require("@mui/material/CardContent"));
+var import_CardActions = __toESM(require("@mui/material/CardActions"));
+var import_CardActionArea = __toESM(require("@mui/material/CardActionArea"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var paddingMap = {
+  none: "0",
+  sm: "8px 16px",
+  // Compact
+  md: "10px 20px",
+  // Figma default (bank selection cards)
+  lg: "16px 20px"
+  // Spacious
+};
+var KdsCard = (0, import_react4.forwardRef)(
+  ({
+    variant = "elevation",
+    elevation = 1,
+    padding,
+    clickable = false,
+    onCardClick,
+    children,
+    sx,
+    ...props
+  }, ref) => {
+    const cardContent = clickable ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CardActionArea.default, { onClick: onCardClick, children }) : children;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_Card.default,
+      {
+        ref,
+        variant,
+        elevation: variant === "elevation" ? elevation : 0,
+        sx: {
+          borderRadius: "6px",
+          ...variant === "outlined" && {
+            border: "1px solid rgba(0, 0, 0, 0.42)"
+          },
+          ...padding && {
+            padding: paddingMap[padding]
+          },
+          ...sx
+        },
+        ...props,
+        children: cardContent
+      }
+    );
+  }
+);
+KdsCard.displayName = "KdsCard";
+var KdsCardHeader = (0, import_react4.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CardHeader.default, { ref, ...props });
+  }
+);
+KdsCardHeader.displayName = "KdsCardHeader";
+var KdsCardContent = (0, import_react4.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CardContent.default, { ref, ...props });
+  }
+);
+KdsCardContent.displayName = "KdsCardContent";
+var KdsCardActions = (0, import_react4.forwardRef)(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CardActions.default, { ref, ...props });
+  }
+);
+KdsCardActions.displayName = "KdsCardActions";
+
+// src/components/core/KdsSpinner/KdsSpinner.tsx
+var import_CircularProgress2 = __toESM(require("@mui/material/CircularProgress"));
+var import_Box2 = __toESM(require("@mui/material/Box"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var sizeMap = {
+  small: 20,
+  medium: 40,
+  large: 60
+};
+var KdsSpinner = ({
+  size = "medium",
+  color = "primary",
+  customSize,
+  label = "Cargando...",
+  sx,
+  ...props
+}) => {
+  const spinnerSize = customSize || sizeMap[size];
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_Box2.default,
+    {
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      role: "progressbar",
+      "aria-label": label,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_CircularProgress2.default,
+        {
+          size: spinnerSize,
+          color,
+          sx,
+          ...props
+        }
+      )
+    }
+  );
+};
+KdsSpinner.displayName = "KdsSpinner";
+
+// src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
+var import_LinearProgress = __toESM(require("@mui/material/LinearProgress"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var KdsLinearProgress = ({
+  color = "info",
+  variant = "indeterminate",
+  value,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_LinearProgress.default,
+    {
+      color,
+      variant,
+      value,
+      sx: {
+        height: 4,
+        borderRadius: 0,
+        backgroundColor: "rgba(3, 169, 244, 0.4)",
+        "& .MuiLinearProgress-bar": {
+          backgroundColor: "#03A9F4"
+        },
+        ...sx
+      },
+      ...props
+    }
+  );
+};
+KdsLinearProgress.displayName = "KdsLinearProgress";
+
+// src/components/core/KdsAlert/KdsAlert.tsx
+var import_Alert = __toESM(require("@mui/material/Alert"));
+var import_AlertTitle = __toESM(require("@mui/material/AlertTitle"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var KdsAlert = ({
+  severity = "info",
+  variant = "standard",
+  title,
+  children,
+  onClose,
+  sx,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    import_Alert.default,
+    {
+      severity,
+      variant,
+      onClose,
+      sx: {
+        borderRadius: "4px",
+        fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        fontFeatureSettings: "'liga' off, 'clig' off",
+        fontSize: "0.875rem",
+        lineHeight: 1.43,
+        letterSpacing: "0.17px",
+        ...sx
+      },
+      ...props,
+      children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_AlertTitle.default, { children: title }),
+        children
+      ]
+    }
+  );
+};
+KdsAlert.displayName = "KdsAlert";
+
+// src/components/core/KdsTypography/KdsTypography.tsx
+var import_react5 = require("react");
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var colorMap = {
+  primary: "#272930",
+  // onSurface
+  secondary: "rgba(0, 0, 0, 0.60)",
+  tertiary: "#81848F",
+  disabled: "#9797A5",
+  error: "#D32F2F",
+  success: "#2E7D32",
+  info: "#0288D1",
+  inherit: "inherit"
+};
+var fontFeatureSettings = "'liga' off, 'clig' off";
+var variantStyles = {
+  // Display variants
+  display1: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 700,
+    fontSize: "2.5rem",
+    // 40px
+    lineHeight: 1.2,
+    letterSpacing: "-0.01562em"
+  },
+  display2: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 700,
+    fontSize: "2rem",
+    // 32px
+    lineHeight: 1.2,
+    letterSpacing: "-0.00833em"
+  },
+  // Heading variants
+  heading1: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 600,
+    fontSize: "1.75rem",
+    // 28px
+    lineHeight: 1.2,
+    letterSpacing: 0
+  },
+  heading2: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 600,
+    fontSize: "1.5rem",
+    // 24px
+    lineHeight: 1.235,
+    letterSpacing: "0.00735em"
+  },
+  heading3: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 600,
+    fontSize: "1.25rem",
+    // 20px
+    lineHeight: "32px",
+    letterSpacing: "0.15px"
+  },
+  // Body variants
+  bodyLarge: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 400,
+    fontSize: "1rem",
+    // 16px
+    lineHeight: 1.5,
+    letterSpacing: "0.15px"
+  },
+  body: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 400,
+    fontSize: "0.875rem",
+    // 14px
+    lineHeight: 1.43,
+    letterSpacing: "0.17px"
+  },
+  bodySmall: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 400,
+    fontSize: "0.75rem",
+    // 12px
+    lineHeight: 1.66,
+    letterSpacing: "0.4px"
+  },
+  // Label variants
+  label: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 400,
+    fontSize: "0.75rem",
+    // 12px
+    lineHeight: "15px",
+    letterSpacing: "1px",
+    textTransform: "uppercase"
+  },
+  labelSmall: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 500,
+    fontSize: "0.625rem",
+    // 10px
+    lineHeight: "14px",
+    letterSpacing: 0
+  },
+  // Card variants
+  cardTitle: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 600,
+    fontSize: "1rem",
+    // 16px
+    lineHeight: "24px",
+    letterSpacing: "0.15px"
+  },
+  cardSubtitle: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 600,
+    fontSize: "0.875rem",
+    // 14px
+    lineHeight: "20px",
+    letterSpacing: "0.15px"
+  },
+  // Semantic variants
+  muted: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 400,
+    fontSize: "0.875rem",
+    // 14px
+    lineHeight: 1.43,
+    letterSpacing: "0.17px",
+    color: "#81848F"
+  },
+  link: {
+    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+    fontFeatureSettings,
+    fontWeight: 400,
+    fontSize: "0.875rem",
+    // 14px
+    lineHeight: 1.43,
+    letterSpacing: "0.17px",
+    color: "#0288D1",
+    textDecoration: "none",
+    cursor: "pointer",
+    "&:hover": {
+      textDecoration: "underline"
+    }
+  }
+};
+var muiVariantMap = {
+  display1: "h1",
+  display2: "h2",
+  heading1: "h3",
+  heading2: "h4",
+  heading3: "h6",
+  bodyLarge: "body1",
+  body: "body2",
+  bodySmall: "caption",
+  label: "overline",
+  labelSmall: "caption",
+  cardTitle: "subtitle1",
+  cardSubtitle: "subtitle2",
+  muted: "body2",
+  link: "body2"
+};
+var isKhipuVariant = (variant) => {
+  return variant in variantStyles;
+};
+var KdsTypography = (0, import_react5.forwardRef)(
+  ({ variant = "body", color = "primary", truncate, maxLines, sx, ...props }, ref) => {
+    const isCustomVariant = typeof variant === "string" && isKhipuVariant(variant);
+    const combinedSx = [
+      // Apply custom variant styles if it's a Khipu variant
+      isCustomVariant ? variantStyles[variant] : {},
+      // Apply color (unless it's muted or link which have built-in colors)
+      isCustomVariant && variant !== "muted" && variant !== "link" && color ? { color: colorMap[color] || color } : {},
+      // Truncation styles
+      truncate ? {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        ...maxLines ? {
+          display: "-webkit-box",
+          WebkitLineClamp: maxLines,
+          WebkitBoxOrient: "vertical"
+        } : {
+          whiteSpace: "nowrap"
+        }
+      } : {},
+      // User-provided sx
+      ...Array.isArray(sx) ? sx : [sx]
+    ];
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_Typography.default,
+      {
+        ref,
+        variant: isCustomVariant ? muiVariantMap[variant] : variant,
+        sx: combinedSx,
+        ...props
+      }
+    );
+  }
+);
+KdsTypography.displayName = "KdsTypography";
+
+// src/components/core/KdsTabs/KdsTabs.tsx
+var import_react6 = require("react");
+var import_Tabs = __toESM(require("@mui/material/Tabs"));
+var import_Tab = __toESM(require("@mui/material/Tab"));
+var import_Box3 = __toESM(require("@mui/material/Box"));
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TabsContext = (0, import_react6.createContext)(null);
+var KdsTab = (0, import_react6.forwardRef)(
+  ({ label, value, icon, disabled = false, sx, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_Tab.default,
+      {
+        ref,
+        label,
+        value,
+        icon,
+        disabled,
+        sx: {
+          fontFamily: fontFamilies.secondary,
+          fontWeight: fontWeights.medium,
+          fontSize: "14px",
+          lineHeight: "24px",
+          letterSpacing: "0.4px",
+          textTransform: "uppercase",
+          minHeight: "42px",
+          padding: "9px 16px",
+          flex: 1,
+          maxWidth: "none",
+          "&.Mui-selected": {
+            color: colors.info.main
+          },
+          "&:not(.Mui-selected)": {
+            color: colors.text.secondary
+          },
+          ...sx
+        },
+        ...props
+      }
+    );
+  }
+);
+KdsTab.displayName = "KdsTab";
+var KdsTabPanel = (0, import_react6.forwardRef)(
+  ({ value, selectedValue, children, sx, ...props }, ref) => {
+    const isSelected = value === selectedValue;
+    if (!isSelected) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_Box3.default,
+      {
+        ref,
+        role: "tabpanel",
+        id: `tabpanel-${value}`,
+        "aria-labelledby": `tab-${value}`,
+        sx: {
+          width: "100%",
+          ...sx
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+KdsTabPanel.displayName = "KdsTabPanel";
+var KdsTabs = (0, import_react6.forwardRef)(
+  ({
+    value,
+    onChange,
+    color = "info",
+    variant = "fullWidth",
+    children,
+    sx,
+    ...props
+  }, ref) => {
+    const indicatorColor = color === "info" ? colors.info.main : color === "primary" ? colors.primary.main : colors.secondary.main;
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabsContext.Provider, { value: { value, onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      import_Tabs.default,
+      {
+        ref,
+        value,
+        onChange,
+        variant,
+        textColor: "inherit",
+        TabIndicatorProps: {
+          sx: {
+            backgroundColor: indicatorColor,
+            height: "2px"
+          }
+        },
+        sx: {
+          width: "100%",
+          minHeight: "42px",
+          "& .MuiTabs-flexContainer": {
+            width: "100%"
+          },
+          ...sx
+        },
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+KdsTabs.displayName = "KdsTabs";
+
+// src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
+var import_react7 = require("react");
+var import_Box4 = __toESM(require("@mui/material/Box"));
+var import_IconButton2 = __toESM(require("@mui/material/IconButton"));
+var import_Close2 = __toESM(require("@mui/icons-material/Close"));
+
+// src/assets/images/khipu-logo-color.svg
+var khipu_logo_color_default = "./khipu-logo-color-TV75AKOV.svg";
+
+// src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var KhipuLogo = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  import_Box4.default,
+  {
+    component: "img",
+    src: khipu_logo_color_default,
+    alt: "Khipu",
+    sx: {
+      height: "15px",
+      maxHeight: "15px",
+      width: "auto",
+      maxWidth: "50px",
+      objectFit: "contain"
+    }
+  }
+);
+var KdsLogoHeaderLogo = (0, import_react7.forwardRef)(
+  ({ children, sx, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_Box4.default,
+      {
+        ref,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          height: "15px",
+          overflow: "hidden",
+          ...sx
+        },
+        ...props,
+        children: children || /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(KhipuLogo, {})
+      }
+    );
+  }
+);
+KdsLogoHeaderLogo.displayName = "KdsLogoHeaderLogo";
+var KdsLogoHeaderSeparator = (0, import_react7.forwardRef)(
+  ({ children = "|", sx, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_Box4.default,
+      {
+        ref,
+        component: "span",
+        sx: {
+          fontFamily: fontFamilies.secondary,
+          fontWeight: fontWeights.medium,
+          fontSize: "10px",
+          lineHeight: "14px",
+          color: "#9797A5",
+          ...sx
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+KdsLogoHeaderSeparator.displayName = "KdsLogoHeaderSeparator";
+var KdsLogoHeaderCode = (0, import_react7.forwardRef)(
+  ({ children, sx, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_Box4.default,
+      {
+        ref,
+        component: "span",
+        sx: {
+          fontFamily: fontFamilies.primary,
+          fontWeight: fontWeights.medium,
+          fontSize: "9px",
+          lineHeight: "14px",
+          color: "#9797A5",
+          whiteSpace: "nowrap",
+          ...sx
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+KdsLogoHeaderCode.displayName = "KdsLogoHeaderCode";
+var KdsLogoHeaderCloseButton = (0, import_react7.forwardRef)(
+  ({ onClose, sx, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_Box4.default,
+      {
+        sx: {
+          flex: 1,
+          display: "flex",
+          justifyContent: "flex-end"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_IconButton2.default,
+          {
+            ref,
+            onClick: onClose,
+            size: "small",
+            "aria-label": "close",
+            sx: {
+              color: colors.action.active,
+              padding: 0,
+              "&:hover": {
+                backgroundColor: colors.action.hover
+              },
+              ...sx
+            },
+            ...props,
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Close2.default, { sx: { fontSize: 24 } })
+          }
+        )
+      }
+    );
+  }
+);
+KdsLogoHeaderCloseButton.displayName = "KdsLogoHeaderCloseButton";
+var KdsLogoHeader = (0, import_react7.forwardRef)(
+  ({ children, sx, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_Box4.default,
+      {
+        ref,
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: spacing[2],
+          paddingX: semanticSpacing.card.paddingX,
+          paddingY: semanticSpacing.card.paddingY,
+          backgroundColor: colors.background.default,
+          ...sx
+        },
+        ...props,
+        children
+      }
+    );
+  }
+);
+KdsLogoHeader.displayName = "KdsLogoHeader";
+
+// src/index.ts
+var import_Box5 = __toESM(require("@mui/material/Box"));
+var import_InputAdornment2 = __toESM(require("@mui/material/InputAdornment"));
+var import_Divider = __toESM(require("@mui/material/Divider"));
+var import_Link = __toESM(require("@mui/material/Link"));
+var import_IconButton3 = __toESM(require("@mui/material/IconButton"));
+var import_Stack = __toESM(require("@mui/material/Stack"));
+var import_Grid = __toESM(require("@mui/material/Grid"));
+var import_Container = __toESM(require("@mui/material/Container"));
+var import_Search = __toESM(require("@mui/icons-material/Search"));
+var import_ChevronRight = __toESM(require("@mui/icons-material/ChevronRight"));
+var import_ChevronLeft = __toESM(require("@mui/icons-material/ChevronLeft"));
+var import_Close3 = __toESM(require("@mui/icons-material/Close"));
+var import_Check = __toESM(require("@mui/icons-material/Check"));
+var import_CheckCircle = __toESM(require("@mui/icons-material/CheckCircle"));
+var import_Person = __toESM(require("@mui/icons-material/Person"));
+var import_Lock = __toESM(require("@mui/icons-material/Lock"));
+var import_LockOutlined = __toESM(require("@mui/icons-material/LockOutlined"));
+var import_MailOutline = __toESM(require("@mui/icons-material/MailOutline"));
+var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
+var import_ExpandLess = __toESM(require("@mui/icons-material/ExpandLess"));
+var import_Info = __toESM(require("@mui/icons-material/Info"));
+var import_Warning = __toESM(require("@mui/icons-material/Warning"));
+var import_Error = __toESM(require("@mui/icons-material/Error"));
+var import_Visibility = __toESM(require("@mui/icons-material/Visibility"));
+var import_VisibilityOff = __toESM(require("@mui/icons-material/VisibilityOff"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Box,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CloseIcon,
+  Container,
+  Divider,
+  ErrorIcon,
+  ExpandLessIcon,
+  ExpandMoreIcon,
+  Grid,
+  IconButton,
+  InfoIcon,
+  InputAdornment,
+  KdsAlert,
+  KdsButton,
+  KdsCard,
+  KdsCardActions,
+  KdsCardContent,
+  KdsCardHeader,
+  KdsCheckbox,
+  KdsLinearProgress,
+  KdsLogoHeader,
+  KdsLogoHeaderCloseButton,
+  KdsLogoHeaderCode,
+  KdsLogoHeaderLogo,
+  KdsLogoHeaderSeparator,
+  KdsModal,
+  KdsSpinner,
+  KdsTab,
+  KdsTabPanel,
+  KdsTabs,
+  KdsTextField,
+  KdsTypography,
+  KhipuThemeProvider,
+  Link,
+  LockIcon,
+  LockOutlinedIcon,
+  MailOutlineIcon,
+  PersonIcon,
+  SearchIcon,
+  Stack,
+  VisibilityIcon,
+  VisibilityOffIcon,
+  WarningIcon,
+  borderRadius,
+  breakpoints,
+  colors,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  khipuTheme,
+  letterSpacings,
+  lineHeights,
+  semanticSpacing,
+  shadows,
+  spacing,
+  tokens,
+  transitions,
+  typography,
+  zIndex
+});