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

package/dist/index.mjs

@@ -1,5 +1,51 @@
-// src/theme/index.ts
-import { createTheme } from "@mui/material/styles";
+// src/components/core/utils.ts
+import { clsx } from "clsx";
+function hexToRgb(hex) {
+  let h = hex.replace("#", "");
+  if (h.length === 3) {
+    h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];
+  }
+  return [
+    parseInt(h.slice(0, 2), 16),
+    parseInt(h.slice(2, 4), 16),
+    parseInt(h.slice(4, 6), 16)
+  ];
+}
+function rgbToHex(r, g, b) {
+  const clamp = (v) => Math.max(0, Math.min(255, Math.round(v)));
+  return `#${[r, g, b].map((v) => clamp(v).toString(16).padStart(2, "0")).join("")}`;
+}
+function relativeLuminance(r, g, b) {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+function getContrastColor(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  return relativeLuminance(r, g, b) > 0.179 ? "#1a1a1a" : "#ffffff";
+}
+function lighten(hex, amount) {
+  const [r, g, b] = hexToRgb(hex);
+  return rgbToHex(
+    r + (255 - r) * amount,
+    g + (255 - g) * amount,
+    b + (255 - b) * amount
+  );
+}
+
+// src/theme/KdsThemeProvider.tsx
+import { jsx } from "react/jsx-runtime";
+function KdsThemeProvider({ primaryColor, mode = "light", children }) {
+  const style = primaryColor ? {
+    "--primary": primaryColor,
+    "--on-primary": getContrastColor(primaryColor),
+    "--primary-container": lighten(primaryColor, 0.85),
+    "--on-primary-container": primaryColor
+  } : void 0;
+  return /* @__PURE__ */ jsx("div", { className: `kds-theme-root ${mode}`, style, children });
+}
 
 // src/tokens/index.ts
 var lightModeColors = {
@@ -764,6 +810,24 @@ var responsiveTypography = {
     // 12px
   }
 };
+var responsiveBaseFontSizes = {
+  xs: { mobile: "0.6875rem", tablet: "0.75rem", desktop: "0.75rem" },
+  // 11px → 12px
+  sm: { mobile: "0.8125rem", tablet: "0.875rem", desktop: "0.875rem" },
+  // 13px → 14px
+  base: { mobile: "0.875rem", tablet: "1rem", desktop: "1rem" },
+  // 14px → 16px
+  lg: { mobile: "1rem", tablet: "1.125rem", desktop: "1.125rem" },
+  // 16px → 18px
+  xl: { mobile: "1.125rem", tablet: "1.25rem", desktop: "1.25rem" },
+  // 18px → 20px
+  "2xl": { mobile: "1.25rem", tablet: "1.5rem", desktop: "1.5rem" },
+  // 20px → 24px
+  "3xl": { mobile: "1.5rem", tablet: "1.875rem", desktop: "1.875rem" },
+  // 24px → 30px
+  "4xl": { mobile: "1.875rem", tablet: "2.25rem", desktop: "2.25rem" }
+  // 30px → 36px
+};
 var borderRadius = {
   none: "0px",
   sm: "4px",
@@ -894,6 +958,7 @@ var tokensByMode = {
     semanticSpacing,
     responsiveSpacing,
     responsiveTypography,
+    responsiveBaseFontSizes,
     borderRadius,
     borders,
     shadows,
@@ -913,6 +978,7 @@ var tokensByMode = {
     semanticSpacing,
     responsiveSpacing,
     responsiveTypography,
+    responsiveBaseFontSizes,
     borderRadius,
     borders,
     shadows,
@@ -933,6 +999,7 @@ var tokens = {
   semanticSpacing,
   responsiveSpacing,
   responsiveTypography,
+  responsiveBaseFontSizes,
   borderRadius,
   borders,
   shadows,
@@ -941,915 +1008,94 @@ var tokens = {
   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
-      }
-    }
-  },
-  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 shadows2 = [
-  "none",
-  shadows[1],
-  shadows[2],
-  shadows[3],
-  shadows[4],
-  shadows[5],
-  shadows[6],
-  shadows[7],
-  shadows[8],
-  shadows[9],
-  shadows[10],
-  shadows[11],
-  shadows[12],
-  shadows[13],
-  shadows[14],
-  shadows[15],
-  shadows[16],
-  shadows[17],
-  shadows[18],
-  shadows[19],
-  shadows[20],
-  shadows[21],
-  shadows[22],
-  shadows[23],
-  shadows[24]
-];
-var khipuTheme = createTheme({
-  palette,
-  typography: typography2,
-  shape,
-  shadows: shadows2,
-  components
-});
-
-// src/theme/ThemeProvider.tsx
-import { useMemo } from "react";
-import { ThemeProvider as MuiThemeProvider, CssBaseline, createTheme as createTheme2 } from "@mui/material";
-import { jsx, jsxs } from "react/jsx-runtime";
-function buildDynamicOverrides(props) {
-  const overrides = {};
-  const paletteOverrides = {};
-  let hasPalette = false;
-  if (props.mode) {
-    paletteOverrides.mode = props.mode;
-    hasPalette = true;
-  }
-  if (props.primaryColor || props.primaryColorVariant || props.buttonFontColor) {
-    paletteOverrides.primary = {
-      ...props.primaryColor && { main: props.primaryColor },
-      ...props.primaryColorVariant && { light: props.primaryColorVariant },
-      ...props.buttonFontColor && { contrastText: props.buttonFontColor }
-    };
-    hasPalette = true;
-  }
-  if (props.textColor || props.disabledFontColor) {
-    paletteOverrides.text = {
-      ...props.textColor && { primary: props.textColor },
-      ...props.disabledFontColor && { disabled: props.disabledFontColor }
-    };
-    hasPalette = true;
-  }
-  if (props.backgroundColor || props.pageBackgroundColor) {
-    paletteOverrides.background = {
-      ...props.backgroundColor && { default: props.backgroundColor },
-      ...props.pageBackgroundColor && { paper: props.pageBackgroundColor }
-    };
-    hasPalette = true;
-  }
-  if (props.disabledBackgroundColor || props.disabledFontColor) {
-    paletteOverrides.action = {
-      ...props.disabledBackgroundColor && { disabledBackground: props.disabledBackgroundColor },
-      ...props.disabledFontColor && { disabled: props.disabledFontColor }
-    };
-    hasPalette = true;
-  }
-  if (hasPalette) {
-    overrides.palette = paletteOverrides;
-  }
-  if (props.fontFamily) {
-    const fontStack = `"${props.fontFamily}", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
-    overrides.typography = { fontFamily: fontStack };
-  }
-  return overrides;
-}
-function KhipuThemeProvider({
-  children,
-  includeCssBaseline = true,
-  themeOverrides,
-  ...dynamicProps
-}) {
-  const theme = useMemo(() => {
-    const dynamicOverrides = buildDynamicOverrides(dynamicProps);
-    const hasDynamicOverrides = Object.keys(dynamicOverrides).length > 0;
-    const hasThemeOverrides = themeOverrides && Object.keys(themeOverrides).length > 0;
-    if (!hasDynamicOverrides && !hasThemeOverrides) {
-      return khipuTheme;
-    }
-    const mergedOverrides = [];
-    if (hasDynamicOverrides) mergedOverrides.push(dynamicOverrides);
-    if (hasThemeOverrides) mergedOverrides.push(themeOverrides);
-    return createTheme2(khipuTheme, ...mergedOverrides);
-  }, [
-    dynamicProps.primaryColor,
-    dynamicProps.primaryColorVariant,
-    dynamicProps.fontFamily,
-    dynamicProps.textColor,
-    dynamicProps.backgroundColor,
-    dynamicProps.pageBackgroundColor,
-    dynamicProps.mode,
-    dynamicProps.buttonFontColor,
-    dynamicProps.disabledFontColor,
-    dynamicProps.disabledBackgroundColor,
-    dynamicProps.fontSizeMultiplier,
-    themeOverrides
-  ]);
-  return /* @__PURE__ */ jsxs(MuiThemeProvider, { theme, children: [
-    includeCssBaseline && /* @__PURE__ */ jsx(CssBaseline, {}),
-    children
-  ] });
-}
-
 // src/components/core/KdsButton/KdsButton.tsx
 import { forwardRef } from "react";
-import MuiButton from "@mui/material/Button";
-import CircularProgress from "@mui/material/CircularProgress";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var KdsButton = forwardRef(
   ({
-    variant = "contained",
-    color = "primary",
-    size = "large",
+    variant = "primary",
+    size,
     fullWidth = false,
     loading = false,
     disabled = false,
     startIcon,
     endIcon,
     children,
-    sx,
+    className,
     ...props
-  }, ref) => {
-    const isDisabled = disabled || loading;
-    return /* @__PURE__ */ jsx2(
-      MuiButton,
-      {
-        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__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx2(
-            CircularProgress,
-            {
-              size: 20,
-              color: "inherit",
-              sx: { mr: 1 }
-            }
-          ),
-          children
-        ] }) : children
-      }
-    );
-  }
+  }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      className: clsx(
+        "kds-btn",
+        `kds-btn-${variant}`,
+        size && `kds-btn-${size}`,
+        fullWidth && "kds-btn-block",
+        className
+      ),
+      disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        !loading && startIcon && /* @__PURE__ */ jsx2("span", { className: "kds-icon", children: /* @__PURE__ */ jsx2("i", { className: "material-symbols-outlined", children: startIcon }) }),
+        loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx2("span", { className: "loader small" }),
+          /* @__PURE__ */ jsx2("span", { children })
+        ] }) : /* @__PURE__ */ jsx2("span", { children }),
+        !loading && endIcon && /* @__PURE__ */ jsx2("span", { className: "kds-icon", children: /* @__PURE__ */ jsx2("i", { className: "material-symbols-outlined", children: endIcon }) })
+      ]
+    }
+  )
 );
 KdsButton.displayName = "KdsButton";
 
 // src/components/core/KdsTextField/KdsTextField.tsx
 import { forwardRef as forwardRef2 } from "react";
-import MuiTextField from "@mui/material/TextField";
-import InputAdornment from "@mui/material/InputAdornment";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var KdsTextField = forwardRef2(
   ({
-    variant = "outlined",
-    size = "medium",
+    label,
+    helperText,
+    error,
     fullWidth = true,
-    startAdornment,
-    endAdornment,
-    InputProps,
+    readOnly,
+    startIcon,
+    endIcon,
+    className,
+    id,
     ...props
   }, ref) => {
-    const mergedInputProps = {
-      ...InputProps,
-      ...startAdornment && {
-        startAdornment: /* @__PURE__ */ jsx3(InputAdornment, { position: "start", children: startAdornment })
-      },
-      ...endAdornment && {
-        endAdornment: /* @__PURE__ */ jsx3(InputAdornment, { position: "end", children: endAdornment })
-      }
-    };
-    return /* @__PURE__ */ jsx3(
-      MuiTextField,
+    const fieldId = id || `kds-field-${label.toLowerCase().replace(/\s+/g, "-")}`;
+    return /* @__PURE__ */ jsxs2(
+      "div",
       {
-        inputRef: ref,
-        variant,
-        size,
-        fullWidth,
-        InputProps: mergedInputProps,
-        ...props
+        className: clsx(
+          "field",
+          "label",
+          "border",
+          error && "invalid",
+          readOnly && "locked",
+          fullWidth && "kds-w-full",
+          className
+        ),
+        children: [
+          startIcon && /* @__PURE__ */ jsx3("i", { className: "material-symbols-outlined", children: startIcon }),
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              ref,
+              id: fieldId,
+              placeholder: " ",
+              readOnly,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx3("label", { htmlFor: fieldId, children: label }),
+          readOnly && /* @__PURE__ */ jsx3("i", { className: "material-symbols-outlined", children: "lock" }),
+          endIcon && !readOnly && /* @__PURE__ */ jsx3("i", { className: "material-symbols-outlined", children: endIcon }),
+          helperText && /* @__PURE__ */ jsx3("span", { className: "helper", children: helperText })
+        ]
       }
     );
   }
@@ -1858,577 +1104,182 @@ KdsTextField.displayName = "KdsTextField";
 
 // src/components/core/KdsCheckbox/KdsCheckbox.tsx
 import { forwardRef as forwardRef3 } from "react";
-import MuiCheckbox from "@mui/material/Checkbox";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var KdsCheckbox = forwardRef3(
-  ({
-    label,
-    color = "primary",
-    size = "medium",
-    disabled = false,
-    ...props
-  }, ref) => {
-    const checkbox = /* @__PURE__ */ jsx4(
-      MuiCheckbox,
-      {
-        ref,
-        color,
-        size,
-        disabled,
-        ...props
-      }
-    );
-    if (label) {
-      return /* @__PURE__ */ jsx4(
-        FormControlLabel,
-        {
-          control: checkbox,
-          label,
-          disabled
-        }
-      );
-    }
-    return checkbox;
+  ({ label, className, id, ...props }, ref) => {
+    const fieldId = id || `kds-cb-${label?.toLowerCase().replace(/\s+/g, "-") || "check"}`;
+    return /* @__PURE__ */ jsxs3("label", { className: clsx("field", className), htmlFor: fieldId, children: [
+      /* @__PURE__ */ jsx4("input", { ref, type: "checkbox", id: fieldId, ...props }),
+      /* @__PURE__ */ jsx4("span", { children: label })
+    ] });
   }
 );
 KdsCheckbox.displayName = "KdsCheckbox";
 
 // src/components/core/KdsModal/KdsModal.tsx
 import { forwardRef as forwardRef4 } from "react";
-import Dialog from "@mui/material/Dialog";
-import DialogTitle from "@mui/material/DialogTitle";
-import DialogContent from "@mui/material/DialogContent";
-import DialogActions from "@mui/material/DialogActions";
-import IconButton from "@mui/material/IconButton";
-import CloseIcon from "@mui/icons-material/Close";
-import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-import Box from "@mui/material/Box";
-import AppBar from "@mui/material/AppBar";
-import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
-import Slide from "@mui/material/Slide";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var SlideTransition = forwardRef4(function SlideTransition2(props, ref) {
-  return /* @__PURE__ */ jsx5(Slide, { direction: "left", ref, ...props });
-});
-var KdsModal = ({
-  open,
-  onClose,
-  title,
-  children,
-  footer,
-  size = "sm",
-  showCloseButton = true,
-  fullScreen = false,
-  ...props
-}) => {
-  if (fullScreen) {
-    return /* @__PURE__ */ jsxs3(
-      Dialog,
-      {
-        open,
-        onClose,
-        fullScreen: true,
-        TransitionComponent: SlideTransition,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx5(
-            AppBar,
-            {
-              sx: {
-                position: "relative",
-                backgroundColor: "background.paper",
-                color: "text.primary",
-                boxShadow: 0,
-                py: 1
-              },
-              children: /* @__PURE__ */ jsxs3(Toolbar, { children: [
-                /* @__PURE__ */ jsx5(
-                  IconButton,
-                  {
-                    edge: "start",
-                    color: "inherit",
-                    onClick: onClose,
-                    "aria-label": "Cerrar",
-                    children: /* @__PURE__ */ jsx5(ChevronLeftIcon, {})
-                  }
-                ),
-                title && /* @__PURE__ */ jsx5(Typography, { sx: { ml: 1, flex: 1 }, fontWeight: 600, variant: "h6", component: "div", children: title })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx5(DialogContent, { sx: { px: 5, py: 5 }, children }),
-          footer && /* @__PURE__ */ jsx5(DialogActions, { sx: { px: 3, py: 2, gap: 1 }, children: footer })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs3(
-    Dialog,
+import * as Dialog from "@radix-ui/react-dialog";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var KdsModal = forwardRef4(
+  ({
+    open,
+    onClose,
+    title,
+    description,
+    footer,
+    children,
+    size = "md",
+    showCloseButton = true,
+    className
+  }, ref) => /* @__PURE__ */ jsx5(
+    Dialog.Root,
     {
       open,
-      onClose,
-      maxWidth: size,
-      fullWidth: true,
-      PaperProps: {
-        sx: {
-          borderRadius: "12px",
-          boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
-        }
+      onOpenChange: (o) => {
+        if (!o) onClose();
       },
-      ...props,
-      children: [
-        (title || showCloseButton) && /* @__PURE__ */ jsxs3(
-          DialogTitle,
+      children: /* @__PURE__ */ jsxs4(Dialog.Portal, { children: [
+        /* @__PURE__ */ jsx5(Dialog.Overlay, { className: "kds-bottom-sheet-scrim" }),
+        /* @__PURE__ */ jsxs4(
+          Dialog.Content,
           {
-            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
-            },
+            ref,
+            className: clsx(
+              "kds-bottom-sheet",
+              `kds-bottom-sheet-${size}`,
+              className
+            ),
             children: [
-              title && /* @__PURE__ */ jsx5(Box, { sx: { flex: 1 }, children: title }),
-              showCloseButton && /* @__PURE__ */ jsx5(
-                IconButton,
-                {
-                  "aria-label": "Cerrar",
-                  onClick: onClose,
-                  sx: {
-                    color: "text.secondary",
-                    ml: "auto"
-                  },
-                  children: /* @__PURE__ */ jsx5(CloseIcon, {})
-                }
-              )
+              title && /* @__PURE__ */ jsxs4("div", { className: "kds-bottom-sheet-header", children: [
+                /* @__PURE__ */ jsx5(Dialog.Title, { className: "kds-bottom-sheet-title", children: title }),
+                showCloseButton && /* @__PURE__ */ jsx5(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    className: "kds-bottom-sheet-close",
+                    "aria-label": "Cerrar",
+                    children: /* @__PURE__ */ jsx5("i", { className: "material-symbols-outlined", children: "close" })
+                  }
+                ) })
+              ] }),
+              description && /* @__PURE__ */ jsx5(Dialog.Description, { className: "kds-bottom-sheet-description", children: description }),
+              /* @__PURE__ */ jsx5("div", { className: "kds-bottom-sheet-body", children }),
+              footer && /* @__PURE__ */ jsx5("div", { className: "kds-bottom-sheet-actions", children: footer })
             ]
           }
-        ),
-        /* @__PURE__ */ jsx5(
-          DialogContent,
-          {
-            sx: {
-              px: 3,
-              py: 2
-            },
-            children
-          }
-        ),
-        footer && /* @__PURE__ */ jsx5(
-          DialogActions,
-          {
-            sx: {
-              px: 3,
-              py: 2,
-              gap: 1
-            },
-            children: footer
-          }
         )
-      ]
+      ] })
     }
-  );
-};
+  )
+);
 KdsModal.displayName = "KdsModal";
 
 // src/components/core/KdsCard/KdsCard.tsx
 import { forwardRef as forwardRef5 } from "react";
-import MuiCard from "@mui/material/Card";
-import MuiCardHeader from "@mui/material/CardHeader";
-import MuiCardContent from "@mui/material/CardContent";
-import MuiCardActions from "@mui/material/CardActions";
-import CardActionArea from "@mui/material/CardActionArea";
 import { jsx as jsx6 } from "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 = forwardRef5(
-  ({
-    variant = "elevation",
-    elevation = 1,
-    padding,
-    clickable = false,
-    onCardClick,
-    children,
-    sx,
-    ...props
-  }, ref) => {
-    const cardContent = clickable ? /* @__PURE__ */ jsx6(CardActionArea, { onClick: onCardClick, children }) : children;
-    return /* @__PURE__ */ jsx6(
-      MuiCard,
-      {
-        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
-      }
-    );
-  }
+  ({ variant = "elevated", dimmed, children, className, ...props }, ref) => /* @__PURE__ */ jsx6(
+    "article",
+    {
+      ref,
+      className: clsx(
+        variant === "elevated" ? "kds-card-elevated" : "kds-card-outlined",
+        dimmed && "kds-card-dimmed",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
 );
 KdsCard.displayName = "KdsCard";
 var KdsCardHeader = forwardRef5(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx6(MuiCardHeader, { ref, ...props });
-  }
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: clsx("kds-card-header", className), ...props, children })
 );
 KdsCardHeader.displayName = "KdsCardHeader";
-var KdsCardContent = forwardRef5(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx6(MuiCardContent, { ref, ...props });
-  }
+var KdsCardBody = forwardRef5(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: clsx("kds-card-body", className), ...props, children })
 );
-KdsCardContent.displayName = "KdsCardContent";
-var KdsCardActions = forwardRef5(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx6(MuiCardActions, { ref, ...props });
-  }
+KdsCardBody.displayName = "KdsCardBody";
+var KdsCardFooter = forwardRef5(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx6("div", { ref, className: clsx("kds-card-footer", className), ...props, children })
 );
-KdsCardActions.displayName = "KdsCardActions";
+KdsCardFooter.displayName = "KdsCardFooter";
 
 // src/components/core/KdsSpinner/KdsSpinner.tsx
-import CircularProgress2 from "@mui/material/CircularProgress";
-import Box2 from "@mui/material/Box";
-import { jsx as jsx7 } from "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__ */ jsx7(
-    Box2,
-    {
-      sx: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      role: "progressbar",
-      "aria-label": label,
-      children: /* @__PURE__ */ jsx7(
-        CircularProgress2,
-        {
-          size: spinnerSize,
-          color,
-          sx,
-          ...props
-        }
-      )
-    }
-  );
-};
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var KdsSpinner = forwardRef6(
+  ({ size = "medium", label, className, ...props }, ref) => /* @__PURE__ */ jsxs5("div", { ref, className: clsx("kds-flex kds-flex-col kds-items-center kds-gap-2", className), role: "status", ...props, children: [
+    /* @__PURE__ */ jsx7("span", { className: clsx("loader", size) }),
+    label && /* @__PURE__ */ jsx7("span", { className: "kds-text-body-small kds-text-muted", children: label }),
+    !label && /* @__PURE__ */ jsx7("span", { className: "kds-hidden", children: "Cargando" })
+  ] })
+);
 KdsSpinner.displayName = "KdsSpinner";
 
 // src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
-import MuiLinearProgress from "@mui/material/LinearProgress";
+import { forwardRef as forwardRef7 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var KdsLinearProgress = ({
-  color = "info",
-  variant = "indeterminate",
-  value,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx8(
-    MuiLinearProgress,
-    {
-      color,
-      variant,
-      value,
-      sx: {
-        height: 4,
-        borderRadius: 0,
-        backgroundColor: "rgba(3, 169, 244, 0.4)",
-        "& .MuiLinearProgress-bar": {
-          backgroundColor: "#03A9F4"
-        },
-        ...sx
-      },
-      ...props
-    }
-  );
-};
+var KdsLinearProgress = forwardRef7(
+  ({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ jsx8("progress", { ref, className: clsx("kds-progress", className), value, max, ...props })
+);
 KdsLinearProgress.displayName = "KdsLinearProgress";
 
 // src/components/core/KdsAlert/KdsAlert.tsx
-import MuiAlert from "@mui/material/Alert";
-import AlertTitle from "@mui/material/AlertTitle";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var KdsAlert = ({
-  severity = "info",
-  variant = "standard",
-  title,
-  children,
-  onClose,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs4(
-    MuiAlert,
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var KdsAlert = forwardRef8(
+  ({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => /* @__PURE__ */ jsxs6(
+    "div",
     {
-      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
-      },
+      ref,
+      role: "alert",
+      className: clsx("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
       ...props,
       children: [
-        title && /* @__PURE__ */ jsx9(AlertTitle, { children: title }),
-        children
+        icon && /* @__PURE__ */ jsx9("div", { className: "kds-alert-icon", children: /* @__PURE__ */ jsx9("i", { className: "material-symbols-outlined", children: icon }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "kds-alert-content", children: [
+          title && /* @__PURE__ */ jsx9("p", { className: "kds-alert-title", children: title }),
+          /* @__PURE__ */ jsx9("p", { className: "kds-alert-description", children })
+        ] }),
+        onClose && /* @__PURE__ */ jsx9("button", { className: "kds-btn kds-btn-text kds-btn-sm", onClick: onClose, "aria-label": "Cerrar", children: /* @__PURE__ */ jsx9("i", { className: "material-symbols-outlined", children: "close" }) })
       ]
     }
-  );
-};
+  )
+);
 KdsAlert.displayName = "KdsAlert";
 
 // src/components/core/KdsTypography/KdsTypography.tsx
-import { forwardRef as forwardRef6 } from "react";
-import MuiTypography from "@mui/material/Typography";
+import { forwardRef as forwardRef9 } from "react";
 import { jsx as jsx10 } from "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 = {
+var variantTag = {
   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"
+  heading1: "h1",
+  heading2: "h2",
+  heading3: "h3",
+  "body-large": "p",
+  body: "p",
+  "body-small": "p",
+  label: "span",
+  "label-small": "span",
+  muted: "p",
+  link: "span"
 };
-var isKhipuVariant = (variant) => {
-  return variant in variantStyles;
-};
-var KdsTypography = forwardRef6(
-  ({ 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]
-    ];
+var KdsTypography = forwardRef9(
+  ({ variant = "body", color, as, children, className, ...props }, ref) => {
+    const Tag = as || variantTag[variant];
     return /* @__PURE__ */ jsx10(
-      MuiTypography,
+      Tag,
       {
         ref,
-        variant: isCustomVariant ? muiVariantMap[variant] : variant,
-        sx: combinedSx,
-        ...props
+        className: clsx(
+          `kds-text-${variant}`,
+          color && color !== "inherit" && `kds-text-${color}`,
+          className
+        ),
+        ...props,
+        children
       }
     );
   }
@@ -2436,117 +1287,98 @@ var KdsTypography = forwardRef6(
 KdsTypography.displayName = "KdsTypography";
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-import { forwardRef as forwardRef7, createContext } from "react";
-import MuiTabs from "@mui/material/Tabs";
-import MuiTab from "@mui/material/Tab";
-import Box3 from "@mui/material/Box";
+import React10, { forwardRef as forwardRef10, Children, useMemo } from "react";
+
+// src/components/core/hooks/useTabsKeyboard.ts
+import { useCallback } from "react";
+function useTabsKeyboard(tabCount, activeIndex, onChange) {
+  const onKeyDown = useCallback(
+    (e) => {
+      let next = activeIndex;
+      if (e.key === "ArrowRight") next = (activeIndex + 1) % tabCount;
+      else if (e.key === "ArrowLeft") next = (activeIndex - 1 + tabCount) % tabCount;
+      else if (e.key === "Home") next = 0;
+      else if (e.key === "End") next = tabCount - 1;
+      else return;
+      e.preventDefault();
+      onChange(next);
+      const tablist = e.currentTarget;
+      const buttons = tablist.querySelectorAll('[role="tab"]');
+      buttons[next]?.focus();
+    },
+    [tabCount, activeIndex, onChange]
+  );
+  return { onKeyDown };
+}
+
+// src/components/core/KdsTabs/KdsTabs.tsx
 import { jsx as jsx11 } from "react/jsx-runtime";
-var TabsContext = createContext(null);
-var KdsTab = forwardRef7(
-  ({ label, value, icon, disabled = false, sx, ...props }, ref) => {
+var KdsTabs = forwardRef10(
+  ({ activeIndex, onChange, variant = "standard", children, className, style, ...props }, ref) => {
+    const tabCount = Children.count(children);
+    const { onKeyDown } = useTabsKeyboard(tabCount, activeIndex, onChange);
+    const mergedStyle = useMemo(() => {
+      if (variant !== "segmented") return style;
+      return {
+        ...style,
+        "--_tab-count": tabCount,
+        "--_active-idx": activeIndex
+      };
+    }, [variant, tabCount, activeIndex, style]);
     return /* @__PURE__ */ jsx11(
-      MuiTab,
+      "div",
       {
         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
+        role: "tablist",
+        className: clsx(variant === "segmented" ? "kds-segmented-tabs" : "kds-tabs", className),
+        style: mergedStyle,
+        onKeyDown,
+        ...props,
+        children: Children.map(children, (child, i) => {
+          if (!React10.isValidElement(child)) return child;
+          return React10.cloneElement(child, {
+            _active: i === activeIndex,
+            _onClick: () => onChange(i)
+          });
+        })
       }
     );
   }
 );
+KdsTabs.displayName = "KdsTabs";
+var KdsTab = forwardRef10(
+  ({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ jsx11(
+    "button",
+    {
+      ref,
+      role: "tab",
+      "aria-selected": _active,
+      tabIndex: _active ? 0 : -1,
+      className: clsx(_active && "active", className),
+      onClick: _onClick,
+      ...props,
+      children
+    }
+  )
+);
 KdsTab.displayName = "KdsTab";
-var KdsTabPanel = forwardRef7(
-  ({ value, selectedValue, children, sx, ...props }, ref) => {
-    const isSelected = value === selectedValue;
-    if (!isSelected) {
-      return null;
+var KdsTabPanel = forwardRef10(
+  ({ active, children, className, ...props }, ref) => /* @__PURE__ */ jsx11(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      hidden: !active,
+      className,
+      ...props,
+      children
     }
-    return /* @__PURE__ */ jsx11(
-      Box3,
-      {
-        ref,
-        role: "tabpanel",
-        id: `tabpanel-${value}`,
-        "aria-labelledby": `tab-${value}`,
-        sx: {
-          width: "100%",
-          ...sx
-        },
-        ...props,
-        children
-      }
-    );
-  }
+  )
 );
 KdsTabPanel.displayName = "KdsTabPanel";
-var KdsTabs = forwardRef7(
-  ({
-    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__ */ jsx11(TabsContext.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsx11(
-      MuiTabs,
-      {
-        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
-import { forwardRef as forwardRef8 } from "react";
-import Box4 from "@mui/material/Box";
-import IconButton2 from "@mui/material/IconButton";
-import CloseIcon2 from "@mui/icons-material/Close";
+import { forwardRef as forwardRef11 } from "react";
 
 // src/assets/images/khipu-logo-color.svg
 var khipu_logo_color_default = "./khipu-logo-color-TV75AKOV.svg";
@@ -2554,33 +1386,20 @@ var khipu_logo_color_default = "./khipu-logo-color-TV75AKOV.svg";
 // src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
 var KhipuLogo = () => /* @__PURE__ */ jsx12(
-  Box4,
+  "img",
   {
-    component: "img",
     src: khipu_logo_color_default,
     alt: "Khipu",
-    sx: {
-      height: "15px",
-      maxHeight: "15px",
-      width: "auto",
-      maxWidth: "50px",
-      objectFit: "contain"
-    }
+    className: "kds-logo-header-logo-img"
   }
 );
-var KdsLogoHeaderLogo = forwardRef8(
-  ({ children, sx, ...props }, ref) => {
+var KdsLogoHeaderLogo = forwardRef11(
+  ({ children, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx12(
-      Box4,
+      "div",
       {
         ref,
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          height: "15px",
-          overflow: "hidden",
-          ...sx
-        },
+        className: clsx("kds-logo-header-logo", className),
         ...props,
         children: children || /* @__PURE__ */ jsx12(KhipuLogo, {})
       }
@@ -2588,21 +1407,13 @@ var KdsLogoHeaderLogo = forwardRef8(
   }
 );
 KdsLogoHeaderLogo.displayName = "KdsLogoHeaderLogo";
-var KdsLogoHeaderSeparator = forwardRef8(
-  ({ children = "|", sx, ...props }, ref) => {
+var KdsLogoHeaderSeparator = forwardRef11(
+  ({ children = "|", className, ...props }, ref) => {
     return /* @__PURE__ */ jsx12(
-      Box4,
+      "span",
       {
         ref,
-        component: "span",
-        sx: {
-          fontFamily: fontFamilies.secondary,
-          fontWeight: fontWeights.medium,
-          fontSize: "10px",
-          lineHeight: "14px",
-          color: "#9797A5",
-          ...sx
-        },
+        className: clsx("kds-logo-header-separator", className),
         ...props,
         children
       }
@@ -2610,22 +1421,13 @@ var KdsLogoHeaderSeparator = forwardRef8(
   }
 );
 KdsLogoHeaderSeparator.displayName = "KdsLogoHeaderSeparator";
-var KdsLogoHeaderCode = forwardRef8(
-  ({ children, sx, ...props }, ref) => {
+var KdsLogoHeaderCode = forwardRef11(
+  ({ children, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx12(
-      Box4,
+      "span",
       {
         ref,
-        component: "span",
-        sx: {
-          fontFamily: fontFamilies.primary,
-          fontWeight: fontWeights.medium,
-          fontSize: "9px",
-          lineHeight: "14px",
-          color: "#9797A5",
-          whiteSpace: "nowrap",
-          ...sx
-        },
+        className: clsx("kds-logo-header-code", className),
         ...props,
         children
       }
@@ -2633,55 +1435,29 @@ var KdsLogoHeaderCode = forwardRef8(
   }
 );
 KdsLogoHeaderCode.displayName = "KdsLogoHeaderCode";
-var KdsLogoHeaderCloseButton = forwardRef8(
-  ({ onClose, sx, ...props }, ref) => {
-    return /* @__PURE__ */ jsx12(
-      Box4,
+var KdsLogoHeaderCloseButton = forwardRef11(
+  ({ onClose, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx12("div", { className: "kds-logo-header-close-wrapper", children: /* @__PURE__ */ jsx12(
+      "button",
       {
-        sx: {
-          flex: 1,
-          display: "flex",
-          justifyContent: "flex-end"
-        },
-        children: /* @__PURE__ */ jsx12(
-          IconButton2,
-          {
-            ref,
-            onClick: onClose,
-            size: "small",
-            "aria-label": "close",
-            sx: {
-              color: colors.action.active,
-              padding: 0,
-              "&:hover": {
-                backgroundColor: colors.action.hover
-              },
-              ...sx
-            },
-            ...props,
-            children: /* @__PURE__ */ jsx12(CloseIcon2, { sx: { fontSize: 24 } })
-          }
-        )
+        ref,
+        onClick: onClose,
+        className: clsx("kds-btn kds-btn-icon", className),
+        "aria-label": "close",
+        ...props,
+        children: /* @__PURE__ */ jsx12("i", { className: "material-symbols-outlined", children: "close" })
       }
-    );
+    ) });
   }
 );
 KdsLogoHeaderCloseButton.displayName = "KdsLogoHeaderCloseButton";
-var KdsLogoHeader = forwardRef8(
-  ({ children, sx, ...props }, ref) => {
+var KdsLogoHeader = forwardRef11(
+  ({ children, className, ...props }, ref) => {
     return /* @__PURE__ */ jsx12(
-      Box4,
+      "div",
       {
         ref,
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: spacing[2],
-          paddingX: semanticSpacing.card.paddingX,
-          paddingY: semanticSpacing.card.paddingY,
-          backgroundColor: colors.background.default,
-          ...sx
-        },
+        className: clsx("kds-brand-row", className),
         ...props,
         children
       }
@@ -2691,346 +1467,592 @@ var KdsLogoHeader = forwardRef8(
 KdsLogoHeader.displayName = "KdsLogoHeader";
 
 // src/components/core/KdsRadioGroup/KdsRadioGroup.tsx
-import { forwardRef as forwardRef9 } from "react";
-import MuiRadioGroup from "@mui/material/RadioGroup";
-import MuiRadio from "@mui/material/Radio";
-import FormControl from "@mui/material/FormControl";
-import FormControlLabel2 from "@mui/material/FormControlLabel";
-import FormLabel from "@mui/material/FormLabel";
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
-var KdsRadio = forwardRef9(
-  ({ color = "primary", size = "medium", ...props }, ref) => {
-    return /* @__PURE__ */ jsx13(MuiRadio, { ref, color, size, ...props });
-  }
-);
-KdsRadio.displayName = "KdsRadio";
-var KdsRadioGroup = forwardRef9(
-  ({
-    label,
-    options,
-    color = "primary",
-    size = "medium",
-    required = false,
-    disabled = false,
-    error = false,
-    children,
-    ...props
-  }, ref) => {
-    const radioGroup = /* @__PURE__ */ jsx13(MuiRadioGroup, { ref, ...props, children: options ? options.map((option) => /* @__PURE__ */ jsx13(
-      FormControlLabel2,
-      {
-        value: option.value,
-        disabled: disabled || option.disabled,
-        control: /* @__PURE__ */ jsx13(MuiRadio, { color, size }),
-        label: option.label
-      },
-      option.value
-    )) : children });
-    if (label) {
-      return /* @__PURE__ */ jsxs5(FormControl, { required, disabled, error, children: [
-        /* @__PURE__ */ jsx13(FormLabel, { children: label }),
-        radioGroup
-      ] });
-    }
-    return radioGroup;
-  }
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var KdsRadioGroup = forwardRef12(
+  ({ label, name, options, value, onChange, className, ...props }, ref) => /* @__PURE__ */ jsxs7("fieldset", { ref, className: clsx("kds-radio-group", className), ...props, children: [
+    label && /* @__PURE__ */ jsx13("legend", { children: label }),
+    options.map((opt) => /* @__PURE__ */ jsxs7("label", { className: "field", children: [
+      /* @__PURE__ */ jsx13(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: opt.value,
+          checked: value === opt.value,
+          disabled: opt.disabled,
+          onChange: () => onChange?.(opt.value)
+        }
+      ),
+      /* @__PURE__ */ jsx13("span", { children: opt.label })
+    ] }, opt.value))
+  ] })
 );
 KdsRadioGroup.displayName = "KdsRadioGroup";
 
 // src/components/core/KdsSelect/KdsSelect.tsx
-import { forwardRef as forwardRef10 } from "react";
-import MuiSelect from "@mui/material/Select";
-import MuiMenuItem from "@mui/material/MenuItem";
-import FormControl2 from "@mui/material/FormControl";
-import InputLabel from "@mui/material/InputLabel";
-import FormHelperText from "@mui/material/FormHelperText";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
-var KdsMenuItem = forwardRef10(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx14(MuiMenuItem, { ref, ...props });
-  }
-);
-KdsMenuItem.displayName = "KdsMenuItem";
-var KdsSelect = forwardRef10(
+import { forwardRef as forwardRef13 } from "react";
+import * as Select from "@radix-ui/react-select";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var KdsSelectRoot = forwardRef13(
   ({
-    variant = "outlined",
-    size = "medium",
+    value,
+    onValueChange,
+    placeholder,
     label,
-    options,
-    helperText,
-    fullWidth = true,
     error,
-    required,
+    helperText,
     disabled,
+    fullWidth = true,
     children,
-    ...props
-  }, ref) => {
-    const labelId = label ? `kds-select-label-${String(label).replace(/\s/g, "-")}` : void 0;
-    return /* @__PURE__ */ jsxs6(
-      FormControl2,
-      {
-        variant,
-        size,
-        fullWidth,
-        error,
-        required,
-        disabled,
-        children: [
-          label && /* @__PURE__ */ jsx14(InputLabel, { id: labelId, children: label }),
-          /* @__PURE__ */ jsx14(
-            MuiSelect,
-            {
-              ref,
-              labelId,
-              label,
-              variant,
-              size,
-              ...props,
-              children: options ? options.map((option) => /* @__PURE__ */ jsx14(
-                MuiMenuItem,
-                {
-                  value: option.value,
-                  disabled: option.disabled,
-                  children: option.label
-                },
-                option.value
-              )) : children
-            }
-          ),
-          helperText && /* @__PURE__ */ jsx14(FormHelperText, { children: helperText })
-        ]
-      }
-    );
-  }
+    className
+  }, ref) => /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      ref,
+      className: clsx(
+        "kds-select",
+        error && "kds-select-error",
+        fullWidth && "kds-select-full",
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx14("label", { className: "kds-select-label", children: label }),
+        /* @__PURE__ */ jsxs8(Select.Root, { value, onValueChange, disabled, children: [
+          /* @__PURE__ */ jsxs8(Select.Trigger, { className: "kds-select-trigger", children: [
+            /* @__PURE__ */ jsx14(Select.Value, { placeholder }),
+            /* @__PURE__ */ jsx14(Select.Icon, { className: "kds-select-icon", children: /* @__PURE__ */ jsx14("i", { className: "material-symbols-outlined", children: "expand_more" }) })
+          ] }),
+          /* @__PURE__ */ jsx14(Select.Portal, { children: /* @__PURE__ */ jsx14(Select.Content, { className: "kds-select-content", position: "popper", sideOffset: 4, children: /* @__PURE__ */ jsx14(Select.Viewport, { className: "kds-select-viewport", children }) }) })
+        ] }),
+        helperText && /* @__PURE__ */ jsx14("span", { className: clsx("kds-select-helper", error && "kds-select-helper-error"), children: helperText })
+      ]
+    }
+  )
+);
+KdsSelectRoot.displayName = "KdsSelect";
+var KdsSelectItem = forwardRef13(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs8(Select.Item, { ref, className: clsx("kds-select-item", className), ...props, children: [
+    /* @__PURE__ */ jsx14(Select.ItemText, { children }),
+    /* @__PURE__ */ jsx14(Select.ItemIndicator, { className: "kds-select-item-indicator", children: /* @__PURE__ */ jsx14("i", { className: "material-symbols-outlined", children: "check" }) })
+  ] })
 );
-KdsSelect.displayName = "KdsSelect";
+KdsSelectItem.displayName = "KdsSelect.Item";
+var KdsSelect = Object.assign(KdsSelectRoot, {
+  Item: KdsSelectItem
+});
 
 // src/components/core/KdsChip/KdsChip.tsx
-import { forwardRef as forwardRef11 } from "react";
-import MuiChip from "@mui/material/Chip";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var KdsChip = forwardRef11(
-  ({
-    variant = "filled",
-    color = "default",
-    size = "medium",
-    sx,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx15(
-      MuiChip,
-      {
-        ref,
-        variant,
-        color,
-        size,
-        sx: {
-          borderRadius: "4px",
-          ...sx
-        },
-        ...props
-      }
-    );
-  }
+import { forwardRef as forwardRef14 } from "react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var KdsChip = forwardRef14(
+  ({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ jsxs9("span", { ref, className: clsx("kds-badge", color, className), ...props, children: [
+    icon && /* @__PURE__ */ jsx15("i", { className: "material-symbols-outlined", children: icon }),
+    children,
+    onDelete && /* @__PURE__ */ jsx15("button", { className: "kds-btn kds-btn-text kds-btn-sm", onClick: onDelete, "aria-label": "Eliminar", children: /* @__PURE__ */ jsx15("i", { className: "material-symbols-outlined", children: "close" }) })
+  ] })
 );
 KdsChip.displayName = "KdsChip";
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-import { forwardRef as forwardRef12 } from "react";
-import MuiSnackbar from "@mui/material/Snackbar";
-import IconButton3 from "@mui/material/IconButton";
-import CloseIcon3 from "@mui/icons-material/Close";
-import { jsx as jsx16 } from "react/jsx-runtime";
-var KdsSnackbar = forwardRef12(
-  ({
-    vertical = "bottom",
-    horizontal = "center",
-    showCloseButton = false,
-    onClose,
-    ...props
-  }, ref) => {
-    const action = showCloseButton ? /* @__PURE__ */ jsx16(
-      IconButton3,
-      {
-        size: "small",
-        "aria-label": "Cerrar",
-        color: "inherit",
-        onClick: (e) => onClose?.(e, "escapeKeyDown"),
-        children: /* @__PURE__ */ jsx16(CloseIcon3, { fontSize: "small" })
-      }
-    ) : void 0;
-    return /* @__PURE__ */ jsx16(
-      MuiSnackbar,
-      {
-        ref,
-        anchorOrigin: { vertical, horizontal },
-        onClose,
-        action: props.action || action,
-        ...props
-      }
-    );
+import { forwardRef as forwardRef15 } from "react";
+
+// src/components/core/hooks/useAutoHide.ts
+import { useState, useEffect, useRef } from "react";
+function useAutoHide(durationMs, onHide) {
+  const [visible, setVisible] = useState(true);
+  const onHideRef = useRef(onHide);
+  onHideRef.current = onHide;
+  useEffect(() => {
+    if (durationMs <= 0) return;
+    const timer = setTimeout(() => {
+      setVisible(false);
+      onHideRef.current?.();
+    }, durationMs);
+    return () => clearTimeout(timer);
+  }, [durationMs]);
+  return { visible, setVisible };
+}
+
+// src/components/core/KdsSnackbar/KdsSnackbar.tsx
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var KdsSnackbar = forwardRef15(
+  ({ message, type, duration = 5e3, onClose, open = true, className, ...props }, ref) => {
+    const { visible } = useAutoHide(duration, onClose);
+    if (!open || !visible) return null;
+    return /* @__PURE__ */ jsxs10("div", { ref, role: "status", className: clsx("snackbar", "active", type, className), ...props, children: [
+      /* @__PURE__ */ jsx16("span", { children: message }),
+      onClose && /* @__PURE__ */ jsx16("button", { onClick: onClose, "aria-label": "Cerrar", children: /* @__PURE__ */ jsx16("i", { className: "material-symbols-outlined", children: "close" }) })
+    ] });
   }
 );
 KdsSnackbar.displayName = "KdsSnackbar";
 
 // src/components/core/KdsTooltip/KdsTooltip.tsx
-import MuiTooltip from "@mui/material/Tooltip";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var KdsTooltip = ({
-  arrow = false,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx17(MuiTooltip, { arrow, ...props });
-};
-KdsTooltip.displayName = "KdsTooltip";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function KdsTooltip({
+  content,
+  children,
+  placement = "top",
+  className,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration = 300
+}) {
+  return /* @__PURE__ */ jsx17(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ jsxs11(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx17(Tooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx17(Tooltip.Portal, { children: /* @__PURE__ */ jsxs11(Tooltip.Content, { className: clsx("kds-tooltip", className), side: placement, sideOffset: 4, children: [
+      content,
+      /* @__PURE__ */ jsx17(Tooltip.Arrow, { className: "kds-tooltip-arrow" })
+    ] }) })
+  ] }) });
+}
 
 // src/components/core/KdsAccordion/KdsAccordion.tsx
-import { forwardRef as forwardRef13 } from "react";
-import MuiAccordion from "@mui/material/Accordion";
-import MuiAccordionSummary from "@mui/material/AccordionSummary";
-import MuiAccordionDetails from "@mui/material/AccordionDetails";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var KdsAccordionSummary = forwardRef13(
-  ({ expandIcon, ...props }, ref) => {
-    return /* @__PURE__ */ jsx18(
-      MuiAccordionSummary,
-      {
-        ref,
-        expandIcon: expandIcon || /* @__PURE__ */ jsx18(ExpandMoreIcon, {}),
-        ...props
+import { forwardRef as forwardRef16 } from "react";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+var KdsAccordion = forwardRef16(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx18("details", { ref, className: clsx("kds-accordion", className), ...props, children })
+);
+KdsAccordion.displayName = "KdsAccordion";
+var KdsAccordionSummary = forwardRef16(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxs12("summary", { ref, className: clsx("kds-accordion-summary", className), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx18("i", { className: "material-symbols-outlined", children: "expand_more" })
+  ] })
+);
+KdsAccordionSummary.displayName = "KdsAccordionSummary";
+var KdsAccordionDetails = forwardRef16(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx18("div", { ref, className: clsx("kds-accordion-details", className), ...props, children })
+);
+KdsAccordionDetails.displayName = "KdsAccordionDetails";
+
+// src/components/core/KdsDivider/KdsDivider.tsx
+import { forwardRef as forwardRef17 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var KdsDivider = forwardRef17(
+  ({ dashed, className, ...props }, ref) => /* @__PURE__ */ jsx19("hr", { ref, className: clsx(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
+);
+KdsDivider.displayName = "KdsDivider";
+
+// src/components/core/KdsSectionNote/KdsSectionNote.tsx
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var KdsSectionNote = forwardRef18(
+  ({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ jsxs13("p", { ref, className: clsx("kds-section-note", className), ...props, children: [
+    /* @__PURE__ */ jsx20("i", { className: "material-symbols-outlined", children: icon }),
+    /* @__PURE__ */ jsx20("span", { children })
+  ] })
+);
+KdsSectionNote.displayName = "KdsSectionNote";
+
+// src/components/core/KdsStatusBlock/KdsStatusBlock.tsx
+import { forwardRef as forwardRef19 } from "react";
+import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
+var KdsStatusBlock = forwardRef19(
+  ({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ jsxs14("div", { ref, className: clsx("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
+    /* @__PURE__ */ jsx21("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ jsx21("i", { className: "material-symbols-outlined", children: icon }) }),
+    /* @__PURE__ */ jsxs14("div", { children: [
+      /* @__PURE__ */ jsx21("h2", { className: "kds-status-block-title", children: title }),
+      description && /* @__PURE__ */ jsx21("p", { className: "kds-status-block-description", children: description })
+    ] })
+  ] })
+);
+KdsStatusBlock.displayName = "KdsStatusBlock";
+
+// src/components/core/KdsStepper/KdsStepper.tsx
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+var KdsStepper = forwardRef20(
+  ({ steps, current, className, ...props }, ref) => /* @__PURE__ */ jsx22("div", { ref, className: clsx("kds-stepper", className), "data-steps": steps, "data-current": current, ...props, children: Array.from({ length: steps }, (_, i) => /* @__PURE__ */ jsxs15("div", { className: clsx("kds-step", i < current && "completed", i === current && "current"), children: [
+    /* @__PURE__ */ jsx22("div", { className: "kds-step-indicator", children: i < current ? "\u2713" : i + 1 }),
+    i < steps - 1 && /* @__PURE__ */ jsx22("div", { className: "kds-step-line" })
+  ] }, i)) })
+);
+KdsStepper.displayName = "KdsStepper";
+
+// src/components/core/KdsCopyRow/KdsCopyRow.tsx
+import { forwardRef as forwardRef21 } from "react";
+
+// src/components/core/hooks/useCopyToClipboard.ts
+import { useState as useState2, useCallback as useCallback2 } from "react";
+function useCopyToClipboard(resetMs = 1200) {
+  const [copied, setCopied] = useState2(false);
+  const copy = useCallback2(
+    async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), resetMs);
+      } catch {
       }
-    );
+    },
+    [resetMs]
+  );
+  return { copied, copy };
+}
+
+// src/components/core/KdsCopyRow/KdsCopyRow.tsx
+import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+var KdsCopyRow = forwardRef21(
+  ({ label, value, className, ...props }, ref) => {
+    const { copied, copy } = useCopyToClipboard();
+    return /* @__PURE__ */ jsxs16("div", { ref, className: clsx("kds-copy-row", copied && "copied", className), ...props, children: [
+      /* @__PURE__ */ jsx23("span", { className: "kds-copy-row-label", children: label }),
+      /* @__PURE__ */ jsx23("span", { className: "kds-copy-row-value", children: value }),
+      /* @__PURE__ */ jsx23("button", { className: "kds-copy-row-btn", onClick: () => copy(value), "aria-label": `Copiar ${label}`, children: /* @__PURE__ */ jsx23("i", { className: "material-symbols-outlined", children: copied ? "check" : "content_copy" }) })
+    ] });
   }
 );
-KdsAccordionSummary.displayName = "KdsAccordionSummary";
-var KdsAccordionDetails = forwardRef13(
-  (props, ref) => {
-    return /* @__PURE__ */ jsx18(MuiAccordionDetails, { ref, ...props });
+KdsCopyRow.displayName = "KdsCopyRow";
+
+// src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
+import { forwardRef as forwardRef22 } from "react";
+import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+var KdsCopyableTable = forwardRef22(
+  ({ rows, className, ...props }, ref) => {
+    const { copied, copy } = useCopyToClipboard();
+    const handleCopyAll = () => {
+      const text = rows.map((r) => `${r.label}: ${r.value}`).join("\n");
+      copy(text);
+    };
+    return /* @__PURE__ */ jsxs17(Fragment2, { children: [
+      /* @__PURE__ */ jsx24("div", { ref, className: clsx("kds-copyable-table", className), ...props, children: rows.map((row) => /* @__PURE__ */ jsxs17("div", { className: "kds-copyable-table-row", children: [
+        /* @__PURE__ */ jsx24("span", { className: "kds-copyable-table-label", children: row.label }),
+        /* @__PURE__ */ jsx24("span", { className: "kds-copyable-table-value", children: row.value })
+      ] }, row.label)) }),
+      /* @__PURE__ */ jsxs17("button", { className: `kds-btn kds-btn-outlined kds-btn-block kds-copy-all-btn${copied ? " copied" : ""}`, onClick: handleCopyAll, "aria-label": "Copiar todo", children: [
+        /* @__PURE__ */ jsx24("span", { className: "kds-icon", children: /* @__PURE__ */ jsx24("i", { className: "material-symbols-outlined", children: copied ? "check" : "content_copy" }) }),
+        /* @__PURE__ */ jsx24("span", { children: copied ? "Copiado" : "Copiar todos los datos" })
+      ] })
+    ] });
   }
 );
-KdsAccordionDetails.displayName = "KdsAccordionDetails";
-var KdsAccordion = forwardRef13(
-  ({
-    variant = "elevation",
-    sx,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsx18(
-      MuiAccordion,
-      {
-        ref,
-        variant,
-        sx: {
-          borderRadius: "4px",
-          "&:before": { display: "none" },
-          ...sx
-        },
-        ...props
+KdsCopyableTable.displayName = "KdsCopyableTable";
+
+// src/components/core/KdsExpandPanel/KdsExpandPanel.tsx
+import { forwardRef as forwardRef23, useState as useState3 } from "react";
+import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+var KdsExpandPanel = forwardRef23(
+  ({ label, defaultExpanded = false, children, className, ...props }, ref) => {
+    const [expanded, setExpanded] = useState3(defaultExpanded);
+    return /* @__PURE__ */ jsxs18("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ jsxs18(
+        "button",
+        {
+          className: "kds-expand-toggle",
+          onClick: () => setExpanded((v) => !v),
+          "aria-expanded": expanded,
+          children: [
+            /* @__PURE__ */ jsx25("span", { children: label }),
+            /* @__PURE__ */ jsx25("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx25("div", { className: clsx("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
+    ] });
+  }
+);
+KdsExpandPanel.displayName = "KdsExpandPanel";
+
+// src/components/core/KdsCountdown/KdsCountdown.tsx
+import { forwardRef as forwardRef24, useEffect as useEffect3, useRef as useRef2 } from "react";
+
+// src/components/core/hooks/useCountdown.ts
+import { useState as useState4, useEffect as useEffect2 } from "react";
+function calcRemaining(deadline) {
+  const diff = Math.max(0, new Date(deadline).getTime() - Date.now());
+  const totalSeconds = Math.floor(diff / 1e3);
+  return {
+    hours: Math.floor(totalSeconds / 3600),
+    minutes: Math.floor(totalSeconds % 3600 / 60),
+    seconds: totalSeconds % 60,
+    expired: diff === 0,
+    urgent: diff > 0 && diff < 5 * 60 * 1e3
+  };
+}
+function useCountdown(deadline) {
+  const [state, setState] = useState4(() => calcRemaining(deadline));
+  useEffect2(() => {
+    const tick = () => setState(calcRemaining(deadline));
+    const id = setInterval(tick, 1e3);
+    return () => clearInterval(id);
+  }, [deadline]);
+  return state;
+}
+
+// src/components/core/KdsCountdown/KdsCountdown.tsx
+import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+var KdsCountdown = forwardRef24(
+  ({ deadline, label, onExpire, className, ...props }, ref) => {
+    const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
+    const onExpireRef = useRef2(onExpire);
+    onExpireRef.current = onExpire;
+    useEffect3(() => {
+      if (expired) {
+        onExpireRef.current?.();
       }
-    );
+    }, [expired]);
+    if (expired) {
+      return null;
+    }
+    const pad = (n) => String(n).padStart(2, "0");
+    return /* @__PURE__ */ jsxs19("div", { ref, className: clsx("kds-countdown", urgent && "urgent", className), ...props, children: [
+      label && /* @__PURE__ */ jsx26("span", { className: "kds-countdown-label", children: label }),
+      /* @__PURE__ */ jsxs19("span", { className: "kds-countdown-value", children: [
+        pad(hours),
+        ":",
+        pad(minutes),
+        ":",
+        pad(seconds)
+      ] })
+    ] });
   }
 );
-KdsAccordion.displayName = "KdsAccordion";
+KdsCountdown.displayName = "KdsCountdown";
+
+// src/components/core/KdsSegmentedTabs/KdsSegmentedTabs.tsx
+import { forwardRef as forwardRef25 } from "react";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var KdsSegmentedTabs = forwardRef25(
+  (props, ref) => /* @__PURE__ */ jsx27(KdsTabs, { ref, variant: "segmented", ...props })
+);
+KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
 
-// src/index.ts
-import { default as default2 } from "@mui/material/Box";
-import { default as default3 } from "@mui/material/InputAdornment";
-import { default as default4 } from "@mui/material/Divider";
-import { default as default5 } from "@mui/material/Link";
-import { default as default6 } from "@mui/material/IconButton";
-import { default as default7 } from "@mui/material/Stack";
-import { default as default8 } from "@mui/material/Grid";
-import { default as default9 } from "@mui/material/Container";
-import { default as default10 } from "@mui/icons-material/Search";
-import { default as default11 } from "@mui/icons-material/ChevronRight";
-import { default as default12 } from "@mui/icons-material/ChevronLeft";
-import { default as default13 } from "@mui/icons-material/Close";
-import { default as default14 } from "@mui/icons-material/Check";
-import { default as default15 } from "@mui/icons-material/CheckCircle";
-import { default as default16 } from "@mui/icons-material/Person";
-import { default as default17 } from "@mui/icons-material/Lock";
-import { default as default18 } from "@mui/icons-material/LockOutlined";
-import { default as default19 } from "@mui/icons-material/MailOutline";
-import { default as default20 } from "@mui/icons-material/ExpandMore";
-import { default as default21 } from "@mui/icons-material/ExpandLess";
-import { default as default22 } from "@mui/icons-material/Info";
-import { default as default23 } from "@mui/icons-material/Warning";
-import { default as default24 } from "@mui/icons-material/Error";
-import { default as default25 } from "@mui/icons-material/Visibility";
-import { default as default26 } from "@mui/icons-material/VisibilityOff";
-import { default as default27 } from "@mui/icons-material/ContentCopy";
-import { default as default28 } from "@mui/icons-material/KeyboardArrowUp";
-import { default as default29 } from "@mui/icons-material/KeyboardArrowDown";
+// src/components/domain/KdsBankRow/KdsBankRow.tsx
+import { forwardRef as forwardRef26 } from "react";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+var KdsBankRow = forwardRef26(
+  ({ name, logoUrl, selected, className, ...props }, ref) => /* @__PURE__ */ jsxs20(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx("kds-bank-row", selected && "selected", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx28("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ jsx28("img", { src: logoUrl, alt: name }) : /* @__PURE__ */ jsx28("span", { className: "initials", children: name.charAt(0) }) }),
+        /* @__PURE__ */ jsx28("span", { className: "kds-bank-row-name", children: name }),
+        /* @__PURE__ */ jsx28("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
+      ]
+    }
+  )
+);
+KdsBankRow.displayName = "KdsBankRow";
+
+// src/components/domain/KdsBankList/KdsBankList.tsx
+import { forwardRef as forwardRef27 } from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var KdsBankList = forwardRef27(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx29("div", { ref, className: clsx("kds-bank-list", className), role: "list", ...props, children })
+);
+KdsBankList.displayName = "KdsBankList";
+
+// src/components/domain/KdsBankModal/KdsBankModal.tsx
+import { forwardRef as forwardRef28, useState as useState5 } from "react";
+import * as Dialog2 from "@radix-ui/react-dialog";
+import { jsx as jsx30, jsxs as jsxs21 } from "react/jsx-runtime";
+var KdsBankModal = forwardRef28(
+  ({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
+    const [query, setQuery] = useState5("");
+    const handleSearch = (value) => {
+      setQuery(value);
+      onSearch?.(value);
+    };
+    return /* @__PURE__ */ jsx30(Dialog2.Root, { open, onOpenChange: (o) => {
+      if (!o) onClose();
+    }, children: /* @__PURE__ */ jsx30(Dialog2.Portal, { container, children: /* @__PURE__ */ jsx30(Dialog2.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ jsxs21(Dialog2.Content, { ref, className: clsx("kds-bank-modal", className), children: [
+      /* @__PURE__ */ jsxs21("div", { className: "kds-bank-modal-header", children: [
+        /* @__PURE__ */ jsx30(Dialog2.Title, { asChild: true, children: /* @__PURE__ */ jsx30("h3", { children: title }) }),
+        /* @__PURE__ */ jsx30(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx30("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ jsx30("i", { className: "material-symbols-outlined", children: "close" }) }) })
+      ] }),
+      /* @__PURE__ */ jsx30("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ jsx30(
+        "input",
+        {
+          type: "text",
+          placeholder: searchPlaceholder,
+          value: query,
+          onChange: (e) => handleSearch(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ jsx30("div", { className: "kds-bank-modal-body", children })
+    ] }) }) }) });
+  }
+);
+KdsBankModal.displayName = "KdsBankModal";
+
+// src/components/domain/KdsQrRow/KdsQrRow.tsx
+import { forwardRef as forwardRef29 } from "react";
+import { jsx as jsx31, jsxs as jsxs22 } from "react/jsx-runtime";
+var KdsQrRow = forwardRef29(
+  ({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ jsxs22("button", { ref, type: "button", className: clsx("kds-qr-row", className), ...props, children: [
+    /* @__PURE__ */ jsx31("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ jsx31("i", { className: "material-symbols-outlined", children: icon }) }),
+    /* @__PURE__ */ jsxs22("span", { className: "kds-qr-text", children: [
+      /* @__PURE__ */ jsx31("span", { className: "title", children: name }),
+      description && /* @__PURE__ */ jsx31("span", { className: "sub", children: description })
+    ] }),
+    badge && /* @__PURE__ */ jsx31("span", { className: "kds-qr-badge", children: badge }),
+    /* @__PURE__ */ jsx31("i", { className: "material-symbols-outlined", children: "chevron_right" })
+  ] })
+);
+KdsQrRow.displayName = "KdsQrRow";
+
+// src/components/domain/KdsCardSelector/KdsCardSelector.tsx
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx32, jsxs as jsxs23 } from "react/jsx-runtime";
+var KdsCardSelector = forwardRef30(
+  ({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ jsxs23(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx("kds-card-selector", selected && "selected", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx32("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ jsx32("i", { className: "material-symbols-outlined", children: icon }) }),
+        /* @__PURE__ */ jsx32("span", { className: "kds-card-selector-title", children: title }),
+        description && /* @__PURE__ */ jsx32("span", { className: "kds-card-selector-description", children: description })
+      ]
+    }
+  )
+);
+KdsCardSelector.displayName = "KdsCardSelector";
+
+// src/components/domain/KdsCardPlan/KdsCardPlan.tsx
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx33, jsxs as jsxs24 } from "react/jsx-runtime";
+var KdsCardPlan = forwardRef31(
+  ({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ jsxs24(
+    "div",
+    {
+      ref,
+      className: clsx("kds-card-plan", recommended && "recommended", className),
+      ...props,
+      children: [
+        badgeText && /* @__PURE__ */ jsx33("span", { className: "kds-card-plan-badge", children: badgeText }),
+        /* @__PURE__ */ jsx33("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ jsx33("h3", { children: title }) }),
+        /* @__PURE__ */ jsxs24("div", { className: "kds-card-plan-price", children: [
+          /* @__PURE__ */ jsx33("span", { children: price }),
+          period && /* @__PURE__ */ jsxs24("span", { children: [
+            "/",
+            period
+          ] })
+        ] }),
+        features && features.length > 0 && /* @__PURE__ */ jsx33("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ jsx33("li", { children: f }, i)) }),
+        action
+      ]
+    }
+  )
+);
+KdsCardPlan.displayName = "KdsCardPlan";
+
+// src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
+import { forwardRef as forwardRef32 } from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var KdsInvoiceSticky = forwardRef32(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsx34("div", { ref, className: clsx("kds-card-elevated", "kds-invoice-sticky", className), ...props, children })
+);
+KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
+
+// src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
+import { forwardRef as forwardRef33 } from "react";
+import * as Dialog3 from "@radix-ui/react-dialog";
+import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
+var KdsBottomSheet = forwardRef33(
+  ({ open, onClose, title, children, actions, className, container }, ref) => /* @__PURE__ */ jsx35(Dialog3.Root, { open, onOpenChange: (o) => {
+    if (!o) onClose();
+  }, children: /* @__PURE__ */ jsx35(Dialog3.Portal, { container, children: /* @__PURE__ */ jsx35(Dialog3.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ jsxs25(Dialog3.Content, { ref, className: clsx("kds-bottom-sheet", className), children: [
+    /* @__PURE__ */ jsx35("div", { className: "kds-bottom-sheet-grabber" }),
+    title && /* @__PURE__ */ jsx35(Dialog3.Title, { className: "kds-bottom-sheet-title", children: title }),
+    /* @__PURE__ */ jsx35("div", { className: "kds-bottom-sheet-body", children }),
+    actions && /* @__PURE__ */ jsx35("div", { className: "kds-bottom-sheet-actions", children: actions })
+  ] }) }) }) })
+);
+KdsBottomSheet.displayName = "KdsBottomSheet";
+
+// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
+import { forwardRef as forwardRef34 } from "react";
+import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
+var KdsSecureFooter = forwardRef34(
+  ({ variant = "default", children, className, ...props }, ref) => /* @__PURE__ */ jsxs26("footer", { ref, className: clsx("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
+    /* @__PURE__ */ jsx36("i", { className: "material-symbols-outlined", children: "lock" }),
+    children || /* @__PURE__ */ jsx36("span", { children: "Pago seguro con Khipu" })
+  ] })
+);
+KdsSecureFooter.displayName = "KdsSecureFooter";
+
+// src/components/domain/KdsRecapList/KdsRecapList.tsx
+import { forwardRef as forwardRef35 } from "react";
+import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
+var KdsRecapList = forwardRef35(
+  ({ items, className, ...props }, ref) => /* @__PURE__ */ jsx37("ul", { ref, className: clsx("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ jsxs27("li", { children: [
+    /* @__PURE__ */ jsx37("span", { className: "k", children: item.label }),
+    /* @__PURE__ */ jsx37("span", { className: clsx("v", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
+  ] }, i)) })
+);
+KdsRecapList.displayName = "KdsRecapList";
 export {
-  default2 as Box,
-  default15 as CheckCircleIcon,
-  default14 as CheckIcon,
-  default12 as ChevronLeftIcon,
-  default11 as ChevronRightIcon,
-  default13 as CloseIcon,
-  default9 as Container,
-  default27 as ContentCopyIcon,
-  default4 as Divider,
-  default24 as ErrorIcon,
-  default21 as ExpandLessIcon,
-  default20 as ExpandMoreIcon,
-  default8 as Grid,
-  default6 as IconButton,
-  default22 as InfoIcon,
-  default3 as InputAdornment,
   KdsAccordion,
   KdsAccordionDetails,
   KdsAccordionSummary,
   KdsAlert,
+  KdsBankList,
+  KdsBankModal,
+  KdsBankRow,
+  KdsBottomSheet,
   KdsButton,
   KdsCard,
-  KdsCardActions,
-  KdsCardContent,
+  KdsCardBody,
+  KdsCardFooter,
   KdsCardHeader,
+  KdsCardPlan,
+  KdsCardSelector,
   KdsCheckbox,
   KdsChip,
+  KdsCopyRow,
+  KdsCopyableTable,
+  KdsCountdown,
+  KdsDivider,
+  KdsExpandPanel,
+  KdsInvoiceSticky,
   KdsLinearProgress,
   KdsLogoHeader,
   KdsLogoHeaderCloseButton,
   KdsLogoHeaderCode,
   KdsLogoHeaderLogo,
   KdsLogoHeaderSeparator,
-  KdsMenuItem,
   KdsModal,
-  KdsRadio,
+  KdsQrRow,
   KdsRadioGroup,
+  KdsRecapList,
+  KdsSectionNote,
+  KdsSecureFooter,
+  KdsSegmentedTabs,
   KdsSelect,
   KdsSnackbar,
   KdsSpinner,
+  KdsStatusBlock,
+  KdsStepper,
   KdsTab,
   KdsTabPanel,
   KdsTabs,
   KdsTextField,
+  KdsThemeProvider,
   KdsTooltip,
   KdsTypography,
-  default29 as KeyboardArrowDownIcon,
-  default28 as KeyboardArrowUpIcon,
-  KhipuThemeProvider,
-  default5 as Link,
-  default17 as LockIcon,
-  default18 as LockOutlinedIcon,
-  default19 as MailOutlineIcon,
-  default16 as PersonIcon,
-  default10 as SearchIcon,
-  default7 as Stack,
-  default25 as VisibilityIcon,
-  default26 as VisibilityOffIcon,
-  default23 as WarningIcon,
   borderRadius,
   breakpoints,
+  clsx,
   colors,
   colorsByMode,
   fontFamilies,
   fontSizes,
   fontWeights,
-  khipuTheme,
+  getContrastColor,
   letterSpacings,
+  lighten,
   lineHeights,
   semanticSpacing,
   shadows,
@@ -3039,5 +2061,9 @@ export {
   tokensByMode,
   transitions,
   typography,
+  useAutoHide,
+  useCopyToClipboard,
+  useCountdown,
+  useTabsKeyboard,
   zIndex
 };