@tecsinapse/cortex-react 1.3.0-beta.9 → 1.3.0

package/dist/esm/components/{RangeCalendar.js → Calendar/RangeCalendar.js}

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 import '@internationalized/date';
 import 'react-aria';
 import 'react-stately';
-import { useRangeCalendar } from '../hooks/useRangeCalendar.js';
 import '@floating-ui/react';
+import { useRangeCalendar } from '../../hooks/useRangeCalendar.js';
 import { CalendarGrid } from './CalendarGrid.js';
 import { CalendarHeader } from './CalendarHeader.js';
 
@@ -12,7 +12,7 @@ const RangeCalendar = ({ value, onChange }) => {
     value,
     onChange
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ...calendarProps,
@@ -20,7 +20,7 @@ const RangeCalendar = ({ value, onChange }) => {
       ref,
       "data-testid": "calendar-range-div"
     },
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
       CalendarHeader,
       {
         onClickPrevButton: () => state.focusPreviousPage(),
@@ -28,7 +28,7 @@ const RangeCalendar = ({ value, onChange }) => {
         title
       }
     ),
-    /* @__PURE__ */ React.createElement(CalendarGrid, { state })
+    /* @__PURE__ */ React__default.createElement(CalendarGrid, { state })
   );
 };
 

package/dist/esm/components/Card.js

@@ -1,9 +1,9 @@
 import { card } from '@tecsinapse/cortex-core';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 
 const Card = forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("div", { className: card({ className }), ref, ...rest }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: card({ className }), ref, ...rest }, children);
 });
 
 export { Card };

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

@@ -0,0 +1,19 @@
+import React__default, { useRef } from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import '@floating-ui/react';
+import { useOutsideClickListener } from '../../hooks/useOutsideClickListener.js';
+import { usePopoverContext } from '../Popover/Context.js';
+
+const Content = ({ children }) => {
+  const { setIsOpen } = usePopoverContext();
+  const ref = useRef(null);
+  useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React__default.createElement("div", { ref }, children);
+};
+
+export { Content };

package/dist/esm/components/{DateField.js → DatePicker/DateField.js}

@@ -1,5 +1,5 @@
 import { createCalendar } from '@internationalized/date';
-import React from 'react';
+import React__default from 'react';
 import { useLocale, useDateField } from 'react-aria';
 import { useDateFieldState } from 'react-stately';
 import { DateSegment } from './DateSegment.js';
@@ -11,13 +11,13 @@ const DateField = (props) => {
     createCalendar,
     locale
   });
-  const ref = React.useRef(null);
+  const ref = React__default.useRef(null);
   const { fieldProps } = useDateField(
     { "aria-label": "date-field" },
     state,
     ref
   );
-  return /* @__PURE__ */ React.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React.createElement(DateSegment, { key: i, segment, state })));
+  return /* @__PURE__ */ React__default.createElement("div", { ...fieldProps, ref, className: "flex flex-row" }, state.segments.map((segment, i) => /* @__PURE__ */ React__default.createElement(DateSegment, { key: i, segment, state })));
 };
 
 export { DateField };

package/dist/esm/components/DatePicker/DatePickerInput.js

@@ -0,0 +1,50 @@
+import React__default from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { dateToCalendarDate } from '../utils.js';
+import { useDatePickerInput } from '../../hooks/useDatePickerInput.js';
+import '@floating-ui/react';
+import { Calendar } from '../Calendar/Calendar.js';
+import { DateField } from './DateField.js';
+import { DatePickerInputBase } from './DatePickerInputBase.js';
+import { Popover } from '../Popover/index.js';
+import { usePopoverContext } from '../Popover/Context.js';
+import { Content } from './Content.js';
+
+const DatePickerInputWithPopover = (props) => {
+  const { setIsOpen } = usePopoverContext();
+  const { onChange, value, label, variants } = props;
+  const { fieldProps, state, ref } = useDatePickerInput({ value, onChange });
+  return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
+    DatePickerInputBase,
+    {
+      variants: {
+        ...variants,
+        intent: state.isInvalid ? "error" : variants?.intent
+      },
+      label
+    },
+    /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(
+      DateField,
+      {
+        ...fieldProps,
+        onChange: (value2) => {
+          state.setDateValue(value2);
+        }
+      }
+    ))
+  )), /* @__PURE__ */ React__default.createElement(Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React__default.createElement(
+    Calendar,
+    {
+      value,
+      onChange: (value2) => {
+        setIsOpen(false);
+        state.setDateValue(dateToCalendarDate(value2));
+      }
+    }
+  )));
+};
+const DatePickerInput = (props) => /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(DatePickerInputWithPopover, { ...props })));
+
+export { DatePickerInput };

package/dist/esm/components/DatePicker/DatePickerInputBase.js

@@ -0,0 +1,20 @@
+import { labelStyle, inputBox } from '@tecsinapse/cortex-core';
+import React__default from 'react';
+import { LiaCalendar } from 'react-icons/lia';
+import { Input } from '../Input/index.js';
+
+const DatePickerInputBase = ({
+  children,
+  variants,
+  label
+}) => {
+  return /* @__PURE__ */ React__default.createElement(Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React__default.createElement("span", { className: labelStyle({}) }, label), /* @__PURE__ */ React__default.createElement("div", { className: inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React__default.createElement(Input.Right, { className: "" }, /* @__PURE__ */ React__default.createElement(
+    LiaCalendar,
+    {
+      className: "cursor-pointer mt-centi",
+      "data-testid": "date-picker-input-base-calendar"
+    }
+  )));
+};
+
+export { DatePickerInputBase };

package/dist/esm/components/DatePicker/DateRangePickerInput.js

@@ -0,0 +1,63 @@
+import React__default from 'react';
+import '@internationalized/date';
+import 'react-aria';
+import 'react-stately';
+import { dateToCalendarDate } from '../utils.js';
+import { useDateRangePickerInput } from '../../hooks/useDateRangePickerInput.js';
+import '@floating-ui/react';
+import { RangeCalendar } from '../Calendar/RangeCalendar.js';
+import { DateField } from './DateField.js';
+import { DatePickerInputBase } from './DatePickerInputBase.js';
+import { Popover } from '../Popover/index.js';
+import { usePopoverContext } from '../Popover/Context.js';
+import { Content } from './Content.js';
+
+const DateRangePickerInputWithPopover = (props) => {
+  const { setIsOpen } = usePopoverContext();
+  const { onChange, value, label, variants } = props;
+  const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput({ value, onChange });
+  return /* @__PURE__ */ React__default.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React__default.createElement(Popover.Trigger, null, /* @__PURE__ */ React__default.createElement(
+    DatePickerInputBase,
+    {
+      variants: {
+        ...variants,
+        intent: state.isInvalid ? "error" : variants?.intent
+      },
+      label
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React__default.createElement(
+      DateField,
+      {
+        ...startFieldProps,
+        value: dateToCalendarDate(value?.start),
+        onChange: (value2) => {
+          state.setDate("start", value2);
+        }
+      }
+    ), /* @__PURE__ */ React__default.createElement("span", null, "-"), /* @__PURE__ */ React__default.createElement(
+      DateField,
+      {
+        ...endFieldProps,
+        value: dateToCalendarDate(value?.end),
+        onChange: (value2) => {
+          state.setDate("end", value2);
+        }
+      }
+    ))
+  )), /* @__PURE__ */ React__default.createElement(Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React__default.createElement(
+    RangeCalendar,
+    {
+      value,
+      onChange: (value2) => {
+        setIsOpen?.(false);
+        state.setDateRange({
+          start: dateToCalendarDate(value2.start),
+          end: dateToCalendarDate(value2.end)
+        });
+      }
+    }
+  )));
+};
+const DateRangePickerInput = (props) => /* @__PURE__ */ React__default.createElement(Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React__default.createElement(Content, null, /* @__PURE__ */ React__default.createElement(DateRangePickerInputWithPopover, { ...props })));
+
+export { DateRangePickerInput };

package/dist/esm/components/{DateSegment.js → DatePicker/DateSegment.js}

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { useDateSegment } from 'react-aria';
 
 const DateSegment = ({ segment, state }) => {
-  const ref = React.useRef(null);
+  const ref = React__default.useRef(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
       ...segmentProps,

package/dist/esm/components/Divider.js

@@ -1,8 +1,8 @@
 import { divider } from '@tecsinapse/cortex-core';
-import React from 'react';
+import React__default from 'react';
 
 const Divider = ({ className, ...rest }) => {
-  return /* @__PURE__ */ React.createElement("hr", { ...rest, className: divider({ className }) });
+  return /* @__PURE__ */ React__default.createElement("hr", { ...rest, className: divider({ className }) });
 };
 
 export { Divider };

package/dist/esm/components/Drawer.js

@@ -1,5 +1,5 @@
-import React from 'react';
 import { overlay, drawer } from '@tecsinapse/cortex-core';
+import React__default from 'react';
 
 const Drawer = ({
   children,
@@ -7,14 +7,14 @@ const Drawer = ({
   open,
   position = "right"
 }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       "data-testid": "overlay",
       className: overlay({ show: open }),
       onClick: onClose
     }
-  ), /* @__PURE__ */ React.createElement(
+  ), /* @__PURE__ */ React__default.createElement(
     "div",
     {
       "data-testid": "drawer",

package/dist/esm/components/GroupButton.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 import '../styles/calendar-cell.js';
 import { groupButton } from '../styles/groupButton.js';
 import '../styles/progressBar.js';
@@ -15,10 +15,10 @@ const GroupButton = (props) => {
     customStyles,
     disableAllOptions
   } = props;
-  return /* @__PURE__ */ React.createElement("div", { className: container(), "data-testid": "group-button-container" }, options.map((option) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: container(), "data-testid": "group-button-container" }, options.map((option) => {
     const key = renderKey?.(option.value);
     const isActive = key === renderKey?.(value);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       "button",
       {
         disabled: disableAllOptions,

package/dist/esm/components/Hint.js

@@ -1,19 +1,9 @@
-import React, { forwardRef } from 'react';
 import { hint } from '@tecsinapse/cortex-core';
+import React__default, { forwardRef } from 'react';
 
-const Hint = forwardRef(
-  (props, ref) => {
-    const { description, children, variants } = props;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: hint(variants),
-        ref
-      },
-      description ? /* @__PURE__ */ React.createElement("p", null, description) : /* @__PURE__ */ React.createElement(React.Fragment, null),
-      children
-    );
-  }
-);
+const Hint = forwardRef((props, ref) => {
+  const { children, variants } = props;
+  return /* @__PURE__ */ React__default.createElement("div", { className: hint(variants), ref }, children ?? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
+});
 
 export { Hint };

package/dist/esm/components/Input/Box.js

@@ -1,10 +1,10 @@
 import { inputBox, labelStyle } from '@tecsinapse/cortex-core';
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 
-const InputBox = React.forwardRef(
+const InputBox = React__default.forwardRef(
   ({ id, name, variants, label, placeholder, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement("div", { className: "flex w-full flex-col" }, /* @__PURE__ */ React__default.createElement(
       "input",
       {
         id: id ?? name,
@@ -15,7 +15,7 @@ const InputBox = React.forwardRef(
         ref,
         "data-testid": "input-box"
       }
-    ), /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React__default.createElement(
       "label",
       {
         htmlFor: id ?? name,

package/dist/esm/components/Input/Face.js

@@ -1,18 +1,18 @@
 import { input } from '@tecsinapse/cortex-core';
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 
 const getValidChildren = (children) => {
-  return React.Children.toArray(children).filter(
-    (el) => React.isValidElement(el)
+  return React__default.Children.toArray(children).filter(
+    (el) => React__default.isValidElement(el)
   );
 };
-const InputFace = React.forwardRef(
+const InputFace = React__default.forwardRef(
   ({ children, variants, className, ...rest }, ref) => {
     const clones = getValidChildren(children).map((el) => {
-      return React.cloneElement(el, { ...el.props, variants });
+      return React__default.cloneElement(el, { ...el.props, variants });
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       "div",
       {
         "data-testid": "input-face",

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

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 
-const InputLeft = React.forwardRef(
+const InputLeft = React__default.forwardRef(
   ({ children, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
+    return /* @__PURE__ */ React__default.createElement("div", { className: clsx(className, "mr-2.5"), ...rest, ref }, children);
   }
 );
 

package/dist/esm/components/Input/Mask.js

@@ -0,0 +1,31 @@
+import React__default, { createRef, useEffect } from 'react';
+import { useIMask } from 'react-imask';
+import { Input } from './index.js';
+
+const useIMaskLocal = (mask, inputProps, ref, onChangeMask) => {
+  const { ref: iMaskRef, maskRef } = useIMask(mask, {
+    onAccept: (value, mask2) => {
+      onChangeMask?.({
+        unmaskedValue: mask2._unmaskedValue,
+        value
+      });
+    },
+    ref: ref ? ref : createRef()
+  });
+  useEffect(() => {
+    if (inputProps.value === "") {
+      maskRef.current?.updateValue();
+    }
+  }, [maskRef, inputProps.value]);
+  return {
+    iMaskRef
+  };
+};
+const InputMask = React__default.forwardRef(
+  ({ mask, onChange, ...rest }, ref) => {
+    const { iMaskRef } = useIMaskLocal(mask, rest, ref, onChange);
+    return /* @__PURE__ */ React__default.createElement(Input.Root, { ...rest, ref: iMaskRef });
+  }
+);
+
+export { InputMask };

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

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 
-const InputRight = React.forwardRef(
+const InputRight = React__default.forwardRef(
   ({ children, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
+    return /* @__PURE__ */ React__default.createElement("div", { className: clsx(className, "ml-2.5"), ...rest, ref }, children);
   }
 );
 

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { InputBox } from './Box.js';
 import { InputFace } from './Face.js';
 
-const InputRoot = React.forwardRef(
+const InputRoot = React__default.forwardRef(
   ({ variants, className, ...rest }, ref) => {
-    return /* @__PURE__ */ React.createElement(InputFace, { variants, className }, /* @__PURE__ */ React.createElement(InputBox, { ...rest, ref }));
+    return /* @__PURE__ */ React__default.createElement(InputFace, { variants, className }, /* @__PURE__ */ React__default.createElement(InputBox, { ...rest, ref }));
   }
 );
 

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React__default, { useState, useEffect } from 'react';
 import { IoSearchOutline } from 'react-icons/io5';
 import { Input } from './index.js';
 import '@internationalized/date';
@@ -7,8 +7,14 @@ import 'react-stately';
 import { useDebouncedState } from '../../hooks/useDebouncedState.js';
 import '@floating-ui/react';
 
-const InputSearch = React.forwardRef(
-  ({ bounceTimeout = 1e3, variants, className, onChange, ...rest }, ref) => {
+const InputSearch = React__default.forwardRef(
+  ({
+    bounceTimeout = 1e3,
+    variants,
+    className,
+    onChange,
+    ...rest
+  }, ref) => {
     const [bouncedTextEvent, setBouncedTextEvent] = useState();
     const [searchInputEvent, setSearchInputEvent] = useDebouncedState(void 0, setBouncedTextEvent, bounceTimeout);
     useEffect(() => {
@@ -16,7 +22,7 @@ const InputSearch = React.forwardRef(
         onChange(searchInputEvent);
       }
     }, [bouncedTextEvent]);
-    return /* @__PURE__ */ React.createElement(Input.Face, { variants, className }, /* @__PURE__ */ React.createElement(Input.Left, null, /* @__PURE__ */ React.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React.createElement(Input.Box, { ...rest, ref, onChange: (e) => setSearchInputEvent(e) }));
+    return /* @__PURE__ */ React__default.createElement(Input.Face, { variants, className }, /* @__PURE__ */ React__default.createElement(Input.Left, null, /* @__PURE__ */ React__default.createElement(IoSearchOutline, { "data-testid": "icon-search-left" })), /* @__PURE__ */ React__default.createElement(Input.Box, { ...rest, ref, onChange: (e) => setSearchInputEvent(e) }));
   }
 );
 

package/dist/esm/components/Input/index.js

@@ -1,6 +1,7 @@
 import { InputBox } from './Box.js';
 import { InputFace } from './Face.js';
 import { InputLeft } from './Left.js';
+import { InputMask } from './Mask.js';
 import { InputRight } from './Right.js';
 import { InputRoot } from './Root.js';
 import { InputSearch } from './Search.js';
@@ -11,7 +12,8 @@ const Input = {
   Box: InputBox,
   Left: InputLeft,
   Right: InputRight,
-  Search: InputSearch
+  Search: InputSearch,
+  Mask: InputMask
 };
 
 export { Input };

package/dist/esm/components/Input/masks.js

@@ -0,0 +1,38 @@
+const ExpressionMasks = {
+  CPF: "000.000.000-00",
+  CNPJ: "00.000.000/0000-00",
+  PHONE: "(00) 0000-0000",
+  PHONE_EXTENDED: "(00) 00000-0000",
+  DATE: "00/00/0000",
+  CEP: "00000-000"
+};
+const NumberIMask = { mask: Number, scale: 2 };
+const CurrencyIMask = {
+  mask: "R$ num",
+  blocks: {
+    num: {
+      mask: Number,
+      scale: 2,
+      thousandsSeparator: ".",
+      padFractionalZeros: true,
+      radix: ",",
+      mapToRadix: ["."]
+    }
+  }
+};
+const PercentageIMask = {
+  mask: "num %",
+  lazy: false,
+  blocks: {
+    num: {
+      mask: Number,
+      scale: 2,
+      thousandsSeparator: ".",
+      padFractionalZeros: true,
+      radix: ",",
+      mapToRadix: ["."]
+    }
+  }
+};
+
+export { CurrencyIMask, ExpressionMasks, NumberIMask, PercentageIMask };

package/dist/esm/components/Masonry.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React__default from 'react';
 
 const Masonry = ({ children, columns }) => {
   const getColumns = () => {
@@ -7,8 +7,8 @@ const Masonry = ({ children, columns }) => {
       { length: columns },
       () => []
     );
-    React.Children.forEach(children, (child, index) => {
-      if (child && React.isValidElement(child)) {
+    React__default.Children.forEach(children, (child, index) => {
+      if (child && React__default.isValidElement(child)) {
         columnsArray[index % columns].push(child);
       }
     });
@@ -16,12 +16,12 @@ const Masonry = ({ children, columns }) => {
   };
   const renderColumn = (column) => {
     return column.map((item, index) => {
-      return /* @__PURE__ */ React.createElement("div", { className: index > 0 ? "mt-deca" : "mt-0", key: index }, item);
+      return /* @__PURE__ */ React__default.createElement("div", { className: index > 0 ? "mt-deca" : "mt-0", key: index }, item);
     });
   };
   const renderColumns = () => {
     return getColumns().map((column, index) => {
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ React__default.createElement(
         "div",
         {
           className: clsx(
@@ -34,7 +34,7 @@ const Masonry = ({ children, columns }) => {
       );
     });
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
       "data-testid": "masonry",

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,10 +7,10 @@ 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(), animate({ show })),
+      className: clsx(dropdown({ show }), animate({ show })),
       "data-testid": "dropdown-menubar",
       ...rest
     },