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

package/dist/cjs/components/organisms/DataGrid/DataGrid.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var TBody = require('../../atoms/Table/Body/TBody.js');
 var Td = require('../../atoms/Table/Cell/Td.js');
@@ -69,55 +70,62 @@ const DataGrid = ({
     },
     [onSelectedRows, rowKeyExtractor]
   );
-  return /* @__PURE__ */ React.createElement(TableContainer, { ...rest }, /* @__PURE__ */ React.createElement(
-    TableToolbar,
-    {
-      title: toolbarTitle,
-      rightIcons: toolbarRightIcons,
-      footer: toolbarFooter
-    }
-  ), /* @__PURE__ */ React.createElement(Table, null, /* @__PURE__ */ React.createElement(
-    Header,
-    {
-      selectable,
-      headers,
-      data,
-      rowsCount: rowsCount ?? data.length,
-      rowKeyExtractor,
-      selectedRows,
-      onSelected: onSelectedRows
-    }
-  ), !loading ? /* @__PURE__ */ React.createElement(TBody, null, data.length > 0 ? utils.getData(data, rowsCount, page, rowsPerPage, pagination).map(
-    (item) => /* @__PURE__ */ React.createElement(
-      Row,
+  return /* @__PURE__ */ jsxRuntime.jsxs(TableContainer, { ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TableToolbar,
       {
-        key: rowKeyExtractor(item),
-        rowKeyExtractor,
-        handleSelect,
-        selectable,
-        headers,
-        data: item,
-        checked: selectedRows?.some(
-          (sel) => rowKeyExtractor(sel) === rowKeyExtractor(item)
-        )
+        title: toolbarTitle,
+        rightIcons: toolbarRightIcons,
+        footer: toolbarFooter
       }
-    )
-  ) : /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, emptyPlaceholder))) : /* @__PURE__ */ React.createElement(TBody, null, [...Array(rowsPerPage).keys()].map((idx) => /* @__PURE__ */ React.createElement(Tr, { key: `skeleton-${idx}` }, /* @__PURE__ */ React.createElement(Td, { colSpan: 99, style: { padding: 0 } }, skeletonComponent ?? /* @__PURE__ */ React.createElement(Skeleton, { height: 55, radius: "mili", animation: "wave" }, /* @__PURE__ */ React.createElement("div", { style: { width: "100%" } })))))), (Number(rowsCount) > 0 || data.length > 0) && /* @__PURE__ */ React.createElement(
-    Footer,
-    {
-      exportFunction,
-      exportLabel,
-      rowsPerPageLabel,
-      rowsPerPage,
-      onRowsPerPageChange,
-      rowsPerPageOptions,
-      rowsCount: rowsCount ?? data.length,
-      page,
-      onPageChange,
-      pagination,
-      exportComponent
-    }
-  )));
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Header,
+        {
+          selectable,
+          headers,
+          data,
+          rowsCount: rowsCount ?? data.length,
+          rowKeyExtractor,
+          selectedRows,
+          onSelected: onSelectedRows
+        }
+      ),
+      !loading ? /* @__PURE__ */ jsxRuntime.jsx(TBody, { children: data.length > 0 ? utils.getData(data, rowsCount, page, rowsPerPage, pagination).map(
+        (item) => /* @__PURE__ */ jsxRuntime.jsx(
+          Row,
+          {
+            rowKeyExtractor,
+            handleSelect,
+            selectable,
+            headers,
+            data: item,
+            checked: selectedRows?.some(
+              (sel) => rowKeyExtractor(sel) === rowKeyExtractor(item)
+            )
+          },
+          rowKeyExtractor(item)
+        )
+      ) : /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 99, children: emptyPlaceholder }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(TBody, { children: [...Array(rowsPerPage).keys()].map((idx) => /* @__PURE__ */ jsxRuntime.jsx(Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(Td, { colSpan: 99, style: { padding: 0 }, children: skeletonComponent ?? /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { height: 55, radius: "mili", animation: "wave", children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%" } }) }) }) }, `skeleton-${idx}`)) }),
+      (Number(rowsCount) > 0 || data.length > 0) && /* @__PURE__ */ jsxRuntime.jsx(
+        Footer,
+        {
+          exportFunction,
+          exportLabel,
+          rowsPerPageLabel,
+          rowsPerPage,
+          onRowsPerPageChange,
+          rowsPerPageOptions,
+          rowsCount: rowsCount ?? data.length,
+          page,
+          onPageChange,
+          pagination,
+          exportComponent
+        }
+      )
+    ] })
+  ] });
 };
 
 module.exports = DataGrid;

package/dist/cjs/components/organisms/DataGrid/Footer/Footer.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var Button = require('../../../atoms/Button/Button.js');
 var reactCore = require('@tecsinapse/react-core');
@@ -53,63 +54,77 @@ const Footer = ({
   );
   const currentInitItem = page * rowsPerPage + 1;
   const currentFinalItem = (page + 1) * rowsPerPage > rowsCount ? rowsCount : (page + 1) * rowsPerPage;
-  return /* @__PURE__ */ React.createElement(TFoot, null, /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement(styled.TdFooterStyled, { colSpan: 99 }, /* @__PURE__ */ React.createElement(styled.FooterContainer, null, /* @__PURE__ */ React.createElement(styled.FooterContainerStart, null, pagination && /* @__PURE__ */ React.createElement(styled.SelectContainer, null, /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      options: rowsPerPageOptions,
-      onSelect: handleRowsPerPage,
-      value: rowsPerPage,
-      type: "single",
-      keyExtractor: (value) => String(value),
-      labelExtractor: rowsPerPageLabel,
-      anchor: "top"
-    }
-  )), exportComponent && !exportFunction && /* @__PURE__ */ React.createElement(React.Fragment, null, exportComponent), exportFunction && /* @__PURE__ */ React.createElement(styled.HoveredText, null, /* @__PURE__ */ React.createElement(Button, { variant: "outlined", onPress: () => exportFunction() }, /* @__PURE__ */ React.createElement(reactCore.Text, { fontColor: "orange", fontWeight: "bold" }, exportLabel)))), pagination && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    styled.TextPagination,
-    {
-      fontWeight: "bold",
-      fontColor: "medium"
-    },
-    `Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`
-  ), /* @__PURE__ */ React.createElement(styled.FooterContainerEnd, null, /* @__PURE__ */ React.createElement(
-    styled.NavigationButton,
-    {
-      onPress: () => onPageChange?.(page - 1),
-      disabled: page === 0
-    },
-    /* @__PURE__ */ React.createElement(
-      reactCore.Icon,
-      {
-        name: "chevron-left",
-        type: "material-community",
-        fontColor: "light"
-      }
-    )
-  ), /* @__PURE__ */ React.createElement(styled.PagesContainer, null, [...Array(Math.ceil(rowsCount / rowsPerPage)).keys()].slice(
-    getPaginationSlice().start,
-    getPaginationSlice().end
-  ).map((value) => /* @__PURE__ */ React.createElement(styled.HoveredText, { key: `page-${value}` }, /* @__PURE__ */ React.createElement(
-    styled.PageButton,
-    {
-      variant: page === value ? "outlined" : "text",
-      onPress: () => onPageChange?.(value)
-    },
-    /* @__PURE__ */ React.createElement(reactCore.Text, { fontColor: "medium", fontWeight: "bold" }, value + 1)
-  )))), /* @__PURE__ */ React.createElement(
-    styled.NavigationButton,
-    {
-      onPress: () => onPageChange?.(page + 1),
-      disabled: page === Math.ceil(rowsCount / rowsPerPage) - 1
-    },
-    /* @__PURE__ */ React.createElement(
-      reactCore.Icon,
-      {
-        name: "chevron-right",
-        type: "material-community",
-        fontColor: "light"
-      }
-    )
-  )))))));
+  return /* @__PURE__ */ jsxRuntime.jsx(TFoot, { children: /* @__PURE__ */ jsxRuntime.jsx(Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(styled.TdFooterStyled, { colSpan: 99, children: /* @__PURE__ */ jsxRuntime.jsxs(styled.FooterContainer, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(styled.FooterContainerStart, { children: [
+      pagination && /* @__PURE__ */ jsxRuntime.jsx(styled.SelectContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        Select,
+        {
+          options: rowsPerPageOptions,
+          onSelect: handleRowsPerPage,
+          value: rowsPerPage,
+          type: "single",
+          keyExtractor: (value) => String(value),
+          labelExtractor: rowsPerPageLabel,
+          anchor: "top"
+        }
+      ) }),
+      exportComponent && !exportFunction && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: exportComponent }),
+      exportFunction && /* @__PURE__ */ jsxRuntime.jsx(styled.HoveredText, { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outlined", onPress: () => exportFunction(), children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { fontColor: "orange", fontWeight: "bold", children: exportLabel }) }) })
+    ] }),
+    pagination && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        styled.TextPagination,
+        {
+          fontWeight: "bold",
+          fontColor: "medium",
+          children: `Exibindo ${currentInitItem} a ${currentFinalItem} de ${rowsCount} registros`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(styled.FooterContainerEnd, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styled.NavigationButton,
+          {
+            onPress: () => onPageChange?.(page - 1),
+            disabled: page === 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactCore.Icon,
+              {
+                name: "chevron-left",
+                type: "material-community",
+                fontColor: "light"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(styled.PagesContainer, { children: [...Array(Math.ceil(rowsCount / rowsPerPage)).keys()].slice(
+          getPaginationSlice().start,
+          getPaginationSlice().end
+        ).map((value) => /* @__PURE__ */ jsxRuntime.jsx(styled.HoveredText, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          styled.PageButton,
+          {
+            variant: page === value ? "outlined" : "text",
+            onPress: () => onPageChange?.(value),
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { fontColor: "medium", fontWeight: "bold", children: value + 1 })
+          }
+        ) }, `page-${value}`)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          styled.NavigationButton,
+          {
+            onPress: () => onPageChange?.(page + 1),
+            disabled: page === Math.ceil(rowsCount / rowsPerPage) - 1,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactCore.Icon,
+              {
+                name: "chevron-right",
+                type: "material-community",
+                fontColor: "light"
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] }) }) }) });
 };
 var Footer$1 = React.memo(Footer);
 

package/dist/cjs/components/organisms/DataGrid/Footer/styled.js

@@ -3,7 +3,7 @@
 var styled = require('@emotion/styled');
 var styled$1 = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
-require('react');
+require('react/jsx-runtime');
 var Td = require('../../../atoms/Table/Cell/Td.js');
 require('../../../atoms/Table/Container/styled.js');
 require('../../../atoms/Table/Footer/styled.js');
@@ -12,6 +12,7 @@ require('../../../atoms/Table/Row/styled.js');
 require('../../../atoms/Table/Toolbar/styled.js');
 require('../../../atoms/Table/styled.js');
 var Button = require('../../../atoms/Button/Button.js');
+require('react');
 
 const TdFooterStyled = styled(Td)`
   padding: ${({ theme }) => theme.spacing.centi} 0 0 0;

package/dist/cjs/components/organisms/DataGrid/Header/Header.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactCore = require('@tecsinapse/react-core');
 require('../../../atoms/Table/Cell/styled.js');
@@ -54,31 +55,36 @@ const Header = ({
     }
     onSelected?.(selectedRows.concat(unselectedItemsOnData));
   };
-  return /* @__PURE__ */ React.createElement(THead, null, /* @__PURE__ */ React.createElement(Tr, null, selectable && /* @__PURE__ */ React.createElement(styled.CheckboxHeader, null, /* @__PURE__ */ React.createElement(
-    reactCore.Checkbox,
-    {
-      checked: rowsCount === selectedRows?.length,
-      onChange: handleSelectAll
-    }
-  )), headers.map(({ label, sort, justifyContent = "flex-start" }) => /* @__PURE__ */ React.createElement(Th, { key: label }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent
+  return /* @__PURE__ */ jsxRuntime.jsx(THead, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tr, { children: [
+    selectable && /* @__PURE__ */ jsxRuntime.jsx(styled.CheckboxHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactCore.Checkbox,
+      {
+        checked: rowsCount === selectedRows?.length,
+        onChange: handleSelectAll
       }
-    },
-    label,
-    sort && /* @__PURE__ */ React.createElement("div", { style: { marginLeft: 8 } }, /* @__PURE__ */ React.createElement(reactCore.PressableSurface, { onPress: () => handleSortDirection(sort) }, /* @__PURE__ */ React.createElement(
-      reactCore.Icon,
+    ) }),
+    headers.map(({ label, sort, justifyContent = "flex-start" }) => /* @__PURE__ */ jsxRuntime.jsx(Th, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
       {
-        name: `sort-alphabetical-${utils.getIconSuffix(sortDirection)}`,
-        type: "material-community",
-        fontColor: utils.getIconColor(sortDirection)
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent
+        },
+        children: [
+          label,
+          sort && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginLeft: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.PressableSurface, { onPress: () => handleSortDirection(sort), children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactCore.Icon,
+            {
+              name: `sort-alphabetical-${utils.getIconSuffix(sortDirection)}`,
+              type: "material-community",
+              fontColor: utils.getIconColor(sortDirection)
+            }
+          ) }) })
+        ]
       }
-    )))
-  )))));
+    ) }, label))
+  ] }) });
 };
 
 module.exports = Header;

package/dist/cjs/components/organisms/DataGrid/Header/styled.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var styled = require('@emotion/styled');
-require('react');
+require('react/jsx-runtime');
 require('../../../atoms/Table/Cell/styled.js');
 require('../../../atoms/Table/Container/styled.js');
 require('../../../atoms/Table/Footer/styled.js');

package/dist/cjs/components/organisms/DataGrid/Row/Row.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactCore = require('@tecsinapse/react-core');
 var styled = require('../styled.js');
@@ -19,13 +20,16 @@ const Row = ({
   selectable,
   headers
 }) => {
-  return /* @__PURE__ */ React.createElement(Tr, { key: rowKeyExtractor(data) }, selectable && /* @__PURE__ */ React.createElement(styled.CheckboxCell, null, /* @__PURE__ */ React.createElement(
-    reactCore.Checkbox,
-    {
-      checked: _checked,
-      onChange: (checked) => handleSelect(data, checked)
-    }
-  )), headers.map(({ label, render }) => /* @__PURE__ */ React.createElement(Td, { key: `row-${rowKeyExtractor(data)}-column-${label}` }, render(data))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tr, { children: [
+    selectable && /* @__PURE__ */ jsxRuntime.jsx(styled.CheckboxCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactCore.Checkbox,
+      {
+        checked: _checked,
+        onChange: (checked) => handleSelect(data, checked)
+      }
+    ) }),
+    headers.map(({ label, render }) => /* @__PURE__ */ jsxRuntime.jsx(Td, { children: render(data) }, `row-${rowKeyExtractor(data)}-column-${label}`))
+  ] }, rowKeyExtractor(data));
 };
 var Row$1 = React.memo(Row);
 

package/dist/cjs/components/organisms/DataGrid/styled.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var styled = require('@emotion/styled');
-require('react');
+require('react/jsx-runtime');
 var Td = require('../../atoms/Table/Cell/Td.js');
 require('../../atoms/Table/Container/styled.js');
 require('../../atoms/Table/Footer/styled.js');

package/dist/esm/components/atoms/Accordion/Accordion.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useRef } from 'react';
 import { Text, Icon } from '@tecsinapse/react-core';
 import { AccordionContainer, TitleContainer, IconContainer, ContentContainer } from './styled.js';
@@ -32,36 +33,42 @@ const Accordion = ({
     }
     setOpen((state) => !state);
   }, [onChange]);
-  return /* @__PURE__ */ React__default.createElement(AccordionContainer, { ...rest }, /* @__PURE__ */ React__default.createElement(TitleContainer, { onClick: handleClick }, /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: transition, nodeRef: titleTransitionRef }, (state) => /* @__PURE__ */ React__default.createElement("div", { ref: titleTransitionRef }, /* @__PURE__ */ React__default.createElement(
-    Text,
-    {
-      typography: "h4",
-      fontWeight: "bold",
-      style: {
-        ...titleStyle(transition, theme),
-        ...titleTransition(theme)[state]
+  return /* @__PURE__ */ jsxs(AccordionContainer, { ...rest, children: [
+    /* @__PURE__ */ jsxs(TitleContainer, { onClick: handleClick, children: [
+      /* @__PURE__ */ jsx(Transition, { in: open, timeout: transition, nodeRef: titleTransitionRef, children: (state) => /* @__PURE__ */ jsx("div", { ref: titleTransitionRef, children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          typography: "h4",
+          fontWeight: "bold",
+          style: {
+            ...titleStyle(transition, theme),
+            ...titleTransition(theme)[state]
+          },
+          children: title
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          type: "material-community",
+          name: open ? "chevron-up" : "chevron-down",
+          size: "kilo",
+          fontColor: "medium"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(Transition, { in: open, timeout: transition, nodeRef: ref, children: (state) => /* @__PURE__ */ jsx(
+      ContentContainer,
+      {
+        ref: (htmlEl) => ref.current = htmlEl,
+        style: {
+          ...contentStyle(open, transition, contentHeight, theme),
+          ...contentTransition(contentHeight, theme)[state]
+        },
+        children
       }
-    },
-    title
-  ))), /* @__PURE__ */ React__default.createElement(IconContainer, null, /* @__PURE__ */ React__default.createElement(
-    Icon,
-    {
-      type: "material-community",
-      name: open ? "chevron-up" : "chevron-down",
-      size: "kilo",
-      fontColor: "medium"
-    }
-  ))), /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: transition, nodeRef: ref }, (state) => /* @__PURE__ */ React__default.createElement(
-    ContentContainer,
-    {
-      ref: (htmlEl) => ref.current = htmlEl,
-      style: {
-        ...contentStyle(open, transition, contentHeight, theme),
-        ...contentTransition(contentHeight, theme)[state]
-      }
-    },
-    children
-  )));
+    ) })
+  ] });
 };
 
 export { Accordion as default };

package/dist/esm/components/atoms/Badge/Badge.js

@@ -1,5 +1,5 @@
+import { jsx } from 'react/jsx-runtime';
 import { Badge as Badge$1, Text } from '@tecsinapse/react-core';
-import React__default from 'react';
 
 const Badge = ({
   children,
@@ -7,13 +7,13 @@ const Badge = ({
   value,
   ...props
 }) => {
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     Badge$1,
     {
       ...props,
-      value: /* @__PURE__ */ React__default.createElement(Text, { fontColor, fontWeight: "bold", typography: "label" }, value)
-    },
-    children
+      value: /* @__PURE__ */ jsx(Text, { fontColor, fontWeight: "bold", typography: "label", children: value }),
+      children
+    }
   );
 };
 

package/dist/esm/components/atoms/Button/Button.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { jsx } from 'react/jsx-runtime';
 import { useMouseHover } from './hooks/useMouseHover.js';
 import { useMousePressed } from './hooks/useMousePressed.js';
 import { StyledWebButton } from './styled.js';
@@ -26,7 +26,7 @@ const Button = ({
     onPressIn,
     onPressOut
   );
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     StyledWebButton,
     {
       ...rest,
@@ -39,9 +39,9 @@ const Button = ({
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       pressed,
-      variant
-    },
-    children
+      variant,
+      children
+    }
   );
 };
 

package/dist/esm/components/atoms/Dropdown/index.js

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { StyledContainerDropdown } from './styled.js';
 import { Transition } from 'react-transition-group';
@@ -13,14 +14,14 @@ const Component = ({
 }) => {
   const refDropDown = React__default.useRef(null);
   useClickAwayListener(refDropDown, setVisible, "mousedown", onClickAway);
-  return /* @__PURE__ */ React__default.createElement(Transition, { in: visible, timeout: 300, nodeRef: refDropDown }, (state) => /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Transition, { in: visible, timeout: 300, nodeRef: refDropDown, children: (state) => /* @__PURE__ */ jsx(
     StyledContainerDropdown,
     {
       style: { ...defaultStyles, ...transition["bottom"][state] },
-      ref: refDropDown
-    },
-    children
-  ));
+      ref: refDropDown,
+      children
+    }
+  ) });
 };
 const Dropdown = Component;
 

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

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useInputFocus, InputContainer, Hint } from '@tecsinapse/react-core';
 import React__default from 'react';
 import { View } from 'react-native-web';
@@ -28,45 +29,48 @@ const Input = React__default.forwardRef(
     value,
     ...rest
   }, ref) => {
-    const _hint = hintComponent || /* @__PURE__ */ React__default.createElement(Hint, { text: hint, variant });
+    const _hint = hintComponent || /* @__PURE__ */ jsx(Hint, { text: hint, variant });
     const { focused, handleBlur, handleFocus } = useInputFocus(
       onFocus,
       onBlur,
       !disabled
     );
     const onlyLabel = label && !placeholder;
-    return /* @__PURE__ */ React__default.createElement(View, { style }, /* @__PURE__ */ React__default.createElement(
-      InputContainer,
-      {
-        label: value ? label : void 0,
-        labelColor,
-        labelColorVariant,
-        labelColorTone,
-        labelTypography,
-        labelStack,
-        labelWeight,
-        leftComponent,
-        rightComponent,
-        borderColor,
-        borderColorGradation,
-        inputContainerStyle,
-        focused,
-        disabled,
-        variant
-      },
-      /* @__PURE__ */ React__default.createElement(
-        StyledWebTextInput,
+    return /* @__PURE__ */ jsxs(View, { style, children: [
+      /* @__PURE__ */ jsx(
+        InputContainer,
         {
-          ...rest,
-          placeholder: onlyLabel ? label : placeholder,
-          value,
-          ref,
+          label: value ? label : void 0,
+          labelColor,
+          labelColorVariant,
+          labelColorTone,
+          labelTypography,
+          labelStack,
+          labelWeight,
+          leftComponent,
+          rightComponent,
+          borderColor,
+          borderColorGradation,
+          inputContainerStyle,
+          focused,
           disabled,
-          onFocus: handleFocus,
-          onBlur: handleBlur
+          variant,
+          children: /* @__PURE__ */ jsx(
+            StyledWebTextInput,
+            {
+              ...rest,
+              placeholder: onlyLabel ? label : placeholder,
+              value,
+              ref,
+              disabled,
+              onFocus: handleFocus,
+              onBlur: handleBlur
+            }
+          )
         }
-      )
-    ), hint && _hint);
+      ),
+      hint && _hint
+    ] });
   }
 );
 Input.displayName = "Input";