@tecsinapse/react-web-kit 3.0.0 → 3.3.1

package/dist/esm/components/molecules/Menubar/MenuBlock/MenuBlock.js

@@ -1,18 +1,18 @@
-import React from 'react';
+import React__default from 'react';
 import { Text } from '@tecsinapse/react-core';
 import MenuItem from './MenuItem/MenuItem.js';
 import { StyledContainerMenu, StyledLeftComponent, StyledContainerItems } from './styled.js';
 import Masonry from '../../Masonry/Masonry.js';
 
 const MenuBlock = ({ options, toggle }) => {
-  return /* @__PURE__ */ React.createElement(Masonry, { columns: 4, spacingTop: "kilo", spacingLeft: "mega" }, options.map((data) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `${data.title}` }, /* @__PURE__ */ React.createElement(StyledContainerMenu, null, data.leftComponents && /* @__PURE__ */ React.createElement(StyledLeftComponent, null, data.leftComponents), /* @__PURE__ */ React.createElement(Text, { fontWeight: "bold" }, data.title)), /* @__PURE__ */ React.createElement(StyledContainerItems, null, data.items.map(
+  return /* @__PURE__ */ React__default.createElement(Masonry, { columns: 4, spacingTop: "kilo", spacingLeft: "mega" }, options.map((data) => /* @__PURE__ */ React__default.createElement(React__default.Fragment, { key: `${data.title}` }, /* @__PURE__ */ React__default.createElement(StyledContainerMenu, null, data.leftComponents && /* @__PURE__ */ React__default.createElement(StyledLeftComponent, null, data.leftComponents), /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold" }, data.title)), /* @__PURE__ */ React__default.createElement(StyledContainerItems, null, data.items.map(
     ({
       title,
       Component,
       props,
       rightComponents,
       items
-    }) => /* @__PURE__ */ React.createElement(
+    }) => /* @__PURE__ */ React__default.createElement(
       MenuItem,
       {
         items,
@@ -26,6 +26,6 @@ const MenuBlock = ({ options, toggle }) => {
     )
   )))));
 };
-var MenuBlock$1 = React.memo(MenuBlock);
+var MenuBlock$1 = React__default.memo(MenuBlock);
 
 export { MenuBlock$1 as default };

package/dist/esm/components/molecules/Menubar/MenuBlock/MenuItem/MenuItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Text, Icon } from '@tecsinapse/react-core';
 import SubMenuBlock from './SubMenuBlock/SubMenuBlock.js';
 import { StyledText, StyledRightComponent } from '../styled.js';
@@ -12,25 +12,25 @@ const MenuItem = ({
   items,
   toggle
 }) => {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React__default.useState(false);
   const noTextDecoration = { textDecoration: "none" };
   const getIconName = () => open ? "arrow-up-drop-circle-outline" : "arrow-down-drop-circle-outline";
   const handleMenuAction = () => setOpen(!open);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StyledContainerItemText, { key: title }, /* @__PURE__ */ React.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(StyledContainerItemText, { key: title }, /* @__PURE__ */ React__default.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React__default.createElement(
     Text,
     {
       colorVariant: open ? "primary" : "secondary",
       colorTone: open ? "medium" : "dark"
     },
-    /* @__PURE__ */ React.createElement(StyledText, null, title)
-  )), rightComponents && !items && /* @__PURE__ */ React.createElement(StyledRightComponent, null, rightComponents), items && /* @__PURE__ */ React.createElement(StyledSubButton, { onClick: handleMenuAction }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(StyledText, null, title)
+  )), rightComponents && !items && /* @__PURE__ */ React__default.createElement(StyledRightComponent, null, rightComponents), items && /* @__PURE__ */ React__default.createElement(StyledSubButton, { onClick: handleMenuAction }, /* @__PURE__ */ React__default.createElement(
     Icon,
     {
       name: getIconName(),
       type: "material-community",
       fontColor: "orange"
     }
-  ))), open && items?.map((subItem) => /* @__PURE__ */ React.createElement(SubMenuBlock, { key: subItem.title, data: subItem, toggle })));
+  ))), open && items?.map((subItem) => /* @__PURE__ */ React__default.createElement(SubMenuBlock, { key: subItem.title, data: subItem, toggle })));
 };
 
 export { MenuItem as default };

package/dist/esm/components/molecules/Menubar/MenuBlock/MenuItem/SubMenuBlock/SubMenuBlock.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Text } from '@tecsinapse/react-core';
 import { StyledText, StyledRightComponent } from '../../styled.js';
 import { StyledContainerItem, DummyBorder } from './styled.js';
@@ -6,7 +6,7 @@ import { StyledContainerItem, DummyBorder } from './styled.js';
 const SubMenuBlock = ({ data, toggle }) => {
   const { Component, props, rightComponents, title } = data;
   const noTextDecoration = { textDecoration: "none" };
-  return /* @__PURE__ */ React.createElement(StyledContainerItem, null, /* @__PURE__ */ React.createElement(DummyBorder, null), /* @__PURE__ */ React.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React.createElement(Text, { colorVariant: "secondary", colorTone: "medium", typography: "sub" }, /* @__PURE__ */ React.createElement(StyledText, null, title))), rightComponents && /* @__PURE__ */ React.createElement(StyledRightComponent, null, rightComponents));
+  return /* @__PURE__ */ React__default.createElement(StyledContainerItem, null, /* @__PURE__ */ React__default.createElement(DummyBorder, null), /* @__PURE__ */ React__default.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React__default.createElement(Text, { colorVariant: "secondary", colorTone: "medium", typography: "sub" }, /* @__PURE__ */ React__default.createElement(StyledText, null, title))), rightComponents && /* @__PURE__ */ React__default.createElement(StyledRightComponent, null, rightComponents));
 };
 
 export { SubMenuBlock as default };

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

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import { useDebouncedState, Icon, Text } from '@tecsinapse/react-core';
 import { Transition } from 'react-transition-group';
 import { StyledMenuBar, StyledMenuButton, StyledInputContainer, StyledInput, StyledIconInput, StyledContainerOpenMenu, StyledSearchResultsContainer, StyledSearchTextContainer } from './styled.js';
@@ -20,24 +20,24 @@ const Menubar = ({
   searchable = true,
   ...rest
 }) => {
-  const [search, setSearch] = React.useState("");
-  const [results, setResults] = React.useState([]);
+  const [search, setSearch] = React__default.useState("");
+  const [results, setResults] = React__default.useState([]);
   const [input, setInput] = useDebouncedState("", setSearch);
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React__default.useState(false);
   const menuRef = useRef(null);
   const transitionInputRef = useRef(null);
   const transitionMenuRef = useRef(null);
   useClickAwayListener(menuRef, setOpen, "mouseup");
-  const toggleOpen = React.useCallback(
+  const toggleOpen = React__default.useCallback(
     () => setOpen((state) => !state),
     [setOpen]
   );
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (search === "")
       return;
     setResults(filterAndTransform(options, search));
   }, [search]);
-  return /* @__PURE__ */ React.createElement("div", { ref: (ref) => menuRef.current = ref, ...rest }, /* @__PURE__ */ React.createElement(StyledMenuBar, null, /* @__PURE__ */ React.createElement(StyledMenuButton, { variant: "filled", color: "primary", onPress: toggleOpen }, !open ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { ref: (ref) => menuRef.current = ref, ...rest }, /* @__PURE__ */ React__default.createElement(StyledMenuBar, null, /* @__PURE__ */ React__default.createElement(StyledMenuButton, { variant: "filled", color: "primary", onPress: toggleOpen }, !open ? /* @__PURE__ */ React__default.createElement(
     Icon,
     {
       size: "deca",
@@ -45,7 +45,7 @@ const Menubar = ({
       type: "material-community",
       fontColor: "light"
     }
-  ) : /* @__PURE__ */ React.createElement(
+  ) : /* @__PURE__ */ React__default.createElement(
     Icon,
     {
       size: "deca",
@@ -53,35 +53,35 @@ const Menubar = ({
       type: "material-community",
       fontColor: "light"
     }
-  )), leftComponents, /* @__PURE__ */ React.createElement(Transition, { in: open, timeout: 250, nodeRef: transitionInputRef }, (state) => /* @__PURE__ */ React.createElement(
+  )), leftComponents, /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: 250, nodeRef: transitionInputRef }, (state) => /* @__PURE__ */ React__default.createElement(
     StyledInputContainer,
     {
       style: getInputContainerStyles(state),
       ref: transitionInputRef
     },
-    searchable && /* @__PURE__ */ React.createElement(
+    searchable && /* @__PURE__ */ React__default.createElement(
       StyledInput,
       {
         placeholder: searchPlaceholder,
-        leftComponent: /* @__PURE__ */ React.createElement(StyledIconInput, null, /* @__PURE__ */ React.createElement(Icon, { name: "magnify", type: "material-community" })),
+        leftComponent: /* @__PURE__ */ React__default.createElement(StyledIconInput, null, /* @__PURE__ */ React__default.createElement(Icon, { name: "magnify", type: "material-community" })),
         value: input,
         onChange: setInput
       }
     )
-  )), rightComponents), /* @__PURE__ */ React.createElement(Transition, { in: open, timeout: 250, nodeRef: transitionMenuRef }, (state) => /* @__PURE__ */ React.createElement(
+  )), rightComponents), /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: 250, nodeRef: transitionMenuRef }, (state) => /* @__PURE__ */ React__default.createElement(
     StyledContainerOpenMenu,
     {
       style: getContainerOpenMenuStyles(state),
       ref: transitionMenuRef
     },
-    !search ? /* @__PURE__ */ React.createElement(React.Fragment, null, mostUsed && /* @__PURE__ */ React.createElement(
+    !search ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mostUsed && /* @__PURE__ */ React__default.createElement(
       MostUsed,
       {
         label: mostUsedLabel,
         data: mostUsed,
         toggle: toggleOpen
       }
-    ), /* @__PURE__ */ React.createElement(MenuBlock, { options, toggle: toggleOpen })) : /* @__PURE__ */ React.createElement(StyledSearchResultsContainer, null, /* @__PURE__ */ React.createElement(StyledSearchTextContainer, null, /* @__PURE__ */ React.createElement(Text, { fontWeight: "bold" }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React.createElement(
+    ), /* @__PURE__ */ React__default.createElement(MenuBlock, { options, toggle: toggleOpen })) : /* @__PURE__ */ React__default.createElement(StyledSearchResultsContainer, null, /* @__PURE__ */ React__default.createElement(StyledSearchTextContainer, null, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold" }, searchResultsLabel)), results.map((result) => /* @__PURE__ */ React__default.createElement(
       SearchResultItem,
       {
         key: `${result.title}-${result.category}`,

package/dist/esm/components/molecules/Menubar/MostUsed/MostUsed.js

@@ -1,16 +1,16 @@
-import React from 'react';
+import React__default from 'react';
 import { Text } from '@tecsinapse/react-core';
 import { StyledCardContainer, StyledCard } from './styled.js';
 
 const MostUsed = ({ data, label, toggle }) => {
   const noTextDecoration = { textDecoration: "none" };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { fontWeight: "bold" }, label), /* @__PURE__ */ React.createElement(StyledCardContainer, null, data.slice(0, 4).map(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold" }, label), /* @__PURE__ */ React__default.createElement(StyledCardContainer, null, data.slice(0, 4).map(
     ({
       title,
       category,
       Component = "a",
       props = {}
-    }) => /* @__PURE__ */ React.createElement(
+    }) => /* @__PURE__ */ React__default.createElement(
       Component,
       {
         ...props,
@@ -18,7 +18,7 @@ const MostUsed = ({ data, label, toggle }) => {
         key: `${title}-${category}`,
         onClick: toggle
       },
-      /* @__PURE__ */ React.createElement(StyledCard, { elevated: true, key: `${title}-${category}` }, /* @__PURE__ */ React.createElement(Text, { fontWeight: "bold", colorVariant: "primary" }, title), /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(StyledCard, { elevated: true, key: `${title}-${category}` }, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold", colorVariant: "primary" }, title), /* @__PURE__ */ React__default.createElement(
         Text,
         {
           fontWeight: "bold",
@@ -30,6 +30,6 @@ const MostUsed = ({ data, label, toggle }) => {
     )
   )));
 };
-var MostUsed$1 = React.memo(MostUsed);
+var MostUsed$1 = React__default.memo(MostUsed);
 
 export { MostUsed$1 as default };

package/dist/esm/components/molecules/Menubar/MostUsed/styled.js

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Card } from '@tecsinapse/react-core';
-import nativeStyled from '@emotion/native';
+import styled$1 from '@emotion/native';
 
 const StyledCardContainer = styled("div")`
     display: grid;
@@ -9,7 +9,7 @@ const StyledCardContainer = styled("div")`
     margin-bottom: ${({ theme }) => theme.spacing.kilo};
     margin-top: ${({ theme }) => theme.spacing.centi};
 `;
-const StyledCard = nativeStyled(Card)`
+const StyledCard = styled$1(Card)`
     padding-top: ${({ theme }) => theme.spacing.mili};
     padding-bottom: ${({ theme }) => theme.spacing.mili};
     padding-left: ${({ theme }) => theme.spacing.deca};

package/dist/esm/components/molecules/Menubar/SearchResultItem/SearchResultItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { Text } from '@tecsinapse/react-core';
 import { StyledSearchItemContainer, HighlightText } from './styled.js';
 import { highlight } from './utils.js';
@@ -11,7 +11,7 @@ const SearchResultItem = ({
   const { title, category, Component, props } = data;
   const noTextDecoration = { textDecoration: "none" };
   const textProps = { fontColor: "orange", fontWeight: "bold" };
-  return /* @__PURE__ */ React.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React.createElement(StyledSearchItemContainer, null, /* @__PURE__ */ React.createElement(Text, { typography: "base", colorVariant: "secondary", colorTone: "dark" }, highlight(searchTerm, title, HighlightText, textProps)), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Component, { ...props, style: noTextDecoration, onClick: toggle }, /* @__PURE__ */ React__default.createElement(StyledSearchItemContainer, null, /* @__PURE__ */ React__default.createElement(Text, { typography: "base", colorVariant: "secondary", colorTone: "dark" }, highlight(searchTerm, title, HighlightText, textProps)), /* @__PURE__ */ React__default.createElement(
     Text,
     {
       typography: "sub",

package/dist/esm/components/molecules/Menubar/SearchResultItem/styled.js

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import nativeStyled from '@emotion/native';
+import styled$1 from '@emotion/native';
 import { hex2rgba, Text } from '@tecsinapse/react-core';
 
 const StyledSearchItemContainer = styled("div")`
@@ -11,7 +11,7 @@ const StyledSearchItemContainer = styled("div")`
   0.05
 )}`};
 `;
-const HighlightText = nativeStyled(Text)`
+const HighlightText = styled$1(Text)`
   text-decoration: underline;
   text-decoration-color: ${({ theme }) => theme.font.color.orange};
 `;

package/dist/esm/components/molecules/Menubar/SearchResultItem/utils.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 
 const normalize = (str) => {
   return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[-[\]{}()*+?.,\\^$|#]/g, " ").toLowerCase();
@@ -29,7 +29,7 @@ const highlightReplacer = (searchTerm, textToReplace, Component, props) => {
   const indexes = matches.map((match) => match.index);
   const splited = matchSpliter(textToReplace, indexes, searchTerm.length);
   return splited.map((value, idx) => {
-    return normalize(value) === search ? /* @__PURE__ */ React.createElement(Component, { key: `highlight-${value}${idx}`, ...props }, value) : /* @__PURE__ */ React.createElement(React.Fragment, null, value);
+    return normalize(value) === search ? /* @__PURE__ */ React__default.createElement(Component, { key: `highlight-${value}${idx}`, ...props }, value) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, value);
   });
 };
 const highlight = (searchTerm, textToReplace, Component, props) => {

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

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import nativeStyled from '@emotion/native';
+import styled$1 from '@emotion/native';
 import { hex2rgba } from '@tecsinapse/react-core';
 import Button from '../../atoms/Button/Button.js';
 import 'react';
@@ -20,7 +20,7 @@ const StyledMenuBar = styled("div")`
     padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};
     box-shadow: 0px 2px 8px ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
 `;
-const StyledMenuButton = nativeStyled(Button)`
+const StyledMenuButton = styled$1(Button)`
     padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);
     padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);
     padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);
@@ -48,7 +48,7 @@ const StyledContainerOpenMenu = styled("div")`
     width: -webkit-fill-available;
     width: -moz-available;
 `;
-const StyledInput = nativeStyled(Input)`
+const StyledInput = styled$1(Input)`
      width: 100%;
 `;
 const StyledInputContainer = styled("div")`

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

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { DivStyledColumn, DivStyledRow } from './styled.js';
+import ScrollableDigit from '../DateTimePickerSelector/components/ScrollableDigit.js';
+import '../DateTimePickerSelector/components/MemoizedTimeCard.js';
+import { format } from 'date-fns';
+
+const ScrollableMonthYearPicker = ({
+  setDate,
+  date,
+  locale,
+  monthLabel,
+  yearLabel
+}) => {
+  const handleMonthYearChange = (newTime, updateType) => {
+    const newDate = new Date(date);
+    if (updateType === "year") {
+      newDate.setFullYear(Number(newTime));
+    } else if (updateType === "month") {
+      newDate.setMonth(months.indexOf(newTime));
+    }
+    setDate(newDate);
+  };
+  const yearsToShow = 20;
+  const firstYear = (/* @__PURE__ */ new Date()).getFullYear() - 10;
+  const years = React.useMemo(
+    () => Array.from({ length: yearsToShow }, (_, i) => String(i + firstYear)),
+    [yearsToShow, firstYear]
+  );
+  const months = [...Array(12)].map(
+    (_, index) => format((/* @__PURE__ */ new Date()).setMonth(index), "MMM", { locale })
+  );
+  const getInitialScrollIndex = (value, data) => {
+    const selectedIndex = data.findIndex((item) => item === value);
+    return selectedIndex >= 0 ? selectedIndex : 0;
+  };
+  return /* @__PURE__ */ React.createElement(DivStyledColumn, null, /* @__PURE__ */ React.createElement(DivStyledRow, null, /* @__PURE__ */ React.createElement(
+    ScrollableDigit,
+    {
+      data: months,
+      timeLabel: monthLabel ?? "Month",
+      handleTimeChange: handleMonthYearChange,
+      initialScrollIndex: getInitialScrollIndex(
+        months[date.getMonth()],
+        months
+      ),
+      updateType: "month",
+      currentTime: months[date.getMonth()]
+    }
+  ), /* @__PURE__ */ React.createElement(
+    ScrollableDigit,
+    {
+      data: years,
+      timeLabel: yearLabel ?? "Year",
+      handleTimeChange: handleMonthYearChange,
+      initialScrollIndex: getInitialScrollIndex(date.getFullYear(), years),
+      updateType: "year",
+      currentTime: date?.getFullYear().toString()
+    }
+  )));
+};
+
+export { ScrollableMonthYearPicker as default };

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

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+const DivStyledColumn = styled("div")`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const DivStyledRow = styled("div")`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+`;
+
+export { DivStyledColumn, DivStyledRow };

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import ScrollableDigit from '../DateTimePickerSelector/components/ScrollableDigit.js';
+import '../DateTimePickerSelector/components/MemoizedTimeCard.js';
+import { DivStyledColumn, DivStyledRow } from './styled.js';
+
+const ScrollableTimePicker = ({
+  date,
+  setDate,
+  minuteLabel,
+  hourLabel
+}) => {
+  const handleTimeChange = (newTime, updateType) => {
+    const newDate = new Date(date);
+    if (updateType === "hour") {
+      newDate.setHours(Number(newTime));
+    } else if (updateType === "minute") {
+      newDate.setMinutes(Number(newTime));
+    }
+    setDate(newDate);
+  };
+  const minutes = Array.from({ length: 60 }, (_, i) => String(i));
+  const hours = Array.from({ length: 24 }, (_, i) => String(i));
+  const getInitialScrollIndex = (value, data) => {
+    const selectedIndex = data.findIndex((item) => item === value);
+    return selectedIndex >= 0 ? selectedIndex : 0;
+  };
+  return /* @__PURE__ */ React.createElement(DivStyledColumn, null, /* @__PURE__ */ React.createElement(DivStyledRow, null, /* @__PURE__ */ React.createElement(
+    ScrollableDigit,
+    {
+      data: hours,
+      timeLabel: hourLabel ?? "Hour",
+      handleTimeChange,
+      currentTime: date?.getHours().toString(),
+      updateType: "hour",
+      initialScrollIndex: getInitialScrollIndex(
+        date.getHours().toString(),
+        hours
+      )
+    }
+  ), /* @__PURE__ */ React.createElement(
+    ScrollableDigit,
+    {
+      data: minutes,
+      timeLabel: minuteLabel ?? "Minute",
+      updateType: "minute",
+      currentTime: date?.getMinutes().toString(),
+      handleTimeChange,
+      initialScrollIndex: getInitialScrollIndex(
+        date.getMinutes().toString(),
+        minutes
+      )
+    }
+  )));
+};
+
+export { ScrollableTimePicker as default };

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

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+const DivStyledColumn = styled("div")`
+  width: '100%';
+  display: flex;
+  flex-direction: column;
+`;
+const DivStyledRow = styled("div")`
+  width: '100%';
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+`;
+
+export { DivStyledColumn, DivStyledRow };

package/dist/esm/components/molecules/Select/Dropdown/Dropdown.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { useDebouncedState, Checkbox, Text } from '@tecsinapse/react-core';
 import ItemSelect from '../SelectItem/SelectItem.js';
 import { StyledContainerDropdown, StyledContainerCheckAll, SearchBarContainer, StyledContainerTextLabel, StyledSpan, PaddedContainer, OptionsContainer } from './styled.js';
@@ -21,16 +21,16 @@ const Component = ({
   searchBarPlaceholder
 }, ref) => {
   const [searchArg, setSearchArg] = useDebouncedState("", onSearch);
-  const lengthOptions = React.useMemo(() => options.length, [options]);
-  const [checkedAll, setCheckedAll] = React.useState(
+  const lengthOptions = React__default.useMemo(() => options.length, [options]);
+  const [checkedAll, setCheckedAll] = React__default.useState(
     type === "multi" && value?.length === lengthOptions
   );
-  React.useEffect(() => {
+  React__default.useEffect(() => {
     if (type === "multi") {
       lengthOptions === value?.length ? setCheckedAll(true) : setCheckedAll(false);
     }
   }, [value, type, lengthOptions]);
-  const onClickCheckAll = React.useCallback(() => {
+  const onClickCheckAll = React__default.useCallback(() => {
     const items = options.map((option) => option);
     let aux;
     setCheckedAll((prev) => {
@@ -40,11 +40,11 @@ const Component = ({
     const auxArray = [];
     !aux ? onSelect(auxArray) : onSelect(items);
   }, [options, setCheckedAll, onSelect]);
-  const onChange = React.useCallback(
+  const onChange = React__default.useCallback(
     (text) => setSearchArg(text),
     [setSearchArg]
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     StyledContainerDropdown,
     {
       lengthOptions,
@@ -52,13 +52,13 @@ const Component = ({
       anchor,
       ref
     },
-    type === "multi" && /* @__PURE__ */ React.createElement(
+    type === "multi" && /* @__PURE__ */ React__default.createElement(
       StyledContainerCheckAll,
       {
         onClick: hideSearchBar ? onClickCheckAll : void 0
       },
-      /* @__PURE__ */ React.createElement(Checkbox, { checked: checkedAll, onChange: onClickCheckAll }),
-      !hideSearchBar ? /* @__PURE__ */ React.createElement(SearchBarContainer, null, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(Checkbox, { checked: checkedAll, onChange: onClickCheckAll }),
+      !hideSearchBar ? /* @__PURE__ */ React__default.createElement(SearchBarContainer, null, /* @__PURE__ */ React__default.createElement(
         SearchInput,
         {
           searchArg,
@@ -66,9 +66,9 @@ const Component = ({
           fullWidth,
           placeholder: searchBarPlaceholder
         }
-      )) : /* @__PURE__ */ React.createElement(StyledContainerTextLabel, null, /* @__PURE__ */ React.createElement(Text, { fontWeight: "bold" }, /* @__PURE__ */ React.createElement(StyledSpan, null, selectAllLabel)))
+      )) : /* @__PURE__ */ React__default.createElement(StyledContainerTextLabel, null, /* @__PURE__ */ React__default.createElement(Text, { fontWeight: "bold" }, /* @__PURE__ */ React__default.createElement(StyledSpan, null, selectAllLabel)))
     ),
-    type === "single" && !hideSearchBar && /* @__PURE__ */ React.createElement(PaddedContainer, null, /* @__PURE__ */ React.createElement(
+    type === "single" && !hideSearchBar && /* @__PURE__ */ React__default.createElement(PaddedContainer, null, /* @__PURE__ */ React__default.createElement(
       SearchInput,
       {
         searchArg,
@@ -77,7 +77,7 @@ const Component = ({
         placeholder: searchBarPlaceholder
       }
     )),
-    /* @__PURE__ */ React.createElement(OptionsContainer, { lengthOptions: options.length }, options.map((item, index) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(OptionsContainer, { lengthOptions: options.length }, options.map((item, index) => /* @__PURE__ */ React__default.createElement(
       ItemSelect,
       {
         type,
@@ -96,6 +96,6 @@ const Component = ({
     )))
   );
 };
-const Dropdown = React.forwardRef(Component);
+const Dropdown = React__default.forwardRef(Component);
 
 export { Dropdown as default };

package/dist/esm/components/molecules/Select/Dropdown/components/SearchInput.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { Icon } from '@tecsinapse/react-core';
 import Input from '../../../../atoms/Input/Input.js';
 
-const InputIcon = /* @__PURE__ */ React.createElement(
+const InputIcon = /* @__PURE__ */ React__default.createElement(
   Icon,
   {
     name: "magnify",
@@ -12,7 +12,7 @@ const InputIcon = /* @__PURE__ */ React.createElement(
   }
 );
 const SearchInput = ({ fullWidth, searchArg, onChange, placeholder }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Input,
     {
       style: fullWidth,
@@ -23,6 +23,6 @@ const SearchInput = ({ fullWidth, searchArg, onChange, placeholder }) => {
     }
   );
 };
-var SearchInput$1 = React.memo(SearchInput);
+var SearchInput$1 = React__default.memo(SearchInput);
 
 export { SearchInput$1 as default };