framepexls-ui-lib 2.2.2 → 2.2.3

package/dist/AccessibilityFab.d.mts

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { FontSizeControllerProps } from './theme/FontSizeController.mjs';
+import { ThemeToggleProps } from './theme/ThemeToggle.mjs';
+
+type AccessibilityFabLabels = {
+    title?: string;
+    description?: string;
+    close?: string;
+    open?: string;
+    appearanceTitle?: string;
+    appearanceDescription?: string;
+    fontSizeTitle?: string;
+    fontSizeDescription?: string;
+};
+type AccessibilityFabProps = {
+    className?: string;
+    labels?: AccessibilityFabLabels;
+    themeToggleProps?: Omit<ThemeToggleProps, "className">;
+    fontSizeProps?: Omit<FontSizeControllerProps, "className">;
+};
+declare function AccessibilityFab({ className, labels, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
+
+export { type AccessibilityFabLabels, type AccessibilityFabProps, AccessibilityFab as default };

package/dist/AccessibilityFab.d.ts

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { FontSizeControllerProps } from './theme/FontSizeController.js';
+import { ThemeToggleProps } from './theme/ThemeToggle.js';
+
+type AccessibilityFabLabels = {
+    title?: string;
+    description?: string;
+    close?: string;
+    open?: string;
+    appearanceTitle?: string;
+    appearanceDescription?: string;
+    fontSizeTitle?: string;
+    fontSizeDescription?: string;
+};
+type AccessibilityFabProps = {
+    className?: string;
+    labels?: AccessibilityFabLabels;
+    themeToggleProps?: Omit<ThemeToggleProps, "className">;
+    fontSizeProps?: Omit<FontSizeControllerProps, "className">;
+};
+declare function AccessibilityFab({ className, labels, themeToggleProps, fontSizeProps, }: AccessibilityFabProps): React__default.JSX.Element;
+
+export { type AccessibilityFabLabels, type AccessibilityFabProps, AccessibilityFab as default };

package/dist/AccessibilityFab.js

@@ -0,0 +1,147 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var AccessibilityFab_exports = {};
+__export(AccessibilityFab_exports, {
+  default: () => AccessibilityFab
+});
+module.exports = __toCommonJS(AccessibilityFab_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_framer_motion = require("framer-motion");
+var import_Button = __toESM(require("./Button"));
+var import_FontSizeController = __toESM(require("./theme/FontSizeController"));
+var import_ThemeToggle = __toESM(require("./theme/ThemeToggle"));
+var import_iconos = require("./iconos");
+function AccessibilityFab({
+  className,
+  labels,
+  themeToggleProps,
+  fontSizeProps
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const [open, setOpen] = import_react.default.useState(false);
+  const reduceMotion = (0, import_framer_motion.useReducedMotion)();
+  const btnRef = import_react.default.useRef(null);
+  const popRef = import_react.default.useRef(null);
+  const text = {
+    title: (_a = labels == null ? void 0 : labels.title) != null ? _a : "Accesibilidad",
+    description: (_b = labels == null ? void 0 : labels.description) != null ? _b : "Ajusta el modo visual y el tama\xF1o del texto",
+    close: (_c = labels == null ? void 0 : labels.close) != null ? _c : "Cerrar accesibilidad",
+    open: (_d = labels == null ? void 0 : labels.open) != null ? _d : "Abrir accesibilidad",
+    appearanceTitle: (_e = labels == null ? void 0 : labels.appearanceTitle) != null ? _e : "Apariencia",
+    appearanceDescription: (_f = labels == null ? void 0 : labels.appearanceDescription) != null ? _f : "Alterna entre modo claro y oscuro",
+    fontSizeTitle: (_g = labels == null ? void 0 : labels.fontSizeTitle) != null ? _g : "Tama\xF1o del texto",
+    fontSizeDescription: (_h = labels == null ? void 0 : labels.fontSizeDescription) != null ? _h : "Mejora la lectura con un ajuste r\xE1pido"
+  };
+  import_react.default.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      var _a2;
+      if (event.key === "Escape") {
+        setOpen(false);
+        (_a2 = btnRef.current) == null ? void 0 : _a2.focus();
+      }
+    };
+    const onPointerDown = (event) => {
+      const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+      if (popRef.current && path.includes(popRef.current)) return;
+      if (btnRef.current && path.includes(btnRef.current)) return;
+      setOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+    };
+  }, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: ["fixed bottom-5 right-5 z-[70] flex items-end gap-3", className != null ? className : ""].join(" "), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.LazyMotion, { features: import_framer_motion.domAnimation, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: open ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_framer_motion.m.div,
+      {
+        ref: popRef,
+        initial: reduceMotion ? { opacity: 1 } : { opacity: 0, y: 10, scale: 0.98 },
+        animate: reduceMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 },
+        exit: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.98 },
+        transition: reduceMotion ? { duration: 0 } : { duration: 0.18, ease: "easeOut" },
+        className: "w-[min(360px,calc(100vw-1.5rem))] overflow-hidden rounded-[1.75rem] border border-[color-mix(in_oklab,var(--border)_72%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] shadow-[0_30px_90px_rgba(2,12,27,0.24)] backdrop-blur-xl",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 border-b border-[color-mix(in_oklab,var(--border)_70%,transparent)] px-4 py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-[var(--muted)]", children: text.description })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Button.default,
+              {
+                unstyled: true,
+                type: "button",
+                onClick: () => setOpen(false),
+                className: "grid size-9 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] text-[var(--foreground)] transition hover:bg-[color-mix(in_oklab,var(--card)_65%,transparent)]",
+                "aria-label": text.close,
+                title: text.close,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.CloseIcon, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3 p-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.appearanceTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeToggle.default, { cycle: ["light", "dark"], ...themeToggleProps })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontSizeTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FontSizeController.default, { ...fontSizeProps })
+            ] })
+          ] })
+        ]
+      }
+    ) : null }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.default,
+      {
+        unstyled: true,
+        ref: btnRef,
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        className: "group grid size-12 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] text-[var(--foreground)] shadow-[0_24px_60px_rgba(15,23,42,0.22)] backdrop-blur-xl transition hover:scale-[1.02] hover:bg-[color-mix(in_oklab,var(--surface)_92%,transparent)]",
+        "aria-label": open ? text.close : text.open,
+        title: open ? text.close : text.title,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.TextAaIcon, { className: "size-5 opacity-90 transition group-hover:opacity-100", "aria-hidden": true })
+      }
+    )
+  ] });
+}

package/dist/AccessibilityFab.mjs

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import {
+  AnimatePresence,
+  LazyMotion,
+  domAnimation,
+  m,
+  useReducedMotion
+} from "framer-motion";
+import Button from "./Button.mjs";
+import FontSizeController from "./theme/FontSizeController.mjs";
+import ThemeToggle from "./theme/ThemeToggle.mjs";
+import { CloseIcon, TextAaIcon } from "./iconos/index.mjs";
+function AccessibilityFab({
+  className,
+  labels,
+  themeToggleProps,
+  fontSizeProps
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const [open, setOpen] = React.useState(false);
+  const reduceMotion = useReducedMotion();
+  const btnRef = React.useRef(null);
+  const popRef = React.useRef(null);
+  const text = {
+    title: (_a = labels == null ? void 0 : labels.title) != null ? _a : "Accesibilidad",
+    description: (_b = labels == null ? void 0 : labels.description) != null ? _b : "Ajusta el modo visual y el tama\xF1o del texto",
+    close: (_c = labels == null ? void 0 : labels.close) != null ? _c : "Cerrar accesibilidad",
+    open: (_d = labels == null ? void 0 : labels.open) != null ? _d : "Abrir accesibilidad",
+    appearanceTitle: (_e = labels == null ? void 0 : labels.appearanceTitle) != null ? _e : "Apariencia",
+    appearanceDescription: (_f = labels == null ? void 0 : labels.appearanceDescription) != null ? _f : "Alterna entre modo claro y oscuro",
+    fontSizeTitle: (_g = labels == null ? void 0 : labels.fontSizeTitle) != null ? _g : "Tama\xF1o del texto",
+    fontSizeDescription: (_h = labels == null ? void 0 : labels.fontSizeDescription) != null ? _h : "Mejora la lectura con un ajuste r\xE1pido"
+  };
+  React.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event) => {
+      var _a2;
+      if (event.key === "Escape") {
+        setOpen(false);
+        (_a2 = btnRef.current) == null ? void 0 : _a2.focus();
+      }
+    };
+    const onPointerDown = (event) => {
+      const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+      if (popRef.current && path.includes(popRef.current)) return;
+      if (btnRef.current && path.includes(btnRef.current)) return;
+      setOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { className: ["fixed bottom-5 right-5 z-[70] flex items-end gap-3", className != null ? className : ""].join(" "), children: [
+    /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        ref: popRef,
+        initial: reduceMotion ? { opacity: 1 } : { opacity: 0, y: 10, scale: 0.98 },
+        animate: reduceMotion ? { opacity: 1 } : { opacity: 1, y: 0, scale: 1 },
+        exit: reduceMotion ? { opacity: 0 } : { opacity: 0, y: 10, scale: 0.98 },
+        transition: reduceMotion ? { duration: 0 } : { duration: 0.18, ease: "easeOut" },
+        className: "w-[min(360px,calc(100vw-1.5rem))] overflow-hidden rounded-[1.75rem] border border-[color-mix(in_oklab,var(--border)_72%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] shadow-[0_30px_90px_rgba(2,12,27,0.24)] backdrop-blur-xl",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-[color-mix(in_oklab,var(--border)_70%,transparent)] px-4 py-3", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.title }),
+              /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--muted)]", children: text.description })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                unstyled: true,
+                type: "button",
+                onClick: () => setOpen(false),
+                className: "grid size-9 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] text-[var(--foreground)] transition hover:bg-[color-mix(in_oklab,var(--card)_65%,transparent)]",
+                "aria-label": text.close,
+                title: text.close,
+                children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-4", "aria-hidden": true })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 p-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.appearanceTitle }),
+                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.appearanceDescription })
+              ] }),
+              /* @__PURE__ */ jsx(ThemeToggle, { cycle: ["light", "dark"], ...themeToggleProps })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--card)_55%,transparent)] p-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-[var(--foreground)]", children: text.fontSizeTitle }),
+                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-[var(--muted)]", children: text.fontSizeDescription })
+              ] }),
+              /* @__PURE__ */ jsx(FontSizeController, { ...fontSizeProps })
+            ] })
+          ] })
+        ]
+      }
+    ) : null }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        unstyled: true,
+        ref: btnRef,
+        type: "button",
+        onClick: () => setOpen((value) => !value),
+        className: "group grid size-12 place-items-center rounded-2xl border border-[color-mix(in_oklab,var(--border)_70%,transparent)] bg-[color-mix(in_oklab,var(--surface)_84%,transparent)] text-[var(--foreground)] shadow-[0_24px_60px_rgba(15,23,42,0.22)] backdrop-blur-xl transition hover:scale-[1.02] hover:bg-[color-mix(in_oklab,var(--surface)_92%,transparent)]",
+        "aria-label": open ? text.close : text.open,
+        title: open ? text.close : text.title,
+        children: /* @__PURE__ */ jsx(TextAaIcon, { className: "size-5 opacity-90 transition group-hover:opacity-100", "aria-hidden": true })
+      }
+    )
+  ] });
+}
+export {
+  AccessibilityFab as default
+};

package/dist/Checkbox.d.mts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/Checkbox.d.ts

@@ -11,7 +11,7 @@ type CheckboxProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>,
     className?: string;
     inputClassName?: string;
 };
-declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const Checkbox: React__default.ForwardRefExoticComponent<Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     label?: React__default.ReactNode;
     description?: React__default.ReactNode;
     error?: boolean;

package/dist/HeliipLoader.d.mts

@@ -5,7 +5,8 @@ type HeliipLoaderProps = {
     subtitle?: string;
     className?: string;
     compact?: boolean;
+    size?: "sm" | "md" | "lg";
 };
-declare function HeliipLoader({ title, subtitle, className, compact, }: HeliipLoaderProps): React__default.JSX.Element;
+declare function HeliipLoader({ title, subtitle, className, compact, size, }: HeliipLoaderProps): React__default.JSX.Element;
 
 export { type HeliipLoaderProps, HeliipLoader as default };

package/dist/HeliipLoader.d.ts

@@ -5,7 +5,8 @@ type HeliipLoaderProps = {
     subtitle?: string;
     className?: string;
     compact?: boolean;
+    size?: "sm" | "md" | "lg";
 };
-declare function HeliipLoader({ title, subtitle, className, compact, }: HeliipLoaderProps): React__default.JSX.Element;
+declare function HeliipLoader({ title, subtitle, className, compact, size, }: HeliipLoaderProps): React__default.JSX.Element;
 
 export { type HeliipLoaderProps, HeliipLoader as default };

package/dist/HeliipLoader.js

@@ -24,80 +24,26 @@ __export(HeliipLoader_exports, {
 module.exports = __toCommonJS(HeliipLoader_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_framer_motion = require("framer-motion");
-var import_animations = require("./animations");
+var import_iconos = require("./iconos");
 const cx = (...a) => a.filter(Boolean).join(" ");
 function HeliipLoader({
   title = "Heliip",
   subtitle = "Cargando\u2026",
   className,
-  compact = false
+  compact = false,
+  size
 }) {
+  const resolvedSize = size != null ? size : compact ? "sm" : "md";
+  const iconSize = resolvedSize === "lg" ? "h-10 w-10" : resolvedSize === "sm" ? "h-5 w-5" : "h-7 w-7";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
-      className: cx(
-        "w-full",
-        "rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)]",
-        "shadow-2xl ring-1 ring-black/5",
-        compact ? "p-4" : "p-5",
-        className
-      ),
+      "aria-label": subtitle || title,
+      className: cx("inline-flex items-center justify-center text-[var(--primary)]", className),
+      role: "status",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            "div",
-            {
-              className: [
-                "relative grid place-items-center",
-                compact ? "h-10 w-10 rounded-2xl" : "h-12 w-12 rounded-2xl",
-                "bg-[color-mix(in_oklab,var(--primary)_14%,transparent)]",
-                "ring-1 ring-[color-mix(in_oklab,var(--primary)_24%,transparent)]"
-              ].join(" "),
-              "aria-hidden": true,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_framer_motion.motion.div,
-                  {
-                    className: "absolute inset-1 rounded-xl border border-[color-mix(in_oklab,var(--primary)_55%,transparent)]",
-                    animate: { rotate: 360 },
-                    transition: { repeat: Infinity, duration: 1.2, ease: "linear" }
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_framer_motion.motion.div,
-                  {
-                    className: "h-4 w-4 rounded-full bg-[var(--primary)]",
-                    animate: { scale: [1, 1.08, 1] },
-                    transition: { repeat: Infinity, duration: 0.9, ease: "easeInOut" }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("truncate font-semibold tracking-tight", compact ? "text-base" : "text-lg"), children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("mt-0.5 truncate text-[var(--muted)]", compact ? "text-xs" : "text-sm"), children: subtitle })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cx("mt-4 overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--border)_65%,transparent)]", compact ? "h-1.5" : "h-2"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_framer_motion.motion.div,
-          {
-            className: cx("h-full rounded-full bg-[var(--primary)]", compact ? "w-1/3" : "w-2/5"),
-            initial: { x: "-60%" },
-            animate: { x: "160%" },
-            transition: { repeat: Infinity, duration: 1.1, ease: "easeInOut" }
-          }
-        ) }),
-        !compact ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_framer_motion.motion.div,
-          {
-            className: "mt-3 text-xs text-[var(--muted)]",
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            transition: import_animations.microTransition,
-            children: "Esto normalmente toma menos de un segundo."
-          }
-        ) : null
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.motion.span, { animate: { rotate: 360 }, "aria-hidden": true, className: "inline-flex", transition: { duration: 0.8, ease: "linear", repeat: Infinity }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_iconos.SpinnerGapIcon, { className: iconSize }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: subtitle || title })
       ]
     }
   );

package/dist/HeliipLoader.mjs

@@ -1,80 +1,26 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
-import { microTransition } from "./animations.mjs";
+import { SpinnerGapIcon } from "./iconos/index.mjs";
 const cx = (...a) => a.filter(Boolean).join(" ");
 function HeliipLoader({
   title = "Heliip",
   subtitle = "Cargando\u2026",
   className,
-  compact = false
+  compact = false,
+  size
 }) {
+  const resolvedSize = size != null ? size : compact ? "sm" : "md";
+  const iconSize = resolvedSize === "lg" ? "h-10 w-10" : resolvedSize === "sm" ? "h-5 w-5" : "h-7 w-7";
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cx(
-        "w-full",
-        "rounded-3xl border border-[var(--border)] bg-[color-mix(in_oklab,var(--card)_92%,transparent)]",
-        "shadow-2xl ring-1 ring-black/5",
-        compact ? "p-4" : "p-5",
-        className
-      ),
+      "aria-label": subtitle || title,
+      className: cx("inline-flex items-center justify-center text-[var(--primary)]", className),
+      role: "status",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: [
-                "relative grid place-items-center",
-                compact ? "h-10 w-10 rounded-2xl" : "h-12 w-12 rounded-2xl",
-                "bg-[color-mix(in_oklab,var(--primary)_14%,transparent)]",
-                "ring-1 ring-[color-mix(in_oklab,var(--primary)_24%,transparent)]"
-              ].join(" "),
-              "aria-hidden": true,
-              children: [
-                /* @__PURE__ */ jsx(
-                  motion.div,
-                  {
-                    className: "absolute inset-1 rounded-xl border border-[color-mix(in_oklab,var(--primary)_55%,transparent)]",
-                    animate: { rotate: 360 },
-                    transition: { repeat: Infinity, duration: 1.2, ease: "linear" }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  motion.div,
-                  {
-                    className: "h-4 w-4 rounded-full bg-[var(--primary)]",
-                    animate: { scale: [1, 1.08, 1] },
-                    transition: { repeat: Infinity, duration: 0.9, ease: "easeInOut" }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx("div", { className: cx("truncate font-semibold tracking-tight", compact ? "text-base" : "text-lg"), children: title }),
-            /* @__PURE__ */ jsx("div", { className: cx("mt-0.5 truncate text-[var(--muted)]", compact ? "text-xs" : "text-sm"), children: subtitle })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cx("mt-4 overflow-hidden rounded-full bg-[color-mix(in_oklab,var(--border)_65%,transparent)]", compact ? "h-1.5" : "h-2"), children: /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: cx("h-full rounded-full bg-[var(--primary)]", compact ? "w-1/3" : "w-2/5"),
-            initial: { x: "-60%" },
-            animate: { x: "160%" },
-            transition: { repeat: Infinity, duration: 1.1, ease: "easeInOut" }
-          }
-        ) }),
-        !compact ? /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            className: "mt-3 text-xs text-[var(--muted)]",
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            transition: microTransition,
-            children: "Esto normalmente toma menos de un segundo."
-          }
-        ) : null
+        /* @__PURE__ */ jsx(motion.span, { animate: { rotate: 360 }, "aria-hidden": true, className: "inline-flex", transition: { duration: 0.8, ease: "linear", repeat: Infinity }, children: /* @__PURE__ */ jsx(SpinnerGapIcon, { className: iconSize }) }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: subtitle || title })
       ]
     }
   );

package/dist/index.d.mts

@@ -18,7 +18,7 @@ export { AnimatedBody, SortTh, default as Table, Td, Th } from './Table.mjs';
 export { default as DataTable, DataTableColumn, DataTableEditorArgs, DataTableSort } from './DataTable.mjs';
 export { default as DataTableCard, DataTableCardProps } from './DataTableCard.mjs';
 export { default as DataTableCardFooter, DataTableCardFooterProps } from './DataTableCardFooter.mjs';
-export { DataPageKpiTickerItem, DataPageKpiTickerRow, default as DataPageLayout, DataPageLayoutProps, DataPagePaginationProps } from './DataPageLayout.mjs';
+export { default as DataLayout, DataPageKpiTickerItem, DataPageKpiTickerRow, default as DataPageLayout, DataPageLayoutProps, DataPagePaginationProps } from './DataPageLayout.mjs';
 export { default as TableRecordButton } from './TableRecordButton.mjs';
 export { default as Pagination, PaginationProps } from './Pagination.mjs';
 export { default as InfoGrid, InfoItem } from './InfoGrid.mjs';
@@ -100,6 +100,7 @@ export { DocumentBlock, DocumentModelV1, DocumentModelV2, createEmptyDocument, d
 export { default as WordEditor, WordEditorLabels, WordEditorProps, WordPreview } from './WordEditor.mjs';
 export { default as ThemeController, ThemeControllerProps } from './theme/ThemeController.mjs';
 export { default as FontSizeController, FontSizeControllerProps } from './theme/FontSizeController.mjs';
+export { default as AccessibilityFab, AccessibilityFabLabels, AccessibilityFabProps } from './AccessibilityFab.mjs';
 export { default as Login, LoginMedia, LoginProps, LoginVariant } from './Login.mjs';
 export { LoginHelpItem, default as LoginTools, LoginToolsProps } from './LoginTools.mjs';
 export { default as Carousel, CarouselApi, CarouselProps, CarouselSlide, useCarousel } from './Carousel.mjs';

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export { AnimatedBody, SortTh, default as Table, Td, Th } from './Table.js';
 export { default as DataTable, DataTableColumn, DataTableEditorArgs, DataTableSort } from './DataTable.js';
 export { default as DataTableCard, DataTableCardProps } from './DataTableCard.js';
 export { default as DataTableCardFooter, DataTableCardFooterProps } from './DataTableCardFooter.js';
-export { DataPageKpiTickerItem, DataPageKpiTickerRow, default as DataPageLayout, DataPageLayoutProps, DataPagePaginationProps } from './DataPageLayout.js';
+export { default as DataLayout, DataPageKpiTickerItem, DataPageKpiTickerRow, default as DataPageLayout, DataPageLayoutProps, DataPagePaginationProps } from './DataPageLayout.js';
 export { default as TableRecordButton } from './TableRecordButton.js';
 export { default as Pagination, PaginationProps } from './Pagination.js';
 export { default as InfoGrid, InfoItem } from './InfoGrid.js';
@@ -100,6 +100,7 @@ export { DocumentBlock, DocumentModelV1, DocumentModelV2, createEmptyDocument, d
 export { default as WordEditor, WordEditorLabels, WordEditorProps, WordPreview } from './WordEditor.js';
 export { default as ThemeController, ThemeControllerProps } from './theme/ThemeController.js';
 export { default as FontSizeController, FontSizeControllerProps } from './theme/FontSizeController.js';
+export { default as AccessibilityFab, AccessibilityFabLabels, AccessibilityFabProps } from './AccessibilityFab.js';
 export { default as Login, LoginMedia, LoginProps, LoginVariant } from './Login.js';
 export { LoginHelpItem, default as LoginTools, LoginToolsProps } from './LoginTools.js';
 export { default as Carousel, CarouselApi, CarouselProps, CarouselSlide, useCarousel } from './Carousel.js';

package/dist/index.js

@@ -29,6 +29,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var index_exports = {};
 __export(index_exports, {
+  AccessibilityFab: () => import_AccessibilityFab.default,
   ActionIconButton: () => import_ActionIconButton.default,
   AnimatedBody: () => import_Table.AnimatedBody,
   Animations: () => Animations,
@@ -57,6 +58,7 @@ __export(index_exports, {
   ColumnSelector: () => import_ColumnSelector.default,
   ComboSelect: () => import_ComboSelect.default,
   CtrHorizontalBar: () => import_AnalyticsCharts.CtrHorizontalBar,
+  DataLayout: () => import_DataPageLayout.default,
   DataPageKpiTickerRow: () => import_DataPageLayout.DataPageKpiTickerRow,
   DataPageLayout: () => import_DataPageLayout.default,
   DataTable: () => import_DataTable.default,
@@ -281,6 +283,7 @@ __reExport(index_exports, require("./document"), module.exports);
 var import_WordEditor = __toESM(require("./WordEditor"));
 var import_ThemeController = __toESM(require("./theme/ThemeController"));
 var import_FontSizeController = __toESM(require("./theme/FontSizeController"));
+var import_AccessibilityFab = __toESM(require("./AccessibilityFab"));
 var import_Login = __toESM(require("./Login"));
 var import_LoginTools = __toESM(require("./LoginTools"));
 var import_Carousel = __toESM(require("./Carousel"));
@@ -288,6 +291,7 @@ var import_LoginCarousel = __toESM(require("./LoginCarousel"));
 var import_LoginGallery = __toESM(require("./LoginGallery"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AccessibilityFab,
   ActionIconButton,
   AnimatedBody,
   Animations,
@@ -316,6 +320,7 @@ var import_LoginGallery = __toESM(require("./LoginGallery"));
   ColumnSelector,
   ComboSelect,
   CtrHorizontalBar,
+  DataLayout,
   DataPageKpiTickerRow,
   DataPageLayout,
   DataTable,

package/dist/index.mjs

@@ -21,80 +21,80 @@ import { default as default17, Th, SortTh, Td, AnimatedBody } from "./Table.mjs"
 import { default as default18 } from "./DataTable.mjs";
 import { default as default19 } from "./DataTableCard.mjs";
 import { default as default20 } from "./DataTableCardFooter.mjs";
-import { default as default21, DataPageKpiTickerRow } from "./DataPageLayout.mjs";
-import { default as default22 } from "./TableRecordButton.mjs";
-import { default as default23 } from "./Pagination.mjs";
-import { default as default24 } from "./InfoGrid.mjs";
-import { default as default25 } from "./ChartCard.mjs";
-import { default as default26 } from "./StatCard.mjs";
-import { default as default27 } from "./AssetTickerRow.mjs";
-import { default as default28 } from "./QuickActionsDock.mjs";
-import { default as default29 } from "./AssetPerformanceCard.mjs";
-import { default as default30 } from "./UploadCard.mjs";
+import { default as default21, default as default22, DataPageKpiTickerRow } from "./DataPageLayout.mjs";
+import { default as default23 } from "./TableRecordButton.mjs";
+import { default as default24 } from "./Pagination.mjs";
+import { default as default25 } from "./InfoGrid.mjs";
+import { default as default26 } from "./ChartCard.mjs";
+import { default as default27 } from "./StatCard.mjs";
+import { default as default28 } from "./AssetTickerRow.mjs";
+import { default as default29 } from "./QuickActionsDock.mjs";
+import { default as default30 } from "./AssetPerformanceCard.mjs";
+import { default as default31 } from "./UploadCard.mjs";
 import { TopImpresionesBar, CtrHorizontalBar, DestinoDonut } from "./AnalyticsCharts.mjs";
-import { default as default31 } from "./MediaCard.mjs";
-import { default as default32 } from "./MediaLibraryLayout.mjs";
-import { default as default33 } from "./MediaTile.mjs";
-import { default as default34 } from "./MediaSelector.mjs";
-import { default as default35 } from "./KpiCard.mjs";
-import { default as default36 } from "./Badge.mjs";
-import { default as default37 } from "./BadgeCluster.mjs";
-import { default as default38 } from "./Breadcrumb.mjs";
-import { default as default39 } from "./EmptyState.mjs";
-import { default as default40 } from "./Money.mjs";
-import { default as default41, formatCurrencyValue, formatNumericValue, formatPercentValue } from "./Numeric.mjs";
-import { default as default42 } from "./TimeAgo.mjs";
-import { default as default43 } from "./AvatarSquare.mjs";
-import { default as default44 } from "./AvatarGroup.mjs";
-import { default as default45 } from "./AppTopbar.mjs";
-import { default as default46 } from "./AuthTopbar.mjs";
-import { default as default47 } from "./OrderButton.mjs";
-import { default as default48 } from "./SearchInput.mjs";
-import { default as default49 } from "./PasswordField.mjs";
+import { default as default32 } from "./MediaCard.mjs";
+import { default as default33 } from "./MediaLibraryLayout.mjs";
+import { default as default34 } from "./MediaTile.mjs";
+import { default as default35 } from "./MediaSelector.mjs";
+import { default as default36 } from "./KpiCard.mjs";
+import { default as default37 } from "./Badge.mjs";
+import { default as default38 } from "./BadgeCluster.mjs";
+import { default as default39 } from "./Breadcrumb.mjs";
+import { default as default40 } from "./EmptyState.mjs";
+import { default as default41 } from "./Money.mjs";
+import { default as default42, formatCurrencyValue, formatNumericValue, formatPercentValue } from "./Numeric.mjs";
+import { default as default43 } from "./TimeAgo.mjs";
+import { default as default44 } from "./AvatarSquare.mjs";
+import { default as default45 } from "./AvatarGroup.mjs";
+import { default as default46 } from "./AppTopbar.mjs";
+import { default as default47 } from "./AuthTopbar.mjs";
+import { default as default48 } from "./OrderButton.mjs";
+import { default as default49 } from "./SearchInput.mjs";
+import { default as default50 } from "./PasswordField.mjs";
 import { validatePassword, generatePassword } from "./PasswordField.mjs";
-import { default as default50 } from "./WorkflowDiagram.mjs";
-import { default as default51 } from "./LicenseStatus.mjs";
-import { default as default52 } from "./ReviewHistory.mjs";
+import { default as default51 } from "./WorkflowDiagram.mjs";
+import { default as default52 } from "./LicenseStatus.mjs";
+import { default as default53 } from "./ReviewHistory.mjs";
 import { ReviewHistoryDialog } from "./ReviewHistory.mjs";
-import { default as default53 } from "./ChangeHistory.mjs";
-import { default as default54 } from "./Reviews.mjs";
-import { default as default55 } from "./ProductCatalog.mjs";
-import { default as default56 } from "./PromotionsCatalog.mjs";
-import { default as default57 } from "./MultiComboSelect.mjs";
-import { default as default58 } from "./Sidebar.mjs";
-import { default as default59 } from "./Card.mjs";
-import { default as default60 } from "./Drawer.mjs";
-import { default as default61 } from "./Tooltip.mjs";
-import { default as default62 } from "./NotificationsCenter.mjs";
-import { default as default63 } from "./ChatCenter.mjs";
-import { default as default64 } from "./ChatbotCenter.mjs";
-import { default as default65 } from "./SupportChatWidget.mjs";
-import { default as default66 } from "./Link.mjs";
+import { default as default54 } from "./ChangeHistory.mjs";
+import { default as default55 } from "./Reviews.mjs";
+import { default as default56 } from "./ProductCatalog.mjs";
+import { default as default57 } from "./PromotionsCatalog.mjs";
+import { default as default58 } from "./MultiComboSelect.mjs";
+import { default as default59 } from "./Sidebar.mjs";
+import { default as default60 } from "./Card.mjs";
+import { default as default61 } from "./Drawer.mjs";
+import { default as default62 } from "./Tooltip.mjs";
+import { default as default63 } from "./NotificationsCenter.mjs";
+import { default as default64 } from "./ChatCenter.mjs";
+import { default as default65 } from "./ChatbotCenter.mjs";
+import { default as default66 } from "./SupportChatWidget.mjs";
+import { default as default67 } from "./Link.mjs";
 import { ToastProvider, useToast } from "./Toast.mjs";
-import { default as default67 } from "./StorageUsage.mjs";
-import { default as default68 } from "./FileButton.mjs";
-import { default as default69 } from "./SegmentedTabs.mjs";
-import { default as default70 } from "./OmniSearch.mjs";
+import { default as default68 } from "./StorageUsage.mjs";
+import { default as default69 } from "./FileButton.mjs";
+import { default as default70 } from "./SegmentedTabs.mjs";
+import { default as default71 } from "./OmniSearch.mjs";
 import { OmniSearchRegistryProvider, useOmniSearchRegistry, useRegisterOmniSearchItems } from "./OmniSearch.mjs";
-import { default as default71 } from "./LiveCursors.mjs";
+import { default as default72 } from "./LiveCursors.mjs";
 import * as Animations from "./animations.mjs";
-import { default as default72 } from "./MotionProvider.mjs";
-import { default as default73 } from "./LanguageSwitcher.mjs";
-import { default as default74 } from "./ImpersonationSwitcher.mjs";
-import { default as default75 } from "./ImpersonationDialog.mjs";
-import { default as default76 } from "./Tour.mjs";
-import { default as default77 } from "./QrCode.mjs";
-import { default as default78 } from "./ShareAccess.mjs";
-import { default as default79 } from "./KnowledgeBase.mjs";
-import { default as default80 } from "./CalendarPanel.mjs";
-import { default as default81 } from "./TimePopover.mjs";
+import { default as default73 } from "./MotionProvider.mjs";
+import { default as default74 } from "./LanguageSwitcher.mjs";
+import { default as default75 } from "./ImpersonationSwitcher.mjs";
+import { default as default76 } from "./ImpersonationDialog.mjs";
+import { default as default77 } from "./Tour.mjs";
+import { default as default78 } from "./QrCode.mjs";
+import { default as default79 } from "./ShareAccess.mjs";
+import { default as default80 } from "./KnowledgeBase.mjs";
+import { default as default81 } from "./CalendarPanel.mjs";
+import { default as default82 } from "./TimePopover.mjs";
 import { WeekPopover, MonthPopover } from "./TimePopover.mjs";
-import { default as default82 } from "./TimePanel.mjs";
-import { default as default83 } from "./TimeRangeField.mjs";
-import { default as default84 } from "./Steps.mjs";
+import { default as default83 } from "./TimePanel.mjs";
+import { default as default84 } from "./TimeRangeField.mjs";
+import { default as default85 } from "./Steps.mjs";
 import { StepsNav } from "./Steps.mjs";
-import { default as default85 } from "./PageTransition.mjs";
-import { default as default86 } from "./HeliipLoader.mjs";
+import { default as default86 } from "./PageTransition.mjs";
+import { default as default87 } from "./HeliipLoader.mjs";
 import {
   BookOpenIcon,
   CoinsIcon,
@@ -108,151 +108,154 @@ import {
   WrenchIcon
 } from "./iconos/index.mjs";
 export * from "./iconos/index.mjs";
-import { default as default87 } from "./ColorPicker.mjs";
-import { default as default88, useTheme } from "./theme/ThemeProvider.mjs";
-import { default as default89 } from "./theme/ThemeScript.mjs";
-import { default as default90 } from "./theme/ThemeToggle.mjs";
-import { default as default91 } from "./MarkdownEditor.mjs";
-import { default as default92 } from "./QuoteEditor.mjs";
+import { default as default88 } from "./ColorPicker.mjs";
+import { default as default89, useTheme } from "./theme/ThemeProvider.mjs";
+import { default as default90 } from "./theme/ThemeScript.mjs";
+import { default as default91 } from "./theme/ThemeToggle.mjs";
+import { default as default92 } from "./MarkdownEditor.mjs";
+import { default as default93 } from "./QuoteEditor.mjs";
 export * from "./quote.mjs";
-import { default as default93, DocumentPreview } from "./DocumentEditor.mjs";
+import { default as default94, DocumentPreview } from "./DocumentEditor.mjs";
 export * from "./document.mjs";
-import { default as default94, WordPreview } from "./WordEditor.mjs";
-import { default as default95 } from "./theme/ThemeController.mjs";
-import { default as default96 } from "./theme/FontSizeController.mjs";
-import { default as default97 } from "./Login.mjs";
-import { default as default98 } from "./LoginTools.mjs";
-import { default as default99, useCarousel } from "./Carousel.mjs";
-import { default as default100 } from "./LoginCarousel.mjs";
-import { default as default101 } from "./LoginGallery.mjs";
+import { default as default95, WordPreview } from "./WordEditor.mjs";
+import { default as default96 } from "./theme/ThemeController.mjs";
+import { default as default97 } from "./theme/FontSizeController.mjs";
+import { default as default98 } from "./AccessibilityFab.mjs";
+import { default as default99 } from "./Login.mjs";
+import { default as default100 } from "./LoginTools.mjs";
+import { default as default101, useCarousel } from "./Carousel.mjs";
+import { default as default102 } from "./LoginCarousel.mjs";
+import { default as default103 } from "./LoginGallery.mjs";
 export {
+  default98 as AccessibilityFab,
   default3 as ActionIconButton,
   AnimatedBody,
   Animations,
-  default45 as AppTopbar,
-  default29 as AssetPerformanceCard,
-  default27 as AssetTickerRow,
-  default46 as AuthTopbar,
-  default44 as AvatarGroup,
-  default43 as AvatarSquare,
-  default36 as Badge,
-  default37 as BadgeCluster,
+  default46 as AppTopbar,
+  default30 as AssetPerformanceCard,
+  default28 as AssetTickerRow,
+  default47 as AuthTopbar,
+  default45 as AvatarGroup,
+  default44 as AvatarSquare,
+  default37 as Badge,
+  default38 as BadgeCluster,
   BookOpenIcon,
-  default38 as Breadcrumb,
+  default39 as Breadcrumb,
   default2 as Button,
-  default80 as CalendarPanel,
-  default59 as Card,
-  default99 as Carousel,
-  default53 as ChangeHistory,
-  default25 as ChartCard,
-  default63 as ChatCenter,
-  default64 as ChatbotCenter,
+  default81 as CalendarPanel,
+  default60 as Card,
+  default101 as Carousel,
+  default54 as ChangeHistory,
+  default26 as ChartCard,
+  default64 as ChatCenter,
+  default65 as ChatbotCenter,
   default7 as Checkbox,
   default8 as CheckboxPillsGroup,
   CoinsIcon,
-  default87 as ColorPicker,
+  default88 as ColorPicker,
   default13 as ColumnSelector,
   default12 as ComboSelect,
   CtrHorizontalBar,
+  default21 as DataLayout,
   DataPageKpiTickerRow,
-  default21 as DataPageLayout,
+  default22 as DataPageLayout,
   default18 as DataTable,
   default19 as DataTableCard,
   default20 as DataTableCardFooter,
   default14 as DateTimeField,
   DestinoDonut,
   default15 as Dialog,
-  default93 as DocumentEditor,
+  default94 as DocumentEditor,
   DocumentPreview,
-  default60 as Drawer,
+  default61 as Drawer,
   default16 as Dropdown,
-  default39 as EmptyState,
+  default40 as EmptyState,
   EnvelopeSimpleIcon,
-  default68 as FileButton,
+  default69 as FileButton,
   FileTextIcon,
   default9 as FiltersMultiSelect,
-  default96 as FontSizeController,
+  default97 as FontSizeController,
   FunnelSimpleIcon,
   GraduationCapIcon,
-  default86 as HeliipLoader,
+  default87 as HeliipLoader,
   I18nProvider,
-  default75 as ImpersonationDialog,
-  default74 as ImpersonationSwitcher,
-  default24 as InfoGrid,
+  default76 as ImpersonationDialog,
+  default75 as ImpersonationSwitcher,
+  default25 as InfoGrid,
   default5 as Input,
   KanbanIcon,
-  default79 as KnowledgeBase,
-  default35 as KpiCard,
-  default73 as LanguageSwitcher,
-  default51 as LicenseStatus,
-  default66 as Link,
-  default71 as LiveCursors,
-  default97 as Login,
-  default100 as LoginCarousel,
-  default101 as LoginGallery,
-  default98 as LoginTools,
+  default80 as KnowledgeBase,
+  default36 as KpiCard,
+  default74 as LanguageSwitcher,
+  default52 as LicenseStatus,
+  default67 as Link,
+  default72 as LiveCursors,
+  default99 as Login,
+  default102 as LoginCarousel,
+  default103 as LoginGallery,
+  default100 as LoginTools,
   default4 as Map,
-  default91 as MarkdownEditor,
-  default31 as MediaCard,
-  default32 as MediaLibraryLayout,
-  default34 as MediaSelector,
-  default33 as MediaTile,
-  default40 as Money,
+  default92 as MarkdownEditor,
+  default32 as MediaCard,
+  default33 as MediaLibraryLayout,
+  default35 as MediaSelector,
+  default34 as MediaTile,
+  default41 as Money,
   MonitorIcon,
   MonthPopover,
-  default72 as MotionProvider,
-  default57 as MultiComboSelect,
-  default62 as NotificationsCenter,
-  default41 as Numeric,
-  default70 as OmniSearch,
+  default73 as MotionProvider,
+  default58 as MultiComboSelect,
+  default63 as NotificationsCenter,
+  default42 as Numeric,
+  default71 as OmniSearch,
   OmniSearchRegistryProvider,
-  default47 as OrderButton,
+  default48 as OrderButton,
   default10 as PageScaffold,
-  default85 as PageTransition,
-  default23 as Pagination,
-  default49 as PasswordField,
-  default55 as ProductCatalog,
-  default56 as PromotionsCatalog,
-  default77 as QrCode,
-  default28 as QuickActionsDock,
-  default92 as QuoteEditor,
-  default52 as ReviewHistory,
+  default86 as PageTransition,
+  default24 as Pagination,
+  default50 as PasswordField,
+  default56 as ProductCatalog,
+  default57 as PromotionsCatalog,
+  default78 as QrCode,
+  default29 as QuickActionsDock,
+  default93 as QuoteEditor,
+  default53 as ReviewHistory,
   ReviewHistoryDialog,
-  default54 as Reviews,
-  default48 as SearchInput,
-  default69 as SegmentedTabs,
+  default55 as Reviews,
+  default49 as SearchInput,
+  default70 as SegmentedTabs,
   default11 as Select,
-  default78 as ShareAccess,
-  default58 as Sidebar,
+  default79 as ShareAccess,
+  default59 as Sidebar,
   SortTh,
-  default26 as StatCard,
-  default84 as Steps,
+  default27 as StatCard,
+  default85 as Steps,
   StepsNav,
-  default67 as StorageUsage,
+  default68 as StorageUsage,
   SuitcaseIcon,
-  default65 as SupportChatWidget,
+  default66 as SupportChatWidget,
   default17 as Table,
-  default22 as TableRecordButton,
+  default23 as TableRecordButton,
   Td,
   default6 as Textarea,
   Th,
-  default95 as ThemeController,
-  default88 as ThemeProvider,
-  default89 as ThemeScript,
-  default90 as ThemeToggle,
-  default42 as TimeAgo,
-  default82 as TimePanel,
-  default81 as TimePopover,
-  default83 as TimeRangeField,
+  default96 as ThemeController,
+  default89 as ThemeProvider,
+  default90 as ThemeScript,
+  default91 as ThemeToggle,
+  default43 as TimeAgo,
+  default83 as TimePanel,
+  default82 as TimePopover,
+  default84 as TimeRangeField,
   ToastProvider,
-  default61 as Tooltip,
+  default62 as Tooltip,
   TopImpresionesBar,
-  default76 as Tour,
-  default30 as UploadCard,
+  default77 as Tour,
+  default31 as UploadCard,
   WeekPopover,
-  default94 as WordEditor,
+  default95 as WordEditor,
   WordPreview,
-  default50 as WorkflowDiagram,
+  default51 as WorkflowDiagram,
   WrenchIcon,
   formatCurrencyValue,
   formatNumericValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "framepexls-ui-lib",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "private": false,
   "license": "MIT",
   "description": "Componentes UI de Framepexls para React/Next.",