@tecsinapse/cortex-react 1.3.0-beta.3 → 1.3.0-beta.31

package/dist/cjs/components/Badge.js

@@ -1,11 +1,30 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const Badge = React.forwardRef((props, ref) => {
   const { value, variants, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__namespace.createElement(
     "div",
     {
       ref,
@@ -20,7 +39,7 @@ const Badge = React.forwardRef((props, ref) => {
 });
 const BadgeAnchor = React.forwardRef((props, ref) => {
   const { value, variants, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement("div", { className: cortexCore.containerBadge() }, children, /* @__PURE__ */ React.createElement("div", { ref, className: cortexCore.badge(variants), ...rest }, value));
+  return /* @__PURE__ */ React__namespace.createElement("div", { className: cortexCore.containerBadge() }, children, /* @__PURE__ */ React__namespace.createElement("div", { ref, className: cortexCore.badge(variants), ...rest }, value));
 });
 
 exports.Badge = Badge;

package/dist/cjs/components/{Breadcrumbs.js → Breadcrumbs/Breadcrumbs.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
+var Card = require('../Card.js');
 var BreadcrumbItem = require('./BreadcrumbItem.js');
-var Card = require('./Card.js');
 
 const Breadcrumbs = (props) => {
   const { breadcrumbs, ...rest } = props;

package/dist/cjs/components/Button.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 
 const Button = React.forwardRef((props, ref) => {
   const { variants, children, ...rest } = props;

package/dist/cjs/components/{Calendar.js → Calendar/Calendar.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var useCalendar = require('../hooks/useCalendar.js');
+var useCalendar = require('../../hooks/useCalendar.js');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');

package/dist/cjs/components/{CalendarCell.js → Calendar/CalendarCell.js}

@@ -4,12 +4,12 @@ var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
-var useCalendarCell = require('../hooks/useCalendarCell.js');
+var useCalendarCell = require('../../hooks/useCalendarCell.js');
 require('@floating-ui/react');
-var calendarCell = require('../styles/calendar-cell.js');
-require('../styles/groupButton.js');
-require('../styles/progressBar.js');
-var Table = require('./Table.js');
+var calendarCell = require('../../styles/calendar-cell.js');
+require('../../styles/groupButton.js');
+require('../../styles/progressBar.js');
+var Table = require('../Table.js');
 
 const { cell, button } = calendarCell.calendarCell();
 const CalendarCell = ({ state, date }) => {

package/dist/cjs/components/{CalendarGrid.js → Calendar/CalendarGrid.js}

@@ -4,7 +4,7 @@ var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
-var useCalendarGrid = require('../hooks/useCalendarGrid.js');
+var useCalendarGrid = require('../../hooks/useCalendarGrid.js');
 require('@floating-ui/react');
 var CalendarGridBodyRows = require('./CalendarGridBodyRows.js');
 var CalendarGridHeaderRow = require('./CalendarGridHeaderRow.js');

package/dist/cjs/components/{CalendarGridHeaderRow.js → Calendar/CalendarGridHeaderRow.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var Table = require('./Table.js');
+var Table = require('../Table.js');
 
 const CalendarGridHeaderRow = ({
   weekDays

package/dist/cjs/components/{CalendarHeader.js → Calendar/CalendarHeader.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var fa = require('react-icons/fa');
-var Button = require('./Button.js');
+var Button = require('../Button.js');
 
 const CalendarHeader = ({
   onClickPrevButton,

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

@@ -4,8 +4,8 @@ var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
-var useRangeCalendar = require('../hooks/useRangeCalendar.js');
 require('@floating-ui/react');
+var useRangeCalendar = require('../../hooks/useRangeCalendar.js');
 var CalendarGrid = require('./CalendarGrid.js');
 var CalendarHeader = require('./CalendarHeader.js');
 

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

@@ -0,0 +1,21 @@
+'use strict';
+
+var React = require('react');
+require('@internationalized/date');
+require('react-aria');
+require('react-stately');
+require('@floating-ui/react');
+var useOutsideClickListener = require('../../hooks/useOutsideClickListener.js');
+var Context = require('../Popover/Context.js');
+
+const Content = ({ children }) => {
+  const { setIsOpen } = Context.usePopoverContext();
+  const ref = React.useRef(null);
+  useOutsideClickListener.useOutsideClickListener({
+    ref,
+    onClickOutside: () => setIsOpen(false)
+  });
+  return /* @__PURE__ */ React.createElement("div", { ref }, children);
+};
+
+exports.Content = Content;

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

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

package/dist/cjs/components/{DatePickerInputBase.js → DatePicker/DatePickerInputBase.js}

@@ -3,19 +3,17 @@
 var cortexCore = require('@tecsinapse/cortex-core');
 var React = require('react');
 var lia = require('react-icons/lia');
-var index = require('./Input/index.js');
+var index = require('../Input/index.js');
 
 const DatePickerInputBase = ({
   children,
   variants,
-  label,
-  onClickCalendar
+  label
 }) => {
-  return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label) }, children), /* @__PURE__ */ React.createElement(index.Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(index.Input.Face, { variants, "data-testid": "date-picker-input-base" }, /* @__PURE__ */ React.createElement("span", { className: cortexCore.labelStyle({}) }, label), /* @__PURE__ */ React.createElement("div", { className: cortexCore.inputBox("", label, "w-full flex flex-row") }, children), /* @__PURE__ */ React.createElement(index.Input.Right, { className: "" }, /* @__PURE__ */ React.createElement(
     lia.LiaCalendar,
     {
       className: "cursor-pointer mt-centi",
-      onClick: onClickCalendar,
       "data-testid": "date-picker-input-base-calendar"
     }
   )));

package/dist/cjs/components/{DateRangePickerInput.js → DatePicker/DateRangePickerInput.js}

@@ -4,34 +4,36 @@ var React = require('react');
 require('@internationalized/date');
 require('react-aria');
 require('react-stately');
-var utils = require('./utils.js');
-var useDateRangePickerInput = require('../hooks/useDateRangePickerInput.js');
+var utils = require('../utils.js');
+var useDateRangePickerInput = require('../../hooks/useDateRangePickerInput.js');
 require('@floating-ui/react');
+var RangeCalendar = require('../Calendar/RangeCalendar.js');
 var DateField = require('./DateField.js');
 var DatePickerInputBase = require('./DatePickerInputBase.js');
-var RangeCalendar = require('./RangeCalendar.js');
+var index = require('../Popover/index.js');
+var Context = require('../Popover/Context.js');
+var Content = require('./Content.js');
 
-const DateRangePickerInput = (props) => {
+const DateRangePickerInputWithPopover = (props) => {
+  const { setIsOpen } = Context.usePopoverContext();
   const { onChange, value, label, variants } = props;
   const { endFieldProps, startFieldProps, ref, state } = useDateRangePickerInput.useDateRangePickerInput({ value, onChange });
-  return /* @__PURE__ */ React.createElement("div", { "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ref, "data-testid": "date-range-picker-input" }, /* @__PURE__ */ React.createElement(index.Popover.Trigger, null, /* @__PURE__ */ React.createElement(
     DatePickerInputBase.DatePickerInputBase,
     {
-      onClickCalendar: () => state.isOpen ? state.close() : state.open(),
       variants: {
         ...variants,
         intent: state.isInvalid ? "error" : variants?.intent
       },
       label
     },
-    /* @__PURE__ */ React.createElement("div", { ref, className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "flex flex-row gap-x-micro items-center" }, /* @__PURE__ */ React.createElement(
       DateField.DateField,
       {
         ...startFieldProps,
         value: utils.dateToCalendarDate(value?.start),
         onChange: (value2) => {
           state.setDate("start", value2);
-          state.close();
         }
       }
     ), /* @__PURE__ */ React.createElement("span", null, "-"), /* @__PURE__ */ React.createElement(
@@ -41,23 +43,23 @@ const DateRangePickerInput = (props) => {
         value: utils.dateToCalendarDate(value?.end),
         onChange: (value2) => {
           state.setDate("end", value2);
-          state.close();
         }
       }
     ))
-  ), state.isOpen ? /* @__PURE__ */ React.createElement("div", { className: "absolute" }, /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(index.Popover.Content, { className: "bg-inherit shadow-none border-none" }, /* @__PURE__ */ React.createElement(
     RangeCalendar.RangeCalendar,
     {
       value,
       onChange: (value2) => {
+        setIsOpen?.(false);
         state.setDateRange({
           start: utils.dateToCalendarDate(value2.start),
           end: utils.dateToCalendarDate(value2.end)
         });
-        state.close();
       }
     }
-  )) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  )));
 };
+const DateRangePickerInput = (props) => /* @__PURE__ */ React.createElement(index.Popover.Root, { placement: "bottom-start", trigger: "click" }, /* @__PURE__ */ React.createElement(Content.Content, null, /* @__PURE__ */ React.createElement(DateRangePickerInputWithPopover, { ...props })));
 
 exports.DateRangePickerInput = DateRangePickerInput;

package/dist/cjs/components/Divider.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
+
+const Divider = ({ className, ...rest }) => {
+  return /* @__PURE__ */ React.createElement("hr", { ...rest, className: cortexCore.divider({ className }) });
+};
+
+exports.Divider = Divider;

package/dist/cjs/components/Drawer.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 
 const Drawer = ({
   children,

package/dist/cjs/components/Hint.js

@@ -1,21 +1,11 @@
 'use strict';
 
-var React = require('react');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 
-const Hint = React.forwardRef(
-  (props, ref) => {
-    const { description, children, variants } = props;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cortexCore.hint(variants),
-        ref
-      },
-      description ? /* @__PURE__ */ React.createElement("p", null, description) : /* @__PURE__ */ React.createElement(React.Fragment, null),
-      children
-    );
-  }
-);
+const Hint = React.forwardRef((props, ref) => {
+  const { children, variants } = props;
+  return /* @__PURE__ */ React.createElement("div", { className: cortexCore.hint(variants), ref }, children ?? /* @__PURE__ */ React.createElement(React.Fragment, null));
+});
 
 exports.Hint = Hint;

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

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

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

@@ -10,7 +10,13 @@ var useDebouncedState = require('../../hooks/useDebouncedState.js');
 require('@floating-ui/react');
 
 const InputSearch = React.forwardRef(
-  ({ bounceTimeout = 1e3, variants, className, onChange, ...rest }, ref) => {
+  ({
+    bounceTimeout = 1e3,
+    variants,
+    className,
+    onChange,
+    ...rest
+  }, ref) => {
     const [bouncedTextEvent, setBouncedTextEvent] = React.useState();
     const [searchInputEvent, setSearchInputEvent] = useDebouncedState.useDebouncedState(void 0, setBouncedTextEvent, bounceTimeout);
     React.useEffect(() => {

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

@@ -3,6 +3,7 @@
 var Box = require('./Box.js');
 var Face = require('./Face.js');
 var Left = require('./Left.js');
+var Mask = require('./Mask.js');
 var Right = require('./Right.js');
 var Root = require('./Root.js');
 var Search = require('./Search.js');
@@ -13,7 +14,8 @@ const Input = {
   Box: Box.InputBox,
   Left: Left.InputLeft,
   Right: Right.InputRight,
-  Search: Search.InputSearch
+  Search: Search.InputSearch,
+  Mask: Mask.InputMask
 };
 
 exports.Input = Input;

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

@@ -0,0 +1,43 @@
+'use strict';
+
+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: ["."]
+    }
+  }
+};
+
+exports.CurrencyIMask = CurrencyIMask;
+exports.ExpressionMasks = ExpressionMasks;
+exports.NumberIMask = NumberIMask;
+exports.PercentageIMask = PercentageIMask;

package/dist/cjs/components/Masonry.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var clsx = require('clsx');
+var React = require('react');
+
+const Masonry = ({ children, columns }) => {
+  const getColumns = () => {
+    const columnsArray = Array.from(
+      { length: columns },
+      () => []
+    );
+    React.Children.forEach(children, (child, index) => {
+      if (child && React.isValidElement(child)) {
+        columnsArray[index % columns].push(child);
+      }
+    });
+    return columnsArray;
+  };
+  const renderColumn = (column) => {
+    return column.map((item, index) => {
+      return /* @__PURE__ */ React.createElement("div", { className: index > 0 ? "mt-deca" : "mt-0", key: index }, item);
+    });
+  };
+  const renderColumns = () => {
+    return getColumns().map((column, index) => {
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: clsx(
+            "width-0 flex flex-1 flex-col content-start",
+            index > 0 ? "ml-deca" : "ml-0"
+          ),
+          key: index
+        },
+        renderColumn(column)
+      );
+    });
+  };
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      "data-testid": "masonry",
+      className: "box-border flex w-full flex-row content-stretch justify-center"
+    },
+    renderColumns()
+  );
+};
+
+module.exports = Masonry;

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

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+var Masonry = require('../Masonry.js');
+
+const Categories = ({ children }) => {
+  return /* @__PURE__ */ React.createElement(Masonry, { columns: 4 }, children);
+};
+
+module.exports = Categories;

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

@@ -0,0 +1,11 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+
+const Category = ({ title, options, render }) => {
+  const { text, hr, container } = menubar.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))));
+};
+
+module.exports = Category;

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+var clsx = require('clsx');
+var MenubarProvider = require('../../provider/MenubarProvider.js');
+require('../../provider/SnackbarProvider.js');
+
+const { dropdown } = menubar.menubar();
+const Dropdown = ({ children, ...rest }) => {
+  const [show] = MenubarProvider.useMenubar();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: clsx(dropdown({ show }), menubar.animate({ show })),
+      "data-testid": "dropdown-menubar",
+      ...rest
+    },
+    children
+  );
+};
+
+module.exports = Dropdown;

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

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

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+var React = require('react');
+var menubar = require('../../styles/menubar.js');
+var io5 = require('react-icons/io5');
+
+const { icon } = menubar.item();
+const IconControlSubItem = ({
+  show,
+  setShow
+}) => {
+  const handleClick = (e) => {
+    e.stopPropagation();
+    setShow(!show);
+  };
+  return /* @__PURE__ */ React.createElement("div", { onClick: handleClick, "data-testid": "icon-sub-item-menubar" }, show ? /* @__PURE__ */ React.createElement(io5.IoCaretUpCircleOutline, { className: icon() }) : /* @__PURE__ */ React.createElement(io5.IoCaretDownCircleOutline, { className: icon() }));
+};
+
+module.exports = IconControlSubItem;