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

package/dist/cjs/components/atoms/Accordion/Accordion.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');
@@ -34,36 +35,42 @@ const Accordion = ({
     }
     setOpen((state) => !state);
   }, [onChange]);
-  return /* @__PURE__ */ React.createElement(styled.AccordionContainer, { ...rest }, /* @__PURE__ */ React.createElement(styled.TitleContainer, { onClick: handleClick }, /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: transition, nodeRef: titleTransitionRef }, (state) => /* @__PURE__ */ React.createElement("div", { ref: titleTransitionRef }, /* @__PURE__ */ React.createElement(
-    reactCore.Text,
-    {
-      typography: "h4",
-      fontWeight: "bold",
-      style: {
-        ...animations.titleStyle(transition, theme),
-        ...animations.titleTransition(theme)[state]
+  return /* @__PURE__ */ jsxRuntime.jsxs(styled.AccordionContainer, { ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(styled.TitleContainer, { onClick: handleClick, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactTransitionGroup.Transition, { in: open, timeout: transition, nodeRef: titleTransitionRef, children: (state) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref: titleTransitionRef, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactCore.Text,
+        {
+          typography: "h4",
+          fontWeight: "bold",
+          style: {
+            ...animations.titleStyle(transition, theme),
+            ...animations.titleTransition(theme)[state]
+          },
+          children: title
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(styled.IconContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactCore.Icon,
+        {
+          type: "material-community",
+          name: open ? "chevron-up" : "chevron-down",
+          size: "kilo",
+          fontColor: "medium"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactTransitionGroup.Transition, { in: open, timeout: transition, nodeRef: ref, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+      styled.ContentContainer,
+      {
+        ref: (htmlEl) => ref.current = htmlEl,
+        style: {
+          ...animations.contentStyle(open, transition, contentHeight, theme),
+          ...animations.contentTransition(contentHeight, theme)[state]
+        },
+        children
       }
-    },
-    title
-  ))), /* @__PURE__ */ React.createElement(styled.IconContainer, null, /* @__PURE__ */ React.createElement(
-    reactCore.Icon,
-    {
-      type: "material-community",
-      name: open ? "chevron-up" : "chevron-down",
-      size: "kilo",
-      fontColor: "medium"
-    }
-  ))), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: transition, nodeRef: ref }, (state) => /* @__PURE__ */ React.createElement(
-    styled.ContentContainer,
-    {
-      ref: (htmlEl) => ref.current = htmlEl,
-      style: {
-        ...animations.contentStyle(open, transition, contentHeight, theme),
-        ...animations.contentTransition(contentHeight, theme)[state]
-      }
-    },
-    children
-  )));
+    ) })
+  ] });
 };
 
 module.exports = Accordion;

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

@@ -1,7 +1,7 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
-var React = require('react');
 
 const Badge = ({
   children,
@@ -9,13 +9,13 @@ const Badge = ({
   value,
   ...props
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     reactCore.Badge,
     {
       ...props,
-      value: /* @__PURE__ */ React.createElement(reactCore.Text, { fontColor, fontWeight: "bold", typography: "label" }, value)
-    },
-    children
+      value: /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { fontColor, fontWeight: "bold", typography: "label", children: value }),
+      children
+    }
   );
 };
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var useMouseHover = require('./hooks/useMouseHover.js');
 var useMousePressed = require('./hooks/useMousePressed.js');
 var styled = require('./styled.js');
@@ -28,7 +28,7 @@ const Button = ({
     onPressIn,
     onPressOut
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     styled.StyledWebButton,
     {
       ...rest,
@@ -41,9 +41,9 @@ const Button = ({
       onPressIn: handlePressIn,
       onPressOut: handlePressOut,
       pressed,
-      variant
-    },
-    children
+      variant,
+      children
+    }
   );
 };
 

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var styled = require('./styled.js');
 var reactTransitionGroup = require('react-transition-group');
@@ -15,14 +16,14 @@ const Component = ({
 }) => {
   const refDropDown = React.useRef(null);
   useClickAwayListener.useClickAwayListener(refDropDown, setVisible, "mousedown", onClickAway);
-  return /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: visible, timeout: 300, nodeRef: refDropDown }, (state) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactTransitionGroup.Transition, { in: visible, timeout: 300, nodeRef: refDropDown, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
     styled.StyledContainerDropdown,
     {
       style: { ...animations.defaultStyles, ...animations.transition["bottom"][state] },
-      ref: refDropDown
-    },
-    children
-  ));
+      ref: refDropDown,
+      children
+    }
+  ) });
 };
 const Dropdown = Component;
 

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 var React = require('react');
 var reactNativeWeb = require('react-native-web');
@@ -30,45 +31,48 @@ const Input = React.forwardRef(
     value,
     ...rest
   }, ref) => {
-    const _hint = hintComponent || /* @__PURE__ */ React.createElement(reactCore.Hint, { text: hint, variant });
+    const _hint = hintComponent || /* @__PURE__ */ jsxRuntime.jsx(reactCore.Hint, { text: hint, variant });
     const { focused, handleBlur, handleFocus } = reactCore.useInputFocus(
       onFocus,
       onBlur,
       !disabled
     );
     const onlyLabel = label && !placeholder;
-    return /* @__PURE__ */ React.createElement(reactNativeWeb.View, { style }, /* @__PURE__ */ React.createElement(
-      reactCore.InputContainer,
-      {
-        label: value ? label : void 0,
-        labelColor,
-        labelColorVariant,
-        labelColorTone,
-        labelTypography,
-        labelStack,
-        labelWeight,
-        leftComponent,
-        rightComponent,
-        borderColor,
-        borderColorGradation,
-        inputContainerStyle,
-        focused,
-        disabled,
-        variant
-      },
-      /* @__PURE__ */ React.createElement(
-        styled.StyledWebTextInput,
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactNativeWeb.View, { style, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactCore.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__ */ jsxRuntime.jsx(
+            styled.StyledWebTextInput,
+            {
+              ...rest,
+              placeholder: onlyLabel ? label : placeholder,
+              value,
+              ref,
+              disabled,
+              onFocus: handleFocus,
+              onBlur: handleBlur
+            }
+          )
         }
-      )
-    ), hint && _hint);
+      ),
+      hint && _hint
+    ] });
   }
 );
 Input.displayName = "Input";

package/dist/cjs/components/atoms/InputMask/InputMask.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 var React = require('react');
 var reactNativeWeb = require('react-native-web');
@@ -30,45 +31,48 @@ const InputMask = React.forwardRef(
     placeholder,
     ...rest
   }, ref) => {
-    const _hint = hintComponent || /* @__PURE__ */ React.createElement(reactCore.Hint, { text: hint, variant });
+    const _hint = hintComponent || /* @__PURE__ */ jsxRuntime.jsx(reactCore.Hint, { text: hint, variant });
     const { focused, handleBlur, handleFocus } = reactCore.useInputFocus(
       onFocus,
       onBlur,
       !disabled
     );
     const onlyLabel = label && !placeholder;
-    return /* @__PURE__ */ React.createElement(reactNativeWeb.View, { style }, /* @__PURE__ */ React.createElement(
-      reactCore.InputContainer,
-      {
-        label: String(value) ? label : void 0,
-        labelColor,
-        labelColorVariant,
-        labelColorTone,
-        labelTypography,
-        labelStack,
-        labelWeight,
-        leftComponent,
-        rightComponent,
-        borderColor,
-        borderColorGradation,
-        inputContainerStyle,
-        focused,
-        disabled,
-        variant
-      },
-      /* @__PURE__ */ React.createElement(
-        styled.StyledWebTextInputMask,
+    return /* @__PURE__ */ jsxRuntime.jsxs(reactNativeWeb.View, { style, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactCore.InputContainer,
         {
-          ...rest,
-          placeholder: onlyLabel ? label : placeholder,
-          value,
-          ref,
+          label: String(value) ? label : void 0,
+          labelColor,
+          labelColorVariant,
+          labelColorTone,
+          labelTypography,
+          labelStack,
+          labelWeight,
+          leftComponent,
+          rightComponent,
+          borderColor,
+          borderColorGradation,
+          inputContainerStyle,
+          focused,
           disabled,
-          onFocus: handleFocus,
-          onBlur: handleBlur
+          variant,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            styled.StyledWebTextInputMask,
+            {
+              ...rest,
+              placeholder: onlyLabel ? label : placeholder,
+              value,
+              ref,
+              disabled,
+              onFocus: handleFocus,
+              onBlur: handleBlur
+            }
+          )
         }
-      )
-    ), hint && _hint);
+      ),
+      hint && _hint
+    ] });
   }
 );
 InputMask.displayName = "InputMask";

package/dist/cjs/components/atoms/Modal/Modal.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var Overlay = require('../Overlay/Overlay.js');
@@ -14,19 +15,22 @@ const Modal = ({
   ...rest
 }) => {
   const transitionRef = React.useRef(null);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, { open, onClose, zIndex: "modal" }), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 400, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement(
-    styled.ModalContainer,
-    {
-      ref: transitionRef,
-      style: {
-        ...style,
-        ...animations.defaultStyleOverlay,
-        ...animations.transitionStylesOverlay[state]
-      },
-      ...rest
-    },
-    children
-  )));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Overlay, { open, onClose, zIndex: "modal" }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactTransitionGroup.Transition, { in: open, timeout: 400, nodeRef: transitionRef, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+      styled.ModalContainer,
+      {
+        ref: transitionRef,
+        style: {
+          ...style,
+          ...animations.defaultStyleOverlay,
+          ...animations.transitionStylesOverlay[state]
+        },
+        ...rest,
+        children
+      }
+    ) })
+  ] });
 };
 
 module.exports = Modal;

package/dist/cjs/components/atoms/Overlay/Overlay.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactTransitionGroup = require('react-transition-group');
 var animations = require('./animations.js');
@@ -13,7 +14,7 @@ const Overlay = ({
   children
 }) => {
   const transitionRef = React.useRef(null);
-  return /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactTransitionGroup.Transition, { in: open, timeout, nodeRef: transitionRef, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
     styled.StyledOverlay,
     {
       style: {
@@ -23,10 +24,10 @@ const Overlay = ({
       onClick: open ? onClose : void 0,
       show: open,
       zIndex,
-      ref: transitionRef
-    },
-    children
-  ));
+      ref: transitionRef,
+      children
+    }
+  ) });
 };
 
 module.exports = Overlay;

package/dist/cjs/components/atoms/Skeleton/Skeleton.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var styled = require('./styled.js');
 var reactNativeWeb = require('react-native-web');
 
@@ -18,7 +18,7 @@ const Skeleton = ({
       "[Skeleton] You should provide children or specify width and height"
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     styled.Wrapper,
     {
       width,
@@ -26,16 +26,16 @@ const Skeleton = ({
       animation,
       active,
       radius,
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(
-      reactNativeWeb.View,
-      {
-        style: { opacity: active ? 0 : 1 },
-        pointerEvents: active ? "none" : "auto"
-      },
-      children
-    )
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNativeWeb.View,
+        {
+          style: { opacity: active ? 0 : 1 },
+          pointerEvents: active ? "none" : "auto",
+          children
+        }
+      )
+    }
   );
 };
 

package/dist/cjs/components/atoms/Switch/Switch.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');
@@ -49,25 +50,25 @@ const Switch = ({
       )
     }
   };
-  return /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: active, timeout: 100, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement("div", { onClick: handleChange, ref: transitionRef }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(reactTransitionGroup.Transition, { in: active, timeout: 100, nodeRef: transitionRef, children: (state) => /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleChange, ref: transitionRef, children: /* @__PURE__ */ jsxRuntime.jsx(
     styled.StyledSwitchContent,
     {
       ...rest,
       style: {
         ...defaultStyleBackground,
         ...transitionStylesBackground[state]
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      styled.StyledSwitch,
-      {
-        style: {
-          ...constants.defaultStyleCircle,
-          ...constants.transitionStylesCircle[state]
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        styled.StyledSwitch,
+        {
+          style: {
+            ...constants.defaultStyleCircle,
+            ...constants.transitionStylesCircle[state]
+          }
         }
-      }
-    )
-  )));
+      )
+    }
+  ) }) });
 };
 
 module.exports = Switch;

package/dist/cjs/components/atoms/Table/Body/TBody.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 const TBody = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement("tbody", { ...rest }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ...rest, children });
 };
 
 module.exports = TBody;

package/dist/cjs/components/atoms/Table/Cell/Td.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var styled = require('./styled.js');
 
 const Td = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(styled.TCell, { ...rest }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.TCell, { ...rest, children });
 };
 
 module.exports = Td;

package/dist/cjs/components/atoms/Table/Container/TableContainer.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var styled = require('./styled.js');
 
 const TableContainer = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(styled.TContainer, { ...rest }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.TContainer, { ...rest, children });
 };
 
 module.exports = TableContainer;

package/dist/cjs/components/atoms/Table/Footer/TFoot.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var styled = require('./styled.js');
 
 const TFoot = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(styled.TFooter, { ...rest }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.TFooter, { ...rest, children });
 };
 
 module.exports = TFoot;

package/dist/cjs/components/atoms/Table/Header/THead.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var styled = require('./styled.js');
 var Tr = require('../Row/Tr.js');
 
@@ -8,7 +8,10 @@ const THead = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(styled.THeadStyled, { ...rest }, children, /* @__PURE__ */ React.createElement(Tr, null, /* @__PURE__ */ React.createElement("td", { colSpan: 99 }, /* @__PURE__ */ React.createElement(styled.HeaderBackground, null))));
+  return /* @__PURE__ */ jsxRuntime.jsxs(styled.THeadStyled, { ...rest, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(Tr, { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 99, children: /* @__PURE__ */ jsxRuntime.jsx(styled.HeaderBackground, {}) }) })
+  ] });
 };
 
 module.exports = THead;

package/dist/cjs/components/atoms/Table/Header/Th.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var styled = require('./styled.js');
 
 const Th = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(styled.ThStyled, { ...rest }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.ThStyled, { ...rest, children });
 };
 
 module.exports = Th;

package/dist/cjs/components/atoms/Table/Row/Tr.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var styled = require('./styled.js');
 
 const Tr = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(styled.TRow, { ...rest }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.TRow, { ...rest, children });
 };
 
 module.exports = Tr;

package/dist/cjs/components/atoms/Table/Table.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var styled = require('./styled.js');
 
 const Table = ({
   children,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(styled.TableStyled, { ...rest }, children);
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.TableStyled, { ...rest, children });
 };
 
 module.exports = Table;

package/dist/cjs/components/atoms/Table/Toolbar/TableToolbar.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var styled = require('./styled.js');
 var reactCore = require('@tecsinapse/react-core');
 
@@ -10,7 +10,13 @@ const TableToolbar = ({
   footer,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(styled.TableToolbarStyled, { ...rest }, /* @__PURE__ */ React.createElement(reactCore.Text, { typography: "h3", fontWeight: "bold" }, title), rightIcons), footer);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(styled.TableToolbarStyled, { ...rest, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { typography: "h3", fontWeight: "bold", children: title }),
+      rightIcons
+    ] }),
+    footer
+  ] });
 };
 
 module.exports = TableToolbar;