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

package/dist/index.js

@@ -30,74 +30,65 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Box: () => import_Box5.default,
-  CheckCircleIcon: () => import_CheckCircle.default,
-  CheckIcon: () => import_Check.default,
-  ChevronLeftIcon: () => import_ChevronLeft2.default,
-  ChevronRightIcon: () => import_ChevronRight.default,
-  CloseIcon: () => import_Close4.default,
-  Container: () => import_Container.default,
-  ContentCopyIcon: () => import_ContentCopy.default,
-  Divider: () => import_Divider.default,
-  ErrorIcon: () => import_Error.default,
-  ExpandLessIcon: () => import_ExpandLess.default,
-  ExpandMoreIcon: () => import_ExpandMore2.default,
-  Grid: () => import_Grid.default,
-  IconButton: () => import_IconButton4.default,
-  InfoIcon: () => import_Info.default,
-  InputAdornment: () => import_InputAdornment2.default,
   KdsAccordion: () => KdsAccordion,
   KdsAccordionDetails: () => KdsAccordionDetails,
   KdsAccordionSummary: () => KdsAccordionSummary,
   KdsAlert: () => KdsAlert,
+  KdsBankList: () => KdsBankList,
+  KdsBankModal: () => KdsBankModal,
+  KdsBankRow: () => KdsBankRow,
+  KdsBottomSheet: () => KdsBottomSheet,
   KdsButton: () => KdsButton,
   KdsCard: () => KdsCard,
-  KdsCardActions: () => KdsCardActions,
-  KdsCardContent: () => KdsCardContent,
+  KdsCardBody: () => KdsCardBody,
+  KdsCardFooter: () => KdsCardFooter,
   KdsCardHeader: () => KdsCardHeader,
+  KdsCardPlan: () => KdsCardPlan,
+  KdsCardSelector: () => KdsCardSelector,
   KdsCheckbox: () => KdsCheckbox,
   KdsChip: () => KdsChip,
+  KdsCopyRow: () => KdsCopyRow,
+  KdsCopyableTable: () => KdsCopyableTable,
+  KdsCountdown: () => KdsCountdown,
+  KdsDivider: () => KdsDivider,
+  KdsExpandPanel: () => KdsExpandPanel,
+  KdsInvoiceSticky: () => KdsInvoiceSticky,
   KdsLinearProgress: () => KdsLinearProgress,
   KdsLogoHeader: () => KdsLogoHeader,
   KdsLogoHeaderCloseButton: () => KdsLogoHeaderCloseButton,
   KdsLogoHeaderCode: () => KdsLogoHeaderCode,
   KdsLogoHeaderLogo: () => KdsLogoHeaderLogo,
   KdsLogoHeaderSeparator: () => KdsLogoHeaderSeparator,
-  KdsMenuItem: () => KdsMenuItem,
   KdsModal: () => KdsModal,
-  KdsRadio: () => KdsRadio,
+  KdsQrRow: () => KdsQrRow,
   KdsRadioGroup: () => KdsRadioGroup,
+  KdsRecapList: () => KdsRecapList,
+  KdsSectionNote: () => KdsSectionNote,
+  KdsSecureFooter: () => KdsSecureFooter,
+  KdsSegmentedTabs: () => KdsSegmentedTabs,
   KdsSelect: () => KdsSelect,
   KdsSnackbar: () => KdsSnackbar,
   KdsSpinner: () => KdsSpinner,
+  KdsStatusBlock: () => KdsStatusBlock,
+  KdsStepper: () => KdsStepper,
   KdsTab: () => KdsTab,
   KdsTabPanel: () => KdsTabPanel,
   KdsTabs: () => KdsTabs,
   KdsTextField: () => KdsTextField,
+  KdsThemeProvider: () => KdsThemeProvider,
   KdsTooltip: () => KdsTooltip,
   KdsTypography: () => KdsTypography,
-  KeyboardArrowDownIcon: () => import_KeyboardArrowDown.default,
-  KeyboardArrowUpIcon: () => import_KeyboardArrowUp.default,
-  KhipuThemeProvider: () => KhipuThemeProvider,
-  Link: () => import_Link.default,
-  LockIcon: () => import_Lock.default,
-  LockOutlinedIcon: () => import_LockOutlined.default,
-  MailOutlineIcon: () => import_MailOutline.default,
-  PersonIcon: () => import_Person.default,
-  SearchIcon: () => import_Search.default,
-  Stack: () => import_Stack.default,
-  VisibilityIcon: () => import_Visibility.default,
-  VisibilityOffIcon: () => import_VisibilityOff.default,
-  WarningIcon: () => import_Warning.default,
   borderRadius: () => borderRadius,
   breakpoints: () => breakpoints,
+  clsx: () => import_clsx.clsx,
   colors: () => colors,
   colorsByMode: () => colorsByMode,
   fontFamilies: () => fontFamilies,
   fontSizes: () => fontSizes,
   fontWeights: () => fontWeights,
-  khipuTheme: () => khipuTheme,
+  getContrastColor: () => getContrastColor,
   letterSpacings: () => letterSpacings,
+  lighten: () => lighten,
   lineHeights: () => lineHeights,
   semanticSpacing: () => semanticSpacing,
   shadows: () => shadows,
@@ -106,12 +97,62 @@ __export(index_exports, {
   tokensByMode: () => tokensByMode,
   transitions: () => transitions,
   typography: () => typography,
+  useAutoHide: () => useAutoHide,
+  useCopyToClipboard: () => useCopyToClipboard,
+  useCountdown: () => useCountdown,
+  useTabsKeyboard: () => useTabsKeyboard,
   zIndex: () => zIndex
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/theme/index.ts
-var import_styles = require("@mui/material/styles");
+// src/components/core/utils.ts
+var import_clsx = require("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
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)("div", { className: `kds-theme-root ${mode}`, style, children });
+}
 
 // src/tokens/index.ts
 var lightModeColors = {
@@ -876,6 +917,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",
@@ -1006,6 +1065,7 @@ var tokensByMode = {
     semanticSpacing,
     responsiveSpacing,
     responsiveTypography,
+    responsiveBaseFontSizes,
     borderRadius,
     borders,
     shadows,
@@ -1025,6 +1085,7 @@ var tokensByMode = {
     semanticSpacing,
     responsiveSpacing,
     responsiveTypography,
+    responsiveBaseFontSizes,
     borderRadius,
     borders,
     shadows,
@@ -1045,6 +1106,7 @@ var tokens = {
   semanticSpacing,
   responsiveSpacing,
   responsiveTypography,
+  responsiveBaseFontSizes,
   borderRadius,
   borders,
   shadows,
@@ -1053,1494 +1115,278 @@ 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"
+// src/components/core/KdsButton/KdsButton.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var KdsButton = (0, import_react.forwardRef)(
+  ({
+    variant = "primary",
+    size,
+    fullWidth = false,
+    loading = false,
+    disabled = false,
+    startIcon,
+    endIcon,
+    children,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "button",
+    {
+      ref,
+      className: (0, import_clsx.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__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", { className: "material-symbols-outlined", children: startIcon }) }),
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "loader small" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children }),
+        !loading && endIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", { className: "material-symbols-outlined", children: endIcon }) })
+      ]
     }
+  )
+);
+KdsButton.displayName = "KdsButton";
+
+// src/components/core/KdsTextField/KdsTextField.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var KdsTextField = (0, import_react2.forwardRef)(
+  ({
+    label,
+    helperText,
+    error,
+    fullWidth = true,
+    readOnly,
+    startIcon,
+    endIcon,
+    className,
+    id,
+    ...props
+  }, ref) => {
+    const fieldId = id || `kds-field-${label.toLowerCase().replace(/\s+/g, "-")}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: (0, import_clsx.clsx)(
+          "field",
+          "label",
+          "border",
+          error && "invalid",
+          readOnly && "locked",
+          fullWidth && "kds-w-full",
+          className
+        ),
+        children: [
+          startIcon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "material-symbols-outlined", children: startIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              ref,
+              id: fieldId,
+              placeholder: " ",
+              readOnly,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: fieldId, children: label }),
+          readOnly && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "material-symbols-outlined", children: "lock" }),
+          endIcon && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { className: "material-symbols-outlined", children: endIcon }),
+          helperText && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "helper", children: helperText })
+        ]
+      }
+    );
   }
-};
-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"
+);
+KdsTextField.displayName = "KdsTextField";
+
+// src/components/core/KdsCheckbox/KdsCheckbox.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var KdsCheckbox = (0, import_react3.forwardRef)(
+  ({ label, className, id, ...props }, ref) => {
+    const fieldId = id || `kds-cb-${label?.toLowerCase().replace(/\s+/g, "-") || "check"}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: (0, import_clsx.clsx)("field", className), htmlFor: fieldId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { ref, type: "checkbox", id: fieldId, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: label })
+    ] });
   }
-};
-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
+);
+KdsCheckbox.displayName = "KdsCheckbox";
+
+// src/components/core/KdsModal/KdsModal.tsx
+var import_react4 = require("react");
+var Dialog = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var KdsModal = (0, import_react4.forwardRef)(
+  ({
+    open,
+    onClose,
+    title,
+    description,
+    footer,
+    children,
+    size = "md",
+    showCloseButton = true,
+    className
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Dialog.Root,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (!o) onClose();
       },
-      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
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Dialog.Portal, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog.Overlay, { className: "kds-bottom-sheet-scrim" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          Dialog.Content,
+          {
+            ref,
+            className: (0, import_clsx.clsx)(
+              "kds-bottom-sheet",
+              `kds-bottom-sheet-${size}`,
+              className
+            ),
+            children: [
+              title && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "kds-bottom-sheet-header", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog.Title, { className: "kds-bottom-sheet-title", children: title }),
+                showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "button",
+                  {
+                    className: "kds-bottom-sheet-close",
+                    "aria-label": "Cerrar",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("i", { className: "material-symbols-outlined", children: "close" })
+                  }
+                ) })
+              ] }),
+              description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Dialog.Description, { className: "kds-bottom-sheet-description", children: description }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "kds-bottom-sheet-body", children }),
+              footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "kds-bottom-sheet-actions", children: footer })
+            ]
           }
-        },
-        // 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"
-      }
+  )
+);
+KdsModal.displayName = "KdsModal";
+
+// src/components/core/KdsCard/KdsCard.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var KdsCard = (0, import_react5.forwardRef)(
+  ({ variant = "elevated", dimmed, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "article",
+    {
+      ref,
+      className: (0, import_clsx.clsx)(
+        variant === "elevated" ? "kds-card-elevated" : "kds-card-outlined",
+        dimmed && "kds-card-dimmed",
+        className
+      ),
+      ...props,
+      children
     }
-  },
-  // ==========================================================================
-  // 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"
+  )
+);
+KdsCard.displayName = "KdsCard";
+var KdsCardHeader = (0, import_react5.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-header", className), ...props, children })
+);
+KdsCardHeader.displayName = "KdsCardHeader";
+var KdsCardBody = (0, import_react5.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-body", className), ...props, children })
+);
+KdsCardBody.displayName = "KdsCardBody";
+var KdsCardFooter = (0, import_react5.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-footer", className), ...props, children })
+);
+KdsCardFooter.displayName = "KdsCardFooter";
+
+// src/components/core/KdsSpinner/KdsSpinner.tsx
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var KdsSpinner = (0, import_react6.forwardRef)(
+  ({ size = "medium", label, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-flex kds-flex-col kds-items-center kds-gap-2", className), role: "status", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_clsx.clsx)("loader", size) }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "kds-text-body-small kds-text-muted", children: label }),
+    !label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "kds-hidden", children: "Cargando" })
+  ] })
+);
+KdsSpinner.displayName = "KdsSpinner";
+
+// src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var KdsLinearProgress = (0, import_react7.forwardRef)(
+  ({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("progress", { ref, className: (0, import_clsx.clsx)("kds-progress", className), value, max, ...props })
+);
+KdsLinearProgress.displayName = "KdsLinearProgress";
+
+// src/components/core/KdsAlert/KdsAlert.tsx
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var KdsAlert = (0, import_react8.forwardRef)(
+  ({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: (0, import_clsx.clsx)("kds-alert", `kds-${severity}`, inline && "kds-alert-inline", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "kds-alert-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "kds-alert-content", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "kds-alert-title", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "kds-alert-description", children })
+        ] }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("button", { className: "kds-btn kds-btn-text kds-btn-sm", onClick: onClose, "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("i", { className: "material-symbols-outlined", children: "close" }) })
+      ]
     }
-  },
-  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 = (0, import_styles.createTheme)({
-  palette,
-  typography: typography2,
-  shape,
-  shadows: shadows2,
-  components
-});
-
-// src/theme/ThemeProvider.tsx
-var import_react = require("react");
-var import_material = require("@mui/material");
-var import_jsx_runtime = require("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 = (0, import_react.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 (0, import_material.createTheme)(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__ */ (0, import_jsx_runtime.jsxs)(import_material.ThemeProvider, { theme, children: [
-    includeCssBaseline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.CssBaseline, {}),
-    children
-  ] });
-}
-
-// src/components/core/KdsButton/KdsButton.tsx
-var import_react2 = require("react");
-var import_Button = __toESM(require("@mui/material/Button"));
-var import_CircularProgress = __toESM(require("@mui/material/CircularProgress"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var KdsButton = (0, import_react2.forwardRef)(
-  ({
-    variant = "contained",
-    color = "primary",
-    size = "large",
-    fullWidth = false,
-    loading = false,
-    disabled = false,
-    startIcon,
-    endIcon,
-    children,
-    sx,
-    ...props
-  }, ref) => {
-    const isDisabled = disabled || loading;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_Button.default,
-      {
-        ref,
-        variant,
-        color,
-        size,
-        fullWidth,
-        disabled: isDisabled,
-        startIcon: loading ? void 0 : startIcon,
-        endIcon: loading ? void 0 : endIcon,
-        sx: {
-          // Additional custom styles can be merged here
-          ...sx
-        },
-        ...props,
-        children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            import_CircularProgress.default,
-            {
-              size: 20,
-              color: "inherit",
-              sx: { mr: 1 }
-            }
-          ),
-          children
-        ] }) : children
-      }
-    );
-  }
-);
-KdsButton.displayName = "KdsButton";
-
-// src/components/core/KdsTextField/KdsTextField.tsx
-var import_react3 = require("react");
-var import_TextField = __toESM(require("@mui/material/TextField"));
-var import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var KdsTextField = (0, import_react3.forwardRef)(
-  ({
-    variant = "outlined",
-    size = "medium",
-    fullWidth = true,
-    startAdornment,
-    endAdornment,
-    InputProps,
-    ...props
-  }, ref) => {
-    const mergedInputProps = {
-      ...InputProps,
-      ...startAdornment && {
-        startAdornment: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_InputAdornment.default, { position: "start", children: startAdornment })
-      },
-      ...endAdornment && {
-        endAdornment: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_InputAdornment.default, { position: "end", children: endAdornment })
-      }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      import_TextField.default,
-      {
-        inputRef: ref,
-        variant,
-        size,
-        fullWidth,
-        InputProps: mergedInputProps,
-        ...props
-      }
-    );
-  }
-);
-KdsTextField.displayName = "KdsTextField";
-
-// src/components/core/KdsCheckbox/KdsCheckbox.tsx
-var import_react4 = require("react");
-var import_Checkbox = __toESM(require("@mui/material/Checkbox"));
-var import_FormControlLabel = __toESM(require("@mui/material/FormControlLabel"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var KdsCheckbox = (0, import_react4.forwardRef)(
-  ({
-    label,
-    color = "primary",
-    size = "medium",
-    disabled = false,
-    ...props
-  }, ref) => {
-    const checkbox = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_Checkbox.default,
-      {
-        ref,
-        color,
-        size,
-        disabled,
-        ...props
-      }
-    );
-    if (label) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_FormControlLabel.default,
-        {
-          control: checkbox,
-          label,
-          disabled
-        }
-      );
-    }
-    return checkbox;
-  }
-);
-KdsCheckbox.displayName = "KdsCheckbox";
-
-// src/components/core/KdsModal/KdsModal.tsx
-var import_react5 = require("react");
-var import_Dialog = __toESM(require("@mui/material/Dialog"));
-var import_DialogTitle = __toESM(require("@mui/material/DialogTitle"));
-var import_DialogContent = __toESM(require("@mui/material/DialogContent"));
-var import_DialogActions = __toESM(require("@mui/material/DialogActions"));
-var import_IconButton = __toESM(require("@mui/material/IconButton"));
-var import_Close = __toESM(require("@mui/icons-material/Close"));
-var import_ChevronLeft = __toESM(require("@mui/icons-material/ChevronLeft"));
-var import_Box = __toESM(require("@mui/material/Box"));
-var import_AppBar = __toESM(require("@mui/material/AppBar"));
-var import_Toolbar = __toESM(require("@mui/material/Toolbar"));
-var import_Typography = __toESM(require("@mui/material/Typography"));
-var import_Slide = __toESM(require("@mui/material/Slide"));
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var SlideTransition = (0, import_react5.forwardRef)(function SlideTransition2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Slide.default, { direction: "left", ref, ...props });
-});
-var KdsModal = ({
-  open,
-  onClose,
-  title,
-  children,
-  footer,
-  size = "sm",
-  showCloseButton = true,
-  fullScreen = false,
-  ...props
-}) => {
-  if (fullScreen) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      import_Dialog.default,
-      {
-        open,
-        onClose,
-        fullScreen: true,
-        TransitionComponent: SlideTransition,
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_AppBar.default,
-            {
-              sx: {
-                position: "relative",
-                backgroundColor: "background.paper",
-                color: "text.primary",
-                boxShadow: 0,
-                py: 1
-              },
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_Toolbar.default, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  import_IconButton.default,
-                  {
-                    edge: "start",
-                    color: "inherit",
-                    onClick: onClose,
-                    "aria-label": "Cerrar",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ChevronLeft.default, {})
-                  }
-                ),
-                title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Typography.default, { sx: { ml: 1, flex: 1 }, fontWeight: 600, variant: "h6", component: "div", children: title })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_DialogContent.default, { sx: { px: 5, py: 5 }, children }),
-          footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_DialogActions.default, { sx: { px: 3, py: 2, gap: 1 }, children: footer })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    import_Dialog.default,
-    {
-      open,
-      onClose,
-      maxWidth: size,
-      fullWidth: true,
-      PaperProps: {
-        sx: {
-          borderRadius: "12px",
-          boxShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)"
-        }
-      },
-      ...props,
-      children: [
-        (title || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-          import_DialogTitle.default,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: title ? "space-between" : "flex-end",
-              fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-              fontFeatureSettings: "'liga' off, 'clig' off",
-              fontWeight: 600,
-              fontSize: "1.25rem",
-              lineHeight: "32px",
-              letterSpacing: "0.15px",
-              textAlign: "center",
-              py: 2,
-              px: 3
-            },
-            children: [
-              title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Box.default, { sx: { flex: 1 }, children: title }),
-              showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                import_IconButton.default,
-                {
-                  "aria-label": "Cerrar",
-                  onClick: onClose,
-                  sx: {
-                    color: "text.secondary",
-                    ml: "auto"
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Close.default, {})
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_DialogContent.default,
-          {
-            sx: {
-              px: 3,
-              py: 2
-            },
-            children
-          }
-        ),
-        footer && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_DialogActions.default,
-          {
-            sx: {
-              px: 3,
-              py: 2,
-              gap: 1
-            },
-            children: footer
-          }
-        )
-      ]
-    }
-  );
-};
-KdsModal.displayName = "KdsModal";
-
-// src/components/core/KdsCard/KdsCard.tsx
-var import_react6 = require("react");
-var import_Card = __toESM(require("@mui/material/Card"));
-var import_CardHeader = __toESM(require("@mui/material/CardHeader"));
-var import_CardContent = __toESM(require("@mui/material/CardContent"));
-var import_CardActions = __toESM(require("@mui/material/CardActions"));
-var import_CardActionArea = __toESM(require("@mui/material/CardActionArea"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var paddingMap = {
-  none: "0",
-  sm: "8px 16px",
-  // Compact
-  md: "10px 20px",
-  // Figma default (bank selection cards)
-  lg: "16px 20px"
-  // Spacious
-};
-var KdsCard = (0, import_react6.forwardRef)(
-  ({
-    variant = "elevation",
-    elevation = 1,
-    padding,
-    clickable = false,
-    onCardClick,
-    children,
-    sx,
-    ...props
-  }, ref) => {
-    const cardContent = clickable ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CardActionArea.default, { onClick: onCardClick, children }) : children;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_Card.default,
-      {
-        ref,
-        variant,
-        elevation: variant === "elevation" ? elevation : 0,
-        sx: {
-          borderRadius: "6px",
-          ...variant === "outlined" && {
-            border: "1px solid rgba(0, 0, 0, 0.42)"
-          },
-          ...padding && {
-            padding: paddingMap[padding]
-          },
-          ...sx
-        },
-        ...props,
-        children: cardContent
-      }
-    );
-  }
-);
-KdsCard.displayName = "KdsCard";
-var KdsCardHeader = (0, import_react6.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CardHeader.default, { ref, ...props });
-  }
-);
-KdsCardHeader.displayName = "KdsCardHeader";
-var KdsCardContent = (0, import_react6.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CardContent.default, { ref, ...props });
-  }
-);
-KdsCardContent.displayName = "KdsCardContent";
-var KdsCardActions = (0, import_react6.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_CardActions.default, { ref, ...props });
-  }
-);
-KdsCardActions.displayName = "KdsCardActions";
-
-// src/components/core/KdsSpinner/KdsSpinner.tsx
-var import_CircularProgress2 = __toESM(require("@mui/material/CircularProgress"));
-var import_Box2 = __toESM(require("@mui/material/Box"));
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var sizeMap = {
-  small: 20,
-  medium: 40,
-  large: 60
-};
-var KdsSpinner = ({
-  size = "medium",
-  color = "primary",
-  customSize,
-  label = "Cargando...",
-  sx,
-  ...props
-}) => {
-  const spinnerSize = customSize || sizeMap[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    import_Box2.default,
-    {
-      sx: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      role: "progressbar",
-      "aria-label": label,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        import_CircularProgress2.default,
-        {
-          size: spinnerSize,
-          color,
-          sx,
-          ...props
-        }
-      )
-    }
-  );
-};
-KdsSpinner.displayName = "KdsSpinner";
-
-// src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
-var import_LinearProgress = __toESM(require("@mui/material/LinearProgress"));
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var KdsLinearProgress = ({
-  color = "info",
-  variant = "indeterminate",
-  value,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_LinearProgress.default,
-    {
-      color,
-      variant,
-      value,
-      sx: {
-        height: 4,
-        borderRadius: 0,
-        backgroundColor: "rgba(3, 169, 244, 0.4)",
-        "& .MuiLinearProgress-bar": {
-          backgroundColor: "#03A9F4"
-        },
-        ...sx
-      },
-      ...props
-    }
-  );
-};
-KdsLinearProgress.displayName = "KdsLinearProgress";
-
-// src/components/core/KdsAlert/KdsAlert.tsx
-var import_Alert = __toESM(require("@mui/material/Alert"));
-var import_AlertTitle = __toESM(require("@mui/material/AlertTitle"));
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var KdsAlert = ({
-  severity = "info",
-  variant = "standard",
-  title,
-  children,
-  onClose,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-    import_Alert.default,
-    {
-      severity,
-      variant,
-      onClose,
-      sx: {
-        borderRadius: "4px",
-        fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-        fontFeatureSettings: "'liga' off, 'clig' off",
-        fontSize: "0.875rem",
-        lineHeight: 1.43,
-        letterSpacing: "0.17px",
-        ...sx
-      },
-      ...props,
-      children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_AlertTitle.default, { children: title }),
-        children
-      ]
-    }
-  );
-};
-KdsAlert.displayName = "KdsAlert";
-
-// src/components/core/KdsTypography/KdsTypography.tsx
-var import_react7 = require("react");
-var import_Typography2 = __toESM(require("@mui/material/Typography"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var colorMap = {
-  primary: "#272930",
-  // onSurface
-  secondary: "rgba(0, 0, 0, 0.60)",
-  tertiary: "#81848F",
-  disabled: "#9797A5",
-  error: "#D32F2F",
-  success: "#2E7D32",
-  info: "#0288D1",
-  inherit: "inherit"
-};
-var fontFeatureSettings = "'liga' off, 'clig' off";
-var variantStyles = {
-  // Display variants
-  display1: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 700,
-    fontSize: "2.5rem",
-    // 40px
-    lineHeight: 1.2,
-    letterSpacing: "-0.01562em"
-  },
-  display2: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 700,
-    fontSize: "2rem",
-    // 32px
-    lineHeight: 1.2,
-    letterSpacing: "-0.00833em"
-  },
-  // Heading variants
-  heading1: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 600,
-    fontSize: "1.75rem",
-    // 28px
-    lineHeight: 1.2,
-    letterSpacing: 0
-  },
-  heading2: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 600,
-    fontSize: "1.5rem",
-    // 24px
-    lineHeight: 1.235,
-    letterSpacing: "0.00735em"
-  },
-  heading3: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 600,
-    fontSize: "1.25rem",
-    // 20px
-    lineHeight: "32px",
-    letterSpacing: "0.15px"
-  },
-  // Body variants
-  bodyLarge: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 400,
-    fontSize: "1rem",
-    // 16px
-    lineHeight: 1.5,
-    letterSpacing: "0.15px"
-  },
-  body: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 400,
-    fontSize: "0.875rem",
-    // 14px
-    lineHeight: 1.43,
-    letterSpacing: "0.17px"
-  },
-  bodySmall: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 400,
-    fontSize: "0.75rem",
-    // 12px
-    lineHeight: 1.66,
-    letterSpacing: "0.4px"
-  },
-  // Label variants
-  label: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 400,
-    fontSize: "0.75rem",
-    // 12px
-    lineHeight: "15px",
-    letterSpacing: "1px",
-    textTransform: "uppercase"
-  },
-  labelSmall: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 500,
-    fontSize: "0.625rem",
-    // 10px
-    lineHeight: "14px",
-    letterSpacing: 0
-  },
-  // Card variants
-  cardTitle: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 600,
-    fontSize: "1rem",
-    // 16px
-    lineHeight: "24px",
-    letterSpacing: "0.15px"
-  },
-  cardSubtitle: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 600,
-    fontSize: "0.875rem",
-    // 14px
-    lineHeight: "20px",
-    letterSpacing: "0.15px"
-  },
-  // Semantic variants
-  muted: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 400,
-    fontSize: "0.875rem",
-    // 14px
-    lineHeight: 1.43,
-    letterSpacing: "0.17px",
-    color: "#81848F"
-  },
-  link: {
-    fontFamily: '"Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    fontFeatureSettings,
-    fontWeight: 400,
-    fontSize: "0.875rem",
-    // 14px
-    lineHeight: 1.43,
-    letterSpacing: "0.17px",
-    color: "#0288D1",
-    textDecoration: "none",
-    cursor: "pointer",
-    "&:hover": {
-      textDecoration: "underline"
-    }
-  }
-};
-var muiVariantMap = {
+  )
+);
+KdsAlert.displayName = "KdsAlert";
+
+// src/components/core/KdsTypography/KdsTypography.tsx
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+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 = (0, import_react7.forwardRef)(
-  ({ variant = "body", color = "primary", truncate, maxLines, sx, ...props }, ref) => {
-    const isCustomVariant = typeof variant === "string" && isKhipuVariant(variant);
-    const combinedSx = [
-      // Apply custom variant styles if it's a Khipu variant
-      isCustomVariant ? variantStyles[variant] : {},
-      // Apply color (unless it's muted or link which have built-in colors)
-      isCustomVariant && variant !== "muted" && variant !== "link" && color ? { color: colorMap[color] || color } : {},
-      // Truncation styles
-      truncate ? {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        ...maxLines ? {
-          display: "-webkit-box",
-          WebkitLineClamp: maxLines,
-          WebkitBoxOrient: "vertical"
-        } : {
-          whiteSpace: "nowrap"
-        }
-      } : {},
-      // User-provided sx
-      ...Array.isArray(sx) ? sx : [sx]
-    ];
+var KdsTypography = (0, import_react9.forwardRef)(
+  ({ variant = "body", color, as, children, className, ...props }, ref) => {
+    const Tag = as || variantTag[variant];
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_Typography2.default,
+      Tag,
       {
         ref,
-        variant: isCustomVariant ? muiVariantMap[variant] : variant,
-        sx: combinedSx,
-        ...props
+        className: (0, import_clsx.clsx)(
+          `kds-text-${variant}`,
+          color && color !== "inherit" && `kds-text-${color}`,
+          className
+        ),
+        ...props,
+        children
       }
     );
   }
@@ -2548,117 +1394,98 @@ var KdsTypography = (0, import_react7.forwardRef)(
 KdsTypography.displayName = "KdsTypography";
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-var import_react8 = require("react");
-var import_Tabs = __toESM(require("@mui/material/Tabs"));
-var import_Tab = __toESM(require("@mui/material/Tab"));
-var import_Box3 = __toESM(require("@mui/material/Box"));
+var import_react11 = __toESM(require("react"));
+
+// src/components/core/hooks/useTabsKeyboard.ts
+var import_react10 = require("react");
+function useTabsKeyboard(tabCount, activeIndex, onChange) {
+  const onKeyDown = (0, import_react10.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
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var TabsContext = (0, import_react8.createContext)(null);
-var KdsTab = (0, import_react8.forwardRef)(
-  ({ label, value, icon, disabled = false, sx, ...props }, ref) => {
+var KdsTabs = (0, import_react11.forwardRef)(
+  ({ activeIndex, onChange, variant = "standard", children, className, style, ...props }, ref) => {
+    const tabCount = import_react11.Children.count(children);
+    const { onKeyDown } = useTabsKeyboard(tabCount, activeIndex, onChange);
+    const mergedStyle = (0, import_react11.useMemo)(() => {
+      if (variant !== "segmented") return style;
+      return {
+        ...style,
+        "--_tab-count": tabCount,
+        "--_active-idx": activeIndex
+      };
+    }, [variant, tabCount, activeIndex, style]);
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_Tab.default,
+      "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: (0, import_clsx.clsx)(variant === "segmented" ? "kds-segmented-tabs" : "kds-tabs", className),
+        style: mergedStyle,
+        onKeyDown,
+        ...props,
+        children: import_react11.Children.map(children, (child, i) => {
+          if (!import_react11.default.isValidElement(child)) return child;
+          return import_react11.default.cloneElement(child, {
+            _active: i === activeIndex,
+            _onClick: () => onChange(i)
+          });
+        })
       }
     );
   }
 );
+KdsTabs.displayName = "KdsTabs";
+var KdsTab = (0, import_react11.forwardRef)(
+  ({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "button",
+    {
+      ref,
+      role: "tab",
+      "aria-selected": _active,
+      tabIndex: _active ? 0 : -1,
+      className: (0, import_clsx.clsx)(_active && "active", className),
+      onClick: _onClick,
+      ...props,
+      children
+    }
+  )
+);
 KdsTab.displayName = "KdsTab";
-var KdsTabPanel = (0, import_react8.forwardRef)(
-  ({ value, selectedValue, children, sx, ...props }, ref) => {
-    const isSelected = value === selectedValue;
-    if (!isSelected) {
-      return null;
+var KdsTabPanel = (0, import_react11.forwardRef)(
+  ({ active, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      ref,
+      role: "tabpanel",
+      hidden: !active,
+      className,
+      ...props,
+      children
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_Box3.default,
-      {
-        ref,
-        role: "tabpanel",
-        id: `tabpanel-${value}`,
-        "aria-labelledby": `tab-${value}`,
-        sx: {
-          width: "100%",
-          ...sx
-        },
-        ...props,
-        children
-      }
-    );
-  }
+  )
 );
 KdsTabPanel.displayName = "KdsTabPanel";
-var KdsTabs = (0, import_react8.forwardRef)(
-  ({
-    value,
-    onChange,
-    color = "info",
-    variant = "fullWidth",
-    children,
-    sx,
-    ...props
-  }, ref) => {
-    const indicatorColor = color === "info" ? colors.info.main : color === "primary" ? colors.primary.main : colors.secondary.main;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabsContext.Provider, { value: { value, onChange }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_Tabs.default,
-      {
-        ref,
-        value,
-        onChange,
-        variant,
-        textColor: "inherit",
-        TabIndicatorProps: {
-          sx: {
-            backgroundColor: indicatorColor,
-            height: "2px"
-          }
-        },
-        sx: {
-          width: "100%",
-          minHeight: "42px",
-          "& .MuiTabs-flexContainer": {
-            width: "100%"
-          },
-          ...sx
-        },
-        ...props,
-        children
-      }
-    ) });
-  }
-);
-KdsTabs.displayName = "KdsTabs";
 
 // src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
-var import_react9 = require("react");
-var import_Box4 = __toESM(require("@mui/material/Box"));
-var import_IconButton2 = __toESM(require("@mui/material/IconButton"));
-var import_Close2 = __toESM(require("@mui/icons-material/Close"));
+var import_react12 = require("react");
 
 // src/assets/images/khipu-logo-color.svg
 var khipu_logo_color_default = "./khipu-logo-color-TV75AKOV.svg";
@@ -2666,33 +1493,20 @@ var khipu_logo_color_default = "./khipu-logo-color-TV75AKOV.svg";
 // src/components/core/KdsLogoHeader/KdsLogoHeader.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var KhipuLogo = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-  import_Box4.default,
+  "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 = (0, import_react9.forwardRef)(
-  ({ children, sx, ...props }, ref) => {
+var KdsLogoHeaderLogo = (0, import_react12.forwardRef)(
+  ({ children, className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_Box4.default,
+      "div",
       {
         ref,
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          height: "15px",
-          overflow: "hidden",
-          ...sx
-        },
+        className: (0, import_clsx.clsx)("kds-logo-header-logo", className),
         ...props,
         children: children || /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(KhipuLogo, {})
       }
@@ -2700,21 +1514,13 @@ var KdsLogoHeaderLogo = (0, import_react9.forwardRef)(
   }
 );
 KdsLogoHeaderLogo.displayName = "KdsLogoHeaderLogo";
-var KdsLogoHeaderSeparator = (0, import_react9.forwardRef)(
-  ({ children = "|", sx, ...props }, ref) => {
+var KdsLogoHeaderSeparator = (0, import_react12.forwardRef)(
+  ({ children = "|", className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_Box4.default,
+      "span",
       {
         ref,
-        component: "span",
-        sx: {
-          fontFamily: fontFamilies.secondary,
-          fontWeight: fontWeights.medium,
-          fontSize: "10px",
-          lineHeight: "14px",
-          color: "#9797A5",
-          ...sx
-        },
+        className: (0, import_clsx.clsx)("kds-logo-header-separator", className),
         ...props,
         children
       }
@@ -2722,22 +1528,13 @@ var KdsLogoHeaderSeparator = (0, import_react9.forwardRef)(
   }
 );
 KdsLogoHeaderSeparator.displayName = "KdsLogoHeaderSeparator";
-var KdsLogoHeaderCode = (0, import_react9.forwardRef)(
-  ({ children, sx, ...props }, ref) => {
+var KdsLogoHeaderCode = (0, import_react12.forwardRef)(
+  ({ children, className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_Box4.default,
+      "span",
       {
         ref,
-        component: "span",
-        sx: {
-          fontFamily: fontFamilies.primary,
-          fontWeight: fontWeights.medium,
-          fontSize: "9px",
-          lineHeight: "14px",
-          color: "#9797A5",
-          whiteSpace: "nowrap",
-          ...sx
-        },
+        className: (0, import_clsx.clsx)("kds-logo-header-code", className),
         ...props,
         children
       }
@@ -2745,55 +1542,29 @@ var KdsLogoHeaderCode = (0, import_react9.forwardRef)(
   }
 );
 KdsLogoHeaderCode.displayName = "KdsLogoHeaderCode";
-var KdsLogoHeaderCloseButton = (0, import_react9.forwardRef)(
-  ({ onClose, sx, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_Box4.default,
+var KdsLogoHeaderCloseButton = (0, import_react12.forwardRef)(
+  ({ onClose, className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "kds-logo-header-close-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "button",
       {
-        sx: {
-          flex: 1,
-          display: "flex",
-          justifyContent: "flex-end"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          import_IconButton2.default,
-          {
-            ref,
-            onClick: onClose,
-            size: "small",
-            "aria-label": "close",
-            sx: {
-              color: colors.action.active,
-              padding: 0,
-              "&:hover": {
-                backgroundColor: colors.action.hover
-              },
-              ...sx
-            },
-            ...props,
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Close2.default, { sx: { fontSize: 24 } })
-          }
-        )
+        ref,
+        onClick: onClose,
+        className: (0, import_clsx.clsx)("kds-btn kds-btn-icon", className),
+        "aria-label": "close",
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("i", { className: "material-symbols-outlined", children: "close" })
       }
-    );
+    ) });
   }
 );
 KdsLogoHeaderCloseButton.displayName = "KdsLogoHeaderCloseButton";
-var KdsLogoHeader = (0, import_react9.forwardRef)(
-  ({ children, sx, ...props }, ref) => {
+var KdsLogoHeader = (0, import_react12.forwardRef)(
+  ({ children, className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_Box4.default,
+      "div",
       {
         ref,
-        sx: {
-          display: "flex",
-          alignItems: "center",
-          gap: spacing[2],
-          paddingX: semanticSpacing.card.paddingX,
-          paddingY: semanticSpacing.card.paddingY,
-          backgroundColor: colors.background.default,
-          ...sx
-        },
+        className: (0, import_clsx.clsx)("kds-brand-row", className),
         ...props,
         children
       }
@@ -2803,347 +1574,593 @@ var KdsLogoHeader = (0, import_react9.forwardRef)(
 KdsLogoHeader.displayName = "KdsLogoHeader";
 
 // src/components/core/KdsRadioGroup/KdsRadioGroup.tsx
-var import_react10 = require("react");
-var import_RadioGroup = __toESM(require("@mui/material/RadioGroup"));
-var import_Radio = __toESM(require("@mui/material/Radio"));
-var import_FormControl = __toESM(require("@mui/material/FormControl"));
-var import_FormControlLabel2 = __toESM(require("@mui/material/FormControlLabel"));
-var import_FormLabel = __toESM(require("@mui/material/FormLabel"));
+var import_react13 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var KdsRadio = (0, import_react10.forwardRef)(
-  ({ color = "primary", size = "medium", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Radio.default, { ref, color, size, ...props });
-  }
-);
-KdsRadio.displayName = "KdsRadio";
-var KdsRadioGroup = (0, import_react10.forwardRef)(
-  ({
-    label,
-    options,
-    color = "primary",
-    size = "medium",
-    required = false,
-    disabled = false,
-    error = false,
-    children,
-    ...props
-  }, ref) => {
-    const radioGroup = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_RadioGroup.default, { ref, ...props, children: options ? options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      import_FormControlLabel2.default,
-      {
-        value: option.value,
-        disabled: disabled || option.disabled,
-        control: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Radio.default, { color, size }),
-        label: option.label
-      },
-      option.value
-    )) : children });
-    if (label) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_FormControl.default, { required, disabled, error, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_FormLabel.default, { children: label }),
-        radioGroup
-      ] });
-    }
-    return radioGroup;
-  }
+var KdsRadioGroup = (0, import_react13.forwardRef)(
+  ({ label, name, options, value, onChange, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("fieldset", { ref, className: (0, import_clsx.clsx)("kds-radio-group", className), ...props, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("legend", { children: label }),
+    options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("label", { className: "field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: opt.value,
+          checked: value === opt.value,
+          disabled: opt.disabled,
+          onChange: () => onChange?.(opt.value)
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: opt.label })
+    ] }, opt.value))
+  ] })
 );
 KdsRadioGroup.displayName = "KdsRadioGroup";
 
 // src/components/core/KdsSelect/KdsSelect.tsx
-var import_react11 = require("react");
-var import_Select = __toESM(require("@mui/material/Select"));
-var import_MenuItem = __toESM(require("@mui/material/MenuItem"));
-var import_FormControl2 = __toESM(require("@mui/material/FormControl"));
-var import_InputLabel = __toESM(require("@mui/material/InputLabel"));
-var import_FormHelperText = __toESM(require("@mui/material/FormHelperText"));
+var import_react14 = require("react");
+var Select = __toESM(require("@radix-ui/react-select"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var KdsMenuItem = (0, import_react11.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_MenuItem.default, { ref, ...props });
-  }
-);
-KdsMenuItem.displayName = "KdsMenuItem";
-var KdsSelect = (0, import_react11.forwardRef)(
+var KdsSelectRoot = (0, import_react14.forwardRef)(
   ({
-    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__ */ (0, import_jsx_runtime14.jsxs)(
-      import_FormControl2.default,
-      {
-        variant,
-        size,
-        fullWidth,
-        error,
-        required,
-        disabled,
-        children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_InputLabel.default, { id: labelId, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_Select.default,
-            {
-              ref,
-              labelId,
-              label,
-              variant,
-              size,
-              ...props,
-              children: options ? options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                import_MenuItem.default,
-                {
-                  value: option.value,
-                  disabled: option.disabled,
-                  children: option.label
-                },
-                option.value
-              )) : children
-            }
-          ),
-          helperText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_FormHelperText.default, { children: helperText })
-        ]
-      }
-    );
-  }
+    className
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      ref,
+      className: (0, import_clsx.clsx)(
+        "kds-select",
+        error && "kds-select-error",
+        fullWidth && "kds-select-full",
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { className: "kds-select-label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Select.Root, { value, onValueChange, disabled, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Select.Trigger, { className: "kds-select-trigger", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Value, { placeholder }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Icon, { className: "kds-select-icon", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("i", { className: "material-symbols-outlined", children: "expand_more" }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Content, { className: "kds-select-content", position: "popper", sideOffset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.Viewport, { className: "kds-select-viewport", children }) }) })
+        ] }),
+        helperText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: (0, import_clsx.clsx)("kds-select-helper", error && "kds-select-helper-error"), children: helperText })
+      ]
+    }
+  )
+);
+KdsSelectRoot.displayName = "KdsSelect";
+var KdsSelectItem = (0, import_react14.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Select.Item, { ref, className: (0, import_clsx.clsx)("kds-select-item", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.ItemText, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Select.ItemIndicator, { className: "kds-select-item-indicator", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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
-var import_react12 = require("react");
-var import_Chip = __toESM(require("@mui/material/Chip"));
+var import_react15 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var KdsChip = (0, import_react12.forwardRef)(
-  ({
-    variant = "filled",
-    color = "default",
-    size = "medium",
-    sx,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      import_Chip.default,
-      {
-        ref,
-        variant,
-        color,
-        size,
-        sx: {
-          borderRadius: "4px",
-          ...sx
-        },
-        ...props
-      }
-    );
-  }
+var KdsChip = (0, import_react15.forwardRef)(
+  ({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { ref, className: (0, import_clsx.clsx)("kds-badge", color, className), ...props, children: [
+    icon && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", { className: "material-symbols-outlined", children: icon }),
+    children,
+    onDelete && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { className: "kds-btn kds-btn-text kds-btn-sm", onClick: onDelete, "aria-label": "Eliminar", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", { className: "material-symbols-outlined", children: "close" }) })
+  ] })
 );
 KdsChip.displayName = "KdsChip";
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-var import_react13 = require("react");
-var import_Snackbar = __toESM(require("@mui/material/Snackbar"));
-var import_IconButton3 = __toESM(require("@mui/material/IconButton"));
-var import_Close3 = __toESM(require("@mui/icons-material/Close"));
+var import_react17 = require("react");
+
+// src/components/core/hooks/useAutoHide.ts
+var import_react16 = require("react");
+function useAutoHide(durationMs, onHide) {
+  const [visible, setVisible] = (0, import_react16.useState)(true);
+  const onHideRef = (0, import_react16.useRef)(onHide);
+  onHideRef.current = onHide;
+  (0, import_react16.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
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var KdsSnackbar = (0, import_react13.forwardRef)(
-  ({
-    vertical = "bottom",
-    horizontal = "center",
-    showCloseButton = false,
-    onClose,
-    ...props
-  }, ref) => {
-    const action = showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_IconButton3.default,
-      {
-        size: "small",
-        "aria-label": "Cerrar",
-        color: "inherit",
-        onClick: (e) => onClose?.(e, "escapeKeyDown"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Close3.default, { fontSize: "small" })
-      }
-    ) : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      import_Snackbar.default,
-      {
-        ref,
-        anchorOrigin: { vertical, horizontal },
-        onClose,
-        action: props.action || action,
-        ...props
-      }
-    );
+var KdsSnackbar = (0, import_react17.forwardRef)(
+  ({ message, type, duration = 5e3, onClose, open = true, className, ...props }, ref) => {
+    const { visible } = useAutoHide(duration, onClose);
+    if (!open || !visible) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref, role: "status", className: (0, import_clsx.clsx)("snackbar", "active", type, className), ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: message }),
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("button", { onClick: onClose, "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", children: "close" }) })
+    ] });
   }
 );
 KdsSnackbar.displayName = "KdsSnackbar";
 
 // src/components/core/KdsTooltip/KdsTooltip.tsx
-var import_Tooltip = __toESM(require("@mui/material/Tooltip"));
+var Tooltip = __toESM(require("@radix-ui/react-tooltip"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var KdsTooltip = ({
-  arrow = false,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Tooltip.default, { arrow, ...props });
-};
-KdsTooltip.displayName = "KdsTooltip";
+function KdsTooltip({
+  content,
+  children,
+  placement = "top",
+  className,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration = 300
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Provider, { delayDuration, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip.Content, { className: (0, import_clsx.clsx)("kds-tooltip", className), side: placement, sideOffset: 4, children: [
+      content,
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Tooltip.Arrow, { className: "kds-tooltip-arrow" })
+    ] }) })
+  ] }) });
+}
 
 // src/components/core/KdsAccordion/KdsAccordion.tsx
-var import_react14 = require("react");
-var import_Accordion = __toESM(require("@mui/material/Accordion"));
-var import_AccordionSummary = __toESM(require("@mui/material/AccordionSummary"));
-var import_AccordionDetails = __toESM(require("@mui/material/AccordionDetails"));
-var import_ExpandMore = __toESM(require("@mui/icons-material/ExpandMore"));
+var import_react18 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var KdsAccordionSummary = (0, import_react14.forwardRef)(
-  ({ expandIcon, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_AccordionSummary.default,
-      {
-        ref,
-        expandIcon: expandIcon || /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_ExpandMore.default, {}),
-        ...props
+var KdsAccordion = (0, import_react18.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("details", { ref, className: (0, import_clsx.clsx)("kds-accordion", className), ...props, children })
+);
+KdsAccordion.displayName = "KdsAccordion";
+var KdsAccordionSummary = (0, import_react18.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("summary", { ref, className: (0, import_clsx.clsx)("kds-accordion-summary", className), ...props, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("i", { className: "material-symbols-outlined", children: "expand_more" })
+  ] })
+);
+KdsAccordionSummary.displayName = "KdsAccordionSummary";
+var KdsAccordionDetails = (0, import_react18.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-accordion-details", className), ...props, children })
+);
+KdsAccordionDetails.displayName = "KdsAccordionDetails";
+
+// src/components/core/KdsDivider/KdsDivider.tsx
+var import_react19 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var KdsDivider = (0, import_react19.forwardRef)(
+  ({ dashed, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("hr", { ref, className: (0, import_clsx.clsx)(dashed ? "kds-hr-dashed" : "kds-hr", className), ...props })
+);
+KdsDivider.displayName = "KdsDivider";
+
+// src/components/core/KdsSectionNote/KdsSectionNote.tsx
+var import_react20 = require("react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var KdsSectionNote = (0, import_react20.forwardRef)(
+  ({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { ref, className: (0, import_clsx.clsx)("kds-section-note", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("i", { className: "material-symbols-outlined", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children })
+  ] })
+);
+KdsSectionNote.displayName = "KdsSectionNote";
+
+// src/components/core/KdsStatusBlock/KdsStatusBlock.tsx
+var import_react21 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var KdsStatusBlock = (0, import_react21.forwardRef)(
+  ({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h2", { className: "kds-status-block-title", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "kds-status-block-description", children: description })
+    ] })
+  ] })
+);
+KdsStatusBlock.displayName = "KdsStatusBlock";
+
+// src/components/core/KdsStepper/KdsStepper.tsx
+var import_react22 = require("react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var KdsStepper = (0, import_react22.forwardRef)(
+  ({ steps, current, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-stepper", className), "data-steps": steps, "data-current": current, ...props, children: Array.from({ length: steps }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: (0, import_clsx.clsx)("kds-step", i < current && "completed", i === current && "current"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "kds-step-indicator", children: i < current ? "\u2713" : i + 1 }),
+    i < steps - 1 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "kds-step-line" })
+  ] }, i)) })
+);
+KdsStepper.displayName = "KdsStepper";
+
+// src/components/core/KdsCopyRow/KdsCopyRow.tsx
+var import_react24 = require("react");
+
+// src/components/core/hooks/useCopyToClipboard.ts
+var import_react23 = require("react");
+function useCopyToClipboard(resetMs = 1200) {
+  const [copied, setCopied] = (0, import_react23.useState)(false);
+  const copy = (0, import_react23.useCallback)(
+    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
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var KdsCopyRow = (0, import_react24.forwardRef)(
+  ({ label, value, className, ...props }, ref) => {
+    const { copied, copy } = useCopyToClipboard();
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-copy-row", copied && "copied", className), ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "kds-copy-row-label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "kds-copy-row-value", children: value }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { className: "kds-copy-row-btn", onClick: () => copy(value), "aria-label": `Copiar ${label}`, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("i", { className: "material-symbols-outlined", children: copied ? "check" : "content_copy" }) })
+    ] });
   }
 );
-KdsAccordionSummary.displayName = "KdsAccordionSummary";
-var KdsAccordionDetails = (0, import_react14.forwardRef)(
-  (props, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_AccordionDetails.default, { ref, ...props });
+KdsCopyRow.displayName = "KdsCopyRow";
+
+// src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
+var import_react25 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var KdsCopyableTable = (0, import_react25.forwardRef)(
+  ({ 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__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-copyable-table", className), ...props, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "kds-copyable-table-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-copyable-table-label", children: row.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-copyable-table-value", children: row.value })
+      ] }, row.label)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("button", { className: `kds-btn kds-btn-outlined kds-btn-block kds-copy-all-btn${copied ? " copied" : ""}`, onClick: handleCopyAll, "aria-label": "Copiar todo", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "kds-icon", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { className: "material-symbols-outlined", children: copied ? "check" : "content_copy" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: copied ? "Copiado" : "Copiar todos los datos" })
+      ] })
+    ] });
   }
 );
-KdsAccordionDetails.displayName = "KdsAccordionDetails";
-var KdsAccordion = (0, import_react14.forwardRef)(
-  ({
-    variant = "elevation",
-    sx,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_Accordion.default,
-      {
-        ref,
-        variant,
-        sx: {
-          borderRadius: "4px",
-          "&:before": { display: "none" },
-          ...sx
-        },
-        ...props
+KdsCopyableTable.displayName = "KdsCopyableTable";
+
+// src/components/core/KdsExpandPanel/KdsExpandPanel.tsx
+var import_react26 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var KdsExpandPanel = (0, import_react26.forwardRef)(
+  ({ label, defaultExpanded = false, children, className, ...props }, ref) => {
+    const [expanded, setExpanded] = (0, import_react26.useState)(defaultExpanded);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        "button",
+        {
+          className: "kds-expand-toggle",
+          onClick: () => setExpanded((v) => !v),
+          "aria-expanded": expanded,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { className: "material-symbols-outlined", children: expanded ? "expand_less" : "expand_more" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: (0, import_clsx.clsx)("kds-expand-panel", expanded && "open"), hidden: !expanded, children })
+    ] });
+  }
+);
+KdsExpandPanel.displayName = "KdsExpandPanel";
+
+// src/components/core/KdsCountdown/KdsCountdown.tsx
+var import_react28 = require("react");
+
+// src/components/core/hooks/useCountdown.ts
+var import_react27 = require("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] = (0, import_react27.useState)(() => calcRemaining(deadline));
+  (0, import_react27.useEffect)(() => {
+    const tick = () => setState(calcRemaining(deadline));
+    const id = setInterval(tick, 1e3);
+    return () => clearInterval(id);
+  }, [deadline]);
+  return state;
+}
+
+// src/components/core/KdsCountdown/KdsCountdown.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var KdsCountdown = (0, import_react28.forwardRef)(
+  ({ deadline, label, onExpire, className, ...props }, ref) => {
+    const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
+    const onExpireRef = (0, import_react28.useRef)(onExpire);
+    onExpireRef.current = onExpire;
+    (0, import_react28.useEffect)(() => {
+      if (expired) {
+        onExpireRef.current?.();
       }
-    );
+    }, [expired]);
+    if (expired) {
+      return null;
+    }
+    const pad = (n) => String(n).padStart(2, "0");
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-countdown", urgent && "urgent", className), ...props, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "kds-countdown-label", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "kds-countdown-value", children: [
+        pad(hours),
+        ":",
+        pad(minutes),
+        ":",
+        pad(seconds)
+      ] })
+    ] });
   }
 );
-KdsAccordion.displayName = "KdsAccordion";
+KdsCountdown.displayName = "KdsCountdown";
 
-// src/index.ts
-var import_Box5 = __toESM(require("@mui/material/Box"));
-var import_InputAdornment2 = __toESM(require("@mui/material/InputAdornment"));
-var import_Divider = __toESM(require("@mui/material/Divider"));
-var import_Link = __toESM(require("@mui/material/Link"));
-var import_IconButton4 = __toESM(require("@mui/material/IconButton"));
-var import_Stack = __toESM(require("@mui/material/Stack"));
-var import_Grid = __toESM(require("@mui/material/Grid"));
-var import_Container = __toESM(require("@mui/material/Container"));
-var import_Search = __toESM(require("@mui/icons-material/Search"));
-var import_ChevronRight = __toESM(require("@mui/icons-material/ChevronRight"));
-var import_ChevronLeft2 = __toESM(require("@mui/icons-material/ChevronLeft"));
-var import_Close4 = __toESM(require("@mui/icons-material/Close"));
-var import_Check = __toESM(require("@mui/icons-material/Check"));
-var import_CheckCircle = __toESM(require("@mui/icons-material/CheckCircle"));
-var import_Person = __toESM(require("@mui/icons-material/Person"));
-var import_Lock = __toESM(require("@mui/icons-material/Lock"));
-var import_LockOutlined = __toESM(require("@mui/icons-material/LockOutlined"));
-var import_MailOutline = __toESM(require("@mui/icons-material/MailOutline"));
-var import_ExpandMore2 = __toESM(require("@mui/icons-material/ExpandMore"));
-var import_ExpandLess = __toESM(require("@mui/icons-material/ExpandLess"));
-var import_Info = __toESM(require("@mui/icons-material/Info"));
-var import_Warning = __toESM(require("@mui/icons-material/Warning"));
-var import_Error = __toESM(require("@mui/icons-material/Error"));
-var import_Visibility = __toESM(require("@mui/icons-material/Visibility"));
-var import_VisibilityOff = __toESM(require("@mui/icons-material/VisibilityOff"));
-var import_ContentCopy = __toESM(require("@mui/icons-material/ContentCopy"));
-var import_KeyboardArrowUp = __toESM(require("@mui/icons-material/KeyboardArrowUp"));
-var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArrowDown"));
+// src/components/core/KdsSegmentedTabs/KdsSegmentedTabs.tsx
+var import_react29 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var KdsSegmentedTabs = (0, import_react29.forwardRef)(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(KdsTabs, { ref, variant: "segmented", ...props })
+);
+KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
+
+// src/components/domain/KdsBankRow/KdsBankRow.tsx
+var import_react30 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var KdsBankRow = (0, import_react30.forwardRef)(
+  ({ name, logoUrl, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: (0, import_clsx.clsx)("kds-bank-row", selected && "selected", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "kds-bank-row-logo", children: logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src: logoUrl, alt: name }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "initials", children: name.charAt(0) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "kds-bank-row-name", children: name }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { className: "material-symbols-outlined", children: selected ? "check_circle" : "chevron_right" })
+      ]
+    }
+  )
+);
+KdsBankRow.displayName = "KdsBankRow";
+
+// src/components/domain/KdsBankList/KdsBankList.tsx
+var import_react31 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var KdsBankList = (0, import_react31.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bank-list", className), role: "list", ...props, children })
+);
+KdsBankList.displayName = "KdsBankList";
+
+// src/components/domain/KdsBankModal/KdsBankModal.tsx
+var import_react32 = require("react");
+var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var KdsBankModal = (0, import_react32.forwardRef)(
+  ({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
+    const [query, setQuery] = (0, import_react32.useState)("");
+    const handleSearch = (value) => {
+      setQuery(value);
+      onSearch?.(value);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Root, { open, onOpenChange: (o) => {
+      if (!o) onClose();
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Overlay, { className: "kds-bank-modal-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Dialog2.Content, { ref, className: (0, import_clsx.clsx)("kds-bank-modal", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "kds-bank-modal-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("button", { className: "kds-bank-modal-close", "aria-label": "Cerrar", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("i", { className: "material-symbols-outlined", children: "close" }) }) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "kds-bank-modal-search", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        "input",
+        {
+          type: "text",
+          placeholder: searchPlaceholder,
+          value: query,
+          onChange: (e) => handleSearch(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "kds-bank-modal-body", children })
+    ] }) }) }) });
+  }
+);
+KdsBankModal.displayName = "KdsBankModal";
+
+// src/components/domain/KdsQrRow/KdsQrRow.tsx
+var import_react33 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var KdsQrRow = (0, import_react33.forwardRef)(
+  ({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("button", { ref, type: "button", className: (0, import_clsx.clsx)("kds-qr-row", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "kds-qr-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "title", children: name }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "sub", children: description })
+    ] }),
+    badge && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "kds-qr-badge", children: badge }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", { className: "material-symbols-outlined", children: "chevron_right" })
+  ] })
+);
+KdsQrRow.displayName = "KdsQrRow";
+
+// src/components/domain/KdsCardSelector/KdsCardSelector.tsx
+var import_react34 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var KdsCardSelector = (0, import_react34.forwardRef)(
+  ({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: (0, import_clsx.clsx)("kds-card-selector", selected && "selected", className),
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-card-selector-icon", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-card-selector-title", children: title }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "kds-card-selector-description", children: description })
+      ]
+    }
+  )
+);
+KdsCardSelector.displayName = "KdsCardSelector";
+
+// src/components/domain/KdsCardPlan/KdsCardPlan.tsx
+var import_react35 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var KdsCardPlan = (0, import_react35.forwardRef)(
+  ({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "div",
+    {
+      ref,
+      className: (0, import_clsx.clsx)("kds-card-plan", recommended && "recommended", className),
+      ...props,
+      children: [
+        badgeText && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "kds-card-plan-badge", children: badgeText }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "kds-card-plan-header", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { children: title }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "kds-card-plan-price", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: price }),
+          period && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { children: [
+            "/",
+            period
+          ] })
+        ] }),
+        features && features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ul", { className: "kds-card-plan-features", children: features.map((f, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { children: f }, i)) }),
+        action
+      ]
+    }
+  )
+);
+KdsCardPlan.displayName = "KdsCardPlan";
+
+// src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
+var import_react36 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var KdsInvoiceSticky = (0, import_react36.forwardRef)(
+  ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-card-elevated", "kds-invoice-sticky", className), ...props, children })
+);
+KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
+
+// src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
+var import_react37 = require("react");
+var Dialog3 = __toESM(require("@radix-ui/react-dialog"));
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var KdsBottomSheet = (0, import_react37.forwardRef)(
+  ({ open, onClose, title, children, actions, className, container }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog3.Root, { open, onOpenChange: (o) => {
+    if (!o) onClose();
+  }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog3.Portal, { container, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog3.Overlay, { className: "kds-bottom-sheet-scrim open", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Dialog3.Content, { ref, className: (0, import_clsx.clsx)("kds-bottom-sheet", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bottom-sheet-grabber" }),
+    title && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Dialog3.Title, { className: "kds-bottom-sheet-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bottom-sheet-body", children }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "kds-bottom-sheet-actions", children: actions })
+  ] }) }) }) })
+);
+KdsBottomSheet.displayName = "KdsBottomSheet";
+
+// src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
+var import_react38 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var KdsSecureFooter = (0, import_react38.forwardRef)(
+  ({ variant = "default", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("footer", { ref, className: (0, import_clsx.clsx)("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { className: "material-symbols-outlined", children: "lock" }),
+    children || /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "Pago seguro con Khipu" })
+  ] })
+);
+KdsSecureFooter.displayName = "KdsSecureFooter";
+
+// src/components/domain/KdsRecapList/KdsRecapList.tsx
+var import_react39 = require("react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var KdsRecapList = (0, import_react39.forwardRef)(
+  ({ items, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { ref, className: (0, import_clsx.clsx)("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "k", children: item.label }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: (0, import_clsx.clsx)("v", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
+  ] }, i)) })
+);
+KdsRecapList.displayName = "KdsRecapList";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Box,
-  CheckCircleIcon,
-  CheckIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CloseIcon,
-  Container,
-  ContentCopyIcon,
-  Divider,
-  ErrorIcon,
-  ExpandLessIcon,
-  ExpandMoreIcon,
-  Grid,
-  IconButton,
-  InfoIcon,
-  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,
-  KeyboardArrowDownIcon,
-  KeyboardArrowUpIcon,
-  KhipuThemeProvider,
-  Link,
-  LockIcon,
-  LockOutlinedIcon,
-  MailOutlineIcon,
-  PersonIcon,
-  SearchIcon,
-  Stack,
-  VisibilityIcon,
-  VisibilityOffIcon,
-  WarningIcon,
   borderRadius,
   breakpoints,
+  clsx,
   colors,
   colorsByMode,
   fontFamilies,
   fontSizes,
   fontWeights,
-  khipuTheme,
+  getContrastColor,
   letterSpacings,
+  lighten,
   lineHeights,
   semanticSpacing,
   shadows,
@@ -3152,5 +2169,9 @@ var import_KeyboardArrowDown = __toESM(require("@mui/icons-material/KeyboardArro
   tokensByMode,
   transitions,
   typography,
+  useAutoHide,
+  useCopyToClipboard,
+  useCountdown,
+  useTabsKeyboard,
   zIndex
 });