@tecsinapse/react-web-kit 3.5.0 → 3.5.1-beta.0

package/dist/esm/components/molecules/Menubar/MenuBlock/MenuBlock.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default from 'react';
 import { Text } from '@tecsinapse/react-core';
 import MenuItem from './MenuItem/MenuItem.js';
@@ -5,26 +6,32 @@ import { StyledContainerMenu, StyledLeftComponent, StyledContainerItems } from '
 import Masonry from '../../Masonry/Masonry.js';
 
 const MenuBlock = ({ options, toggle }) => {
-  return /* @__PURE__ */ React__default.createElement(Masonry, { columns: 4, spacingTop: "kilo", spacingLeft: "mega" }, options.map((data) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: `${data.title}` }, /* @__PURE__ */ React__default.createElement(StyledContainerMenu, null, data.leftComponents && /* @__PURE__ */ React__default.createElement(StyledLeftComponent, null, data.leftComponents), /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold" }, data.title)), /* @__PURE__ */ React__default.createElement(StyledContainerItems, null, data.items.map(
-    ({
-      title,
-      Component,
-      props,
-      rightComponents,
-      items
-    }) => /* @__PURE__ */ React__default.createElement(
-      MenuItem,
-      {
-        items,
-        key: title,
+  return /* @__PURE__ */ jsx(Masonry, { columns: 4, spacingTop: "kilo", spacingLeft: "mega", children: options.map((data) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+    /* @__PURE__ */ jsxs(StyledContainerMenu, { children: [
+      data.leftComponents && /* @__PURE__ */ jsx(StyledLeftComponent, { children: data.leftComponents }),
+      /* @__PURE__ */ jsx(Text, { fontWeight: "bold", children: data.title })
+    ] }),
+    /* @__PURE__ */ jsx(StyledContainerItems, { children: data.items.map(
+      ({
         title,
         Component,
-        rightComponents,
         props,
-        toggle
-      }
-    )
-  )))));
+        rightComponents,
+        items
+      }) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          items,
+          title,
+          Component,
+          rightComponents,
+          props,
+          toggle
+        },
+        title
+      )
+    ) })
+  ] }, `${data.title}`)) });
 };
 var MenuBlock$1 = React__default.memo(MenuBlock);
 

package/dist/esm/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.js

@@ -1,3 +1,4 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { Text, Icon } from '@tecsinapse/react-core';
 import SubMenuBlock from './SubMenuBlock/SubMenuBlock.js';
@@ -16,21 +17,28 @@ const MenuItem = ({
   const noTextDecoration = { textDecoration: "none" };
   const getIconName = () => open ? "arrow-up-drop-circle-outline" : "arrow-down-drop-circle-outline";
   const handleMenuAction = () => setOpen(!open);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(StyledContainerItemText, { key: title }, /* @__PURE__ */ React__default.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React__default.createElement(
-    Text,
-    {
-      colorVariant: open ? "primary" : "secondary",
-      colorTone: open ? "medium" : "dark"
-    },
-    /* @__PURE__ */ React__default.createElement(StyledText, null, title)
-  )), rightComponents && !items && /* @__PURE__ */ React__default.createElement(StyledRightComponent, null, rightComponents), items && /* @__PURE__ */ React__default.createElement(StyledSubButton, { onClick: handleMenuAction }, /* @__PURE__ */ React__default.createElement(
-    Icon,
-    {
-      name: getIconName(),
-      type: "material-community",
-      fontColor: "orange"
-    }
-  ))), open && items?.map((subItem) => /* @__PURE__ */ React__default.createElement(SubMenuBlock, { key: subItem.title, data: subItem, toggle })));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(StyledContainerItemText, { children: [
+      /* @__PURE__ */ jsx(Component, { ...props, style: noTextDecoration, onClick: toggle, children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          colorVariant: open ? "primary" : "secondary",
+          colorTone: open ? "medium" : "dark",
+          children: /* @__PURE__ */ jsx(StyledText, { children: title })
+        }
+      ) }),
+      rightComponents && !items && /* @__PURE__ */ jsx(StyledRightComponent, { children: rightComponents }),
+      items && /* @__PURE__ */ jsx(StyledSubButton, { onClick: handleMenuAction, children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: getIconName(),
+          type: "material-community",
+          fontColor: "orange"
+        }
+      ) })
+    ] }, title),
+    open && items?.map((subItem) => /* @__PURE__ */ jsx(SubMenuBlock, { data: subItem, toggle }, subItem.title))
+  ] });
 };
 
 export { MenuItem as default };

package/dist/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Text } from '@tecsinapse/react-core';
 import { StyledText, StyledRightComponent } from '../../styled.js';
 import { StyledContainerItem, DummyBorder } from './styled.js';
@@ -6,7 +6,11 @@ import { StyledContainerItem, DummyBorder } from './styled.js';
 const SubMenuBlock = ({ data, toggle }) => {
   const { Component, props, rightComponents, title } = data;
   const noTextDecoration = { textDecoration: "none" };
-  return /* @__PURE__ */ React__default.createElement(StyledContainerItem, null, /* @__PURE__ */ React__default.createElement(DummyBorder, null), /* @__PURE__ */ React__default.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React__default.createElement(Text, { colorVariant: "secondary", colorTone: "medium", typography: "sub" }, /* @__PURE__ */ React__default.createElement(StyledText, null, title))), rightComponents && /* @__PURE__ */ React__default.createElement(StyledRightComponent, null, rightComponents));
+  return /* @__PURE__ */ jsxs(StyledContainerItem, { children: [
+    /* @__PURE__ */ jsx(DummyBorder, {}),
+    /* @__PURE__ */ jsx(Component, { ...props, style: noTextDecoration, onClick: toggle, children: /* @__PURE__ */ jsx(Text, { colorVariant: "secondary", colorTone: "medium", typography: "sub", children: /* @__PURE__ */ jsx(StyledText, { children: title }) }) }),
+    rightComponents && /* @__PURE__ */ jsx(StyledRightComponent, { children: rightComponents })
+  ] });
 };
 
 export { SubMenuBlock as default };

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

@@ -1,3 +1,4 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { useRef } from 'react';
 import { useDebouncedState, Icon, Text } from '@tecsinapse/react-core';
 import { Transition } from 'react-transition-group';
@@ -36,69 +37,83 @@ const Menubar = ({
     if (search === "") return;
     setResults(filterAndTransform(options, search));
   }, [search]);
-  return /* @__PURE__ */ React__default.createElement("div", { ref: (ref) => menuRef.current = ref, ...rest }, /* @__PURE__ */ React__default.createElement(StyledMenuBar, null, /* @__PURE__ */ React__default.createElement(StyledMenuButton, { variant: "filled", color: "primary", onPress: toggleOpen }, !open ? /* @__PURE__ */ React__default.createElement(
-    Icon,
-    {
-      size: "deca",
-      name: "menu",
-      type: "material-community",
-      fontColor: "light"
-    }
-  ) : /* @__PURE__ */ React__default.createElement(
-    Icon,
-    {
-      size: "deca",
-      name: "close",
-      type: "material-community",
-      fontColor: "light"
-    }
-  )), leftComponents, /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: 250, nodeRef: transitionInputRef }, (state) => /* @__PURE__ */ React__default.createElement(
-    StyledInputContainer,
-    {
-      style: getInputContainerStyles(state),
-      ref: transitionInputRef
-    },
-    searchable && /* @__PURE__ */ React__default.createElement(
-      StyledInput,
-      {
-        placeholder: searchPlaceholder,
-        leftComponent: /* @__PURE__ */ React__default.createElement(StyledIconInput, null, /* @__PURE__ */ React__default.createElement(Icon, { name: "magnify", type: "material-community" })),
-        value: input,
-        onChange: setInput
-      }
-    )
-  )), rightComponents), /* @__PURE__ */ React__default.createElement(
-    Transition,
-    {
-      in: open,
-      timeout: 250,
-      nodeRef: transitionMenuRef,
-      unmountOnExit: true
-    },
-    (state) => /* @__PURE__ */ React__default.createElement(
-      StyledContainerOpenMenu,
-      {
-        style: getContainerOpenMenuStyles(state),
-        ref: transitionMenuRef
-      },
-      !search ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mostUsed && /* @__PURE__ */ React__default.createElement(
-        MostUsed,
+  return /* @__PURE__ */ jsxs("div", { ref: (ref) => menuRef.current = ref, ...rest, children: [
+    /* @__PURE__ */ jsxs(StyledMenuBar, { children: [
+      /* @__PURE__ */ jsx(StyledMenuButton, { variant: "filled", color: "primary", onPress: toggleOpen, children: !open ? /* @__PURE__ */ jsx(
+        Icon,
         {
-          label: mostUsedLabel,
-          data: mostUsed,
-          toggle: toggleOpen
+          size: "deca",
+          name: "menu",
+          type: "material-community",
+          fontColor: "light"
         }
-      ), /* @__PURE__ */ React__default.createElement(MenuBlock, { options, toggle: toggleOpen })) : /* @__PURE__ */ React__default.createElement(StyledSearchResultsContainer, null, /* @__PURE__ */ React__default.createElement(StyledSearchTextContainer, null, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold" }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React__default.createElement(
-        SearchResultItem,
+      ) : /* @__PURE__ */ jsx(
+        Icon,
         {
-          key: `${result.title}-${result.category}`,
-          data: result,
-          searchTerm: search,
-          toggle: toggleOpen
+          size: "deca",
+          name: "close",
+          type: "material-community",
+          fontColor: "light"
         }
-      )))
+      ) }),
+      leftComponents,
+      /* @__PURE__ */ jsx(Transition, { in: open, timeout: 250, nodeRef: transitionInputRef, children: (state) => /* @__PURE__ */ jsx(
+        StyledInputContainer,
+        {
+          style: getInputContainerStyles(state),
+          ref: transitionInputRef,
+          children: searchable && /* @__PURE__ */ jsx(
+            StyledInput,
+            {
+              placeholder: searchPlaceholder,
+              leftComponent: /* @__PURE__ */ jsx(StyledIconInput, { children: /* @__PURE__ */ jsx(Icon, { name: "magnify", type: "material-community" }) }),
+              value: input,
+              onChange: setInput
+            }
+          )
+        }
+      ) }),
+      rightComponents
+    ] }),
+    /* @__PURE__ */ jsx(
+      Transition,
+      {
+        in: open,
+        timeout: 250,
+        nodeRef: transitionMenuRef,
+        unmountOnExit: true,
+        children: (state) => /* @__PURE__ */ jsx(
+          StyledContainerOpenMenu,
+          {
+            style: getContainerOpenMenuStyles(state),
+            ref: transitionMenuRef,
+            children: !search ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              mostUsed && /* @__PURE__ */ jsx(
+                MostUsed,
+                {
+                  label: mostUsedLabel,
+                  data: mostUsed,
+                  toggle: toggleOpen
+                }
+              ),
+              /* @__PURE__ */ jsx(MenuBlock, { options, toggle: toggleOpen })
+            ] }) : /* @__PURE__ */ jsxs(StyledSearchResultsContainer, { children: [
+              /* @__PURE__ */ jsx(StyledSearchTextContainer, { children: /* @__PURE__ */ jsx(Text, { fontWeight: "bold", children: searchResultsLabel }) }),
+              results.map((result) => /* @__PURE__ */ jsx(
+                SearchResultItem,
+                {
+                  data: result,
+                  searchTerm: search,
+                  toggle: toggleOpen
+                },
+                `${result.title}-${result.category}`
+              ))
+            ] })
+          }
+        )
+      }
     )
-  ));
+  ] });
 };
 
 export { Menubar as default };

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

@@ -1,34 +1,41 @@
-import React__default from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default, { createElement } from 'react';
 import { Text } from '@tecsinapse/react-core';
 import { StyledCardContainer, StyledCard } from './styled.js';
 
 const MostUsed = ({ data, label, toggle }) => {
   const noTextDecoration = { textDecoration: "none" };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold" }, label), /* @__PURE__ */ React__default.createElement(StyledCardContainer, null, data.slice(0, 4).map(
-    ({
-      title,
-      category,
-      Component = "a",
-      props = {}
-    }) => /* @__PURE__ */ React__default.createElement(
-      Component,
-      {
-        ...props,
-        style: noTextDecoration,
-        key: `${title}-${category}`,
-        onClick: toggle
-      },
-      /* @__PURE__ */ React__default.createElement(StyledCard, { elevated: true, key: `${title}-${category}` }, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold", colorVariant: "primary" }, title), /* @__PURE__ */ React__default.createElement(
-        Text,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Text, { fontWeight: "bold", children: label }),
+    /* @__PURE__ */ jsx(StyledCardContainer, { children: data.slice(0, 4).map(
+      ({
+        title,
+        category,
+        Component = "a",
+        props = {}
+      }) => /* @__PURE__ */ createElement(
+        Component,
         {
-          fontWeight: "bold",
-          colorVariant: "secondary",
-          typography: "label"
+          ...props,
+          style: noTextDecoration,
+          key: `${title}-${category}`,
+          onClick: toggle
         },
-        category
-      ))
-    )
-  )));
+        /* @__PURE__ */ jsxs(StyledCard, { elevated: true, children: [
+          /* @__PURE__ */ jsx(Text, { fontWeight: "bold", colorVariant: "primary", children: title }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              fontWeight: "bold",
+              colorVariant: "secondary",
+              typography: "label",
+              children: category
+            }
+          )
+        ] }, `${title}-${category}`)
+      )
+    ) })
+  ] });
 };
 var MostUsed$1 = React__default.memo(MostUsed);
 

package/dist/esm/components/molecules/Menubar/SearchResultItem/SearchResultItem.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Text } from '@tecsinapse/react-core';
 import { StyledSearchItemContainer, HighlightText } from './styled.js';
 import { highlight } from './utils.js';
@@ -11,16 +11,19 @@ const SearchResultItem = ({
   const { title, category, Component, props } = data;
   const noTextDecoration = { textDecoration: "none" };
   const textProps = { fontColor: "orange", fontWeight: "bold" };
-  return /* @__PURE__ */ React__default.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React__default.createElement(StyledSearchItemContainer, null, /* @__PURE__ */ React__default.createElement(Text, { typography: "base", colorVariant: "secondary", colorTone: "dark" }, highlight(searchTerm, title, HighlightText, textProps)), /* @__PURE__ */ React__default.createElement(
-    Text,
-    {
-      typography: "sub",
-      fontWeight: "bold",
-      colorVariant: "secondary",
-      colorTone: "medium"
-    },
-    category
-  )));
+  return /* @__PURE__ */ jsx(Component, { ...props, style: noTextDecoration, onClick: toggle, children: /* @__PURE__ */ jsxs(StyledSearchItemContainer, { children: [
+    /* @__PURE__ */ jsx(Text, { typography: "base", colorVariant: "secondary", colorTone: "dark", children: highlight(searchTerm, title, HighlightText, textProps) }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        typography: "sub",
+        fontWeight: "bold",
+        colorVariant: "secondary",
+        colorTone: "medium",
+        children: category
+      }
+    )
+  ] }) });
 };
 
 export { SearchResultItem as default };

package/dist/esm/components/molecules/Menubar/SearchResultItem/utils.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
 const normalize = (str) => {
   return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[-[\]{}()*+?.,\\^$|#]/g, " ").toLowerCase();
@@ -29,7 +29,7 @@ const highlightReplacer = (searchTerm, textToReplace, Component, props) => {
   const indexes = matches.map((match) => match.index);
   const splited = matchSpliter(textToReplace, indexes, searchTerm.length);
   return splited.map((value, idx) => {
-    return normalize(value) === search ? /* @__PURE__ */ React__default.createElement(Component, { key: `highlight-${value}${idx}`, ...props }, value) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, value);
+    return normalize(value) === search ? /* @__PURE__ */ jsx(Component, { ...props, children: value }, `highlight-${value}${idx}`) : /* @__PURE__ */ jsx(Fragment, { children: value });
   });
 };
 const highlight = (searchTerm, textToReplace, Component, props) => {

package/dist/esm/components/molecules/ScrollableMonthYearPicker/ScrollableMonthYearPicker.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { DivStyledColumn, DivStyledRow } from './styled.js';
 import ScrollableDigit from '../DateTimePickerSelector/components/ScrollableDigit.js';
@@ -33,30 +34,33 @@ const ScrollableMonthYearPicker = ({
     const selectedIndex = data.findIndex((item) => item === value);
     return selectedIndex >= 0 ? selectedIndex : 0;
   };
-  return /* @__PURE__ */ React.createElement(DivStyledColumn, null, /* @__PURE__ */ React.createElement(DivStyledRow, null, /* @__PURE__ */ React.createElement(
-    ScrollableDigit,
-    {
-      data: months,
-      timeLabel: monthLabel ?? "Month",
-      handleTimeChange: handleMonthYearChange,
-      initialScrollIndex: getInitialScrollIndex(
-        months[date.getMonth()],
-        months
-      ),
-      updateType: "month",
-      currentTime: months[date.getMonth()]
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ScrollableDigit,
-    {
-      data: years,
-      timeLabel: yearLabel ?? "Year",
-      handleTimeChange: handleMonthYearChange,
-      initialScrollIndex: getInitialScrollIndex(date.getFullYear(), years),
-      updateType: "year",
-      currentTime: date?.getFullYear().toString()
-    }
-  )));
+  return /* @__PURE__ */ jsx(DivStyledColumn, { children: /* @__PURE__ */ jsxs(DivStyledRow, { children: [
+    /* @__PURE__ */ jsx(
+      ScrollableDigit,
+      {
+        data: months,
+        timeLabel: monthLabel ?? "Month",
+        handleTimeChange: handleMonthYearChange,
+        initialScrollIndex: getInitialScrollIndex(
+          months[date.getMonth()],
+          months
+        ),
+        updateType: "month",
+        currentTime: months[date.getMonth()]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollableDigit,
+      {
+        data: years,
+        timeLabel: yearLabel ?? "Year",
+        handleTimeChange: handleMonthYearChange,
+        initialScrollIndex: getInitialScrollIndex(date.getFullYear(), years),
+        updateType: "year",
+        currentTime: date?.getFullYear().toString()
+      }
+    )
+  ] }) });
 };
 
 export { ScrollableMonthYearPicker as default };

package/dist/esm/components/molecules/ScrollableTimePicker/ScrollableTimePicker.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import ScrollableDigit from '../DateTimePickerSelector/components/ScrollableDigit.js';
 import '../DateTimePickerSelector/components/MemoizedTimeCard.js';
 import { DivStyledColumn, DivStyledRow } from './styled.js';
@@ -24,33 +24,36 @@ const ScrollableTimePicker = ({
     const selectedIndex = data.findIndex((item) => item === value);
     return selectedIndex >= 0 ? selectedIndex : 0;
   };
-  return /* @__PURE__ */ React.createElement(DivStyledColumn, null, /* @__PURE__ */ React.createElement(DivStyledRow, null, /* @__PURE__ */ React.createElement(
-    ScrollableDigit,
-    {
-      data: hours,
-      timeLabel: hourLabel ?? "Hour",
-      handleTimeChange,
-      currentTime: date?.getHours().toString(),
-      updateType: "hour",
-      initialScrollIndex: getInitialScrollIndex(
-        date.getHours().toString(),
-        hours
-      )
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ScrollableDigit,
-    {
-      data: minutes,
-      timeLabel: minuteLabel ?? "Minute",
-      updateType: "minute",
-      currentTime: date?.getMinutes().toString(),
-      handleTimeChange,
-      initialScrollIndex: getInitialScrollIndex(
-        date.getMinutes().toString(),
-        minutes
-      )
-    }
-  )));
+  return /* @__PURE__ */ jsx(DivStyledColumn, { children: /* @__PURE__ */ jsxs(DivStyledRow, { children: [
+    /* @__PURE__ */ jsx(
+      ScrollableDigit,
+      {
+        data: hours,
+        timeLabel: hourLabel ?? "Hour",
+        handleTimeChange,
+        currentTime: date?.getHours().toString(),
+        updateType: "hour",
+        initialScrollIndex: getInitialScrollIndex(
+          date.getHours().toString(),
+          hours
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollableDigit,
+      {
+        data: minutes,
+        timeLabel: minuteLabel ?? "Minute",
+        updateType: "minute",
+        currentTime: date?.getMinutes().toString(),
+        handleTimeChange,
+        initialScrollIndex: getInitialScrollIndex(
+          date.getMinutes().toString(),
+          minutes
+        )
+      }
+    )
+  ] }) });
 };
 
 export { ScrollableTimePicker as default };

package/dist/esm/components/molecules/Select/Dropdown/Dropdown.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { useDebouncedState, Checkbox, Text } from '@tecsinapse/react-core';
 import ItemSelect from '../SelectItem/SelectItem.js';
@@ -44,56 +45,60 @@ const Component = ({
     (text) => setSearchArg(text),
     [setSearchArg]
   );
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsxs(
     StyledContainerDropdown,
     {
       lengthOptions,
       style,
       anchor,
-      ref
-    },
-    type === "multi" && /* @__PURE__ */ React__default.createElement(
-      StyledContainerCheckAll,
-      {
-        onClick: hideSearchBar ? onClickCheckAll : void 0
-      },
-      /* @__PURE__ */ React__default.createElement(Checkbox, { checked: checkedAll, onChange: onClickCheckAll }),
-      !hideSearchBar ? /* @__PURE__ */ React__default.createElement(SearchBarContainer, null, /* @__PURE__ */ React__default.createElement(
-        SearchInput,
-        {
-          searchArg,
-          onChange,
-          fullWidth,
-          placeholder: searchBarPlaceholder
-        }
-      )) : /* @__PURE__ */ React__default.createElement(StyledContainerTextLabel, null, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold" }, /* @__PURE__ */ React__default.createElement(StyledSpan, null, selectAllLabel)))
-    ),
-    type === "single" && !hideSearchBar && /* @__PURE__ */ React__default.createElement(PaddedContainer, null, /* @__PURE__ */ React__default.createElement(
-      SearchInput,
-      {
-        searchArg,
-        onChange,
-        fullWidth,
-        placeholder: searchBarPlaceholder
-      }
-    )),
-    /* @__PURE__ */ React__default.createElement(OptionsContainer, { lengthOptions: options.length }, options.map((item, index) => /* @__PURE__ */ React__default.createElement(
-      ItemSelect,
-      {
-        type,
-        key: keyExtractor(item),
-        item,
-        onSelect,
-        value,
-        keyExtractor,
-        index,
-        labelExtractor,
-        setDropDownVisible,
-        checkedAll,
-        setCheckedAll,
-        lenghtOptions: lengthOptions
-      }
-    )))
+      ref,
+      children: [
+        type === "multi" && /* @__PURE__ */ jsxs(
+          StyledContainerCheckAll,
+          {
+            onClick: hideSearchBar ? onClickCheckAll : void 0,
+            children: [
+              /* @__PURE__ */ jsx(Checkbox, { checked: checkedAll, onChange: onClickCheckAll }),
+              !hideSearchBar ? /* @__PURE__ */ jsx(SearchBarContainer, { children: /* @__PURE__ */ jsx(
+                SearchInput,
+                {
+                  searchArg,
+                  onChange,
+                  fullWidth,
+                  placeholder: searchBarPlaceholder
+                }
+              ) }) : /* @__PURE__ */ jsx(StyledContainerTextLabel, { children: /* @__PURE__ */ jsx(Text, { fontWeight: "bold", children: /* @__PURE__ */ jsx(StyledSpan, { children: selectAllLabel }) }) })
+            ]
+          }
+        ),
+        type === "single" && !hideSearchBar && /* @__PURE__ */ jsx(PaddedContainer, { children: /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            searchArg,
+            onChange,
+            fullWidth,
+            placeholder: searchBarPlaceholder
+          }
+        ) }),
+        /* @__PURE__ */ jsx(OptionsContainer, { lengthOptions: options.length, children: options.map((item, index) => /* @__PURE__ */ jsx(
+          ItemSelect,
+          {
+            type,
+            item,
+            onSelect,
+            value,
+            keyExtractor,
+            index,
+            labelExtractor,
+            setDropDownVisible,
+            checkedAll,
+            setCheckedAll,
+            lenghtOptions: lengthOptions
+          },
+          keyExtractor(item)
+        )) })
+      ]
+    }
   );
 };
 const Dropdown = React__default.forwardRef(Component);