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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 
 const Tag = ({
@@ -16,21 +16,21 @@ const Tag = ({
     fontStack = "default",
     fontWeight = "bold"
   } = textProps || {};
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     reactCore.Tag,
     {
       backgroundColorVariant,
       backgroundColorTone,
-      value: /* @__PURE__ */ React.createElement(
+      value: /* @__PURE__ */ jsxRuntime.jsx(
         reactCore.Text,
         {
           colorVariant,
           colorTone,
           fontStack,
           fontWeight,
-          typography: rest.variant === "small" ? "sub" : "base"
-        },
-        value
+          typography: rest.variant === "small" ? "sub" : "base",
+          children: value
+        }
       ),
       ...rest
     }

package/dist/cjs/components/atoms/Tooltip/Tooltip.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');
@@ -20,25 +21,28 @@ const Tooltip = ({
       height: spanRef.current?.clientHeight
     });
   }, []);
-  return /* @__PURE__ */ React.createElement(styled.Container, { position }, children, /* @__PURE__ */ React.createElement(
-    styled.TooltipSpan,
-    {
-      maxWidth: maxWidht,
-      computed,
-      position,
-      ref: (ref) => spanRef.current = ref
-    },
-    /* @__PURE__ */ React.createElement(
-      reactCore.Text,
+  return /* @__PURE__ */ jsxRuntime.jsxs(styled.Container, { position, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      styled.TooltipSpan,
       {
-        fontWeight: "bold",
-        typography: "base",
-        colorVariant: "secondary",
-        colorTone: "xlight"
-      },
-      title
+        maxWidth: maxWidht,
+        computed,
+        position,
+        ref: (ref) => spanRef.current = ref,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactCore.Text,
+          {
+            fontWeight: "bold",
+            typography: "base",
+            colorVariant: "secondary",
+            colorTone: "xlight",
+            children: title
+          }
+        )
+      }
     )
-  ));
+  ] });
 };
 
 module.exports = Tooltip;

package/dist/cjs/components/molecules/Breadcrumbs/BreadcrumbItem/BreadcrumbItem.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 = require('./styled.js');
 
@@ -11,15 +11,18 @@ const BreadcrumbItem = ({
   title
 }) => {
   const noTextDecoration = { textDecoration: "none" };
-  return /* @__PURE__ */ React.createElement(styled.StyledContainerItem, null, /* @__PURE__ */ React.createElement(Component, { ...props, style: noTextDecoration }, /* @__PURE__ */ React.createElement(reactCore.Text, { colorVariant: "secondary", colorTone: isLast ? "medium" : "xdark" }, title)), !isLast && /* @__PURE__ */ React.createElement(styled.StyledContainerIcon, null, /* @__PURE__ */ React.createElement(
-    reactCore.Icon,
-    {
-      name: "chevron-double-right",
-      type: "material-community",
-      size: "centi",
-      fontColor: "orange"
-    }
-  )));
+  return /* @__PURE__ */ jsxRuntime.jsxs(styled.StyledContainerItem, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, style: noTextDecoration, children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.Text, { colorVariant: "secondary", colorTone: isLast ? "medium" : "xdark", children: title }) }),
+    !isLast && /* @__PURE__ */ jsxRuntime.jsx(styled.StyledContainerIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactCore.Icon,
+      {
+        name: "chevron-double-right",
+        type: "material-community",
+        size: "centi",
+        fontColor: "orange"
+      }
+    ) })
+  ] });
 };
 
 module.exports = BreadcrumbItem;

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

@@ -1,23 +1,23 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var styled = require('./styled.js');
 var BreadcrumbItem = require('./BreadcrumbItem/BreadcrumbItem.js');
 
 const Breadcrumbs = ({ breadcrumbs, ...rest }) => {
-  return /* @__PURE__ */ React.createElement(styled.StyledContainerBreadcrumbs, { ...rest }, breadcrumbs.map((item, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(styled.StyledContainerBreadcrumbs, { ...rest, children: breadcrumbs.map((item, index) => {
     const { props, Component = "a", title } = item;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       BreadcrumbItem,
       {
-        key: index,
         Component,
         props,
         isLast: breadcrumbs.length - 1 === index,
         title
-      }
+      },
+      index
     );
-  }));
+  }) });
 };
 
 module.exports = Breadcrumbs;

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 var dateFns = require('date-fns');
 var React = require('react');
@@ -51,7 +52,7 @@ const DatePicker = ({
       onChange?.(void 0);
   }, [value]);
   const controlComponent = (onPress, displayValue) => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       InputMask,
       {
         onBlur: () => {
@@ -86,21 +87,21 @@ const DatePicker = ({
         placeholder,
         label,
         placeholderTextColor: disabled ? theme.color.secondary.light : void 0,
-        rightComponent: /* @__PURE__ */ React.createElement(
+        rightComponent: /* @__PURE__ */ jsxRuntime.jsx(
           reactCore.PressableSurface,
           {
             effect: "none",
             style: { padding: 0 },
             onPress,
-            disabled
-          },
-          /* @__PURE__ */ React.createElement(reactCore.CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" })
+            disabled,
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactCore.CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" })
+          }
         )
       }
     );
   };
   if (type === "day") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       reactCore.DatePicker,
       {
         ...rest,
@@ -115,12 +116,12 @@ const DatePicker = ({
         month: getMonth,
         requestShowCalendar: show,
         requestCloseCalendar: close,
-        renderCalendar: (calendar) => /* @__PURE__ */ React.createElement(index.Dropdown, { visible, setVisible }, calendar),
+        renderCalendar: (calendar) => /* @__PURE__ */ jsxRuntime.jsx(index.Dropdown, { visible, setVisible, children: calendar }),
         controlComponent
       }
     );
   } else {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       reactCore.DatePicker,
       {
         ...rest,
@@ -137,7 +138,7 @@ const DatePicker = ({
         requestCloseCalendar: close,
         placeholder,
         label,
-        renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React.createElement(
+        renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ jsxRuntime.jsx(
           index.Dropdown,
           {
             visible,
@@ -145,9 +146,9 @@ const DatePicker = ({
             onClickAway: () => {
               handleBlur?.();
               checksFullRange();
-            }
-          },
-          calendar
+            },
+            children: calendar
+          }
         )
       }
     );

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
 var React = require('react');
 var index = require('../../atoms/Dropdown/index.js');
@@ -9,11 +10,11 @@ const DateTimePicker = ({ ...rest }) => {
   const [visible, setVisible] = React.useState(false);
   const show = React.useCallback(() => setVisible(true), []);
   const close = React.useCallback(() => setVisible(false), []);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     reactCore.DateTimePicker,
     {
       ...rest,
-      DateTimeSelectorComponent: (props) => /* @__PURE__ */ React.createElement(
+      DateTimeSelectorComponent: (props) => /* @__PURE__ */ jsxRuntime.jsx(
         reactCore.ControlledDateTimeSelector,
         {
           SelectorComponent: DateTimePickerSelector,
@@ -22,7 +23,7 @@ const DateTimePicker = ({ ...rest }) => {
       ),
       requestShowSelector: show,
       requestCloseSelector: close,
-      renderSelector: (selector) => /* @__PURE__ */ React.createElement(index.Dropdown, { visible, setVisible }, selector)
+      renderSelector: (selector) => /* @__PURE__ */ jsxRuntime.jsx(index.Dropdown, { visible, setVisible, children: selector })
     }
   );
 };

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

@@ -1,31 +1,13 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var Button = require('../../atoms/Button/Button.js');
+require('react');
 var reactCore = require('@tecsinapse/react-core');
 var styled = require('./styled.js');
 var ScrollableTimePicker = require('../ScrollableTimePicker/ScrollableTimePicker.js');
 var ScrollableMonthYearPicker = require('../ScrollableMonthYearPicker/ScrollableMonthYearPicker.js');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
 const DateTimePickerSelector = ({
   TextComponent = reactCore.Text,
   currentMode,
@@ -45,54 +27,61 @@ const DateTimePickerSelector = ({
   minuteLabel,
   ...rest
 }) => {
-  return /* @__PURE__ */ React__namespace.createElement(styled.Root, { ...rest }, /* @__PURE__ */ React__namespace.createElement(styled.Header, null, currentMode === 1 && /* @__PURE__ */ React__namespace.createElement(styled.BackButton, { onPress: handlePressBack }, /* @__PURE__ */ React__namespace.createElement(
-    reactCore.Icon,
-    {
-      type: "material-community",
-      name: "chevron-left",
-      size: "mega",
-      colorVariant: "secondary"
-    }
-  )), /* @__PURE__ */ React__namespace.createElement(TextComponent, { typography: "base", colorVariant: "secondary" }, modalTitle)), isDate ? /* @__PURE__ */ React__namespace.createElement(
-    reactCore.Calendar,
-    {
-      type: "day",
-      value: date,
-      onChange: handleCalendarChange,
-      year: date.getFullYear(),
-      month: date.getMonth()
-    }
-  ) : isMonth ? /* @__PURE__ */ React__namespace.createElement(styled.Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React__namespace.createElement(
-    styled.Content,
-    {
-      style: { width: "100%", flexDirection: "row", display: "flex" }
-    },
-    /* @__PURE__ */ React__namespace.createElement(
-      ScrollableMonthYearPicker,
+  return /* @__PURE__ */ jsxRuntime.jsxs(styled.Root, { ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(styled.Header, { children: [
+      currentMode === 1 && /* @__PURE__ */ jsxRuntime.jsx(styled.BackButton, { onPress: handlePressBack, children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactCore.Icon,
+        {
+          type: "material-community",
+          name: "chevron-left",
+          size: "mega",
+          colorVariant: "secondary"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(TextComponent, { typography: "base", colorVariant: "secondary", children: modalTitle })
+    ] }),
+    isDate ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactCore.Calendar,
+      {
+        type: "day",
+        value: date,
+        onChange: handleCalendarChange,
+        year: date.getFullYear(),
+        month: date.getMonth()
+      }
+    ) : isMonth ? /* @__PURE__ */ jsxRuntime.jsx(styled.Content, { style: { flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      styled.Content,
       {
-        setDate,
-        date,
-        locale,
-        yearLabel,
-        monthLabel
+        style: { width: "100%", flexDirection: "row", display: "flex" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollableMonthYearPicker,
+          {
+            setDate,
+            date,
+            locale,
+            yearLabel,
+            monthLabel
+          }
+        )
       }
-    )
-  )) : /* @__PURE__ */ React__namespace.createElement(styled.Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React__namespace.createElement(
-    styled.Content,
-    {
-      style: { width: "100%", flexDirection: "row", display: "flex" }
-    },
-    /* @__PURE__ */ React__namespace.createElement(
-      ScrollableTimePicker,
+    ) }) : /* @__PURE__ */ jsxRuntime.jsx(styled.Content, { style: { flexDirection: "column" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      styled.Content,
       {
-        setDate,
-        date,
-        locale,
-        hourLabel,
-        minuteLabel
+        style: { width: "100%", flexDirection: "row", display: "flex" },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollableTimePicker,
+          {
+            setDate,
+            date,
+            locale,
+            hourLabel,
+            minuteLabel
+          }
+        )
       }
-    )
-  )), /* @__PURE__ */ React__namespace.createElement(Button, { color: "primary", onPress: handlePressConfirm }, /* @__PURE__ */ React__namespace.createElement(TextComponent, { fontWeight: "bold", fontColor: "light" }, confirmButtonText || "OK")));
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { color: "primary", onPress: handlePressConfirm, children: /* @__PURE__ */ jsxRuntime.jsx(TextComponent, { fontWeight: "bold", fontColor: "light", children: confirmButtonText || "OK" }) })
+  ] });
 };
 
 module.exports = DateTimePickerSelector;

package/dist/cjs/components/molecules/DateTimePickerSelector/components/MemoizedTimeCard.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var styled = require('../styled.js');
 
@@ -9,14 +10,14 @@ const MemoizedTimeCard = React.memo(
     isSelected,
     onPress,
     TextComponent
-  }) => /* @__PURE__ */ React.createElement(styled.TimeCard, { id: time, key: time, isSelected, onPress }, /* @__PURE__ */ React.createElement(
+  }) => /* @__PURE__ */ jsxRuntime.jsx(styled.TimeCard, { id: time, isSelected, onPress, children: /* @__PURE__ */ jsxRuntime.jsx(
     TextComponent,
     {
       colorVariant: isSelected ? "primary" : "secondary",
-      colorTone: "xdark"
-    },
-    time
-  ))
+      colorTone: "xdark",
+      children: time
+    }
+  ) }, time)
 );
 
 module.exports = MemoizedTimeCard;

package/dist/cjs/components/molecules/DateTimePickerSelector/components/ScrollableDigit.js

@@ -1,7 +1,8 @@
 'use strict';
 
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var reactCore = require('@tecsinapse/react-core');
+var React = require('react');
 var styled = require('../styled.js');
 var MemoizedTimeCard = require('./MemoizedTimeCard.js');
 
@@ -44,7 +45,7 @@ const ScrollableDigit = ({
     }
   };
   const timeCardsBuilder = React__namespace.useCallback(
-    ({ item }) => /* @__PURE__ */ React__namespace.createElement(
+    ({ item }) => /* @__PURE__ */ jsxRuntime.jsx(
       MemoizedTimeCard,
       {
         time: getDisplayedValue(item),
@@ -57,26 +58,29 @@ const ScrollableDigit = ({
     ),
     [handleTimeChange, TextComponent]
   );
-  return /* @__PURE__ */ React__namespace.createElement("div", { style: { display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React__namespace.createElement(styled.StyledTextLabel, null, timeLabel), /* @__PURE__ */ React__namespace.createElement(
-    styled.TimeDigitContainer,
-    {
-      showsHorizontalScrollIndicator: true,
-      data,
-      renderItem: timeCardsBuilder,
-      keyExtractor: (item) => item,
-      contentContainerStyle: {
-        alignItems: "center"
-      },
-      numColumns: 1,
-      initialScrollIndex,
-      getItemLayout: (_, index) => ({
-        length: digitCardHeight,
-        offset: digitCardHeight * index,
-        index
-      }),
-      fadingEdgeLength: 200
-    }
-  ));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(styled.StyledTextLabel, { children: timeLabel }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      styled.TimeDigitContainer,
+      {
+        showsHorizontalScrollIndicator: true,
+        data,
+        renderItem: timeCardsBuilder,
+        keyExtractor: (item) => item,
+        contentContainerStyle: {
+          alignItems: "center"
+        },
+        numColumns: 1,
+        initialScrollIndex,
+        getItemLayout: (_, index) => ({
+          length: digitCardHeight,
+          offset: digitCardHeight * index,
+          index
+        }),
+        fadingEdgeLength: 200
+      }
+    )
+  ] });
 };
 
 module.exports = ScrollableDigit;

package/dist/cjs/components/molecules/Drawer/Drawer.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');
@@ -32,18 +33,21 @@ const Drawer = ({
       };
     }
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, { timeout: 300, open, onClose, zIndex: "drawer" }), /* @__PURE__ */ React.createElement(reactTransitionGroup.Transition, { in: open, timeout: 300, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement(
-    styled.StyledContainerDrawer,
-    {
-      ref: transitionRef,
-      style: { ...style, ...getStyles(anchorPosition, state) },
-      anchorPosition,
-      onClose,
-      open,
-      ...rest
-    },
-    children
-  )));
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Overlay, { timeout: 300, open, onClose, zIndex: "drawer" }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactTransitionGroup.Transition, { in: open, timeout: 300, nodeRef: transitionRef, children: (state) => /* @__PURE__ */ jsxRuntime.jsx(
+      styled.StyledContainerDrawer,
+      {
+        ref: transitionRef,
+        style: { ...style, ...getStyles(anchorPosition, state) },
+        anchorPosition,
+        onClose,
+        open,
+        ...rest,
+        children
+      }
+    ) })
+  ] });
 };
 
 module.exports = Drawer;

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

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var Item = require('./Item/Item.js');
 
@@ -13,7 +14,7 @@ const Grid = ({
 }) => {
   if (layout) {
     const flatLayout = layout.flat();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
@@ -22,21 +23,21 @@ const Grid = ({
           flexDirection: "row",
           flexWrap: "wrap"
         },
-        ...rest
-      },
-      React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement(
-        Item,
-        {
-          key: `child-${index}`,
-          columns,
-          span: flatLayout[index],
-          spacing
-        },
-        child
-      ))
+        ...rest,
+        children: React.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          Item,
+          {
+            columns,
+            span: flatLayout[index],
+            spacing,
+            children: child
+          },
+          `child-${index}`
+        ))
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       style: {
@@ -45,16 +46,16 @@ const Grid = ({
         flexDirection: "row",
         flexWrap: "wrap"
       },
-      ...rest
-    },
-    React.Children.map(children, (child, index) => {
-      return React.cloneElement(child, {
-        ...child?.props,
-        columns,
-        spacing: child?.props.spacing ?? spacing,
-        key: `child-${index}`
-      });
-    })
+      ...rest,
+      children: React.Children.map(children, (child, index) => {
+        return React.cloneElement(child, {
+          ...child?.props,
+          columns,
+          spacing: child?.props.spacing ?? spacing,
+          key: `child-${index}`
+        });
+      })
+    }
   );
 };
 

package/dist/cjs/components/molecules/Grid/Item/Item.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var reactCore = require('@tecsinapse/react-core');
 var useBreakpoints = require('../../../../hooks/useBreakpoints.js');
@@ -55,7 +56,7 @@ const GridItem = ({
     ...children?.props,
     style: wrapper ? children?.props.style : { ..._style, ...children?.props.style }
   });
-  return wrapper ? /* @__PURE__ */ React.createElement("div", { ...rest, style: _style }, clone) : clone;
+  return wrapper ? /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, style: _style, children: clone }) : clone;
 };
 
 module.exports = GridItem;