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

package/dist/cjs/components/molecules/IconTextButton/IconTextButton.js

@@ -1,7 +1,7 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
-var React = require('react');
 var useIconTextButton = require('./hooks/useIconTextButton.js');
 var styled = require('./styled.js');
 var TextComponent = require('./TextComponent.js');
@@ -16,7 +16,7 @@ const IconTextButton = ({
   ...rest
 }) => {
   const { handleHover, handlePressed, defaultFontColor } = useIconTextButton(variant);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     styled.StyledIconTextButton,
     {
       boxed: !label,
@@ -26,35 +26,37 @@ const IconTextButton = ({
       onMouseOver: () => handleHover(false),
       onPressIn: () => handlePressed(true),
       onPressOut: () => handlePressed(false),
-      ...rest
-    },
-    iconPosition === "left" ? /* @__PURE__ */ React.createElement(
-      reactCore.IconComponent,
-      {
-        iconProps,
-        size,
-        defaultFontColor
-      }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null),
-    /* @__PURE__ */ React.createElement(
-      TextComponent,
-      {
-        label,
-        defaultFontColor,
-        hasIcon: !!iconProps,
-        iconPosition,
-        textProps,
-        size
-      }
-    ),
-    iconPosition === "right" ? /* @__PURE__ */ React.createElement(
-      reactCore.IconComponent,
-      {
-        iconProps,
-        size,
-        defaultFontColor
-      }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null)
+      ...rest,
+      children: [
+        iconPosition === "left" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactCore.IconComponent,
+          {
+            iconProps,
+            size,
+            defaultFontColor
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          TextComponent,
+          {
+            label,
+            defaultFontColor,
+            hasIcon: !!iconProps,
+            iconPosition,
+            textProps,
+            size
+          }
+        ),
+        iconPosition === "right" ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactCore.IconComponent,
+          {
+            iconProps,
+            size,
+            defaultFontColor
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+      ]
+    }
   );
 };
 

package/dist/cjs/components/molecules/IconTextButton/TextComponent.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 var React = require('react');
 
@@ -9,16 +10,16 @@ const TextComponent = ({
   defaultFontColor,
   label
 }) => {
-  return label ? /* @__PURE__ */ React.createElement(
+  return label ? /* @__PURE__ */ jsxRuntime.jsx(
     reactCore.Text,
     {
       typography: textProps?.typography ?? size === "small" ? "sub" : "base",
       fontWeight: textProps?.fontWeight ?? "bold",
       fontColor: textProps?.fontColor ?? defaultFontColor,
-      ...textProps
-    },
-    label
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+      ...textProps,
+      children: label
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
 var TextComponent$1 = React.memo(TextComponent);
 

package/dist/cjs/components/molecules/InputPassword/InputPassword.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 var React = require('react');
 var Input = require('../../atoms/Input/Input.js');
@@ -7,20 +8,23 @@ var Input = require('../../atoms/Input/Input.js');
 const InputPassword = React.forwardRef(
   ({ rightComponent, ...rest }, ref) => {
     const [revealed, setRevealed] = React.useState(false);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       Input,
       {
         ...rest,
         ref,
         secureTextEntry: !revealed,
-        rightComponent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-          reactCore.InputPasswordIcon,
-          {
-            onChangeState: setRevealed,
-            revealed,
-            effect: "none"
-          }
-        ), rightComponent)
+        rightComponent: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactCore.InputPasswordIcon,
+            {
+              onChangeState: setRevealed,
+              revealed,
+              effect: "none"
+            }
+          ),
+          rightComponent
+        ] })
       }
     );
   }

package/dist/cjs/components/molecules/LabeledSwitch/LabelComponent.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactNativeWeb = require('react-native-web');
 var styled = require('./styled.js');
@@ -14,16 +15,16 @@ const LabelComponent = ({
 }) => {
   const defaultFontColor = active && !switchDisabled ? "dark" : "medium";
   const defaultFontWeight = active && !switchDisabled ? "bold" : "regular";
-  return /* @__PURE__ */ React.createElement(reactNativeWeb.Pressable, { ...rest }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNativeWeb.Pressable, { ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
     styled.StyledLabel,
     {
       labelPosition,
       fontColor: labelProps?.fontColor ?? defaultFontColor,
       fontWeight: labelProps?.fontWeight ?? defaultFontWeight,
-      ...labelProps
-    },
-    label
-  ));
+      ...labelProps,
+      children: label
+    }
+  ) });
 };
 var LabelComponent$1 = React.memo(LabelComponent);
 

package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var LabelComponent = require('./LabelComponent.js');
 var styled = require('./styled.js');
 var Switch = require('../../atoms/Switch/Switch.js');
@@ -15,37 +15,41 @@ const LabeledSwitch = ({
   rightLabel,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(styled.StyledDiv, null, leftLabel ? /* @__PURE__ */ React.createElement(
-    LabelComponent,
-    {
-      active,
-      label: leftLabel,
-      labelPosition: "left",
-      labelProps,
-      disabled: !pressableLabel || disabled,
-      switchDisabled: disabled,
-      onPress: () => onChange(!active)
-    }
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement(
-    Switch,
-    {
-      active,
-      disabled,
-      onChange,
-      ...rest
-    }
-  ), rightLabel ? /* @__PURE__ */ React.createElement(
-    LabelComponent,
-    {
-      active,
-      label: rightLabel,
-      labelPosition: "right",
-      labelProps,
-      disabled: !pressableLabel || disabled,
-      switchDisabled: disabled,
-      onPress: () => onChange(!active)
-    }
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  return /* @__PURE__ */ jsxRuntime.jsxs(styled.StyledDiv, { children: [
+    leftLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+      LabelComponent,
+      {
+        active,
+        label: leftLabel,
+        labelPosition: "left",
+        labelProps,
+        disabled: !pressableLabel || disabled,
+        switchDisabled: disabled,
+        onPress: () => onChange(!active)
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Switch,
+      {
+        active,
+        disabled,
+        onChange,
+        ...rest
+      }
+    ),
+    rightLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+      LabelComponent,
+      {
+        active,
+        label: rightLabel,
+        labelPosition: "right",
+        labelProps,
+        disabled: !pressableLabel || disabled,
+        switchDisabled: disabled,
+        onPress: () => onChange(!active)
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
+  ] });
 };
 
 module.exports = LabeledSwitch;

package/dist/cjs/components/molecules/Masonry/Masonry.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var styled = require('./styled.js');
 
@@ -22,12 +23,12 @@ const Masonry = ({
     return columnsArray;
   };
   const renderColumn = (column) => {
-    return column.map((item, index) => /* @__PURE__ */ React.createElement(styled.StyledRowItem, { key: index, index, spacingTop }, item));
+    return column.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(styled.StyledRowItem, { index, spacingTop, children: item }, index));
   };
   const renderColumns = () => {
-    return getColumns().map((column, index) => /* @__PURE__ */ React.createElement(styled.StyledColumnItem, { key: index, index, spacingLeft }, renderColumn(column)));
+    return getColumns().map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(styled.StyledColumnItem, { index, spacingLeft, children: renderColumn(column) }, index));
   };
-  return /* @__PURE__ */ React.createElement(styled.StyledMasonry, null, renderColumns());
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.StyledMasonry, { children: renderColumns() });
 };
 
 module.exports = Masonry;

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

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

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactCore = require('@tecsinapse/react-core');
 var SubMenuBlock = require('./SubMenuBlock/SubMenuBlock.js');
@@ -18,21 +19,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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(styled.StyledContainerItemText, { key: title }, /* @__PURE__ */ React.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React.createElement(
-    reactCore.Text,
-    {
-      colorVariant: open ? "primary" : "secondary",
-      colorTone: open ? "medium" : "dark"
-    },
-    /* @__PURE__ */ React.createElement(styled$1.StyledText, null, title)
-  )), rightComponents && !items && /* @__PURE__ */ React.createElement(styled$1.StyledRightComponent, null, rightComponents), items && /* @__PURE__ */ React.createElement(styled.StyledSubButton, { onClick: handleMenuAction }, /* @__PURE__ */ React.createElement(
-    reactCore.Icon,
-    {
-      name: getIconName(),
-      type: "material-community",
-      fontColor: "orange"
-    }
-  ))), open && items?.map((subItem) => /* @__PURE__ */ React.createElement(SubMenuBlock, { key: subItem.title, data: subItem, toggle })));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(styled.StyledContainerItemText, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, style: noTextDecoration, onClick: toggle, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactCore.Text,
+        {
+          colorVariant: open ? "primary" : "secondary",
+          colorTone: open ? "medium" : "dark",
+          children: /* @__PURE__ */ jsxRuntime.jsx(styled$1.StyledText, { children: title })
+        }
+      ) }),
+      rightComponents && !items && /* @__PURE__ */ jsxRuntime.jsx(styled$1.StyledRightComponent, { children: rightComponents }),
+      items && /* @__PURE__ */ jsxRuntime.jsx(styled.StyledSubButton, { onClick: handleMenuAction, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactCore.Icon,
+        {
+          name: getIconName(),
+          type: "material-community",
+          fontColor: "orange"
+        }
+      ) })
+    ] }, title),
+    open && items?.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(SubMenuBlock, { data: subItem, toggle }, subItem.title))
+  ] });
 };
 
 module.exports = MenuItem;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 var styled$1 = require('../../styled.js');
 var styled = require('./styled.js');
@@ -8,7 +8,11 @@ var styled = require('./styled.js');
 const SubMenuBlock = ({ data, toggle }) => {
   const { Component, props, rightComponents, title } = data;
   const noTextDecoration = { textDecoration: "none" };
-  return /* @__PURE__ */ React.createElement(styled.StyledContainerItem, null, /* @__PURE__ */ React.createElement(styled.DummyBorder, null), /* @__PURE__ */ React.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React.createElement(reactCore.Text, { colorVariant: "secondary", colorTone: "medium", typography: "sub" }, /* @__PURE__ */ React.createElement(styled$1.StyledText, null, title))), rightComponents && /* @__PURE__ */ React.createElement(styled$1.StyledRightComponent, null, rightComponents));
+  return /* @__PURE__ */ jsxRuntime.jsxs(styled.StyledContainerItem, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(styled.DummyBorder, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, style: noTextDecoration, onClick: toggle, children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { colorVariant: "secondary", colorTone: "medium", typography: "sub", children: /* @__PURE__ */ jsxRuntime.jsx(styled$1.StyledText, { children: title }) }) }),
+    rightComponents && /* @__PURE__ */ jsxRuntime.jsx(styled$1.StyledRightComponent, { children: rightComponents })
+  ] });
 };
 
 module.exports = SubMenuBlock;

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactCore = require('@tecsinapse/react-core');
 var reactTransitionGroup = require('react-transition-group');
@@ -38,69 +39,85 @@ const Menubar = ({
     if (search === "") return;
     setResults(utils.filterAndTransform(options, search));
   }, [search]);
-  return /* @__PURE__ */ React.createElement("div", { ref: (ref) => menuRef.current = ref, ...rest }, /* @__PURE__ */ React.createElement(styled.StyledMenuBar, null, /* @__PURE__ */ React.createElement(styled.StyledMenuButton, { variant: "filled", color: "primary", onPress: toggleOpen }, !open ? /* @__PURE__ */ React.createElement(
-    reactCore.Icon,
-    {
-      size: "deca",
-      name: "menu",
-      type: "material-community",
-      fontColor: "light"
-    }
-  ) : /* @__PURE__ */ React.createElement(
-    reactCore.Icon,
-    {
-      size: "deca",
-      name: "close",
-      type: "material-community",
-      fontColor: "light"
-    }
-  )), leftComponents, /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 250, nodeRef: transitionInputRef }, (state) => /* @__PURE__ */ React.createElement(
-    styled.StyledInputContainer,
-    {
-      style: animations.getInputContainerStyles(state),
-      ref: transitionInputRef
-    },
-    searchable && /* @__PURE__ */ React.createElement(
-      styled.StyledInput,
-      {
-        placeholder: searchPlaceholder,
-        leftComponent: /* @__PURE__ */ React.createElement(styled.StyledIconInput, null, /* @__PURE__ */ React.createElement(reactCore.Icon, { name: "magnify", type: "material-community" })),
-        value: input,
-        onChange: setInput
-      }
-    )
-  )), rightComponents), /* @__PURE__ */ React.createElement(
-    reactTransitionGroup.Transition,
-    {
-      in: open,
-      timeout: 250,
-      nodeRef: transitionMenuRef,
-      unmountOnExit: true
-    },
-    (state) => /* @__PURE__ */ React.createElement(
-      styled.StyledContainerOpenMenu,
-      {
-        style: animations.getContainerOpenMenuStyles(state),
-        ref: transitionMenuRef
-      },
-      !search ? /* @__PURE__ */ React.createElement(React.Fragment, null, mostUsed && /* @__PURE__ */ React.createElement(
-        MostUsed,
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: (ref) => {
+    menuRef.current = ref;
+  }, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(styled.StyledMenuBar, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(styled.StyledMenuButton, { variant: "filled", color: "primary", onPress: toggleOpen, children: !open ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactCore.Icon,
         {
-          label: mostUsedLabel,
-          data: mostUsed,
-          toggle: toggleOpen
+          size: "deca",
+          name: "menu",
+          type: "material-community",
+          fontColor: "light"
         }
-      ), /* @__PURE__ */ React.createElement(MenuBlock, { options, toggle: toggleOpen })) : /* @__PURE__ */ React.createElement(styled.StyledSearchResultsContainer, null, /* @__PURE__ */ React.createElement(styled.StyledSearchTextContainer, null, /* @__PURE__ */ React.createElement(reactCore.Text, { fontWeight: "bold" }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React.createElement(
-        SearchResultItem,
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        reactCore.Icon,
         {
-          key: `${result.title}-${result.category}`,
-          data: result,
-          searchTerm: search,
-          toggle: toggleOpen
+          size: "deca",
+          name: "close",
+          type: "material-community",
+          fontColor: "light"
         }
-      )))
+      ) }),
+      leftComponents,
+      /* @__PURE__ */ jsxRuntime.jsx(reactTransitionGroup.Transition, { in: open, timeout: 250, nodeRef: transitionInputRef, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+        styled.StyledInputContainer,
+        {
+          style: animations.getInputContainerStyles(state),
+          ref: transitionInputRef,
+          children: searchable && /* @__PURE__ */ jsxRuntime.jsx(
+            styled.StyledInput,
+            {
+              placeholder: searchPlaceholder,
+              leftComponent: /* @__PURE__ */ jsxRuntime.jsx(styled.StyledIconInput, { children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.Icon, { name: "magnify", type: "material-community" }) }),
+              value: input,
+              onChange: setInput
+            }
+          )
+        }
+      ) }),
+      rightComponents
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactTransitionGroup.Transition,
+      {
+        in: open,
+        timeout: 250,
+        nodeRef: transitionMenuRef,
+        unmountOnExit: true,
+        children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+          styled.StyledContainerOpenMenu,
+          {
+            style: animations.getContainerOpenMenuStyles(state),
+            ref: transitionMenuRef,
+            children: !search ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              mostUsed && /* @__PURE__ */ jsxRuntime.jsx(
+                MostUsed,
+                {
+                  label: mostUsedLabel,
+                  data: mostUsed,
+                  toggle: toggleOpen
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(MenuBlock, { options, toggle: toggleOpen })
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(styled.StyledSearchResultsContainer, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(styled.StyledSearchTextContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { fontWeight: "bold", children: searchResultsLabel }) }),
+              results.map((result) => /* @__PURE__ */ jsxRuntime.jsx(
+                SearchResultItem,
+                {
+                  data: result,
+                  searchTerm: search,
+                  toggle: toggleOpen
+                },
+                `${result.title}-${result.category}`
+              ))
+            ] })
+          }
+        )
+      }
     )
-  ));
+  ] });
 };
 
 module.exports = Menubar;

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

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