@tecsinapse/react-web-kit 3.0.0 → 3.3.0

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

@@ -1,11 +1,11 @@
-import React from 'react';
+import React__default from 'react';
 import { StyledContainerBreadcrumbs } from './styled.js';
 import BreadcrumbItem from './BreadcrumbItem/BreadcrumbItem.js';
 
 const Breadcrumbs = ({ breadcrumbs, ...rest }) => {
-  return /* @__PURE__ */ React.createElement(StyledContainerBreadcrumbs, { ...rest }, breadcrumbs.map((item, index) => {
+  return /* @__PURE__ */ React__default.createElement(StyledContainerBreadcrumbs, { ...rest }, breadcrumbs.map((item, index) => {
     const { props, Component = "a", title } = item;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       BreadcrumbItem,
       {
         key: index,

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

@@ -1,5 +1,5 @@
 import { useTheme, DatePicker as DatePicker$1, Calendar, Masks, PressableSurface, CalendarIcon } from '@tecsinapse/react-core';
-import React, { useState, useCallback, useMemo } from 'react';
+import React__default, { useState, useCallback, useMemo } from 'react';
 import { Dropdown } from '../../atoms/Dropdown/index.js';
 import InputMask from '../../atoms/InputMask/InputMask.js';
 import { parse, isValid } from 'date-fns';
@@ -49,7 +49,7 @@ const DatePicker = ({
       onChange?.(void 0);
   }, [value]);
   const controlComponent = (onPress, displayValue) => {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       InputMask,
       {
         onBlur: () => {
@@ -88,7 +88,7 @@ const DatePicker = ({
         placeholder,
         label,
         placeholderTextColor: disabled ? theme.color.secondary.light : void 0,
-        rightComponent: /* @__PURE__ */ React.createElement(
+        rightComponent: /* @__PURE__ */ React__default.createElement(
           PressableSurface,
           {
             effect: "none",
@@ -96,13 +96,13 @@ const DatePicker = ({
             onPress,
             disabled
           },
-          /* @__PURE__ */ React.createElement(CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" })
+          /* @__PURE__ */ React__default.createElement(CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" })
         )
       }
     );
   };
   if (type === "day") {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       DatePicker$1,
       {
         ...rest,
@@ -117,12 +117,12 @@ const DatePicker = ({
         month: getMonth,
         requestShowCalendar: show,
         requestCloseCalendar: close,
-        renderCalendar: (calendar) => /* @__PURE__ */ React.createElement(Dropdown, { visible, setVisible }, calendar),
+        renderCalendar: (calendar) => /* @__PURE__ */ React__default.createElement(Dropdown, { visible, setVisible }, calendar),
         controlComponent
       }
     );
   } else {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       DatePicker$1,
       {
         ...rest,
@@ -139,7 +139,7 @@ const DatePicker = ({
         requestCloseCalendar: close,
         placeholder,
         label,
-        renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React.createElement(
+        renderCalendar: (calendar, handleBlur) => /* @__PURE__ */ React__default.createElement(
           Dropdown,
           {
             visible,

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

@@ -1,18 +1,26 @@
-import { DateTimePicker as DateTimePicker$1 } from '@tecsinapse/react-core';
-import React, { useState, useCallback } from 'react';
+import { DateTimePicker as DateTimePicker$1, ControlledDateTimeSelector } from '@tecsinapse/react-core';
+import React__default, { useState, useCallback } from 'react';
 import { Dropdown } from '../../atoms/Dropdown/index.js';
+import DateTimePickerSelector from '../DateTimePickerSelector/DateTimePickerSelector.js';
 
 const DateTimePicker = ({ ...rest }) => {
   const [visible, setVisible] = useState(false);
   const show = useCallback(() => setVisible(true), []);
   const close = useCallback(() => setVisible(false), []);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     DateTimePicker$1,
     {
       ...rest,
+      DateTimeSelectorComponent: (props) => /* @__PURE__ */ React__default.createElement(
+        ControlledDateTimeSelector,
+        {
+          SelectorComponent: DateTimePickerSelector,
+          ...props
+        }
+      ),
       requestShowSelector: show,
       requestCloseSelector: close,
-      renderSelector: (selector) => /* @__PURE__ */ React.createElement(Dropdown, { visible, setVisible }, selector)
+      renderSelector: (selector) => /* @__PURE__ */ React__default.createElement(Dropdown, { visible, setVisible }, selector)
     }
   );
 };

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import Button from '../../atoms/Button/Button.js';
+import { Icon, Calendar, Text } from '@tecsinapse/react-core';
+import { Root, Header, BackButton, Content } from './styled.js';
+import ScrollableTimePicker from '../ScrollableTimePicker/ScrollableTimePicker.js';
+import ScrollableMonthYearPicker from '../ScrollableMonthYearPicker/ScrollableMonthYearPicker.js';
+
+const DateTimePickerSelector = ({
+  TextComponent = Text,
+  currentMode,
+  handlePressBack,
+  modalTitle,
+  isDate,
+  date,
+  handleCalendarChange,
+  isMonth,
+  setDate,
+  handlePressConfirm,
+  confirmButtonText,
+  locale,
+  yearLabel,
+  monthLabel,
+  hourLabel,
+  minuteLabel,
+  ...rest
+}) => {
+  return /* @__PURE__ */ React.createElement(Root, { ...rest }, /* @__PURE__ */ React.createElement(Header, null, currentMode === 1 && /* @__PURE__ */ React.createElement(BackButton, { onPress: handlePressBack }, /* @__PURE__ */ React.createElement(
+    Icon,
+    {
+      type: "material-community",
+      name: "chevron-left",
+      size: "mega",
+      colorVariant: "secondary"
+    }
+  )), /* @__PURE__ */ React.createElement(TextComponent, { typography: "base", colorVariant: "secondary" }, modalTitle)), isDate ? /* @__PURE__ */ React.createElement(
+    Calendar,
+    {
+      type: "day",
+      value: date,
+      onChange: handleCalendarChange,
+      year: date.getFullYear(),
+      month: date.getMonth()
+    }
+  ) : isMonth ? /* @__PURE__ */ React.createElement(Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React.createElement(
+    Content,
+    {
+      style: { width: "100%", flexDirection: "row", display: "flex" }
+    },
+    /* @__PURE__ */ React.createElement(
+      ScrollableMonthYearPicker,
+      {
+        setDate,
+        date,
+        locale,
+        yearLabel,
+        monthLabel
+      }
+    )
+  )) : /* @__PURE__ */ React.createElement(Content, { style: { flexDirection: "column" } }, /* @__PURE__ */ React.createElement(
+    Content,
+    {
+      style: { width: "100%", flexDirection: "row", display: "flex" }
+    },
+    /* @__PURE__ */ React.createElement(
+      ScrollableTimePicker,
+      {
+        setDate,
+        date,
+        locale,
+        hourLabel,
+        minuteLabel
+      }
+    )
+  )), /* @__PURE__ */ React.createElement(Button, { color: "primary", onPress: handlePressConfirm }, /* @__PURE__ */ React.createElement(TextComponent, { fontWeight: "bold", fontColor: "light" }, confirmButtonText || "OK")));
+};
+
+export { DateTimePickerSelector as default };

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

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import { TimeCard } from '../styled.js';
+
+const MemoizedTimeCard = React__default.memo(
+  ({
+    time,
+    isSelected,
+    onPress,
+    TextComponent
+  }) => /* @__PURE__ */ React__default.createElement(TimeCard, { id: time, key: time, isSelected, onPress }, /* @__PURE__ */ React__default.createElement(
+    TextComponent,
+    {
+      colorVariant: isSelected ? "primary" : "secondary",
+      colorTone: "xdark"
+    },
+    time
+  ))
+);
+
+export { MemoizedTimeCard as default };

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { Text } from '@tecsinapse/react-core/src/components/atoms/Text';
+import { useTheme } from '@tecsinapse/react-core';
+import { RFValue } from '@tecsinapse/react-core/src/utils/ResponsiveFontSize';
+import { StyledTextLabel, TimeDigitContainer } from '../styled.js';
+import MemoizedTimeCard from './MemoizedTimeCard.js';
+
+const ScrollableDigit = ({
+  TextComponent = Text,
+  data,
+  currentTime,
+  updateType,
+  timeLabel,
+  handleTimeChange,
+  initialScrollIndex
+}) => {
+  const theme = useTheme();
+  const digitCardHeight = RFValue(Number(theme.typography.base.fontSize.slice(0, -2))) + 2 * RFValue(Number(theme.spacing.deca.slice(0, -2)));
+  const getDisplayedValue = (value) => {
+    const isNumericValue = parseInt(value, 10);
+    if (!isNaN(isNumericValue)) {
+      return value.padStart(2, "0");
+    } else {
+      return value;
+    }
+  };
+  const timeCardsBuilder = React.useCallback(
+    ({ item }) => /* @__PURE__ */ React.createElement(
+      MemoizedTimeCard,
+      {
+        time: getDisplayedValue(item),
+        isSelected: currentTime === item,
+        onPress: () => {
+          handleTimeChange(item, updateType);
+        },
+        TextComponent
+      }
+    ),
+    [handleTimeChange, TextComponent]
+  );
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React.createElement(StyledTextLabel, null, timeLabel), /* @__PURE__ */ React.createElement(
+    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
+    }
+  ));
+};
+
+export { ScrollableDigit as default };

package/dist/esm/components/molecules/DateTimePickerSelector/styled.js

@@ -0,0 +1,46 @@
+import styled, { css } from '@emotion/native';
+import { Text, PressableSurface } from '@tecsinapse/react-core';
+import { FlatList } from 'react-native-web';
+
+const StyledTextLabel = styled(Text)`
+  text-align: center;
+  font-size: 12px;
+  font-weight: bold;
+`;
+const TimeDigitContainer = styled(FlatList)`
+  max-height: 150px;
+  overflow-y: scroll;
+`;
+const TimeCard = styled(PressableSurface)(
+  (props) => css`
+    background-color: ${props.isSelected ? props.theme?.color.primary.light : void 0};
+    padding: ${props.theme?.spacing.centi};
+    border-radius: ${props.theme?.borderRadius.mili};
+    margin: ${props.theme?.spacing.mili};
+    padding: ${props.theme?.spacing.mili} ${props.theme?.spacing.deca};
+  `
+);
+const Root = styled.View`
+  position: relative;
+  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
+`;
+const Content = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: ${({ theme }) => theme.spacing.deca};
+  margin-bottom: ${({ theme }) => theme.spacing.deca};
+`;
+const BackButton = styled(PressableSurface)`
+  border-radius: ${({ theme }) => theme.borderRadius.mili};
+  padding: ${({ theme }) => theme.spacing.micro};
+  margin-right: ${({ theme }) => theme.spacing.mili};
+  aspect-ratio: 1;
+`;
+const Header = styled.View`
+  flex-direction: row;
+  align-items: center;
+  margin-top: ${({ theme }) => theme.spacing.mili};
+  margin-bottom: ${({ theme }) => theme.spacing.mili};
+`;
+
+export { BackButton, Content, Header, Root, StyledTextLabel, TimeCard, TimeDigitContainer };

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import { StyledContainerDrawer } from './styled.js';
 import { Transition } from 'react-transition-group';
 import Overlay from '../../atoms/Overlay/Overlay.js';
@@ -30,7 +30,7 @@ const Drawer = ({
       };
     }
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, { timeout: 300, open, onClose, zIndex: "drawer" }), /* @__PURE__ */ React.createElement(Transition, { in: open, timeout: 300, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Overlay, { timeout: 300, open, onClose, zIndex: "drawer" }), /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: 300, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React__default.createElement(
     StyledContainerDrawer,
     {
       ref: transitionRef,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import GridItem from './Item/Item.js';
 
 const Grid = ({
@@ -11,7 +11,7 @@ const Grid = ({
 }) => {
   if (layout) {
     const flatLayout = layout.flat();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       "div",
       {
         style: {
@@ -22,7 +22,7 @@ const Grid = ({
         },
         ...rest
       },
-      React.Children.map(children, (child, index) => /* @__PURE__ */ React.createElement(
+      React__default.Children.map(children, (child, index) => /* @__PURE__ */ React__default.createElement(
         GridItem,
         {
           key: `child-${index}`,
@@ -34,7 +34,7 @@ const Grid = ({
       ))
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     "div",
     {
       style: {
@@ -45,8 +45,8 @@ const Grid = ({
       },
       ...rest
     },
-    React.Children.map(children, (child, index) => {
-      return React.cloneElement(child, {
+    React__default.Children.map(children, (child, index) => {
+      return React__default.cloneElement(child, {
         ...child?.props,
         columns,
         spacing: child?.props.spacing ?? spacing,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { useTheme, getGridItemColumSpan, getGridItemPadding } from '@tecsinapse/react-core';
 import { useBreakpoints } from '../../../../hooks/useBreakpoints.js';
 import { getSpan } from './functions.js';
@@ -25,7 +25,7 @@ const GridItem = ({
 }) => {
   const { spacing } = useTheme();
   const { sm, md, lg } = useBreakpoints();
-  if (!React.Children.only(children)) {
+  if (!React__default.Children.only(children)) {
     throw new Error("The number of children in GridItem should be one");
   }
   if (loadingComponent && loading) {
@@ -49,11 +49,11 @@ const GridItem = ({
     paddingRight: getGridItemPadding("right", _spacing, spacing),
     paddingLeft: getGridItemPadding("left", _spacing, spacing)
   };
-  const clone = React.cloneElement(children, {
+  const clone = React__default.cloneElement(children, {
     ...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__ */ React__default.createElement("div", { ...rest, style: _style }, clone) : clone;
 };
 
 export { GridItem as default };

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

@@ -1,5 +1,5 @@
 import { IconComponent } from '@tecsinapse/react-core';
-import React from 'react';
+import React__default from 'react';
 import useIconTextButton from './hooks/useIconTextButton.js';
 import { StyledIconTextButton } from './styled.js';
 import TextComponent from './TextComponent.js';
@@ -14,7 +14,7 @@ const IconTextButton = ({
   ...rest
 }) => {
   const { handleHover, handlePressed, defaultFontColor } = useIconTextButton(variant);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     StyledIconTextButton,
     {
       boxed: !label,
@@ -26,15 +26,15 @@ const IconTextButton = ({
       onPressOut: () => handlePressed(false),
       ...rest
     },
-    iconPosition === "left" ? /* @__PURE__ */ React.createElement(
+    iconPosition === "left" ? /* @__PURE__ */ React__default.createElement(
       IconComponent,
       {
         iconProps,
         size,
         defaultFontColor
       }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null),
-    /* @__PURE__ */ React.createElement(
+    ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null),
+    /* @__PURE__ */ React__default.createElement(
       TextComponent,
       {
         label,
@@ -45,14 +45,14 @@ const IconTextButton = ({
         size
       }
     ),
-    iconPosition === "right" ? /* @__PURE__ */ React.createElement(
+    iconPosition === "right" ? /* @__PURE__ */ React__default.createElement(
       IconComponent,
       {
         iconProps,
         size,
         defaultFontColor
       }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null)
+    ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null)
   );
 };
 

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

@@ -1,5 +1,5 @@
 import { Text } from '@tecsinapse/react-core';
-import React from 'react';
+import React__default from 'react';
 
 const TextComponent = ({
   textProps,
@@ -7,7 +7,7 @@ const TextComponent = ({
   defaultFontColor,
   label
 }) => {
-  return label ? /* @__PURE__ */ React.createElement(
+  return label ? /* @__PURE__ */ React__default.createElement(
     Text,
     {
       typography: textProps?.typography ?? size === "small" ? "sub" : "base",
@@ -16,8 +16,8 @@ const TextComponent = ({
       ...textProps
     },
     label
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null);
+  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
 };
-var TextComponent$1 = React.memo(TextComponent);
+var TextComponent$1 = React__default.memo(TextComponent);
 
 export { TextComponent$1 as default };

package/dist/esm/components/molecules/IconTextButton/styled.js

@@ -1,4 +1,4 @@
-import nativeStyled from '@emotion/native';
+import styled from '@emotion/native';
 import Button from '../../atoms/Button/Button.js';
 import 'react';
 
@@ -6,7 +6,7 @@ const boxedStyle = ({ theme }) => `
     padding: ${theme?.spacing.centi};
     aspect-ratio: 1;
   `;
-const StyledIconTextButton = nativeStyled(Button)`
+const StyledIconTextButton = styled(Button)`
   gap: ${({ theme }) => theme?.spacing.mili};
   ${({ boxed, theme }) => boxed && boxedStyle({ theme })};
 `;

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

@@ -1,17 +1,17 @@
 import { InputPasswordIcon } from '@tecsinapse/react-core';
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import Input from '../../atoms/Input/Input.js';
 
-const InputPassword = React.forwardRef(
+const InputPassword = React__default.forwardRef(
   ({ rightComponent, ...rest }, ref) => {
     const [revealed, setRevealed] = useState(false);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(
       Input,
       {
         ...rest,
         ref,
         secureTextEntry: !revealed,
-        rightComponent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        rightComponent: /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
           InputPasswordIcon,
           {
             onChangeState: setRevealed,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Pressable } from 'react-native-web';
 import { StyledLabel } from './styled.js';
 
@@ -12,7 +12,7 @@ const LabelComponent = ({
 }) => {
   const defaultFontColor = active && !switchDisabled ? "dark" : "medium";
   const defaultFontWeight = active && !switchDisabled ? "bold" : "regular";
-  return /* @__PURE__ */ React.createElement(Pressable, { ...rest }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Pressable, { ...rest }, /* @__PURE__ */ React__default.createElement(
     StyledLabel,
     {
       labelPosition,
@@ -23,6 +23,6 @@ const LabelComponent = ({
     label
   ));
 };
-var LabelComponent$1 = React.memo(LabelComponent);
+var LabelComponent$1 = React__default.memo(LabelComponent);
 
 export { LabelComponent$1 as default };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import LabelComponent from './LabelComponent.js';
 import { StyledDiv } from './styled.js';
 import Switch from '../../atoms/Switch/Switch.js';
@@ -13,7 +13,7 @@ const LabeledSwitch = ({
   rightLabel,
   ...rest
 }) => {
-  return /* @__PURE__ */ React.createElement(StyledDiv, null, leftLabel ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(StyledDiv, null, leftLabel ? /* @__PURE__ */ React__default.createElement(
     LabelComponent,
     {
       active,
@@ -24,7 +24,7 @@ const LabeledSwitch = ({
       switchDisabled: disabled,
       onPress: () => onChange(!active)
     }
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null), /* @__PURE__ */ React.createElement(
+  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null), /* @__PURE__ */ React__default.createElement(
     Switch,
     {
       active,
@@ -32,7 +32,7 @@ const LabeledSwitch = ({
       onChange,
       ...rest
     }
-  ), rightLabel ? /* @__PURE__ */ React.createElement(
+  ), rightLabel ? /* @__PURE__ */ React__default.createElement(
     LabelComponent,
     {
       active,
@@ -43,7 +43,7 @@ const LabeledSwitch = ({
       switchDisabled: disabled,
       onPress: () => onChange(!active)
     }
-  ) : /* @__PURE__ */ React.createElement(React.Fragment, null));
+  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null));
 };
 
 export { LabeledSwitch as default };

package/dist/esm/components/molecules/LabeledSwitch/styled.js

@@ -1,4 +1,4 @@
-import nativeStyled, { css } from '@emotion/native';
+import styled$1, { css } from '@emotion/native';
 import styled from '@emotion/styled';
 import { Text } from '@tecsinapse/react-core';
 
@@ -7,7 +7,7 @@ const StyledDiv = styled("div")`
   flex-direction: row;
   align-items: center;
 `;
-const StyledLabel = nativeStyled(Text)`
+const StyledLabel = styled$1(Text)`
   ${({ theme, labelPosition }) => {
   if (labelPosition === "right")
     return css`

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { StyledMasonry, StyledColumnItem, StyledRowItem } from './styled.js';
 
 const Masonry = ({
@@ -12,20 +12,20 @@ const Masonry = ({
       { length: columns },
       () => []
     );
-    React.Children.forEach(children, (child, index) => {
-      if (child && React.isValidElement(child)) {
+    React__default.Children.forEach(children, (child, index) => {
+      if (child && React__default.isValidElement(child)) {
         columnsArray[index % columns].push(child);
       }
     });
     return columnsArray;
   };
   const renderColumn = (column) => {
-    return column.map((item, index) => /* @__PURE__ */ React.createElement(StyledRowItem, { key: index, index, spacingTop }, item));
+    return column.map((item, index) => /* @__PURE__ */ React__default.createElement(StyledRowItem, { key: index, index, spacingTop }, item));
   };
   const renderColumns = () => {
-    return getColumns().map((column, index) => /* @__PURE__ */ React.createElement(StyledColumnItem, { key: index, index, spacingLeft }, renderColumn(column)));
+    return getColumns().map((column, index) => /* @__PURE__ */ React__default.createElement(StyledColumnItem, { key: index, index, spacingLeft }, renderColumn(column)));
   };
-  return /* @__PURE__ */ React.createElement(StyledMasonry, null, renderColumns());
+  return /* @__PURE__ */ React__default.createElement(StyledMasonry, null, renderColumns());
 };
 
 export { Masonry as default };