@tecsinapse/react-core 3.4.14 → 3.4.15-beta.1

package/dist/esm/components/molecules/Calendar/components/MemoizedYearCard.js

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { YearCard } from '../styled.js';
 
@@ -7,23 +8,23 @@ const MemoizedYearCard = React__default.memo(
     isSelected,
     onPress,
     TextComponent
-  }) => /* @__PURE__ */ React__default.createElement(
+  }) => /* @__PURE__ */ jsx(
     YearCard,
     {
       id: String(year),
-      key: year,
       isSelected,
-      onPress
+      onPress,
+      children: /* @__PURE__ */ jsx(
+        TextComponent,
+        {
+          colorVariant: isSelected ? "primary" : "secondary",
+          colorTone: "xdark",
+          typography: "sub",
+          children: year
+        }
+      )
     },
-    /* @__PURE__ */ React__default.createElement(
-      TextComponent,
-      {
-        colorVariant: isSelected ? "primary" : "secondary",
-        colorTone: "xdark",
-        typography: "sub"
-      },
-      year
-    )
+    year
   )
 );
 

package/dist/esm/components/molecules/Calendar/components/MonthWeek.js

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import { compareAsc, isSameDay } from 'date-fns';
 import React__default from 'react';
 import { Week, Cell, Selected } from '../styled.js';
@@ -70,7 +71,7 @@ const MonthWeek = ({
     },
     [onChange, type]
   );
-  return /* @__PURE__ */ React__default.createElement(Week, null, week.map((date, index) => {
+  return /* @__PURE__ */ jsx(Week, { children: week.map((date, index) => {
     const isSelected = checkIfIsSelected(date, value);
     const isBetween = checkIfIsBetween(date, value);
     let isRangeStart, isRangeEnd;
@@ -83,21 +84,21 @@ const MonthWeek = ({
       isRangeEnd = false;
     }
     const colorTone = isSelected ? "xlight" : date.getMonth() === referenceDate.getMonth() ? "xdark" : "light";
-    return /* @__PURE__ */ React__default.createElement(
+    return /* @__PURE__ */ jsx(
       Cell,
       {
-        key: date.getDate(),
         selected: isSelected,
         highlighted: isBetween,
         isLineEnd: index === 6,
         isLineStart: index === 0,
         isRangeStart,
         isRangeEnd,
-        onPress: handlePressCell(date, value)
+        onPress: handlePressCell(date, value),
+        children: /* @__PURE__ */ jsx(Selected, { selected: isSelected, pointerEvents: "none", children: /* @__PURE__ */ jsx(TextComponent, { colorVariant: "secondary", colorTone, children: date.getDate() }) })
       },
-      /* @__PURE__ */ React__default.createElement(Selected, { selected: isSelected, pointerEvents: "none" }, /* @__PURE__ */ React__default.createElement(TextComponent, { colorVariant: "secondary", colorTone }, date.getDate()))
+      date.getDate()
     );
-  }));
+  }) });
 };
 var MonthWeek$1 = React__default.memo(MonthWeek);
 

package/dist/esm/components/molecules/Calendar/components/SelectYear.js

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { FlatList } from 'react-native';
 import Text from '../../../atoms/Text/Text.js';
@@ -29,7 +30,7 @@ const SelectYear = ({
   }, [currentYear, firstYear, numColumns]);
   const yearCardHeight = RFValue(Number(theme.typography.base.fontSize.slice(0, -2))) + 2 * RFValue(Number(theme.spacing.deca.slice(0, -2)));
   const yearCardsBuilder = React__default.useCallback(
-    (item) => /* @__PURE__ */ React__default.createElement(
+    (item) => /* @__PURE__ */ jsx(
       MemoizedYearCard,
       {
         year: item.item,
@@ -40,7 +41,7 @@ const SelectYear = ({
     ),
     [currentYear, onSelectYear]
   );
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(
     FlatList,
     {
       data: years,

package/dist/esm/components/molecules/Calendar/components/Weekdays.js

@@ -1,22 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
 import React__default from 'react';
 import { Week, Cell } from '../styled.js';
 import { format } from 'date-fns';
 
 const Weekdays = ({ calendar, locale, Capitalized }) => {
-  return /* @__PURE__ */ React__default.createElement(Week, null, calendar[0].map((date) => /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ jsx(Week, { children: calendar[0].map((date) => /* @__PURE__ */ jsx(
     Cell,
     {
-      key: date.getDate(),
       selected: false,
       highlighted: false,
       isLineEnd: false,
       isLineStart: false,
       isRangeStart: false,
       isRangeEnd: false,
-      pointerEvents: "none"
+      pointerEvents: "none",
+      children: /* @__PURE__ */ jsx(Capitalized, { colorVariant: "secondary", colorTone: "medium", children: format(date, "EEE", { locale }).slice(0, 3) })
     },
-    /* @__PURE__ */ React__default.createElement(Capitalized, { colorVariant: "secondary", colorTone: "medium" }, format(date, "EEE", { locale }).slice(0, 3))
-  )));
+    date.getDate()
+  )) });
 };
 var Weekdays$1 = React__default.memo(Weekdays);
 

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

@@ -1,3 +1,4 @@
+import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 
 const ControlledDateTimeSelector = ({
@@ -36,7 +37,7 @@ const ControlledDateTimeSelector = ({
   const handlePressBack = () => {
     setCurrentMode(0);
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     SelectorComponent,
     {
       ...rest,

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

@@ -1,3 +1,4 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { format } from 'date-fns';
 import * as React from 'react';
 import { useCallback, useEffect } from 'react';
@@ -74,7 +75,7 @@ function DatePicker({
       if (lowest && highest) setTimeout(handleRequestCloseCalendar, 200);
     }
   }, [value, closeOnPick, type, handleRequestCloseCalendar]);
-  const calendar = /* @__PURE__ */ React.createElement(
+  const calendar = /* @__PURE__ */ jsx(
     CalendarComponent,
     {
       pointerEvents: "box-none",
@@ -86,22 +87,28 @@ function DatePicker({
       locale
     }
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, controlComponent ? controlComponent(handleShowCalendar, getDisplayValue()) : /* @__PURE__ */ React.createElement(
-    HintInputContainer,
-    {
-      focused,
-      viewStyle: style,
-      onPress: handleShowCalendar,
-      disabled,
-      hintComponent,
-      LabelComponent: TextComponent,
-      variant,
-      hint,
-      rightComponent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" }), rightComponent),
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(StyledText, { fontWeight: "bold", disabled }, getDisplayValue() || " ")
-  ), renderCalendar(calendar, handleBlur));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    controlComponent ? controlComponent(handleShowCalendar, getDisplayValue()) : /* @__PURE__ */ jsx(
+      HintInputContainer,
+      {
+        focused,
+        viewStyle: style,
+        onPress: handleShowCalendar,
+        disabled,
+        hintComponent,
+        LabelComponent: TextComponent,
+        variant,
+        hint,
+        rightComponent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" }),
+          rightComponent
+        ] }),
+        ...rest,
+        children: /* @__PURE__ */ jsx(StyledText, { fontWeight: "bold", disabled, children: getDisplayValue() || " " })
+      }
+    ),
+    renderCalendar(calendar, handleBlur)
+  ] });
 }
 
 export { DatePicker as default };

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

@@ -1,8 +1,9 @@
 import styled, { css } from '@emotion/native';
 import Icon from '../../atoms/Icon/Icon.js';
-import 'react';
+import 'react/jsx-runtime';
 import '../../atoms/Text/styled.js';
 import { disabledInputStyles } from '../../atoms/Input/styled.js';
+import 'react';
 import 'currency.js';
 import '../../atoms/Input/InputElement/InputElement.js';
 import '../../atoms/Input/InputMaskElement/InputMaskElement.js';

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

@@ -1,9 +1,10 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { format } from 'date-fns';
-import * as React from 'react';
 import Text from '../../atoms/Text/Text.js';
 import '../../atoms/Input/styled.js';
 import { useInputFocus } from '../../atoms/Input/hooks/useInputFocus.js';
 import 'currency.js';
+import 'react';
 import '../../atoms/Input/InputElement/InputElement.js';
 import '../../atoms/Input/InputMaskElement/InputMaskElement.js';
 import '../../atoms/Input/PressableInputContainer/styled.js';
@@ -67,7 +68,7 @@ const DateTimePicker = ({
   const StyledDateTimeSelector = getStyledDateTimeSelector(
     DateTimeSelectorComponent
   );
-  const dateTimeSelector = /* @__PURE__ */ React.createElement(
+  const dateTimeSelector = /* @__PURE__ */ jsx(
     StyledDateTimeSelector,
     {
       value,
@@ -91,22 +92,28 @@ const DateTimePicker = ({
       onChange: handleChoosing
     }
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, controlComponent ? controlComponent(handleShowSelector, displayValue) : /* @__PURE__ */ React.createElement(
-    HintInputContainer,
-    {
-      focused,
-      viewStyle: style,
-      onPress: handleShowSelector,
-      disabled,
-      LabelComponent: TextComponent,
-      variant,
-      hint,
-      hintComponent,
-      rightComponent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" }), rightComponent),
-      ...rest
-    },
-    /* @__PURE__ */ React.createElement(StyledText, { fontWeight: "bold", disabled }, displayValue)
-  ), renderSelector(dateTimeSelector, handleBlur));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    controlComponent ? controlComponent(handleShowSelector, displayValue) : /* @__PURE__ */ jsx(
+      HintInputContainer,
+      {
+        focused,
+        viewStyle: style,
+        onPress: handleShowSelector,
+        disabled,
+        LabelComponent: TextComponent,
+        variant,
+        hint,
+        hintComponent,
+        rightComponent: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { name: "calendar-sharp", type: "ionicon", size: "centi" }),
+          rightComponent
+        ] }),
+        ...rest,
+        children: /* @__PURE__ */ jsx(StyledText, { fontWeight: "bold", disabled, children: displayValue })
+      }
+    ),
+    renderSelector(dateTimeSelector, handleBlur)
+  ] });
 };
 
 export { DateTimePicker as default };

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

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { sub, add, isSameDay, isSameMonth, isSameYear, set, getDaysInMonth, compareAsc, format } from 'date-fns';
 import * as React from 'react';
 import Button from '../../atoms/Button/Button.js';
@@ -89,76 +90,90 @@ const DateTimeSelector = ({
   const handlePressBack = () => {
     setCurrentMode(0);
   };
-  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(Content, null, mode !== "month" && /* @__PURE__ */ React.createElement(SelectorContainer, { isFirst: true }, /* @__PURE__ */ React.createElement(
-    Selector,
-    {
-      TextComponent,
-      onChange: handleChange("date"),
-      referenceDate: date,
-      value: date.getDate(),
-      label: dayLabel || "Day",
-      granularity: "date",
-      getDisplayValue: getDisplayedValue("date"),
-      preventUpper: upperDateThreshold ? isSameDay(upperDateThreshold, date) : false,
-      preventLower: lowerDateThreshold ? isSameDay(lowerDateThreshold, date) : false
-    }
-  )), /* @__PURE__ */ React.createElement(SelectorContainer, null, /* @__PURE__ */ React.createElement(
-    Selector,
-    {
-      TextComponent,
-      onChange: handleChange("month"),
-      referenceDate: date,
-      value: date.getMonth(),
-      label: monthLabel || "Month",
-      granularity: "month",
-      getDisplayValue: getDisplayedValue("month"),
-      preventUpper: upperDateThreshold ? isSameMonth(upperDateThreshold, date) : false,
-      preventLower: lowerDateThreshold ? isSameMonth(lowerDateThreshold, date) : false
-    }
-  )), /* @__PURE__ */ React.createElement(SelectorContainer, { isLast: true }, /* @__PURE__ */ React.createElement(
-    Selector,
-    {
-      TextComponent,
-      onChange: handleChange("year"),
-      referenceDate: date,
-      value: date.getFullYear(),
-      label: yearLabel || "Year",
-      granularity: "year",
-      getDisplayValue: getDisplayedValue("year"),
-      preventUpper: upperDateThreshold ? isSameYear(upperDateThreshold, date) : false,
-      preventLower: lowerDateThreshold ? isSameYear(lowerDateThreshold, date) : false
-    }
-  ))) : /* @__PURE__ */ React.createElement(Content, null, /* @__PURE__ */ React.createElement(SelectorContainer, { isFirst: true }, /* @__PURE__ */ React.createElement(
-    Selector,
-    {
-      TextComponent,
-      onChange: handleChange("hours"),
-      referenceDate: date,
-      value: date.getHours(),
-      label: hourLabel || "Hour",
-      granularity: "hours",
-      getDisplayValue: getDisplayedValue("hours")
-    }
-  )), /* @__PURE__ */ React.createElement(SelectorContainer, { isLast: true }, /* @__PURE__ */ React.createElement(
-    Selector,
-    {
-      TextComponent,
-      onChange: handleChange("minutes"),
-      referenceDate: date,
-      value: date.getMinutes(),
-      label: minuteLabel || "Minute",
-      granularity: "minutes",
-      getDisplayValue: getDisplayedValue("minutes")
-    }
-  ))), /* @__PURE__ */ React.createElement(Button, { color: "primary", onPress: handlePressConfirm }, /* @__PURE__ */ React.createElement(TextComponent, { fontWeight: "bold", fontColor: "light" }, confirmButtonText || "OK")));
+  return /* @__PURE__ */ jsxs(Root, { ...rest, children: [
+    /* @__PURE__ */ jsxs(Header, { children: [
+      currentMode === 1 && /* @__PURE__ */ jsx(BackButton, { onPress: handlePressBack, children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          type: "material-community",
+          name: "chevron-left",
+          size: "mega",
+          colorVariant: "secondary"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TextComponent, { typography: "base", colorVariant: "secondary", children: modalTitle })
+    ] }),
+    isDate ? /* @__PURE__ */ jsxs(Content, { children: [
+      mode !== "month" && /* @__PURE__ */ jsx(SelectorContainer, { isFirst: true, children: /* @__PURE__ */ jsx(
+        Selector,
+        {
+          TextComponent,
+          onChange: handleChange("date"),
+          referenceDate: date,
+          value: date.getDate(),
+          label: dayLabel || "Day",
+          granularity: "date",
+          getDisplayValue: getDisplayedValue("date"),
+          preventUpper: upperDateThreshold ? isSameDay(upperDateThreshold, date) : false,
+          preventLower: lowerDateThreshold ? isSameDay(lowerDateThreshold, date) : false
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SelectorContainer, { children: /* @__PURE__ */ jsx(
+        Selector,
+        {
+          TextComponent,
+          onChange: handleChange("month"),
+          referenceDate: date,
+          value: date.getMonth(),
+          label: monthLabel || "Month",
+          granularity: "month",
+          getDisplayValue: getDisplayedValue("month"),
+          preventUpper: upperDateThreshold ? isSameMonth(upperDateThreshold, date) : false,
+          preventLower: lowerDateThreshold ? isSameMonth(lowerDateThreshold, date) : false
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SelectorContainer, { isLast: true, children: /* @__PURE__ */ jsx(
+        Selector,
+        {
+          TextComponent,
+          onChange: handleChange("year"),
+          referenceDate: date,
+          value: date.getFullYear(),
+          label: yearLabel || "Year",
+          granularity: "year",
+          getDisplayValue: getDisplayedValue("year"),
+          preventUpper: upperDateThreshold ? isSameYear(upperDateThreshold, date) : false,
+          preventLower: lowerDateThreshold ? isSameYear(lowerDateThreshold, date) : false
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsxs(Content, { children: [
+      /* @__PURE__ */ jsx(SelectorContainer, { isFirst: true, children: /* @__PURE__ */ jsx(
+        Selector,
+        {
+          TextComponent,
+          onChange: handleChange("hours"),
+          referenceDate: date,
+          value: date.getHours(),
+          label: hourLabel || "Hour",
+          granularity: "hours",
+          getDisplayValue: getDisplayedValue("hours")
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SelectorContainer, { isLast: true, children: /* @__PURE__ */ jsx(
+        Selector,
+        {
+          TextComponent,
+          onChange: handleChange("minutes"),
+          referenceDate: date,
+          value: date.getMinutes(),
+          label: minuteLabel || "Minute",
+          granularity: "minutes",
+          getDisplayValue: getDisplayedValue("minutes")
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { color: "primary", onPress: handlePressConfirm, children: /* @__PURE__ */ jsx(TextComponent, { fontWeight: "bold", fontColor: "light", children: confirmButtonText || "OK" }) })
+  ] });
 };
 
 export { DateTimeSelector as default };

package/dist/esm/components/molecules/DateTimeSelector/Selector.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { getDaysInMonth } from 'date-fns';
 import * as React from 'react';
 import Icon from '../../atoms/Icon/Icon.js';
@@ -32,7 +33,7 @@ const Selector = ({
   TextComponent,
   ...rest
 }) => {
-  const pressInTimeoutRef = React.useRef();
+  const pressInTimeoutRef = React.useRef(void 0);
   const handlePressInNext = (_next) => {
     const daysInMonth = getDaysInMonth(referenceDate);
     const next = _next || getPrevAndNext(value, granularity, daysInMonth)[1];
@@ -54,40 +55,47 @@ const Selector = ({
   const handlePressOut = () => {
     if (pressInTimeoutRef.current) clearTimeout(pressInTimeoutRef.current);
   };
-  return /* @__PURE__ */ React.createElement(SelectorRoot, { ...rest }, /* @__PURE__ */ React.createElement(
-    Control,
-    {
-      onPressIn: () => requestAnimationFrame(() => handlePressInNext()),
-      onPressOut: handlePressOut,
-      disabled: preventUpper
-    },
-    /* @__PURE__ */ React.createElement(
-      Icon,
+  return /* @__PURE__ */ jsxs(SelectorRoot, { ...rest, children: [
+    /* @__PURE__ */ jsx(
+      Control,
       {
-        name: "chevron-up",
-        type: "material-community",
-        size: "mega",
-        colorVariant: "primary"
+        onPressIn: () => requestAnimationFrame(() => handlePressInNext()),
+        onPressOut: handlePressOut,
+        disabled: preventUpper,
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "chevron-up",
+            type: "material-community",
+            size: "mega",
+            colorVariant: "primary"
+          }
+        )
       }
-    )
-  ), /* @__PURE__ */ React.createElement(SelectorValue, null, /* @__PURE__ */ React.createElement(TextComponent, { colorVariant: "secondary", typography: "sub" }, label), /* @__PURE__ */ React.createElement(TextComponent, { fontWeight: "bold", typography: "h5" }, getDisplayValue(value))), /* @__PURE__ */ React.createElement(
-    Control,
-    {
-      onPressIn: () => requestAnimationFrame(() => handlePressInPrev()),
-      onPressOut: handlePressOut,
-      disabled: preventLower,
-      style: { opacity: preventLower ? 0 : 1 }
-    },
-    /* @__PURE__ */ React.createElement(
-      Icon,
+    ),
+    /* @__PURE__ */ jsxs(SelectorValue, { children: [
+      /* @__PURE__ */ jsx(TextComponent, { colorVariant: "secondary", typography: "sub", children: label }),
+      /* @__PURE__ */ jsx(TextComponent, { fontWeight: "bold", typography: "h5", children: getDisplayValue(value) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Control,
       {
-        name: "chevron-down",
-        type: "material-community",
-        size: "mega",
-        colorVariant: "primary"
+        onPressIn: () => requestAnimationFrame(() => handlePressInPrev()),
+        onPressOut: handlePressOut,
+        disabled: preventLower,
+        style: { opacity: preventLower ? 0 : 1 },
+        children: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            name: "chevron-down",
+            type: "material-community",
+            size: "mega",
+            colorVariant: "primary"
+          }
+        )
       }
     )
-  ));
+  ] });
 };
 
 export { Selector };

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

@@ -1,7 +1,8 @@
 import styled from '@emotion/native';
-import 'react';
+import 'react/jsx-runtime';
 import '../../atoms/Text/styled.js';
 import '../../atoms/Input/styled.js';
+import 'react';
 import 'currency.js';
 import '../../atoms/Input/InputElement/InputElement.js';
 import '../../atoms/Input/InputMaskElement/InputMaskElement.js';

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

@@ -1,7 +1,8 @@
 import { extractNumbersFromString } from '../../../utils/extractNumbersFromString.js';
-import 'react';
+import 'react/jsx-runtime';
 import '../../atoms/Text/styled.js';
 import '../../atoms/Input/styled.js';
+import 'react';
 import 'currency.js';
 import '../../atoms/Input/InputElement/InputElement.js';
 import '../../atoms/Input/InputMaskElement/InputMaskElement.js';

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

@@ -1,6 +1,7 @@
-import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { View } from 'react-native';
 import Hint from '../../atoms/Input/Hint.js';
+import 'react';
 import 'currency.js';
 import '../../atoms/Text/styled.js';
 import '../../atoms/Input/styled.js';
@@ -21,20 +22,23 @@ const HintInputContainer = ({
   hintComponent,
   ...rest
 }) => {
-  const _hint = hintComponent || /* @__PURE__ */ React.createElement(Hint, { TextComponent: LabelComponent, text: hint, variant });
-  return /* @__PURE__ */ React.createElement(View, { style: viewStyle }, /* @__PURE__ */ React.createElement(
-    PressableInputContainer,
-    {
-      onPress,
-      focused,
-      disabled,
-      LabelComponent,
-      variant,
-      rightComponent,
-      ...rest
-    },
-    children
-  ), hint && _hint);
+  const _hint = hintComponent || /* @__PURE__ */ jsx(Hint, { TextComponent: LabelComponent, text: hint, variant });
+  return /* @__PURE__ */ jsxs(View, { style: viewStyle, children: [
+    /* @__PURE__ */ jsx(
+      PressableInputContainer,
+      {
+        onPress,
+        focused,
+        disabled,
+        LabelComponent,
+        variant,
+        rightComponent,
+        ...rest,
+        children
+      }
+    ),
+    hint && _hint
+  ] });
 };
 
 export { HintInputContainer as default };

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

@@ -1,3 +1,4 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
 import React__default from 'react';
 import Icon from '../../atoms/Icon/Icon.js';
 
@@ -6,14 +7,14 @@ const IconComponent = ({
   size = "default",
   defaultFontColor
 }) => {
-  return iconProps ? /* @__PURE__ */ React__default.createElement(
+  return iconProps ? /* @__PURE__ */ jsx(
     Icon,
     {
       size: iconProps.size ?? size === "small" ? "deca" : "kilo",
       fontColor: iconProps.fontColor ?? defaultFontColor,
       ...iconProps
     }
-  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+  ) : /* @__PURE__ */ jsx(Fragment, {});
 };
 var IconComponent$1 = React__default.memo(IconComponent);