framepexls-ui-lib 2.0.0 → 2.2.0

package/dist/Numeric.js

@@ -0,0 +1,102 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Numeric_exports = {};
+__export(Numeric_exports, {
+  default: () => Numeric,
+  formatCurrencyValue: () => formatCurrencyValue,
+  formatNumericValue: () => formatNumericValue,
+  formatPercentValue: () => formatPercentValue
+});
+module.exports = __toCommonJS(Numeric_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function isFiniteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function joinClassNames(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function buildNumericFormatter({
+  variant = "number",
+  currency = "MXN",
+  locale = "es-MX",
+  minimumFractionDigits = 3,
+  maximumFractionDigits = 3,
+  useGrouping = true
+}) {
+  if (variant === "currency") {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency,
+      currencyDisplay: "narrowSymbol",
+      minimumFractionDigits,
+      maximumFractionDigits,
+      useGrouping
+    });
+  }
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits,
+    maximumFractionDigits,
+    useGrouping
+  });
+}
+function formatNumericValue(value, {
+  variant = "number",
+  currency = "MXN",
+  locale = "es-MX",
+  minimumFractionDigits = 3,
+  maximumFractionDigits = 3,
+  useGrouping = true,
+  fallback = "\u2014",
+  prefix = "",
+  suffix = ""
+} = {}) {
+  if (!isFiniteNumber(value)) return fallback;
+  const formatter = buildNumericFormatter({
+    variant,
+    currency,
+    locale,
+    minimumFractionDigits,
+    maximumFractionDigits,
+    useGrouping
+  });
+  const formatted = formatter.format(value);
+  const percentSuffix = variant === "percent" ? "%" : "";
+  return `${prefix}${formatted}${percentSuffix}${suffix}`;
+}
+function formatCurrencyValue(value, options = {}) {
+  return formatNumericValue(value, { ...options, variant: "currency" });
+}
+function formatPercentValue(value, options = {}) {
+  return formatNumericValue(value, { ...options, variant: "percent" });
+}
+function Numeric({
+  value,
+  className,
+  fallback = "\u2014",
+  ...options
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: joinClassNames("tabular-nums", className), children: formatNumericValue(value, { fallback, ...options }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  formatCurrencyValue,
+  formatNumericValue,
+  formatPercentValue
+});

package/dist/Numeric.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+function isFiniteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function joinClassNames(...values) {
+  return values.filter(Boolean).join(" ");
+}
+function buildNumericFormatter({
+  variant = "number",
+  currency = "MXN",
+  locale = "es-MX",
+  minimumFractionDigits = 3,
+  maximumFractionDigits = 3,
+  useGrouping = true
+}) {
+  if (variant === "currency") {
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency,
+      currencyDisplay: "narrowSymbol",
+      minimumFractionDigits,
+      maximumFractionDigits,
+      useGrouping
+    });
+  }
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits,
+    maximumFractionDigits,
+    useGrouping
+  });
+}
+function formatNumericValue(value, {
+  variant = "number",
+  currency = "MXN",
+  locale = "es-MX",
+  minimumFractionDigits = 3,
+  maximumFractionDigits = 3,
+  useGrouping = true,
+  fallback = "\u2014",
+  prefix = "",
+  suffix = ""
+} = {}) {
+  if (!isFiniteNumber(value)) return fallback;
+  const formatter = buildNumericFormatter({
+    variant,
+    currency,
+    locale,
+    minimumFractionDigits,
+    maximumFractionDigits,
+    useGrouping
+  });
+  const formatted = formatter.format(value);
+  const percentSuffix = variant === "percent" ? "%" : "";
+  return `${prefix}${formatted}${percentSuffix}${suffix}`;
+}
+function formatCurrencyValue(value, options = {}) {
+  return formatNumericValue(value, { ...options, variant: "currency" });
+}
+function formatPercentValue(value, options = {}) {
+  return formatNumericValue(value, { ...options, variant: "percent" });
+}
+function Numeric({
+  value,
+  className,
+  fallback = "\u2014",
+  ...options
+}) {
+  return /* @__PURE__ */ jsx("span", { className: joinClassNames("tabular-nums", className), children: formatNumericValue(value, { fallback, ...options }) });
+}
+export {
+  Numeric as default,
+  formatCurrencyValue,
+  formatNumericValue,
+  formatPercentValue
+};

package/dist/OmniSearch.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { Dialog } from './Dialog.mjs';
 
@@ -30,7 +29,7 @@ type RegistryApi = {
 };
 declare function OmniSearchRegistryProvider({ children }: {
     children: React__default.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 declare function useOmniSearchRegistry(): RegistryApi;
 declare function useRegisterOmniSearchItems(sourceId: string, items: OmniSearchItem[]): void;
 type OmniSearchProps = {
@@ -46,6 +45,6 @@ type OmniSearchProps = {
     onNavigate?: (href: string) => void;
     maxResults?: number;
 };
-declare function OmniSearch({ open: openProp, defaultOpen, onOpenChange, title, placeholder, size, hotkey, items, providers, onNavigate, maxResults, }: OmniSearchProps): react_jsx_runtime.JSX.Element;
+declare function OmniSearch({ open: openProp, defaultOpen, onOpenChange, title, placeholder, size, hotkey, items, providers, onNavigate, maxResults, }: OmniSearchProps): React__default.JSX.Element;
 
 export { type OmniSearchItem, type OmniSearchProps, type OmniSearchProvider, type OmniSearchQueryContext, OmniSearchRegistryProvider, OmniSearch as default, useOmniSearchRegistry, useRegisterOmniSearchItems };

package/dist/OmniSearch.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { Dialog } from './Dialog.js';
 
@@ -30,7 +29,7 @@ type RegistryApi = {
 };
 declare function OmniSearchRegistryProvider({ children }: {
     children: React__default.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+}): React__default.JSX.Element;
 declare function useOmniSearchRegistry(): RegistryApi;
 declare function useRegisterOmniSearchItems(sourceId: string, items: OmniSearchItem[]): void;
 type OmniSearchProps = {
@@ -46,6 +45,6 @@ type OmniSearchProps = {
     onNavigate?: (href: string) => void;
     maxResults?: number;
 };
-declare function OmniSearch({ open: openProp, defaultOpen, onOpenChange, title, placeholder, size, hotkey, items, providers, onNavigate, maxResults, }: OmniSearchProps): react_jsx_runtime.JSX.Element;
+declare function OmniSearch({ open: openProp, defaultOpen, onOpenChange, title, placeholder, size, hotkey, items, providers, onNavigate, maxResults, }: OmniSearchProps): React__default.JSX.Element;
 
 export { type OmniSearchItem, type OmniSearchProps, type OmniSearchProvider, type OmniSearchQueryContext, OmniSearchRegistryProvider, OmniSearch as default, useOmniSearchRegistry, useRegisterOmniSearchItems };

package/dist/OrderButton.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type Props = {
     label: string;
@@ -6,6 +6,6 @@ type Props = {
     asc?: boolean;
     onClick?: () => void;
 };
-declare function OrderButton({ label, active, asc, onClick }: Props): react_jsx_runtime.JSX.Element;
+declare function OrderButton({ label, active, asc, onClick }: Props): React.JSX.Element;
 
 export { OrderButton as default };

package/dist/OrderButton.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
 type Props = {
     label: string;
@@ -6,6 +6,6 @@ type Props = {
     asc?: boolean;
     onClick?: () => void;
 };
-declare function OrderButton({ label, active, asc, onClick }: Props): react_jsx_runtime.JSX.Element;
+declare function OrderButton({ label, active, asc, onClick }: Props): React.JSX.Element;
 
 export { OrderButton as default };

package/dist/PageScaffold.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { Tone } from './Badge.mjs';
 import Button from './Button.mjs';
@@ -83,6 +82,6 @@ type PageScaffoldProps = {
     className?: string;
     children?: React__default.ReactNode;
 };
-declare function PageScaffold({ tools, backgroundImage, backgroundMode, backgroundImageOpacity, backgroundImageBlur, backgroundImageClassName, breadcrumb, kpis, kpiClassName, kpiColumnsClassName, search, filters, sort, columns, tabs, actions, primaryAction, top, belowToolbar, loading, loadingMinDurationMs, loadingBody, loadingBehavior, empty, emptyState, emptyStateContainer, className, children, }: PageScaffoldProps): react_jsx_runtime.JSX.Element;
+declare function PageScaffold({ tools, backgroundImage, backgroundMode, backgroundImageOpacity, backgroundImageBlur, backgroundImageClassName, breadcrumb, kpis, kpiClassName, kpiColumnsClassName, search, filters, sort, columns, tabs, actions, primaryAction, top, belowToolbar, loading, loadingMinDurationMs, loadingBody, loadingBehavior, empty, emptyState, emptyStateContainer, className, children, }: PageScaffoldProps): React__default.JSX.Element;
 
 export { type PageKpi, type PageKpiItem, type PageScaffoldPrimaryAction, type PageScaffoldProps, type PageScaffoldSearch, PageScaffold as default };

package/dist/PageScaffold.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { Tone } from './Badge.js';
 import Button from './Button.js';
@@ -83,6 +82,6 @@ type PageScaffoldProps = {
     className?: string;
     children?: React__default.ReactNode;
 };
-declare function PageScaffold({ tools, backgroundImage, backgroundMode, backgroundImageOpacity, backgroundImageBlur, backgroundImageClassName, breadcrumb, kpis, kpiClassName, kpiColumnsClassName, search, filters, sort, columns, tabs, actions, primaryAction, top, belowToolbar, loading, loadingMinDurationMs, loadingBody, loadingBehavior, empty, emptyState, emptyStateContainer, className, children, }: PageScaffoldProps): react_jsx_runtime.JSX.Element;
+declare function PageScaffold({ tools, backgroundImage, backgroundMode, backgroundImageOpacity, backgroundImageBlur, backgroundImageClassName, breadcrumb, kpis, kpiClassName, kpiColumnsClassName, search, filters, sort, columns, tabs, actions, primaryAction, top, belowToolbar, loading, loadingMinDurationMs, loadingBody, loadingBehavior, empty, emptyState, emptyStateContainer, className, children, }: PageScaffoldProps): React__default.JSX.Element;
 
 export { type PageKpi, type PageKpiItem, type PageScaffoldPrimaryAction, type PageScaffoldProps, type PageScaffoldSearch, PageScaffold as default };

package/dist/PageScaffold.js

@@ -188,7 +188,7 @@ function PageScaffold({
                 }
               }
             ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-[radial-gradient(1200px_820px_at_12%_0%,color-mix(in_oklab,var(--primary)_22%,transparent)_0%,transparent_62%),radial-gradient(980px_620px_at_92%_8%,color-mix(in_oklab,var(--ring)_14%,transparent)_0%,transparent_58%),radial-gradient(980px_720px_at_50%_112%,color-mix(in_oklab,var(--primary)_10%,transparent)_0%,transparent_62%),linear-gradient(180deg,color-mix(in_oklab,var(--bg)_28%,transparent)_0%,var(--bg)_100%)]" })
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-[radial-gradient(860px_520px_at_20%_136%,color-mix(in_oklab,var(--primary)_5%,transparent)_0%,transparent_38%),radial-gradient(760px_460px_at_84%_132%,color-mix(in_oklab,var(--ring)_3.5%,transparent)_0%,transparent_36%),linear-gradient(180deg,transparent_0%,transparent_76%,color-mix(in_oklab,var(--bg)_4%,transparent)_90%,var(--bg)_100%)]" })
           ]
         }
       );

package/dist/PageScaffold.mjs

@@ -155,7 +155,7 @@ function PageScaffold({
                 }
               }
             ) : null,
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(1200px_820px_at_12%_0%,color-mix(in_oklab,var(--primary)_22%,transparent)_0%,transparent_62%),radial-gradient(980px_620px_at_92%_8%,color-mix(in_oklab,var(--ring)_14%,transparent)_0%,transparent_58%),radial-gradient(980px_720px_at_50%_112%,color-mix(in_oklab,var(--primary)_10%,transparent)_0%,transparent_62%),linear-gradient(180deg,color-mix(in_oklab,var(--bg)_28%,transparent)_0%,var(--bg)_100%)]" })
+            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(860px_520px_at_20%_136%,color-mix(in_oklab,var(--primary)_5%,transparent)_0%,transparent_38%),radial-gradient(760px_460px_at_84%_132%,color-mix(in_oklab,var(--ring)_3.5%,transparent)_0%,transparent_36%),linear-gradient(180deg,transparent_0%,transparent_76%,color-mix(in_oklab,var(--bg)_4%,transparent)_90%,var(--bg)_100%)]" })
           ]
         }
       );

package/dist/PageTransition.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { Transition, Variants } from 'framer-motion';
 
@@ -24,6 +23,6 @@ type PageTransitionProps = {
     onExitComplete?: () => void;
     fallback?: React__default.ReactNode;
 };
-declare function PageTransition({ children, transitionKey, variant, mode, animateInitial, deferKey, resetScroll, presenceAffectsLayout, showOverlay, overlayDelayMs, overlayMinDurationMs, overlayZIndex, overlay, transition, variants, className, style, onExitComplete, fallback, }: PageTransitionProps): react_jsx_runtime.JSX.Element;
+declare function PageTransition({ children, transitionKey, variant, mode, animateInitial, deferKey, resetScroll, presenceAffectsLayout, showOverlay, overlayDelayMs, overlayMinDurationMs, overlayZIndex, overlay, transition, variants, className, style, onExitComplete, fallback, }: PageTransitionProps): React__default.JSX.Element;
 
 export { type PageTransitionProps, type PageTransitionVariant, PageTransition as default };

package/dist/PageTransition.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { Transition, Variants } from 'framer-motion';
 
@@ -24,6 +23,6 @@ type PageTransitionProps = {
     onExitComplete?: () => void;
     fallback?: React__default.ReactNode;
 };
-declare function PageTransition({ children, transitionKey, variant, mode, animateInitial, deferKey, resetScroll, presenceAffectsLayout, showOverlay, overlayDelayMs, overlayMinDurationMs, overlayZIndex, overlay, transition, variants, className, style, onExitComplete, fallback, }: PageTransitionProps): react_jsx_runtime.JSX.Element;
+declare function PageTransition({ children, transitionKey, variant, mode, animateInitial, deferKey, resetScroll, presenceAffectsLayout, showOverlay, overlayDelayMs, overlayMinDurationMs, overlayZIndex, overlay, transition, variants, className, style, onExitComplete, fallback, }: PageTransitionProps): React__default.JSX.Element;
 
 export { type PageTransitionProps, type PageTransitionVariant, PageTransition as default };

package/dist/PageTransition.js

@@ -34,6 +34,7 @@ __export(PageTransition_exports, {
 module.exports = __toCommonJS(PageTransition_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
 var import_framer_motion = require("framer-motion");
 var import_animations = require("./animations");
 var import_HeliipLoader = __toESM(require("./HeliipLoader"));
@@ -65,7 +66,7 @@ function PageTransition({
   showOverlay = false,
   overlayDelayMs = 80,
   overlayMinDurationMs = 1e3,
-  overlayZIndex = 80,
+  overlayZIndex = 12e3,
   overlay,
   transition = import_animations.microTransition,
   variants,
@@ -80,6 +81,10 @@ function PageTransition({
   const prevKeyRef = import_react.default.useRef(transitionKey);
   const timersRef = import_react.default.useRef({});
   const [overlayOpen, setOverlayOpen] = import_react.default.useState(false);
+  const [portalNode, setPortalNode] = import_react.default.useState(null);
+  import_react.default.useEffect(() => {
+    setPortalNode(document.body);
+  }, []);
   import_react.default.useEffect(() => {
     if (!resetScroll) return;
     const reset = () => {
@@ -125,33 +130,34 @@ function PageTransition({
       if (timersRef.current.hide) window.clearTimeout(timersRef.current.hide);
     };
   }, [showOverlay, transitionKey, overlayDelayMs, overlayMinDurationMs]);
+  const overlayContent = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: showOverlay && overlayOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      className: "fixed inset-0",
+      style: { zIndex: overlayZIndex },
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: import_animations.microTransition,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/55" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_framer_motion.motion.div,
+          {
+            className: "absolute left-1/2 top-1/2 w-[min(520px,92vw)] -translate-x-1/2 -translate-y-1/2",
+            initial: { opacity: 0, y: 10, scale: 0.98 },
+            animate: { opacity: 1, y: 0, scale: 1 },
+            exit: { opacity: 0, y: 10, scale: 0.98 },
+            transition: import_animations.microTransition,
+            children: overlay != null ? overlay : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeliipLoader.default, {})
+          }
+        )
+      ]
+    },
+    "fx-route-overlay"
+  ) : null });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: showOverlay && overlayOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      import_framer_motion.motion.div,
-      {
-        className: "fixed inset-0",
-        style: { zIndex: overlayZIndex },
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: import_animations.microTransition,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 bg-black/55" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_framer_motion.motion.div,
-            {
-              className: "absolute left-1/2 top-1/2 w-[min(520px,92vw)] -translate-x-1/2 -translate-y-1/2",
-              initial: { opacity: 0, y: 10, scale: 0.98 },
-              animate: { opacity: 1, y: 0, scale: 1 },
-              exit: { opacity: 0, y: 10, scale: 0.98 },
-              transition: import_animations.microTransition,
-              children: overlay != null ? overlay : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeliipLoader.default, {})
-            }
-          )
-        ]
-      },
-      "fx-route-overlay"
-    ) : null }),
+    portalNode ? (0, import_react_dom.createPortal)(overlayContent, portalNode) : overlayContent,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_framer_motion.AnimatePresence,
       {

package/dist/PageTransition.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { createPortal } from "react-dom";
 import { AnimatePresence, motion } from "framer-motion";
 import { fadeInOut, microTransition, popOver, slideFromBottom } from "./animations.mjs";
 import HeliipLoader from "./HeliipLoader.mjs";
@@ -32,7 +33,7 @@ function PageTransition({
   showOverlay = false,
   overlayDelayMs = 80,
   overlayMinDurationMs = 1e3,
-  overlayZIndex = 80,
+  overlayZIndex = 12e3,
   overlay,
   transition = microTransition,
   variants,
@@ -47,6 +48,10 @@ function PageTransition({
   const prevKeyRef = React.useRef(transitionKey);
   const timersRef = React.useRef({});
   const [overlayOpen, setOverlayOpen] = React.useState(false);
+  const [portalNode, setPortalNode] = React.useState(null);
+  React.useEffect(() => {
+    setPortalNode(document.body);
+  }, []);
   React.useEffect(() => {
     if (!resetScroll) return;
     const reset = () => {
@@ -92,33 +97,34 @@ function PageTransition({
       if (timersRef.current.hide) window.clearTimeout(timersRef.current.hide);
     };
   }, [showOverlay, transitionKey, overlayDelayMs, overlayMinDurationMs]);
+  const overlayContent = /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: showOverlay && overlayOpen ? /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: "fixed inset-0",
+      style: { zIndex: overlayZIndex },
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      transition: microTransition,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/55" }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "absolute left-1/2 top-1/2 w-[min(520px,92vw)] -translate-x-1/2 -translate-y-1/2",
+            initial: { opacity: 0, y: 10, scale: 0.98 },
+            animate: { opacity: 1, y: 0, scale: 1 },
+            exit: { opacity: 0, y: 10, scale: 0.98 },
+            transition: microTransition,
+            children: overlay != null ? overlay : /* @__PURE__ */ jsx(HeliipLoader, {})
+          }
+        )
+      ]
+    },
+    "fx-route-overlay"
+  ) : null });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: showOverlay && overlayOpen ? /* @__PURE__ */ jsxs(
-      motion.div,
-      {
-        className: "fixed inset-0",
-        style: { zIndex: overlayZIndex },
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: microTransition,
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/55" }),
-          /* @__PURE__ */ jsx(
-            motion.div,
-            {
-              className: "absolute left-1/2 top-1/2 w-[min(520px,92vw)] -translate-x-1/2 -translate-y-1/2",
-              initial: { opacity: 0, y: 10, scale: 0.98 },
-              animate: { opacity: 1, y: 0, scale: 1 },
-              exit: { opacity: 0, y: 10, scale: 0.98 },
-              transition: microTransition,
-              children: overlay != null ? overlay : /* @__PURE__ */ jsx(HeliipLoader, {})
-            }
-          )
-        ]
-      },
-      "fx-route-overlay"
-    ) : null }),
+    portalNode ? createPortal(overlayContent, portalNode) : overlayContent,
     /* @__PURE__ */ jsx(
       AnimatePresence,
       {

package/dist/Pagination.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
 type PaginationProps = {
     page: number;
@@ -13,6 +13,6 @@ type PaginationProps = {
     }>;
     color?: "accent" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, color, labels, }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, color, labels, }: PaginationProps): React__default.JSX.Element;
 
 export { type PaginationProps, Pagination as default };

package/dist/Pagination.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
 type PaginationProps = {
     page: number;
@@ -13,6 +13,6 @@ type PaginationProps = {
     }>;
     color?: "accent" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose";
 };
-declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, color, labels, }: PaginationProps): react_jsx_runtime.JSX.Element;
+declare function Pagination({ page, totalPages, onPageChange, maxButtons, className, color, labels, }: PaginationProps): React__default.JSX.Element;
 
 export { type PaginationProps, Pagination as default };

package/dist/PasswordField.d.mts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { Tone } from './Badge.mjs';
 
@@ -78,7 +77,7 @@ type PasswordFieldProps = {
     onValidationChange?: (result: PasswordValidation) => void;
     labels?: PasswordFieldLabels;
 };
-declare function PasswordField({ value, onChange, className, inputClassName, id, name, autoComplete, disabled, required, rules, showStrength, showRequirements, showTips, generator, onValidationChange, labels: labelsOverride, }: PasswordFieldProps): react_jsx_runtime.JSX.Element;
+declare function PasswordField({ value, onChange, className, inputClassName, id, name, autoComplete, disabled, required, rules, showStrength, showRequirements, showTips, generator, onValidationChange, labels: labelsOverride, }: PasswordFieldProps): React__default.JSX.Element;
 declare function validatePassword(value: string, rules?: PasswordRules): PasswordValidation;
 declare function generatePassword(options?: PasswordGeneratorOptions): string;
 

package/dist/PasswordField.d.ts

@@ -1,4 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
 import { Tone } from './Badge.js';
 
@@ -78,7 +77,7 @@ type PasswordFieldProps = {
     onValidationChange?: (result: PasswordValidation) => void;
     labels?: PasswordFieldLabels;
 };
-declare function PasswordField({ value, onChange, className, inputClassName, id, name, autoComplete, disabled, required, rules, showStrength, showRequirements, showTips, generator, onValidationChange, labels: labelsOverride, }: PasswordFieldProps): react_jsx_runtime.JSX.Element;
+declare function PasswordField({ value, onChange, className, inputClassName, id, name, autoComplete, disabled, required, rules, showStrength, showRequirements, showTips, generator, onValidationChange, labels: labelsOverride, }: PasswordFieldProps): React__default.JSX.Element;
 declare function validatePassword(value: string, rules?: PasswordRules): PasswordValidation;
 declare function generatePassword(options?: PasswordGeneratorOptions): string;
 

package/dist/ProductCatalog.d.mts

@@ -1,6 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 import { Tone } from './Badge.mjs';
-import 'react';
 
 type ProductStatus = "active" | "inactive" | "archived" | "draft";
 type ProductCatalogItem = {
@@ -71,6 +70,6 @@ type ProductCatalogProps = {
     labels?: ProductCatalogLabels;
     onItemOpen?: (item: ProductCatalogItem) => void;
 };
-declare function ProductCatalog({ items, value, onChange, multiple, allowDeselectSingle, maxSelected, disabled, persistKey, loading, loadingMinDurationMs, pageSize, defaultView, showViewToggle, enableCategoryFilter, enableStatusFilter, enableTagsFilter, maxTagOptions, className, labels, onItemOpen, }: ProductCatalogProps): react_jsx_runtime.JSX.Element;
+declare function ProductCatalog({ items, value, onChange, multiple, allowDeselectSingle, maxSelected, disabled, persistKey, loading, loadingMinDurationMs, pageSize, defaultView, showViewToggle, enableCategoryFilter, enableStatusFilter, enableTagsFilter, maxTagOptions, className, labels, onItemOpen, }: ProductCatalogProps): React__default.JSX.Element;
 
 export { type ProductCatalogItem, type ProductCatalogLabels, type ProductCatalogProps, type ProductStatus, ProductCatalog as default };

package/dist/ProductCatalog.d.ts

@@ -1,6 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 import { Tone } from './Badge.js';
-import 'react';
 
 type ProductStatus = "active" | "inactive" | "archived" | "draft";
 type ProductCatalogItem = {
@@ -71,6 +70,6 @@ type ProductCatalogProps = {
     labels?: ProductCatalogLabels;
     onItemOpen?: (item: ProductCatalogItem) => void;
 };
-declare function ProductCatalog({ items, value, onChange, multiple, allowDeselectSingle, maxSelected, disabled, persistKey, loading, loadingMinDurationMs, pageSize, defaultView, showViewToggle, enableCategoryFilter, enableStatusFilter, enableTagsFilter, maxTagOptions, className, labels, onItemOpen, }: ProductCatalogProps): react_jsx_runtime.JSX.Element;
+declare function ProductCatalog({ items, value, onChange, multiple, allowDeselectSingle, maxSelected, disabled, persistKey, loading, loadingMinDurationMs, pageSize, defaultView, showViewToggle, enableCategoryFilter, enableStatusFilter, enableTagsFilter, maxTagOptions, className, labels, onItemOpen, }: ProductCatalogProps): React__default.JSX.Element;
 
 export { type ProductCatalogItem, type ProductCatalogLabels, type ProductCatalogProps, type ProductStatus, ProductCatalog as default };

package/dist/PromotionsCatalog.d.mts

@@ -1,6 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 import { Tone } from './Badge.mjs';
-import 'react';
 
 type PromotionStatus = "active" | "scheduled" | "paused" | "expired" | "draft";
 type PromotionDiscount = {
@@ -98,6 +97,6 @@ type PromotionsCatalogProps = {
     labels?: PromotionsCatalogLabels;
     onItemOpen?: (item: PromotionCatalogItem) => void;
 };
-declare function PromotionsCatalog({ items, value, onChange, multiple, allowDeselectSingle, maxSelected, disabled, persistKey, loading, loadingMinDurationMs, pageSize, defaultView, showViewToggle, enableStatusFilter, enableChannelFilter, enableAudienceFilter, enableTagsFilter, maxTagOptions, className, labels, onItemOpen, }: PromotionsCatalogProps): react_jsx_runtime.JSX.Element;
+declare function PromotionsCatalog({ items, value, onChange, multiple, allowDeselectSingle, maxSelected, disabled, persistKey, loading, loadingMinDurationMs, pageSize, defaultView, showViewToggle, enableStatusFilter, enableChannelFilter, enableAudienceFilter, enableTagsFilter, maxTagOptions, className, labels, onItemOpen, }: PromotionsCatalogProps): React__default.JSX.Element;
 
 export { type PromotionCatalogItem, type PromotionDiscount, type PromotionStatus, type PromotionsCatalogLabels, type PromotionsCatalogProps, PromotionsCatalog as default };

package/dist/PromotionsCatalog.d.ts

@@ -1,6 +1,5 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 import { Tone } from './Badge.js';
-import 'react';
 
 type PromotionStatus = "active" | "scheduled" | "paused" | "expired" | "draft";
 type PromotionDiscount = {
@@ -98,6 +97,6 @@ type PromotionsCatalogProps = {
     labels?: PromotionsCatalogLabels;
     onItemOpen?: (item: PromotionCatalogItem) => void;
 };
-declare function PromotionsCatalog({ items, value, onChange, multiple, allowDeselectSingle, maxSelected, disabled, persistKey, loading, loadingMinDurationMs, pageSize, defaultView, showViewToggle, enableStatusFilter, enableChannelFilter, enableAudienceFilter, enableTagsFilter, maxTagOptions, className, labels, onItemOpen, }: PromotionsCatalogProps): react_jsx_runtime.JSX.Element;
+declare function PromotionsCatalog({ items, value, onChange, multiple, allowDeselectSingle, maxSelected, disabled, persistKey, loading, loadingMinDurationMs, pageSize, defaultView, showViewToggle, enableStatusFilter, enableChannelFilter, enableAudienceFilter, enableTagsFilter, maxTagOptions, className, labels, onItemOpen, }: PromotionsCatalogProps): React__default.JSX.Element;
 
 export { type PromotionCatalogItem, type PromotionDiscount, type PromotionStatus, type PromotionsCatalogLabels, type PromotionsCatalogProps, PromotionsCatalog as default };

package/dist/QrCode.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
 
 type QrCodeProps = {
     value: string;
@@ -6,6 +6,6 @@ type QrCodeProps = {
     className?: string;
     margin?: number;
 };
-declare function QrCode({ value, size, className, margin }: QrCodeProps): react_jsx_runtime.JSX.Element;
+declare function QrCode({ value, size, className, margin }: QrCodeProps): React__default.JSX.Element;
 
 export { type QrCodeProps, QrCode as default };