@tecsinapse/react-web-kit 2.3.1 → 3.3.0

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

@@ -43,6 +43,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 = functions.getDisplayValue(
     type,
     value,
@@ -110,7 +112,16 @@ const Select = ({
       disabled,
       rightComponent: styled.RightComponent
     },
-    /* @__PURE__ */ React.createElement(reactCore.Text, { ...displayTextProps, fontWeight: "bold" }, displayValue)
+    /* @__PURE__ */ React.createElement(
+      reactCore.Text,
+      {
+        ...displayTextProps,
+        colorTone: _valueColorTone,
+        colorVariant: _valueColorVariant,
+        fontWeight: "bold"
+      },
+      displayValue
+    )
   )), /* @__PURE__ */ React.createElement(
     reactTransitionGroup.Transition,
     {
@@ -142,4 +153,3 @@ const Select = ({
 };
 
 module.exports = Select;
-//# sourceMappingURL=Select.js.map

package/dist/cjs/components/molecules/Select/SelectItem/SelectItem.js

@@ -67,4 +67,3 @@ const SelectItem = ({
 var ItemSelect = React.memo(SelectItem);
 
 module.exports = ItemSelect;
-//# sourceMappingURL=SelectItem.js.map

package/dist/cjs/components/molecules/Select/SelectItem/styled.js

@@ -17,7 +17,7 @@ const ContainerItemSelect = styled("div")`
   align-items: center;
 `;
 const StyledSpan = styled("span")`
-  color: ${({ theme, singleHighligh }) => singleHighligh ? theme.color.primary.medium : theme.color.secondary.xdark};
+  color: ${({ theme, singleHighligh }) => singleHighligh ? theme.color.primary.xlight : theme.color.secondary.xlight};
   padding: ${({ theme }) => `${theme.spacing.mili} 0px`};
 `;
 const StyledContainerTextLabel = styled("div")`
@@ -32,4 +32,3 @@ const StyledContainerTextLabel = styled("div")`
 exports.ContainerItemSelect = ContainerItemSelect;
 exports.StyledContainerTextLabel = StyledContainerTextLabel;
 exports.StyledSpan = StyledSpan;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/molecules/Select/animations.js

@@ -44,4 +44,3 @@ const transition = {
 
 exports.defaultStyles = defaultStyles;
 exports.transition = transition;
-//# sourceMappingURL=animations.js.map

package/dist/cjs/components/molecules/Select/functions.js

@@ -13,31 +13,17 @@ const getSingleLabel = (value, options, keyExtractor, placeholder, labelExtracto
   return selectedOption ? labelExtractor(selectedOption) : placeholder;
 };
 const getDisplayValue = (type, value, options, placeholder, keyExtractor, labelExtractor, multiLabels) => {
-  if (type === "multi") {
-    if (value === void 0 || value.length === 0)
-      return placeholder;
-    if (value.length === 1) {
-      return getSingleLabel(
-        value?.[0],
-        options,
-        keyExtractor,
-        placeholder,
-        labelExtractor
-      );
-    }
+  if (value === void 0 || value.length === 0)
+    return placeholder;
+  if (type === "multi" && value.length > 1)
     return getMultiLabel(value, options, multiLabels);
-  } else {
-    if (value === void 0)
-      return placeholder;
-    return getSingleLabel(
-      value,
-      options,
-      keyExtractor,
-      placeholder,
-      labelExtractor
-    );
-  }
+  return getSingleLabel(
+    value instanceof Array ? value?.[0] : value,
+    options,
+    keyExtractor,
+    placeholder,
+    labelExtractor
+  );
 };
 
 exports.getDisplayValue = getDisplayValue;
-//# sourceMappingURL=functions.js.map

package/dist/cjs/components/molecules/Select/styled.js

@@ -28,4 +28,3 @@ const RightComponent = /* @__PURE__ */ React.createElement(
 exports.RightComponent = RightComponent;
 exports.StyledContainer = StyledContainer;
 exports.StyledInputContainer = StyledInputContainer;
-//# sourceMappingURL=styled.js.map

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

@@ -13,4 +13,3 @@ const Snackbar = ({
 };
 
 module.exports = Snackbar;
-//# sourceMappingURL=Snackbar.js.map

package/dist/cjs/components/molecules/Snackbar/styled.js

@@ -1,26 +1,25 @@
 'use strict';
 
-var nativeStyled = require('@emotion/native');
+var styled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 
 const baseStyles = () => [
-  nativeStyled.css({
+  styled.css({
     left: "50%",
-    maxWidth: "600px",
+    maxWidth: 600,
     transform: [{ translateX: "-50%" }]
   })
 ];
 const webStyles = () => [
-  nativeStyled.css`
+  styled.css`
     position: fixed;
   `
 ];
-const SnackbarStyled = nativeStyled(reactCore.Snackbar)(
-  () => nativeStyled.css`
+const SnackbarStyled = styled(reactCore.Snackbar)(
+  () => styled.css`
     ${baseStyles()}
     ${webStyles()}
   `
 );
 
 exports.SnackbarStyled = SnackbarStyled;
-//# sourceMappingURL=styled.js.map

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

@@ -80,4 +80,3 @@ const TextArea = ({
 };
 
 module.exports = TextArea;
-//# sourceMappingURL=TextArea.js.map

package/dist/cjs/components/molecules/TextArea/styled.js

@@ -1,13 +1,12 @@
 'use strict';
 
-var nativeStyled = require('@emotion/native');
+var styled = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 
-const StyledWebInput = nativeStyled(reactCore.TextAreaInputBase)`
+const StyledWebInput = styled(reactCore.TextAreaInputBase)`
   font-weight: ${({ theme, fontWeight = "regular" }) => theme.font.weight[fontWeight]};
   font-family: ${({ theme, fontStack = "default" }) => `'${theme.font.stack[fontStack]}'`};
   outline-width: 0;
 `;
 
 exports.StyledWebInput = StyledWebInput;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/organisms/DataGrid/DataGrid.js

@@ -121,4 +121,3 @@ const DataGrid = ({
 };
 
 module.exports = DataGrid;
-//# sourceMappingURL=DataGrid.js.map

package/dist/cjs/components/organisms/DataGrid/Footer/Footer.js

@@ -114,4 +114,3 @@ const Footer = ({
 var Footer$1 = React.memo(Footer);
 
 module.exports = Footer$1;
-//# sourceMappingURL=Footer.js.map

package/dist/cjs/components/organisms/DataGrid/Footer/styled.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var styled = require('@emotion/styled');
-var nativeStyled = require('@emotion/native');
+var styled$1 = require('@emotion/native');
 var reactCore = require('@tecsinapse/react-core');
 require('react');
 var Td = require('../../../atoms/Table/Cell/Td.js');
@@ -33,14 +33,14 @@ const FooterContainerEnd = styled(FlexContainer)`
 const SelectContainer = styled("div")`
   margin-right: ${({ theme }) => theme.spacing.deca};
 `;
-const NavigationButton = nativeStyled(Button)`    
+const NavigationButton = styled$1(Button)`    
     border-radius: ${({ theme }) => theme.borderRadius.mili};
     height: 44px;
     justify-content: center;
     padding: ${({ theme }) => theme.spacing.centi};
     width: 44px;  
 `;
-const PageButton = nativeStyled(NavigationButton)`
+const PageButton = styled$1(NavigationButton)`
     padding-right: ${({ theme }) => theme.spacing.deca};
     padding-left: ${({ theme }) => theme.spacing.deca};
     border-radius: ${({ theme }) => theme.borderRadius.mili};
@@ -58,7 +58,7 @@ const HoveredText = styled("div")`
     color: ${({ theme }) => theme.font.color.light};
   }
 `;
-const TextPagination = nativeStyled(reactCore.Text)`
+const TextPagination = styled$1(reactCore.Text)`
   padding-right: ${({ theme }) => theme.spacing.deca};
   padding-left: ${({ theme }) => theme.spacing.deca};
 
@@ -75,4 +75,3 @@ exports.PagesContainer = PagesContainer;
 exports.SelectContainer = SelectContainer;
 exports.TdFooterStyled = TdFooterStyled;
 exports.TextPagination = TextPagination;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/organisms/DataGrid/Header/Header.js

@@ -82,4 +82,3 @@ const Header = ({
 };
 
 module.exports = Header;
-//# sourceMappingURL=Header.js.map

package/dist/cjs/components/organisms/DataGrid/Header/styled.js

@@ -20,4 +20,3 @@ const CheckboxHeader = styled(Th)`
 `;
 
 exports.CheckboxHeader = CheckboxHeader;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/organisms/DataGrid/Header/utils.js

@@ -22,4 +22,3 @@ exports.findCurrentItemsOnData = findCurrentItemsOnData;
 exports.findUnselectedItemsOnData = findUnselectedItemsOnData;
 exports.getIconColor = getIconColor;
 exports.getIconSuffix = getIconSuffix;
-//# sourceMappingURL=utils.js.map

package/dist/cjs/components/organisms/DataGrid/Row/Row.js

@@ -30,4 +30,3 @@ const Row = ({
 var Row$1 = React.memo(Row);
 
 module.exports = Row$1;
-//# sourceMappingURL=Row.js.map

package/dist/cjs/components/organisms/DataGrid/styled.js

@@ -19,4 +19,3 @@ const CheckboxCell = styled(Td)`
 `;
 
 exports.CheckboxCell = CheckboxCell;
-//# sourceMappingURL=styled.js.map

package/dist/cjs/components/organisms/DataGrid/utils.js

@@ -9,4 +9,3 @@ const getData = (data, rowsCount, page, rowsPerPage, pagination) => rowsCount ||
 
 exports.getData = getData;
 exports.removeElement = removeElement;
-//# sourceMappingURL=utils.js.map

package/dist/cjs/hooks/useBreakpoints.js

@@ -14,4 +14,3 @@ const useBreakpoints = () => {
 };
 
 exports.useBreakpoints = useBreakpoints;
-//# sourceMappingURL=useBreakpoints.js.map

package/dist/cjs/hooks/useClickAwayListener.js

@@ -18,4 +18,3 @@ const useClickAwayListener = (ref, setVisible, event = "mousedown", onClickAway)
 };
 
 exports.useClickAwayListener = useClickAwayListener;
-//# sourceMappingURL=useClickAwayListener.js.map

package/dist/cjs/hooks/useWindowSize.js

@@ -22,4 +22,3 @@ const useWindowSize = () => {
 };
 
 exports.useWindowSize = useWindowSize;
-//# sourceMappingURL=useWindowSize.js.map

package/dist/cjs/index.js

@@ -74,4 +74,3 @@ Object.keys(reactCore).forEach(function (k) {
     get: function () { return reactCore[k]; }
   });
 });
-//# sourceMappingURL=index.js.map

package/dist/esm/components/atoms/Accordion/Accordion.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import { Text, Icon } from '@tecsinapse/react-core';
 import { AccordionContainer, TitleContainer, IconContainer, ContentContainer } from './styled.js';
 import { Transition } from 'react-transition-group';
@@ -13,26 +13,26 @@ const Accordion = ({
   children,
   ...rest
 }) => {
-  const [open, setOpen] = React.useState(_open);
-  const [contentHeight, setContentHeight] = React.useState(0);
+  const [open, setOpen] = React__default.useState(_open);
+  const [contentHeight, setContentHeight] = React__default.useState(0);
   const theme = useTheme();
   const ref = useRef(null);
   const titleTransitionRef = useRef(null);
-  React.useEffect(() => setOpen(_open), [_open]);
-  React.useLayoutEffect(() => {
+  React__default.useEffect(() => setOpen(_open), [_open]);
+  React__default.useLayoutEffect(() => {
     const size = Array.from(
       ref.current?.children || []
     ).reduce((prev, curr) => prev + curr.clientHeight, 0);
     setContentHeight(size);
   }, []);
-  const handleClick = React.useCallback(() => {
+  const handleClick = React__default.useCallback(() => {
     if (onChange) {
       onChange();
       return;
     }
     setOpen((state) => !state);
   }, [onChange]);
-  return /* @__PURE__ */ React.createElement(AccordionContainer, { ...rest }, /* @__PURE__ */ React.createElement(TitleContainer, { onClick: handleClick }, /* @__PURE__ */ React.createElement(Transition, { in: open, timeout: transition, nodeRef: titleTransitionRef }, (state) => /* @__PURE__ */ React.createElement("div", { ref: titleTransitionRef }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(AccordionContainer, { ...rest }, /* @__PURE__ */ React__default.createElement(TitleContainer, { onClick: handleClick }, /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: transition, nodeRef: titleTransitionRef }, (state) => /* @__PURE__ */ React__default.createElement("div", { ref: titleTransitionRef }, /* @__PURE__ */ React__default.createElement(
     Text,
     {
       typography: "h4",
@@ -43,7 +43,7 @@ const Accordion = ({
       }
     },
     title
-  ))), /* @__PURE__ */ React.createElement(IconContainer, null, /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React__default.createElement(IconContainer, null, /* @__PURE__ */ React__default.createElement(
     Icon,
     {
       type: "material-community",
@@ -51,7 +51,7 @@ const Accordion = ({
       size: "kilo",
       fontColor: "medium"
     }
-  ))), /* @__PURE__ */ React.createElement(Transition, { in: open, timeout: transition, nodeRef: ref }, (state) => /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: transition, nodeRef: ref }, (state) => /* @__PURE__ */ React__default.createElement(
     ContentContainer,
     {
       ref: (htmlEl) => ref.current = htmlEl,
@@ -65,4 +65,3 @@ const Accordion = ({
 };
 
 export { Accordion as default };
-//# sourceMappingURL=Accordion.js.map

package/dist/esm/components/atoms/Accordion/animations.js

@@ -41,4 +41,3 @@ const titleTransition = (theme) => ({
 });
 
 export { contentStyle, contentTransition, titleStyle, titleTransition };
-//# sourceMappingURL=animations.js.map

package/dist/esm/components/atoms/Accordion/styled.js

@@ -29,4 +29,3 @@ const ContentContainer = styled("div")`
 `;
 
 export { AccordionContainer, ContentContainer, IconContainer, TitleContainer };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/Badge/Badge.js

@@ -1,5 +1,5 @@
 import { Badge as Badge$1, Text } from '@tecsinapse/react-core';
-import React from 'react';
+import React__default from 'react';
 
 const Badge = ({
   children,
@@ -7,15 +7,14 @@ const Badge = ({
   value,
   ...props
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     Badge$1,
     {
       ...props,
-      value: /* @__PURE__ */ React.createElement(Text, { fontColor, fontWeight: "bold", typography: "label" }, value)
+      value: /* @__PURE__ */ React__default.createElement(Text, { fontColor, fontWeight: "bold", typography: "label" }, value)
     },
     children
   );
 };
 
 export { Badge as default };
-//# sourceMappingURL=Badge.js.map

package/dist/esm/components/atoms/Button/Button.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { useMouseHover } from './hooks/useMouseHover.js';
 import { useMousePressed } from './hooks/useMousePressed.js';
 import { StyledWebButton } from './styled.js';
@@ -26,7 +26,7 @@ const Button = ({
     onPressIn,
     onPressOut
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(
     StyledWebButton,
     {
       ...rest,
@@ -46,4 +46,3 @@ const Button = ({
 };
 
 export { Button as default };
-//# sourceMappingURL=Button.js.map

package/dist/esm/components/atoms/Button/hooks/useMouseHover.js

@@ -22,4 +22,3 @@ const useMouseHover = (active, onMouseOver, onMouseOut) => {
 };
 
 export { useMouseHover };
-//# sourceMappingURL=useMouseHover.js.map

package/dist/esm/components/atoms/Button/hooks/useMousePressed.js

@@ -22,4 +22,3 @@ const useMousePressed = (active, onPressIn, onPressOut) => {
 };
 
 export { useMousePressed };
-//# sourceMappingURL=useMousePressed.js.map

package/dist/esm/components/atoms/Button/styled.js

@@ -1,4 +1,4 @@
-import nativeStyled, { css } from '@emotion/native';
+import styled, { css } from '@emotion/native';
 import { Button, colorVC, colorGradationVC, borderColorVC, borderColorGradationVC } from '@tecsinapse/react-core';
 
 const webStyles = () => {
@@ -24,7 +24,6 @@ const hoverStyles = ({
       border-color: ${theme?.color[variantBorderColor][variantBorderColorGradation]};
     `;
 };
-const StyledWebButton = nativeStyled(Button)(webStyles, hoverStyles);
+const StyledWebButton = styled(Button)(webStyles, hoverStyles);
 
 export { StyledWebButton };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/Dropdown/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { StyledContainerDropdown } from './styled.js';
 import { Transition } from 'react-transition-group';
 import { defaultStyles, transition } from '../../molecules/Select/animations.js';
@@ -11,9 +11,9 @@ const Component = ({
   onClickAway,
   children
 }) => {
-  const refDropDown = React.useRef(null);
+  const refDropDown = React__default.useRef(null);
   useClickAwayListener(refDropDown, setVisible, "mousedown", onClickAway);
-  return /* @__PURE__ */ React.createElement(Transition, { in: visible, timeout: 300, nodeRef: refDropDown }, (state) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Transition, { in: visible, timeout: 300, nodeRef: refDropDown }, (state) => /* @__PURE__ */ React__default.createElement(
     StyledContainerDropdown,
     {
       style: { ...defaultStyles, ...transition["bottom"][state] },
@@ -25,4 +25,3 @@ const Component = ({
 const Dropdown = Component;
 
 export { Dropdown };
-//# sourceMappingURL=index.js.map

package/dist/esm/components/atoms/Dropdown/styled.js

@@ -14,4 +14,3 @@ const StyledContainerDropdown = styled("div")`
 `;
 
 export { StyledContainerDropdown };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/Input/Input.js

@@ -1,9 +1,9 @@
 import { useInputFocus, InputContainer, Hint } from '@tecsinapse/react-core';
-import React from 'react';
+import React__default from 'react';
 import { View } from 'react-native-web';
 import { StyledWebTextInput } from './styled.js';
 
-const Input = React.forwardRef(
+const Input = React__default.forwardRef(
   ({
     label,
     labelColor,
@@ -28,14 +28,14 @@ const Input = React.forwardRef(
     value,
     ...rest
   }, ref) => {
-    const _hint = hintComponent || /* @__PURE__ */ React.createElement(Hint, { text: hint, variant });
+    const _hint = hintComponent || /* @__PURE__ */ React__default.createElement(Hint, { text: hint, variant });
     const { focused, handleBlur, handleFocus } = useInputFocus(
       onFocus,
       onBlur,
       !disabled
     );
     const onlyLabel = label && !placeholder;
-    return /* @__PURE__ */ React.createElement(View, { style }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(View, { style }, /* @__PURE__ */ React__default.createElement(
       InputContainer,
       {
         label: value ? label : void 0,
@@ -54,7 +54,7 @@ const Input = React.forwardRef(
         disabled,
         variant
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         StyledWebTextInput,
         {
           ...rest,
@@ -72,4 +72,3 @@ const Input = React.forwardRef(
 Input.displayName = "Input";
 
 export { Input as default };
-//# sourceMappingURL=Input.js.map

package/dist/esm/components/atoms/Input/styled.js

@@ -1,11 +1,10 @@
-import nativeStyled from '@emotion/native';
+import styled from '@emotion/native';
 import { InputElement } from '@tecsinapse/react-core';
 
-const StyledWebTextInput = nativeStyled(InputElement)`
+const StyledWebTextInput = styled(InputElement)`
   &:focus-visible {
     outline-width: 0;
   }
 `;
 
 export { StyledWebTextInput };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/InputMask/InputMask.js

@@ -1,9 +1,9 @@
 import { useInputFocus, InputContainer, Hint } from '@tecsinapse/react-core';
-import React from 'react';
+import React__default from 'react';
 import { View } from 'react-native-web';
 import { StyledWebTextInputMask } from './styled.js';
 
-const InputMask = React.forwardRef(
+const InputMask = React__default.forwardRef(
   ({
     label,
     labelColor,
@@ -28,14 +28,14 @@ const InputMask = React.forwardRef(
     placeholder,
     ...rest
   }, ref) => {
-    const _hint = hintComponent || /* @__PURE__ */ React.createElement(Hint, { text: hint, variant });
+    const _hint = hintComponent || /* @__PURE__ */ React__default.createElement(Hint, { text: hint, variant });
     const { focused, handleBlur, handleFocus } = useInputFocus(
       onFocus,
       onBlur,
       !disabled
     );
     const onlyLabel = label && !placeholder;
-    return /* @__PURE__ */ React.createElement(View, { style }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React__default.createElement(View, { style }, /* @__PURE__ */ React__default.createElement(
       InputContainer,
       {
         label: String(value) ? label : void 0,
@@ -54,7 +54,7 @@ const InputMask = React.forwardRef(
         disabled,
         variant
       },
-      /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React__default.createElement(
         StyledWebTextInputMask,
         {
           ...rest,
@@ -72,4 +72,3 @@ const InputMask = React.forwardRef(
 InputMask.displayName = "InputMask";
 
 export { InputMask as default };
-//# sourceMappingURL=InputMask.js.map

package/dist/esm/components/atoms/InputMask/styled.js

@@ -1,11 +1,10 @@
-import nativeStyled from '@emotion/native';
+import styled from '@emotion/native';
 import { InputMaskElement } from '@tecsinapse/react-core';
 
-const StyledWebTextInputMask = nativeStyled(InputMaskElement)`
+const StyledWebTextInputMask = styled(InputMaskElement)`
   &:focus-visible {
     outline-width: 0;
   }
 `;
 
 export { StyledWebTextInputMask };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/Modal/Modal.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import { Transition } from 'react-transition-group';
 import Overlay from '../Overlay/Overlay.js';
 import { ModalContainer } from './styled.js';
@@ -12,7 +12,7 @@ const Modal = ({
   ...rest
 }) => {
   const transitionRef = useRef(null);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, { open, onClose, zIndex: "modal" }), /* @__PURE__ */ React.createElement(Transition, { in: open, timeout: 400, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Overlay, { open, onClose, zIndex: "modal" }), /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout: 400, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React__default.createElement(
     ModalContainer,
     {
       ref: transitionRef,
@@ -28,4 +28,3 @@ const Modal = ({
 };
 
 export { Modal as default };
-//# sourceMappingURL=Modal.js.map

package/dist/esm/components/atoms/Modal/animations.js

@@ -11,4 +11,3 @@ const transitionStylesOverlay = {
 };
 
 export { defaultStyleOverlay, transitionStylesOverlay };
-//# sourceMappingURL=animations.js.map

package/dist/esm/components/atoms/Modal/styled.js

@@ -17,4 +17,3 @@ const ModalContainer = styled("div")`
 `;
 
 export { ModalContainer };
-//# sourceMappingURL=styled.js.map

package/dist/esm/components/atoms/Overlay/Overlay.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import { Transition } from 'react-transition-group';
 import { defaultStyleOverlay, transitionStylesOverlay } from './animations.js';
 import { StyledOverlay } from './styled.js';
@@ -11,7 +11,7 @@ const Overlay = ({
   children
 }) => {
   const transitionRef = useRef(null);
-  return /* @__PURE__ */ React.createElement(Transition, { in: open, timeout, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React__default.createElement(Transition, { in: open, timeout, nodeRef: transitionRef }, (state) => /* @__PURE__ */ React__default.createElement(
     StyledOverlay,
     {
       style: {
@@ -28,4 +28,3 @@ const Overlay = ({
 };
 
 export { Overlay as default };
-//# sourceMappingURL=Overlay.js.map

package/dist/esm/components/atoms/Overlay/animations.js

@@ -11,4 +11,3 @@ const transitionStylesOverlay = {
 };
 
 export { defaultStyleOverlay, transitionStylesOverlay };
-//# sourceMappingURL=animations.js.map

package/dist/esm/components/atoms/Overlay/styled.js

@@ -16,4 +16,3 @@ const StyledOverlay = styled("div")`
 `;
 
 export { StyledOverlay };
-//# sourceMappingURL=styled.js.map