@khipu/design-system 0.3.4 → 0.3.5-alpha.2

package/dist/index.js

@@ -126,6 +126,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/theme/KdsThemeProvider.tsx
+var import_react = require("react");
+
 // src/components/core/utils.ts
 var import_clsx = require("clsx");
 function hexToRgb(hex) {
@@ -199,7 +202,70 @@ function formatTime(iso) {
 
 // src/theme/KdsThemeProvider.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var CARD_MIN_DELTA_PX = 8;
+var CARD_TRANSITION_MS = 280;
+var BODY_CARD_SELECTOR = ".kds-screen > .kds-card-elevated";
+var CARD_MARK_ATTRIBUTE = "data-kds-height-transition";
+function useCardHeightTransition() {
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    if (typeof Element.prototype.animate !== "function") {
+      return;
+    }
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    const observers = [];
+    const observe = (card) => {
+      if (card.getAttribute(CARD_MARK_ATTRIBUTE) === "on") {
+        return;
+      }
+      card.setAttribute(CARD_MARK_ATTRIBUTE, "on");
+      let previous = card.offsetHeight;
+      let animating = false;
+      const observer = new ResizeObserver(() => {
+        if (animating) {
+          return;
+        }
+        const next = card.offsetHeight;
+        if (Math.abs(next - previous) < CARD_MIN_DELTA_PX) {
+          previous = next;
+          return;
+        }
+        animating = true;
+        const animation = card.animate(
+          [{ height: `${previous}px` }, { height: `${next}px` }],
+          { duration: CARD_TRANSITION_MS, easing: "ease-out" }
+        );
+        previous = next;
+        animation.finished.then(() => {
+          animating = false;
+          previous = card.offsetHeight;
+        }).catch(() => {
+          animating = false;
+        });
+      });
+      observer.observe(card);
+      observers.push(observer);
+    };
+    document.querySelectorAll(BODY_CARD_SELECTOR).forEach(observe);
+    const tree = new MutationObserver(() => {
+      document.querySelectorAll(BODY_CARD_SELECTOR).forEach(observe);
+    });
+    tree.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      tree.disconnect();
+      observers.forEach((observer) => observer.disconnect());
+      document.querySelectorAll(BODY_CARD_SELECTOR).forEach((card) => {
+        card.removeAttribute(CARD_MARK_ATTRIBUTE);
+      });
+    };
+  }, []);
+}
 function KdsThemeProvider({ primaryColor, mode = "light", children }) {
+  useCardHeightTransition();
   const style = primaryColor ? {
     "--primary": primaryColor,
     "--on-primary": getContrastColor(primaryColor),
@@ -1181,9 +1247,9 @@ var tokens = {
 };
 
 // src/components/core/KdsButton/KdsButton.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var KdsButton = (0, import_react.forwardRef)(
+var KdsButton = (0, import_react2.forwardRef)(
   ({
     variant = "primary",
     size,
@@ -1227,9 +1293,9 @@ var KdsButton = (0, import_react.forwardRef)(
 KdsButton.displayName = "KdsButton";
 
 // src/components/core/KdsTextField/KdsTextField.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var KdsTextField = (0, import_react2.forwardRef)(
+var KdsTextField = (0, import_react3.forwardRef)(
   ({
     label,
     helperText,
@@ -1248,7 +1314,7 @@ var KdsTextField = (0, import_react2.forwardRef)(
     requiredMark = true,
     ...props
   }, ref) => {
-    const [revealed, setRevealed] = (0, import_react2.useState)(false);
+    const [revealed, setRevealed] = (0, import_react3.useState)(false);
     const fieldId = id || `kds-field-${label.toLowerCase().replace(/\s+/g, "-")}`;
     const isRevealable = !!revealable && !readOnly && !props.disabled;
     const inputType = isRevealable ? revealed ? "text" : "password" : type;
@@ -1317,9 +1383,9 @@ var KdsTextField = (0, import_react2.forwardRef)(
 KdsTextField.displayName = "KdsTextField";
 
 // src/components/core/KdsSearchField/KdsSearchField.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var KdsSearchField = (0, import_react3.forwardRef)(
+var KdsSearchField = (0, import_react4.forwardRef)(
   ({ className, withIcon = false, ...props }, ref) => {
     const input = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "input",
@@ -1342,9 +1408,9 @@ var KdsSearchField = (0, import_react3.forwardRef)(
 KdsSearchField.displayName = "KdsSearchField";
 
 // src/components/core/KdsCheckbox/KdsCheckbox.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var KdsCheckbox = (0, import_react4.forwardRef)(
+var KdsCheckbox = (0, import_react5.forwardRef)(
   ({ label, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { className: (0, import_clsx.clsx)("checkbox", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { ref, type: "checkbox", ...props }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: label })
@@ -1353,9 +1419,9 @@ var KdsCheckbox = (0, import_react4.forwardRef)(
 KdsCheckbox.displayName = "KdsCheckbox";
 
 // src/components/core/KdsCard/KdsCard.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var KdsCard = (0, import_react5.forwardRef)(
+var KdsCard = (0, import_react6.forwardRef)(
   ({ variant = "elevated", dimmed, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "article",
     {
@@ -1371,28 +1437,28 @@ var KdsCard = (0, import_react5.forwardRef)(
   )
 );
 KdsCard.displayName = "KdsCard";
-var KdsCardHeader = (0, import_react5.forwardRef)(
+var KdsCardHeader = (0, import_react6.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)(
+var KdsCardBody = (0, import_react6.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)(
+var KdsCardFooter = (0, import_react6.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_react7 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var SIZE_CLASS = {
   small: "small",
   medium: null,
   large: "large"
 };
-var KdsSpinner = (0, import_react6.forwardRef)(
+var KdsSpinner = (0, import_react7.forwardRef)(
   ({ size = "medium", label, className, ...props }, ref) => {
     const sizeClass = SIZE_CLASS[size];
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -1414,9 +1480,9 @@ var KdsSpinner = (0, import_react6.forwardRef)(
 KdsSpinner.displayName = "KdsSpinner";
 
 // src/components/core/KdsSecureLoader/KdsSecureLoader.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var KdsSecureLoader = (0, import_react7.forwardRef)(
+var KdsSecureLoader = (0, import_react8.forwardRef)(
   ({ title, message, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-secure-loader", className), role: "status", "aria-busy": "true", ...props, children: [
     (title || message) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "kds-secure-loader-text", children: [
       title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "kds-secure-loader-title", children: title }),
@@ -1442,13 +1508,13 @@ var KdsSecureLoader = (0, import_react7.forwardRef)(
 KdsSecureLoader.displayName = "KdsSecureLoader";
 
 // src/components/core/KdsCopyButton/KdsCopyButton.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/components/core/hooks/useCopyToClipboard.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useCopyToClipboard(resetMs = 1200) {
-  const [copied, setCopied] = (0, import_react8.useState)(false);
-  const copy = (0, import_react8.useCallback)(
+  const [copied, setCopied] = (0, import_react9.useState)(false);
+  const copy = (0, import_react9.useCallback)(
     async (text) => {
       try {
         await navigator.clipboard.writeText(text);
@@ -1464,7 +1530,7 @@ function useCopyToClipboard(resetMs = 1200) {
 
 // src/components/core/KdsCopyButton/KdsCopyButton.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var KdsCopyButton = (0, import_react9.forwardRef)(
+var KdsCopyButton = (0, import_react10.forwardRef)(
   ({ value, copiedText = "Copiado", className, ...props }, ref) => {
     const { copied, copy } = useCopyToClipboard();
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
@@ -1490,15 +1556,15 @@ var KdsCopyButton = (0, import_react9.forwardRef)(
 KdsCopyButton.displayName = "KdsCopyButton";
 
 // src/components/core/KdsLinearProgress/KdsLinearProgress.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var KdsLinearProgress = (0, import_react10.forwardRef)(
+var KdsLinearProgress = (0, import_react11.forwardRef)(
   ({ value, max = 100, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.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_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var DEFAULT_ICONS = {
   success: "check_circle",
@@ -1506,7 +1572,7 @@ var DEFAULT_ICONS = {
   warning: "warning",
   error: "error"
 };
-var KdsAlert = (0, import_react11.forwardRef)(
+var KdsAlert = (0, import_react12.forwardRef)(
   ({ severity, title, icon, inline, onClose, children, className, ...props }, ref) => {
     const resolvedIcon = icon === false ? null : typeof icon === "string" ? icon : DEFAULT_ICONS[severity];
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
@@ -1540,7 +1606,7 @@ var KdsAlert = (0, import_react11.forwardRef)(
 KdsAlert.displayName = "KdsAlert";
 
 // src/components/core/KdsTypography/KdsTypography.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var variantTag = {
   display1: "h1",
@@ -1561,7 +1627,7 @@ var variantTag = {
   link: "span",
   strong: "span"
 };
-var KdsTypography = (0, import_react12.forwardRef)(
+var KdsTypography = (0, import_react13.forwardRef)(
   ({ variant = "body", color, as, children, className, ...props }, ref) => {
     const Tag = as || variantTag[variant];
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -1582,12 +1648,12 @@ var KdsTypography = (0, import_react12.forwardRef)(
 KdsTypography.displayName = "KdsTypography";
 
 // src/components/core/KdsTabs/KdsTabs.tsx
-var import_react14 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 
 // src/components/core/hooks/useTabsKeyboard.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useTabsKeyboard(tabCount, activeIndex, onChange) {
-  const onKeyDown = (0, import_react13.useCallback)(
+  const onKeyDown = (0, import_react14.useCallback)(
     (e) => {
       let next = activeIndex;
       if (e.key === "ArrowRight") next = (activeIndex + 1) % tabCount;
@@ -1608,11 +1674,11 @@ function useTabsKeyboard(tabCount, activeIndex, onChange) {
 
 // src/components/core/KdsTabs/KdsTabs.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var KdsTabs = (0, import_react14.forwardRef)(
+var KdsTabs = (0, import_react15.forwardRef)(
   ({ activeIndex, onChange, children, className, style, ...props }, ref) => {
-    const tabCount = import_react14.Children.count(children);
+    const tabCount = import_react15.Children.count(children);
     const { onKeyDown } = useTabsKeyboard(tabCount, activeIndex, onChange);
-    const mergedStyle = (0, import_react14.useMemo)(
+    const mergedStyle = (0, import_react15.useMemo)(
       () => ({
         ...style,
         "--_tab-count": tabCount,
@@ -1629,9 +1695,9 @@ var KdsTabs = (0, import_react14.forwardRef)(
         style: mergedStyle,
         onKeyDown,
         ...props,
-        children: import_react14.Children.map(children, (child, i) => {
-          if (!import_react14.default.isValidElement(child)) return child;
-          return import_react14.default.cloneElement(child, {
+        children: import_react15.Children.map(children, (child, i) => {
+          if (!import_react15.default.isValidElement(child)) return child;
+          return import_react15.default.cloneElement(child, {
             _active: i === activeIndex,
             _onClick: () => onChange(i)
           });
@@ -1641,7 +1707,7 @@ var KdsTabs = (0, import_react14.forwardRef)(
   }
 );
 KdsTabs.displayName = "KdsTabs";
-var KdsTab = (0, import_react14.forwardRef)(
+var KdsTab = (0, import_react15.forwardRef)(
   ({ _active, _onClick, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
@@ -1658,7 +1724,7 @@ var KdsTab = (0, import_react14.forwardRef)(
   )
 );
 KdsTab.displayName = "KdsTab";
-var KdsTabPanel = (0, import_react14.forwardRef)(
+var KdsTabPanel = (0, import_react15.forwardRef)(
   ({ active, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
@@ -1674,9 +1740,9 @@ var KdsTabPanel = (0, import_react14.forwardRef)(
 KdsTabPanel.displayName = "KdsTabPanel";
 
 // src/components/core/KdsRadioGroup/KdsRadioGroup.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var KdsRadioGroup = (0, import_react15.forwardRef)(
+var KdsRadioGroup = (0, import_react16.forwardRef)(
   ({ label, name, options, value, onChange, size, variant, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "fieldset",
     {
@@ -1706,9 +1772,9 @@ var KdsRadioGroup = (0, import_react15.forwardRef)(
 KdsRadioGroup.displayName = "KdsRadioGroup";
 
 // src/components/core/KdsSelect/KdsSelect.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var KdsSelect = (0, import_react16.forwardRef)(
+var KdsSelect = (0, import_react17.forwardRef)(
   ({
     label,
     options,
@@ -1765,9 +1831,9 @@ var KdsSelect = (0, import_react16.forwardRef)(
 KdsSelect.displayName = "KdsSelect";
 
 // src/components/core/KdsChip/KdsChip.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var KdsChip = (0, import_react17.forwardRef)(
+var KdsChip = (0, import_react18.forwardRef)(
   ({ color, icon, onDelete, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { ref, className: (0, import_clsx.clsx)("kds-badge", color, className), ...props, children: [
     icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", { className: "material-symbols-outlined", children: icon }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children }),
@@ -1789,15 +1855,15 @@ var KdsChip = (0, import_react17.forwardRef)(
 KdsChip.displayName = "KdsChip";
 
 // src/components/core/KdsSnackbar/KdsSnackbar.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/core/hooks/useAutoHide.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 function useAutoHide(durationMs, onHide) {
-  const [visible, setVisible] = (0, import_react18.useState)(true);
-  const onHideRef = (0, import_react18.useRef)(onHide);
+  const [visible, setVisible] = (0, import_react19.useState)(true);
+  const onHideRef = (0, import_react19.useRef)(onHide);
   onHideRef.current = onHide;
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (durationMs <= 0) return;
     const timer = setTimeout(() => {
       setVisible(false);
@@ -1815,7 +1881,7 @@ var DEFAULT_ICONS2 = {
   success: "check_circle",
   error: "error"
 };
-var KdsSnackbar = (0, import_react19.forwardRef)(
+var KdsSnackbar = (0, import_react20.forwardRef)(
   ({
     message,
     type = "info",
@@ -1893,36 +1959,36 @@ function KdsTooltip({
 }
 
 // src/components/core/KdsAccordion/KdsAccordion.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
-var KdsAccordion = (0, import_react20.forwardRef)(
+var KdsAccordion = (0, import_react21.forwardRef)(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("details", { ref, className: (0, import_clsx.clsx)("kds-accordion", className), ...props, children })
 );
 KdsAccordion.displayName = "KdsAccordion";
-var KdsAccordionSummary = (0, import_react20.forwardRef)(
+var KdsAccordionSummary = (0, import_react21.forwardRef)(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("summary", { ref, className: (0, import_clsx.clsx)("kds-accordion-summary", className), ...props, children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("i", { className: "material-symbols-outlined", children: "expand_more" })
   ] })
 );
 KdsAccordionSummary.displayName = "KdsAccordionSummary";
-var KdsAccordionDetails = (0, import_react20.forwardRef)(
+var KdsAccordionDetails = (0, import_react21.forwardRef)(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.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_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var KdsDivider = (0, import_react21.forwardRef)(
+var KdsDivider = (0, import_react22.forwardRef)(
   ({ dashed, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.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_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var KdsSectionNote = (0, import_react22.forwardRef)(
+var KdsSectionNote = (0, import_react23.forwardRef)(
   ({ icon = "info", children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { ref, className: (0, import_clsx.clsx)("kds-section-note", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("i", { className: "material-symbols-outlined", children: icon }),
     /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children })
@@ -1931,9 +1997,9 @@ var KdsSectionNote = (0, import_react22.forwardRef)(
 KdsSectionNote.displayName = "KdsSectionNote";
 
 // src/components/core/KdsStatusBlock/KdsStatusBlock.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var KdsStatusBlock = (0, import_react23.forwardRef)(
+var KdsStatusBlock = (0, import_react24.forwardRef)(
   ({ status, icon, title, description, inline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-status-block", inline && "inline", className), "data-status": status, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "kds-status-block-icon", children: icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
@@ -1945,9 +2011,9 @@ var KdsStatusBlock = (0, import_react23.forwardRef)(
 KdsStatusBlock.displayName = "KdsStatusBlock";
 
 // src/components/core/KdsStepper/KdsStepper.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var KdsStepper = (0, import_react24.forwardRef)(
+var KdsStepper = (0, import_react25.forwardRef)(
   ({ steps, current, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-stepper", className), ...props, children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
@@ -1963,9 +2029,9 @@ var KdsStepper = (0, import_react24.forwardRef)(
 KdsStepper.displayName = "KdsStepper";
 
 // src/components/core/KdsCopyRow/KdsCopyRow.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var KdsCopyRow = (0, import_react25.forwardRef)(
+var KdsCopyRow = (0, import_react26.forwardRef)(
   ({ label, value, copiedText = "Copiado", className, ...props }, ref) => {
     const { copied, copy } = useCopyToClipboard();
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
@@ -1997,7 +2063,7 @@ var KdsCopyRow = (0, import_react25.forwardRef)(
 KdsCopyRow.displayName = "KdsCopyRow";
 
 // src/components/core/KdsCopyableTable/KdsCopyableTable.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 async function copyToClipboard(text) {
   try {
@@ -2064,12 +2130,12 @@ function CopyableVariant({
   forwardedRef,
   rest
 }) {
-  const copiedTimers = (0, import_react26.useRef)(/* @__PURE__ */ new Map());
-  const settlingTimers = (0, import_react26.useRef)(/* @__PURE__ */ new Map());
-  const [copiedRows, setCopiedRows] = (0, import_react26.useState)(/* @__PURE__ */ new Set());
-  const [settlingRows, setSettlingRows] = (0, import_react26.useState)(/* @__PURE__ */ new Set());
-  const [allCopied, setAllCopied] = (0, import_react26.useState)(false);
-  const markCopied = (0, import_react26.useCallback)((indexes, duration = 1500) => {
+  const copiedTimers = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
+  const settlingTimers = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
+  const [copiedRows, setCopiedRows] = (0, import_react27.useState)(/* @__PURE__ */ new Set());
+  const [settlingRows, setSettlingRows] = (0, import_react27.useState)(/* @__PURE__ */ new Set());
+  const [allCopied, setAllCopied] = (0, import_react27.useState)(false);
+  const markCopied = (0, import_react27.useCallback)((indexes, duration = 1500) => {
     setCopiedRows((prev) => {
       const next = new Set(prev);
       indexes.forEach((i) => next.add(i));
@@ -2175,7 +2241,7 @@ function CopyableVariant({
     )
   ] });
 }
-var KdsCopyableTable = (0, import_react26.forwardRef)(
+var KdsCopyableTable = (0, import_react27.forwardRef)(
   ({
     rows = [],
     variant = "copyable",
@@ -2216,11 +2282,11 @@ var KdsCopyableTable = (0, import_react26.forwardRef)(
 KdsCopyableTable.displayName = "KdsCopyableTable";
 
 // src/components/core/KdsExpandPanel/KdsExpandPanel.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var KdsExpandPanel = (0, import_react27.forwardRef)(
+var KdsExpandPanel = (0, import_react28.forwardRef)(
   ({ label, defaultExpanded = false, children, className, ...props }, ref) => {
-    const [expanded, setExpanded] = (0, import_react27.useState)(defaultExpanded);
+    const [expanded, setExpanded] = (0, import_react28.useState)(defaultExpanded);
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref, className, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         "button",
@@ -2241,10 +2307,10 @@ var KdsExpandPanel = (0, import_react27.forwardRef)(
 KdsExpandPanel.displayName = "KdsExpandPanel";
 
 // src/components/core/KdsCountdown/KdsCountdown.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/core/hooks/useCountdown.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 function calcRemaining(deadline) {
   const diff = Math.max(0, new Date(deadline).getTime() - Date.now());
   const totalSeconds = Math.floor(diff / 1e3);
@@ -2257,8 +2323,8 @@ function calcRemaining(deadline) {
   };
 }
 function useCountdown(deadline) {
-  const [state, setState] = (0, import_react28.useState)(() => calcRemaining(deadline));
-  (0, import_react28.useEffect)(() => {
+  const [state, setState] = (0, import_react29.useState)(() => calcRemaining(deadline));
+  (0, import_react29.useEffect)(() => {
     const tick = () => setState(calcRemaining(deadline));
     const id = setInterval(tick, 1e3);
     return () => clearInterval(id);
@@ -2268,12 +2334,12 @@ function useCountdown(deadline) {
 
 // src/components/core/KdsCountdown/KdsCountdown.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var KdsCountdown = (0, import_react29.forwardRef)(
+var KdsCountdown = (0, import_react30.forwardRef)(
   ({ deadline, label, onExpire, className, ...props }, ref) => {
     const { hours, minutes, seconds, expired, urgent } = useCountdown(deadline);
-    const onExpireRef = (0, import_react29.useRef)(onExpire);
+    const onExpireRef = (0, import_react30.useRef)(onExpire);
     onExpireRef.current = onExpire;
-    (0, import_react29.useEffect)(() => {
+    (0, import_react30.useEffect)(() => {
       if (expired) {
         onExpireRef.current?.();
       }
@@ -2297,17 +2363,17 @@ var KdsCountdown = (0, import_react29.forwardRef)(
 KdsCountdown.displayName = "KdsCountdown";
 
 // src/components/core/KdsSegmentedTabs/KdsSegmentedTabs.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var KdsSegmentedTabs = (0, import_react30.forwardRef)(
+var KdsSegmentedTabs = (0, import_react31.forwardRef)(
   (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(KdsTabs, { ref, ...props })
 );
 KdsSegmentedTabs.displayName = "KdsSegmentedTabs";
 
 // src/components/core/KdsFab/KdsFab.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var KdsFab = (0, import_react31.forwardRef)(
+var KdsFab = (0, import_react32.forwardRef)(
   ({ icon, position = "top-right", hidden = false, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "button",
     {
@@ -2329,9 +2395,9 @@ var KdsFab = (0, import_react31.forwardRef)(
 KdsFab.displayName = "KdsFab";
 
 // src/components/core/KdsEmptyState/KdsEmptyState.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var KdsEmptyState = (0, import_react32.forwardRef)(
+var KdsEmptyState = (0, import_react33.forwardRef)(
   ({ icon = "hide_source", title, description, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
@@ -2352,9 +2418,9 @@ var KdsEmptyState = (0, import_react32.forwardRef)(
 KdsEmptyState.displayName = "KdsEmptyState";
 
 // src/components/domain/KdsBankRow/KdsBankRow.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var KdsBankRow = (0, import_react33.forwardRef)(
+var KdsBankRow = (0, import_react34.forwardRef)(
   ({ name, logoUrl, selected, hideLogo, className, ...props }, ref) => {
     const nameStr = typeof name === "string" ? name : "";
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
@@ -2376,20 +2442,20 @@ var KdsBankRow = (0, import_react33.forwardRef)(
 KdsBankRow.displayName = "KdsBankRow";
 
 // src/components/domain/KdsBankList/KdsBankList.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var KdsBankList = (0, import_react34.forwardRef)(
+var KdsBankList = (0, import_react35.forwardRef)(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime32.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_react35 = require("react");
+var import_react36 = require("react");
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var KdsBankModal = (0, import_react35.forwardRef)(
+var KdsBankModal = (0, import_react36.forwardRef)(
   ({ open, onClose, title = "Selecciona tu banco", searchPlaceholder = "Buscar banco...", onSearch, children, className, container }, ref) => {
-    const [query, setQuery] = (0, import_react35.useState)("");
+    const [query, setQuery] = (0, import_react36.useState)("");
     const handleSearch = (value) => {
       setQuery(value);
       onSearch?.(value);
@@ -2416,9 +2482,9 @@ var KdsBankModal = (0, import_react35.forwardRef)(
 KdsBankModal.displayName = "KdsBankModal";
 
 // src/components/domain/KdsQrRow/KdsQrRow.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var KdsQrRow = (0, import_react36.forwardRef)(
+var KdsQrRow = (0, import_react37.forwardRef)(
   ({ name, description, badge, icon = "qr_code_2", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("button", { ref, type: "button", className: (0, import_clsx.clsx)("kds-qr-row", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "kds-qr-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", { className: "material-symbols-outlined", children: icon }) }),
     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "kds-qr-text", children: [
@@ -2432,9 +2498,9 @@ var KdsQrRow = (0, import_react36.forwardRef)(
 KdsQrRow.displayName = "KdsQrRow";
 
 // src/components/domain/KdsCardSelector/KdsCardSelector.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var KdsCardSelector = (0, import_react37.forwardRef)(
+var KdsCardSelector = (0, import_react38.forwardRef)(
   ({ icon, title, description, selected, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "button",
     {
@@ -2453,9 +2519,9 @@ var KdsCardSelector = (0, import_react37.forwardRef)(
 KdsCardSelector.displayName = "KdsCardSelector";
 
 // src/components/domain/KdsCardPlan/KdsCardPlan.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
-var KdsCardPlan = (0, import_react38.forwardRef)(
+var KdsCardPlan = (0, import_react39.forwardRef)(
   ({ title, price, period, features, recommended, badgeText, action, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
@@ -2481,9 +2547,9 @@ var KdsCardPlan = (0, import_react38.forwardRef)(
 KdsCardPlan.displayName = "KdsCardPlan";
 
 // src/components/domain/KdsInvoiceSticky/KdsInvoiceSticky.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var KdsInvoiceSticky = (0, import_react39.forwardRef)(
+var KdsInvoiceSticky = (0, import_react40.forwardRef)(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "article",
     {
@@ -2497,10 +2563,10 @@ var KdsInvoiceSticky = (0, import_react39.forwardRef)(
 KdsInvoiceSticky.displayName = "KdsInvoiceSticky";
 
 // src/components/domain/KdsBottomSheet/KdsBottomSheet.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var KdsBottomSheet = (0, import_react40.forwardRef)(
+var KdsBottomSheet = (0, import_react41.forwardRef)(
   ({
     open,
     onClose,
@@ -2554,12 +2620,12 @@ var KdsBottomSheet = (0, import_react40.forwardRef)(
 KdsBottomSheet.displayName = "KdsBottomSheet";
 
 // src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/domain/KdsSecureFooter/KhipuWordmark.tsx
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var KhipuWordmark = (0, import_react41.forwardRef)(
+var KhipuWordmark = (0, import_react42.forwardRef)(
   ({ className = "khipu-mark", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "svg",
     {
@@ -2587,7 +2653,7 @@ KhipuWordmark.displayName = "KhipuWordmark";
 
 // src/components/domain/KdsSecureFooter/KdsSecureFooter.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var KdsSecureFooter = (0, import_react42.forwardRef)(
+var KdsSecureFooter = (0, import_react43.forwardRef)(
   ({ variant = "default", showLogo = true, psp, children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("footer", { ref, className: (0, import_clsx.clsx)("kds-secure-footer", variant === "inside" && "inside", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "kds-secure-footer-lock", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
       /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("rect", { x: "4.5", y: "10.5", width: "15", height: "10", rx: "2.25" }),
@@ -2604,9 +2670,9 @@ var KdsSecureFooter = (0, import_react42.forwardRef)(
 KdsSecureFooter.displayName = "KdsSecureFooter";
 
 // src/components/domain/KdsRecapList/KdsRecapList.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
-var KdsRecapList = (0, import_react43.forwardRef)(
+var KdsRecapList = (0, import_react44.forwardRef)(
   ({ items, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("ul", { ref, className: (0, import_clsx.clsx)("kds-recap-list", className), ...props, children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("li", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "kds-key", children: item.label }),
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: (0, import_clsx.clsx)("kds-value", !item.value && item.placeholder && "placeholder"), children: item.value || item.placeholder || "-" })
@@ -2615,9 +2681,9 @@ var KdsRecapList = (0, import_react43.forwardRef)(
 KdsRecapList.displayName = "KdsRecapList";
 
 // src/components/domain/KdsMontoRow/KdsMontoRow.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
-var KdsMontoRow = (0, import_react44.forwardRef)(
+var KdsMontoRow = (0, import_react45.forwardRef)(
   ({ title, value, deadline, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref, className: (0, import_clsx.clsx)("kds-monto-row", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "kds-monto-row-title", children: title }),
@@ -2629,9 +2695,9 @@ var KdsMontoRow = (0, import_react44.forwardRef)(
 KdsMontoRow.displayName = "KdsMontoRow";
 
 // src/components/domain/KdsMerchantTile/KdsMerchantTile.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
-var KdsMerchantTile = (0, import_react45.forwardRef)(
+var KdsMerchantTile = (0, import_react46.forwardRef)(
   ({ name, logoUrl, initials, compact, className, ...props }, ref) => {
     const displayInitials = (initials ?? name.slice(0, 2)).toUpperCase();
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
@@ -2649,10 +2715,10 @@ var KdsMerchantTile = (0, import_react45.forwardRef)(
 KdsMerchantTile.displayName = "KdsMerchantTile";
 
 // src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
-var import_react46 = require("react");
+var import_react47 = require("react");
 
 // src/components/domain/KdsInvoiceMerchant/logoLuminance.ts
 var LIGHT_LOGO_LUMINANCE_THRESHOLD = 0.72;
@@ -2701,8 +2767,8 @@ function pickLogoBackdrop(luminance) {
 
 // src/components/domain/KdsInvoiceMerchant/useLogoBackdrop.ts
 function useLogoBackdrop(logoUrl) {
-  const [backdrop, setBackdrop] = (0, import_react46.useState)("light");
-  (0, import_react46.useEffect)(() => {
+  const [backdrop, setBackdrop] = (0, import_react47.useState)("light");
+  (0, import_react47.useEffect)(() => {
     let cancelled = false;
     setBackdrop("light");
     if (!logoUrl) {
@@ -2722,9 +2788,9 @@ function useLogoBackdrop(logoUrl) {
 
 // src/components/domain/KdsInvoiceMerchant/KdsInvoiceMerchant.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var KdsInvoiceMerchant = (0, import_react47.forwardRef)(
+var KdsInvoiceMerchant = (0, import_react48.forwardRef)(
   ({ logoUrl, brandColor, className, style, ...props }, ref) => {
-    const [failed, setFailed] = (0, import_react47.useState)(false);
+    const [failed, setFailed] = (0, import_react48.useState)(false);
     const showLogo = !!logoUrl && !failed;
     const backdrop = useLogoBackdrop(showLogo ? logoUrl : void 0);
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
@@ -2748,9 +2814,9 @@ var KdsInvoiceMerchant = (0, import_react47.forwardRef)(
 KdsInvoiceMerchant.displayName = "KdsInvoiceMerchant";
 
 // src/components/domain/KdsPaymentTotal/KdsPaymentTotal.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var KdsPaymentTotal = (0, import_react48.forwardRef)(
+var KdsPaymentTotal = (0, import_react49.forwardRef)(
   ({
     variant = "default",
     tone = "brand",
@@ -2824,9 +2890,9 @@ function formatAmount(amount, decimals, locale) {
 }
 
 // src/components/domain/KdsBillAttachment/KdsBillAttachment.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var KdsBillAttachment = (0, import_react49.forwardRef)(
+var KdsBillAttachment = (0, import_react50.forwardRef)(
   ({ filename, href, icon = "attach_file", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "a",
     {
@@ -2844,7 +2910,7 @@ var KdsBillAttachment = (0, import_react49.forwardRef)(
   )
 );
 KdsBillAttachment.displayName = "KdsBillAttachment";
-var KdsBillAttachments = (0, import_react49.forwardRef)(
+var KdsBillAttachments = (0, import_react50.forwardRef)(
   ({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { ref, className: (0, import_clsx.clsx)("kds-bill-attachments", className), ...props, children })
 );
 KdsBillAttachments.displayName = "KdsBillAttachments";
@@ -2944,12 +3010,12 @@ var guideToFirstInvalidFieldOnBlur = (form) => {
 };
 
 // src/components/core/hooks/useStickyInvoiceCollapse.ts
-var import_react50 = require("react");
+var import_react51 = require("react");
 function useStickyInvoiceCollapse(options = {}) {
   const { onCollapseStart, collapseEnd = 20, mobileBreakpoint = 768 } = options;
-  const onCollapseStartRef = (0, import_react50.useRef)(onCollapseStart);
+  const onCollapseStartRef = (0, import_react51.useRef)(onCollapseStart);
   onCollapseStartRef.current = onCollapseStart;
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     let viewportOffset = 0;
     let ticking = false;
     let wasCollapsing = false;
@@ -3022,24 +3088,24 @@ function useStickyInvoiceCollapse(options = {}) {
 }
 
 // src/components/core/hooks/useExpandToggle.ts
-var import_react51 = require("react");
+var import_react52 = require("react");
 function useExpandToggle(options = {}) {
   const { defaultOpen = false, open: controlledOpen, onOpenChange, id } = options;
-  const generatedId = (0, import_react51.useId)();
+  const generatedId = (0, import_react52.useId)();
   const panelId = id ?? `kds-expand-${generatedId}`;
   const isControlled = controlledOpen !== void 0;
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react51.useState)(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react52.useState)(defaultOpen);
   const open = isControlled ? controlledOpen : uncontrolledOpen;
-  const panelRef = (0, import_react51.useRef)(null);
-  const setPanelRef = (0, import_react51.useCallback)((node) => {
+  const panelRef = (0, import_react52.useRef)(null);
+  const setPanelRef = (0, import_react52.useCallback)((node) => {
     panelRef.current = node;
   }, []);
-  (0, import_react51.useLayoutEffect)(() => {
+  (0, import_react52.useLayoutEffect)(() => {
     const panel = panelRef.current;
     if (!panel) return;
     panel.style.maxHeight = open ? `${panel.scrollHeight}px` : "";
   }, [open]);
-  const setOpen = (0, import_react51.useCallback)(
+  const setOpen = (0, import_react52.useCallback)(
     (next) => {
       if (!isControlled) {
         setUncontrolledOpen(next);
@@ -3048,8 +3114,8 @@ function useExpandToggle(options = {}) {
     },
     [isControlled, onOpenChange]
   );
-  const toggle = (0, import_react51.useCallback)(() => setOpen(!open), [open, setOpen]);
-  const getToggleProps = (0, import_react51.useCallback)(
+  const toggle = (0, import_react52.useCallback)(() => setOpen(!open), [open, setOpen]);
+  const getToggleProps = (0, import_react52.useCallback)(
     () => ({
       type: "button",
       "aria-expanded": open,
@@ -3058,7 +3124,7 @@ function useExpandToggle(options = {}) {
     }),
     [open, panelId, toggle]
   );
-  const getPanelProps = (0, import_react51.useCallback)(
+  const getPanelProps = (0, import_react52.useCallback)(
     (baseClassName = "kds-expand-panel") => ({
       id: panelId,
       className: open ? `${baseClassName} open` : baseClassName,
@@ -3071,11 +3137,11 @@ function useExpandToggle(options = {}) {
 }
 
 // src/components/core/hooks/useHideOnScroll.ts
-var import_react52 = require("react");
+var import_react53 = require("react");
 function useHideOnScroll(options = {}) {
   const { threshold = 8, topOffset = 0 } = options;
-  const [hidden, setHidden] = (0, import_react52.useState)(false);
-  (0, import_react52.useEffect)(() => {
+  const [hidden, setHidden] = (0, import_react53.useState)(false);
+  (0, import_react53.useEffect)(() => {
     let viewportOffset = 0;
     let lastY = 0;
     let ticking = false;
@@ -3118,12 +3184,12 @@ function useHideOnScroll(options = {}) {
 }
 
 // src/components/core/hooks/useMediaQuery.ts
-var import_react53 = require("react");
+var import_react54 = require("react");
 function useMediaQuery(query) {
-  const [matches, setMatches] = (0, import_react53.useState)(
+  const [matches, setMatches] = (0, import_react54.useState)(
     () => typeof window !== "undefined" ? window.matchMedia(query).matches : false
   );
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mql = window.matchMedia(query);
     setMatches(mql.matches);