@tecsinapse/cortex-react 1.3.0-beta.25 → 1.3.0-beta.26

package/dist/esm/components/Menubar/Categories.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import Masonry from '../Masonry.js';
 
 const Categories = ({ children }) => {
-  return /* @__PURE__ */ React.createElement(Masonry, { columns: 4 }, children);
+  return /* @__PURE__ */ React__default.createElement(Masonry, { columns: 4 }, children);
 };
 
 export { Categories as default };

package/dist/esm/components/Menubar/Category.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 import { category } from '../../styles/menubar.js';
 
 const Category = ({ title, options, render }) => {
   const { text, hr, container } = category();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", { className: text() }, title), /* @__PURE__ */ React.createElement("hr", { className: hr() }), /* @__PURE__ */ React.createElement("div", { className: container() }, options.map((i) => render(i))));
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("p", { className: text() }, title), /* @__PURE__ */ React__default.createElement("hr", { className: hr() }), /* @__PURE__ */ React__default.createElement("div", { className: container() }, options.map((i) => render(i))));
 };
 
 export { Category as default };

package/dist/esm/components/Menubar/Dropdown.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { menubar, animate } from '../../styles/menubar.js';
 import clsx from 'clsx';
 import { useMenubar } from '../../provider/MenubarProvider.js';
@@ -7,7 +7,7 @@ import '../../provider/SnackbarProvider.js';
 const { dropdown } = menubar();
 const Dropdown = ({ children, ...rest }) => {
   const [show] = useMenubar();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: clsx(dropdown({ show }), animate({ show })),

package/dist/esm/components/Menubar/DropdownRoot.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Menubar } from './index.js';
 import MostUsedList from './MostUsedList.js';
 
@@ -8,7 +8,7 @@ const DropdownRoot = ({
   labelMostUsed
 }) => {
   const hasMostUsed = mostUsed && (mostUsed ?? []).length > 0;
-  return /* @__PURE__ */ React.createElement(Menubar.Dropdown, null, hasMostUsed ? /* @__PURE__ */ React.createElement(Menubar.MostUsed, { label: labelMostUsed }, /* @__PURE__ */ React.createElement(MostUsedList, { mostUsed })) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement(Menubar.Categories, null, options.map((item, index) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Menubar.Dropdown, null, hasMostUsed ? /* @__PURE__ */ React__default.createElement(Menubar.MostUsed, { label: labelMostUsed }, /* @__PURE__ */ React__default.createElement(MostUsedList, { mostUsed })) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), /* @__PURE__ */ React__default.createElement(Menubar.Categories, null, options.map((item, index) => /* @__PURE__ */ React__default.createElement(
     Menubar.Category,
     {
       key: `${item.title}-${index}`,
@@ -16,14 +16,14 @@ const DropdownRoot = ({
       options: item.items,
       render: (prop) => {
         const { title, items, ...rest } = prop;
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ React__default.createElement(
           Menubar.Item,
           {
             key: prop.title,
             ...rest,
             subItems: items ?? [],
             renderSubItems: ({ title: title2, ...rest2 }) => {
-              return /* @__PURE__ */ React.createElement(Menubar.SubItem, { key: title2, ...rest2 }, title2);
+              return /* @__PURE__ */ React__default.createElement(Menubar.SubItem, { key: title2, ...rest2 }, title2);
             }
           },
           title

package/dist/esm/components/Menubar/Header.js

@@ -1,21 +1,21 @@
-import React from 'react';
-import { menubar } from '../../styles/menubar.js';
-import { Button } from '../Button.js';
+import React__default from 'react';
 import { IoMenu } from 'react-icons/io5';
 import { useMenubar } from '../../provider/MenubarProvider.js';
 import '../../provider/SnackbarProvider.js';
+import { menubar } from '../../styles/menubar.js';
+import { Button } from '../Button.js';
 
 const { header } = menubar();
 const Header = ({ children, className, ...rest }) => {
   const [show, setShow] = useMenubar();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: header({ className }),
       "data-testid": "header-menubar",
       ...rest
     },
-    /* @__PURE__ */ React.createElement(Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, /* @__PURE__ */ React.createElement(IoMenu, { size: 16 })),
+    /* @__PURE__ */ React__default.createElement(Button, { variants: { size: "square" }, onClick: () => setShow(!show) }, /* @__PURE__ */ React__default.createElement(IoMenu, { size: 16 })),
     children
   );
 };

package/dist/esm/components/Menubar/IconControlSubItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { item } from '../../styles/menubar.js';
 import { IoCaretUpCircleOutline, IoCaretDownCircleOutline } from 'react-icons/io5';
 
@@ -11,7 +11,7 @@ const IconControlSubItem = ({
     e.stopPropagation();
     setShow(!show);
   };
-  return /* @__PURE__ */ React.createElement("div", { onClick: handleClick, "data-testid": "icon-sub-item-menubar" }, show ? /* @__PURE__ */ React.createElement(IoCaretUpCircleOutline, { className: icon() }) : /* @__PURE__ */ React.createElement(IoCaretDownCircleOutline, { className: icon() }));
+  return /* @__PURE__ */ React__default.createElement("div", { onClick: handleClick, "data-testid": "icon-sub-item-menubar" }, show ? /* @__PURE__ */ React__default.createElement(IoCaretUpCircleOutline, { className: icon() }) : /* @__PURE__ */ React__default.createElement(IoCaretDownCircleOutline, { className: icon() }));
 };
 
 export { IconControlSubItem as default };

package/dist/esm/components/Menubar/Item.js

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import IconControlSubItem from './IconControlSubItem.js';
+import React__default, { useState } from 'react';
 import { item } from '../../styles/menubar.js';
+import IconControlSubItem from './IconControlSubItem.js';
 import ItemLink from './ItemLink.js';
 
 const { container, text } = item();
@@ -14,7 +14,7 @@ const Item = ({
 }) => {
   const [showSubItem, setShowSubItem] = useState(false);
   const hasSubItems = (subItems ?? []).length > 0;
-  return /* @__PURE__ */ React.createElement(ItemLink, { href }, /* @__PURE__ */ React.createElement("div", { "data-testid": "item-menubar", ...rest, className: container() }, /* @__PURE__ */ React.createElement("div", { className: text({ className }) }, children), hasSubItems ? /* @__PURE__ */ React.createElement(IconControlSubItem, { show: showSubItem, setShow: setShowSubItem }) : /* @__PURE__ */ React.createElement(React.Fragment, null)), showSubItem ? /* @__PURE__ */ React.createElement(React.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  return /* @__PURE__ */ React__default.createElement(ItemLink, { href }, /* @__PURE__ */ React__default.createElement("div", { "data-testid": "item-menubar", ...rest, className: container() }, /* @__PURE__ */ React__default.createElement("div", { className: text({ className }) }, children), hasSubItems ? /* @__PURE__ */ React__default.createElement(IconControlSubItem, { show: showSubItem, setShow: setShowSubItem }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)), showSubItem ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, subItems?.map((subItem) => renderSubItems?.(subItem))) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
 };
 
 export { Item as default };

package/dist/esm/components/Menubar/ItemLink.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React__default from 'react';
 
 const ItemLink = ({ href, children, classNameAnchor }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, href ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, href ? /* @__PURE__ */ React__default.createElement(
     "a",
     {
       href,

package/dist/esm/components/Menubar/Left.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 import { menubar } from '../../styles/menubar.js';
 
 const { left } = menubar();
 const Left = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: left(), "data-testid": "header-left-menubar", ...rest }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: left(), "data-testid": "header-left-menubar", ...rest }, children);
 };
 
 export { Left as default };

package/dist/esm/components/Menubar/MostUsed.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 import { mostUsed } from '../../styles/menubar.js';
 
 const { container, label: labelClass, containerList } = mostUsed();
 const MostUsed = ({ label, children, ...rest }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React.createElement("div", { className: containerList() }, children));
+  return /* @__PURE__ */ React__default.createElement("div", { className: container(), "data-testid": "most-used-menubar", ...rest }, /* @__PURE__ */ React__default.createElement("p", { className: labelClass() }, label), /* @__PURE__ */ React__default.createElement("div", { className: containerList() }, children));
 };
 
 export { MostUsed as default };

package/dist/esm/components/Menubar/MostUsedItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { mostUsedItem } from '../../styles/menubar.js';
 import { Card } from '../Card.js';
 import ItemLink from './ItemLink.js';
@@ -14,15 +14,15 @@ const MostUsedItem = ({
   href,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(ItemLink, { href, classNameAnchor: "w-full" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(ItemLink, { href, classNameAnchor: "w-full" }, /* @__PURE__ */ React__default.createElement(
     Card,
     {
       ...rest,
       "data-testid": "most-used-item-menubar",
       className: container()
     },
-    /* @__PURE__ */ React.createElement("p", { className: titleClass() }, title),
-    /* @__PURE__ */ React.createElement("p", { className: categoryClass() }, category)
+    /* @__PURE__ */ React__default.createElement("p", { className: titleClass() }, title),
+    /* @__PURE__ */ React__default.createElement("p", { className: categoryClass() }, category)
   ));
 };
 

package/dist/esm/components/Menubar/MostUsedList.js

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React__default, { Fragment } from 'react';
 import 'clsx';
 import '@internationalized/date';
 import '../Badge.js';
@@ -37,16 +37,20 @@ import '../Select/Trigger.js';
 import '../Snackbar/BaseSnackbar.js';
 import 'react-icons/io';
 import '../Tag.js';
-import '../TextArea.js';
+import '../TextArea/Box.js';
+import '../TextArea/Face.js';
+import '../TextArea/Left.js';
+import '../TextArea/Right.js';
+import '../TextArea/Root.js';
 import '../Toggle.js';
 import '../Tooltip.js';
 
 const MostUsedList = ({ mostUsed }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, (mostUsed ?? []).map((item, index) => {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (mostUsed ?? []).map((item, index) => {
     const { title, category, ...rest } = item;
     if (index > 3)
-      return /* @__PURE__ */ React.createElement(Fragment, { key: `${title}-${category}` });
-    return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React__default.createElement(Fragment, { key: `${title}-${category}` });
+    return /* @__PURE__ */ React__default.createElement(
       Menubar.MostUsedItem,
       {
         key: `${title}-${category}`,

package/dist/esm/components/Menubar/Right.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 import { menubar } from '../../styles/menubar.js';
 
 const { right } = menubar();
 const Right = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: right(), "data-testid": "header-right-menubar", ...rest }, children);
 };
 
 export { Right as default };

package/dist/esm/components/Menubar/Root.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 import { MenubarProvider } from '../../provider/MenubarProvider.js';
 import '../../provider/SnackbarProvider.js';
 
 const Root = ({ children, ...rest }) => {
-  return /* @__PURE__ */ React.createElement(MenubarProvider, null, /* @__PURE__ */ React.createElement("div", { ...rest }, children));
+  return /* @__PURE__ */ React__default.createElement(MenubarProvider, null, /* @__PURE__ */ React__default.createElement("div", { ...rest }, children));
 };
 
 export { Root as default };

package/dist/esm/components/Menubar/Search.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Input } from '../Input/index.js';
 import clsx from 'clsx';
 import { animate } from '../../styles/menubar.js';
@@ -7,7 +7,7 @@ import '../../provider/SnackbarProvider.js';
 
 const Search = (props) => {
   const [show] = useMenubar();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Input.Search,
     {
       ...props,

package/dist/esm/components/Menubar/SubItem.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { subItem } from '../../styles/menubar.js';
 import ItemLink from './ItemLink.js';
 
 const { container } = subItem();
 const SubItem = ({ children, href, className, ...rest }) => {
-  return /* @__PURE__ */ React.createElement(ItemLink, { href }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(ItemLink, { href }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ...rest,

package/dist/esm/components/Modal.js

@@ -1,16 +1,16 @@
 import { overlay, modal } from '@tecsinapse/cortex-core';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 
 const Modal = forwardRef((props, ref) => {
   const { open, onClose, children, className } = props;
-  return /* @__PURE__ */ React.createElement("div", { ref, ...props }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref, ...props }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       "data-testid": "overlay",
       className: overlay({ show: open }),
       onClick: onClose
     }
-  ), /* @__PURE__ */ React.createElement("dialog", { "data-testid": "modal", className: modal({ open, className }) }, children));
+  ), /* @__PURE__ */ React__default.createElement("dialog", { "data-testid": "modal", className: modal({ open, className }) }, children));
 });
 
 export { Modal };

package/dist/esm/components/Popover/Content.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 import { usePopoverContext } from './Context.js';
 
 const PopoverContent = ({
@@ -7,7 +7,7 @@ const PopoverContent = ({
   className
 }) => {
   const { isOpen, x, y, strategy, floatingStyles, refs } = usePopoverContext();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isOpen ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isOpen ? /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ref: refs.setFloating,
@@ -23,7 +23,7 @@ const PopoverContent = ({
       }
     },
     children
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
 };
 
 export { PopoverContent };

package/dist/esm/components/Popover/Provider.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
@@ -11,7 +11,7 @@ const PopoverProvider = ({
   trigger
 }) => {
   const floatingLogic = useFloatingLogic({ placement, trigger });
-  return /* @__PURE__ */ React.createElement(Context.Provider, { value: { ...floatingLogic } }, children);
+  return /* @__PURE__ */ React__default.createElement(Context.Provider, { value: { ...floatingLogic } }, children);
 };
 
 export { PopoverProvider };

package/dist/esm/components/Popover/Root.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Popover } from './index.js';
 
 const PopoverRoot = ({
@@ -6,7 +6,7 @@ const PopoverRoot = ({
   placement,
   trigger
 }) => {
-  return /* @__PURE__ */ React.createElement(Popover.Provider, { placement, trigger }, children);
+  return /* @__PURE__ */ React__default.createElement(Popover.Provider, { placement, trigger }, children);
 };
 
 export { PopoverRoot };

package/dist/esm/components/Popover/Trigger.js

@@ -1,5 +1,5 @@
-import { usePopoverContext } from './Context.js';
 import { cloneWithProps } from '../utils.js';
+import { usePopoverContext } from './Context.js';
 
 const PopoverTrigger = ({ children }) => {
   const { triggerProps } = usePopoverContext();

package/dist/esm/components/ProgressBar.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useState, useEffect, useCallback } from 'react';
+import React__default, { useState, useEffect, useCallback } from 'react';
 import '../styles/calendar-cell.js';
 import '../styles/groupButton.js';
 import { progressBarFilled } from '../styles/progressBar.js';
@@ -37,12 +37,12 @@ const ProgressBar = ({
   const segments = Math.max(1, _segments);
   const lengthSeg = 100 / Math.max(segments);
   const items = [...Array(segments).keys()];
-  return /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-nano flex-row" }, items.map((_, index) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-x-nano flex-row" }, items.map((_, index) => {
     const max = lengthSeg * (index + 1);
     const min = lengthSeg * index;
     const minmax = (totalProgress - min) / (max - min);
     const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       "div",
       {
         "data-testid": "progress-bar",
@@ -51,7 +51,7 @@ const ProgressBar = ({
           "h-[0.5rem] bg-secondary-light flex flex-1 first:rounded-l-pill last:rounded-r-pill"
         )
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         "div",
         {
           "data-testid": "div-segment-filled",

package/dist/esm/components/RadioButton.js

@@ -1,18 +1,18 @@
 import { radioButtonStyles } from '@tecsinapse/cortex-core';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 
 const { container, input, label: labelStyle } = radioButtonStyles();
 const RadioButton = forwardRef(
   ({ label, reversed, id, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       "div",
       {
         className: container({ reversed }),
         ref,
         "data-testid": "radio-button-container"
       },
-      /* @__PURE__ */ React.createElement("input", { id, type: "radio", className: input(), ...rest }),
-      label ? /* @__PURE__ */ React.createElement("label", { htmlFor: id, className: labelStyle() }, label) : /* @__PURE__ */ React.createElement(React.Fragment, null)
+      /* @__PURE__ */ React__default.createElement("input", { id, type: "radio", className: input(), ...rest }),
+      label ? /* @__PURE__ */ React__default.createElement("label", { htmlFor: id, className: labelStyle() }, label) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)
     );
   }
 );

package/dist/esm/components/Select/Content.js

@@ -1,9 +1,9 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
 import '@floating-ui/react';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
 import { usePopoverContext } from '../Popover/Context.js';
 
 const Content = ({ children }) => {
@@ -13,7 +13,7 @@ const Content = ({ children }) => {
     ref,
     onClickOutside: () => setIsOpen(false)
   });
-  return /* @__PURE__ */ React.createElement("div", { className: "w-full relative bg-white", ref }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full relative bg-white", ref }, children);
 };
 
 export { Content };

package/dist/esm/components/Select/GroupedOptions.js

@@ -1,7 +1,13 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext, useCallback } from 'react';
+import React__default, { useContext, useCallback } from 'react';
 import { Select } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js';
 import { usePopoverContext } from '../Popover/Context.js';
+import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext } from './context.js';
 
 const { groupedTitle, list } = selectVariants();
@@ -12,6 +18,7 @@ const SelectGroupedOptions = ({
 }) => {
   const { keyExtractor } = useContext(SelectContext);
   const { setIsOpen } = usePopoverContext();
+  const { options: _options, isLoading } = useSelectGroupedOptions({ options });
   const handleSelect = useCallback(
     (option) => {
       onSelect(option);
@@ -19,7 +26,7 @@ const SelectGroupedOptions = ({
     },
     [onSelect]
   );
-  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+  return isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, [..._options ?? []].map(([key, value]) => /* @__PURE__ */ React__default.createElement("div", { key }, /* @__PURE__ */ React__default.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React__default.createElement(
     Select.Option,
     {
       grouped: true,

package/dist/esm/components/Select/MultiCheckAllOptions.js

@@ -1,5 +1,5 @@
 import { option, checkbox } from '@tecsinapse/cortex-core';
-import React, { useContext, useMemo, useCallback } from 'react';
+import React__default, { useContext, useMemo, useCallback } from 'react';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
 
 const SelectMultiCheckAllOptions = ({
@@ -31,15 +31,15 @@ const SelectMultiCheckAllOptions = ({
       onSelect(updateSelected);
     }
   }, [options, onSelect]);
-  return options?.length ? /* @__PURE__ */ React.createElement("div", { className: option(), onClick: checkAll }, /* @__PURE__ */ React.createElement(
+  return options?.length ? /* @__PURE__ */ React__default.createElement("div", { className: option(), onClick: checkAll }, /* @__PURE__ */ React__default.createElement(
     "input",
     {
       type: "checkbox",
       className: checkbox(),
-      onChange: checkAll,
+      onChange: () => void 0,
       checked: isChecked
     }
-  ), /* @__PURE__ */ React.createElement("span", null, checkAllLabel)) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+  ), /* @__PURE__ */ React__default.createElement("span", null, checkAllLabel)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
 
 export { SelectMultiCheckAllOptions };

package/dist/esm/components/Select/MultiGroupedOptions.js

@@ -1,6 +1,12 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext, useMemo } from 'react';
+import React__default, { useContext, useMemo } from 'react';
 import { Select } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useSelectGroupedOptions } from '../../hooks/useSelectGroupedOptions.js';
+import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
 import { handleSelectMulti } from './utils.js';
 
@@ -12,17 +18,18 @@ const SelectMultiGroupedOptions = ({
   children
 }) => {
   const { value: currentValue = [], keyExtractor } = useContext(SelectContext);
+  const { options: _options, isLoading } = useSelectGroupedOptions({ options });
   const flattenMap = useMemo(
-    () => options ? Array.from(options?.values()).flatMap((value) => value) : [],
+    () => _options ? Array.from(_options?.values()).flatMap((value) => value) : [],
     [options]
   );
-  return /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     SelectMultiOptionsContext.Provider,
     {
       value: { onSelect, options: flattenMap }
     },
     children,
-    [...options ?? []].map(([key, value]) => /* @__PURE__ */ React.createElement("div", { key }, /* @__PURE__ */ React.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React.createElement(
+    isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, [..._options ?? []].map(([key, value]) => /* @__PURE__ */ React__default.createElement("div", { key }, /* @__PURE__ */ React__default.createElement("span", { className: groupedTitle() }, groupedLabelExtractor?.(key)), value.map((option) => /* @__PURE__ */ React__default.createElement(
       Select.MultiOption,
       {
         grouped: true,
@@ -35,8 +42,8 @@ const SelectMultiGroupedOptions = ({
           keyExtractor
         )
       }
-    ))))
-  ));
+    )))))
+  );
 };
 
 export { SelectMultiGroupedOptions };

package/dist/esm/components/Select/MultiOption.js

@@ -1,5 +1,5 @@
 import { option, checkbox } from '@tecsinapse/cortex-core';
-import React, { useContext, useRef, useMemo, useCallback } from 'react';
+import React__default, { useContext, useRef, useMemo, useCallback } from 'react';
 import { SelectContext } from './context.js';
 
 const SelectMultiOption = ({
@@ -17,14 +17,14 @@ const SelectMultiOption = ({
     onSelectOption(option$1);
     inputRef.current?.click();
   }, [onSelectOption, inputRef]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "li",
     {
       onClick: onClickOption,
       className: option({ grouped }),
       role: "option"
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       "input",
       {
         type: "checkbox",

package/dist/esm/components/Select/MultiOptions.js

@@ -1,6 +1,12 @@
 import { selectVariants } from '@tecsinapse/cortex-core';
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { Select } from './index.js';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useSelectOptions } from '../../hooks/useSelectOptions.js';
+import { SkeletonOptions } from './SkeletonOptions.js';
 import { SelectContext, SelectMultiOptionsContext } from './context.js';
 import { handleSelectMulti } from './utils.js';
 
@@ -11,7 +17,8 @@ const SelectMultiOptions = ({
   children
 }) => {
   const { keyExtractor, value: currentValue = [] } = useContext(SelectContext);
-  return /* @__PURE__ */ React.createElement(SelectMultiOptionsContext.Provider, { value: { onSelect, options } }, /* @__PURE__ */ React.createElement("ul", { role: "select", className: list() }, children, (options ?? []).map((option) => /* @__PURE__ */ React.createElement(
+  const { options: _options, isLoading } = useSelectOptions({ options });
+  return /* @__PURE__ */ React__default.createElement(SelectMultiOptionsContext.Provider, { value: { onSelect, options: _options } }, isLoading ? /* @__PURE__ */ React__default.createElement(SkeletonOptions, null) : /* @__PURE__ */ React__default.createElement("ul", { role: "select", className: list() }, children, _options?.map((option) => /* @__PURE__ */ React__default.createElement(
     Select.MultiOption,
     {
       option,

package/dist/esm/components/Select/Option.js

@@ -1,5 +1,5 @@
 import { option } from '@tecsinapse/cortex-core';
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { SelectContext } from './context.js';
 
 const SelectOption = ({
@@ -8,7 +8,7 @@ const SelectOption = ({
   grouped = false
 }) => {
   const { keyExtractor, labelExtractor, value } = useContext(SelectContext);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "li",
     {
       onClick: () => onSelectOption(option$1),