@tecsinapse/react-web-kit 2.3.1 → 3.3.0

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}`,
@@ -94,4 +94,3 @@ const Menubar = ({
 };
 
 export { Menubar as default };
-//# sourceMappingURL=Menubar.js.map

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,7 +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 };
-//# sourceMappingURL=MostUsed.js.map

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};
@@ -17,4 +17,3 @@ const StyledCard = nativeStyled(Card)`
 `;
 
 export { StyledCard, StyledCardContainer };
-//# sourceMappingURL=styled.js.map

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",
@@ -24,4 +24,3 @@ const SearchResultItem = ({
 };
 
 export { SearchResultItem as default };
-//# sourceMappingURL=SearchResultItem.js.map

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,10 +11,9 @@ 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};
 `;
 
 export { HighlightText, StyledSearchItemContainer };
-//# sourceMappingURL=styled.js.map

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) => {
@@ -40,4 +40,3 @@ const highlight = (searchTerm, textToReplace, Component, props) => {
 };
 
 export { highlight, stringMatcher };
-//# sourceMappingURL=utils.js.map

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

@@ -52,4 +52,3 @@ const getContainerOpenMenuStyles = (state) => ({
 });
 
 export { getContainerOpenMenuStyles, getInputContainerStyles };
-//# sourceMappingURL=animations.js.map

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")`
@@ -64,4 +64,3 @@ const StyledSearchTextContainer = styled("div")`
 `;
 
 export { StyledContainerOpenMenu, StyledIconInput, StyledInput, StyledInputContainer, StyledMenuBar, StyledMenuButton, StyledSearchResultsContainer, StyledSearchTextContainer };
-//# sourceMappingURL=styled.js.map

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

@@ -26,4 +26,3 @@ const filterAndTransform = (options, search) => {
 };
 
 export { filterAndTransform };
-//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1,65 @@
+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 }).slice(
+      0,
+      3
+    )
+  );
+  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,7 +96,6 @@ const Component = ({
     )))
   );
 };
-const Dropdown = React.forwardRef(Component);
+const Dropdown = React__default.forwardRef(Component);
 
 export { Dropdown as default };
-//# sourceMappingURL=Dropdown.js.map

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,7 +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 };
-//# sourceMappingURL=SearchInput.js.map

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

@@ -79,4 +79,3 @@ const StyledContainerTextLabel = styled("div")`
 `;
 
 export { OptionsContainer, PaddedContainer, SearchBarContainer, StyledContainerCheckAll, StyledContainerDropdown, StyledContainerTextLabel, StyledSpan };
-//# sourceMappingURL=styled.js.map

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

@@ -1,5 +1,5 @@
 import { PressableInputContainer, Text } from '@tecsinapse/react-core';
-import React, { useState, useId, useEffect } from 'react';
+import React__default, { useState, useId, useEffect } from 'react';
 import { Transition } from 'react-transition-group';
 import { useClickAwayListener } from '../../../hooks/useClickAwayListener.js';
 import { defaultStyles, transition } from './animations.js';
@@ -26,10 +26,10 @@ const Select = ({
   multiLabels,
   ...rest
 }) => {
-  const [dropDownVisible, setDropDownVisible] = React.useState(false);
+  const [dropDownVisible, setDropDownVisible] = React__default.useState(false);
   const [selectOptions, setSelectOptions] = useState([]);
-  const refDropDown = React.useRef(null);
-  const transitionRef = React.useRef(null);
+  const refDropDown = React__default.useRef(null);
+  const transitionRef = React__default.useRef(null);
   useClickAwayListener(refDropDown, setDropDownVisible);
   const instanceid = useId();
   useEffect(() => {
@@ -41,6 +41,8 @@ const Select = ({
   const hasValue = type === "single" ? !!value : (value || []).length > 0;
   const _placeholder = onlyLabel ? label : placeholder;
   const _label = hasValue ? label : void 0;
+  const _valueColorVariant = disabled ? "secondary" : displayTextProps?.colorVariant;
+  const _valueColorTone = disabled ? "light" : displayTextProps?.colorTone;
   const displayValue = getDisplayValue(
     type,
     value,
@@ -50,7 +52,7 @@ const Select = ({
     labelExtractor,
     multiLabels
   );
-  const handleLazyFocus = React.useCallback(async () => {
+  const handleLazyFocus = React__default.useCallback(async () => {
     if (!dropDownVisible && typeof options === "function") {
       try {
         const result = await options();
@@ -61,7 +63,7 @@ const Select = ({
       }
     }
   }, [options, setSelectOptions, dropDownVisible]);
-  const handleOnSearch = React.useCallback(
+  const handleOnSearch = React__default.useCallback(
     async (searchInput) => {
       if (searchInput !== void 0 && onSearch && dropDownVisible) {
         try {
@@ -96,11 +98,11 @@ const Select = ({
   const handlePressInput = async () => {
     await handleLazyFocus();
   };
-  const onPress = React.useCallback(
+  const onPress = React__default.useCallback(
     () => setDropDownVisible((prev) => !prev),
     [setDropDownVisible]
   );
-  return /* @__PURE__ */ React.createElement(StyledContainer, { ref: refDropDown, ...rest }, /* @__PURE__ */ React.createElement(StyledInputContainer, { onFocus: handlePressInput }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(StyledContainer, { ref: refDropDown, ...rest }, /* @__PURE__ */ React__default.createElement(StyledInputContainer, { onFocus: handlePressInput }, /* @__PURE__ */ React__default.createElement(
     PressableInputContainer,
     {
       label: _label,
@@ -108,8 +110,17 @@ const Select = ({
       disabled,
       rightComponent: RightComponent
     },
-    /* @__PURE__ */ React.createElement(Text, { ...displayTextProps, fontWeight: "bold" }, displayValue)
-  )), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React__default.createElement(
+      Text,
+      {
+        ...displayTextProps,
+        colorTone: _valueColorTone,
+        colorVariant: _valueColorVariant,
+        fontWeight: "bold"
+      },
+      displayValue
+    )
+  )), /* @__PURE__ */ React__default.createElement(
     Transition,
     {
       in: dropDownVisible,
@@ -117,7 +128,7 @@ const Select = ({
       nodeRef: transitionRef,
       key: instanceid
     },
-    (state) => /* @__PURE__ */ React.createElement(
+    (state) => /* @__PURE__ */ React__default.createElement(
       Dropdown,
       {
         ref: transitionRef,
@@ -140,4 +151,3 @@ const Select = ({
 };
 
 export { Select as default };
-//# sourceMappingURL=Select.js.map