@tecsinapse/react-web-kit 1.12.6 → 1.12.10

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.10](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.9...@tecsinapse/react-web-kit@1.12.10) (2022-01-18)
+
+
+### Bug Fixes
+
+* remove StyledMenuBar zIndex ([2b7941f](https://github.com/tecsinapse/design-system/commit/2b7941fe6aec2fbc91495e909bb448e98f1cd8ac))
+
+
+
+
+
+## [1.12.9](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.8...@tecsinapse/react-web-kit@1.12.9) (2022-01-18)
+
+**Note:** Version bump only for package @tecsinapse/react-web-kit
+
+
+
+
+
+## [1.12.8](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.7...@tecsinapse/react-web-kit@1.12.8) (2022-01-17)
+
+**Note:** Version bump only for package @tecsinapse/react-web-kit
+
+
+
+
+
+## [1.12.7](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.6...@tecsinapse/react-web-kit@1.12.7) (2022-01-11)
+
+**Note:** Version bump only for package @tecsinapse/react-web-kit
+
+
+
+
+
 ## [1.12.6](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.5...@tecsinapse/react-web-kit@1.12.6) (2022-01-06)
 
 **Note:** Version bump only for package @tecsinapse/react-web-kit

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

@@ -33,7 +33,7 @@ const ModalContainer = (0, _styled.default)('div')`
   box-shadow: 0 2px 8px
     ${({
   theme
-}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};
+}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)};
 `;
 exports.ModalContainer = ModalContainer;
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Modal/styled.ts"],"names":["ModalContainer","theme","miscellaneous","surfaceColor","zIndex","modal","borderRadius","micro","spacing","kilo","shadow"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,qBAAO,KAAP,CAAmC;AACjE,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,YAAa;AACtE;AACA;AACA,aAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACG,MAAN,CAAaC,KAAM;AAC/C;AACA;AACA;AACA,mBAAmB,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACK,YAAN,CAAmBC,KAAM;AAC3D,aAAa,CAAC;AAAEN,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACO,OAAN,CAAcC,IAAK;AAC/C;AACA;AACA,MAAM,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAe,yBAASA,KAAK,CAACC,aAAN,CAAoBQ,MAA7B,EAAqC,IAArC,CAA2C;AAChE,CAbO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const ModalContainer = styled('div')<Partial<StyleProps>>`\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n  margin: auto;\n  position: fixed;\n  z-index: ${({ theme }) => theme.zIndex.modal};\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: ${({ theme }) => theme.borderRadius.micro};\n  padding: ${({ theme }) => theme.spacing.kilo};\n  display: flex;\n  box-shadow: 0 2px 8px\n    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.08)};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Modal/styled.ts"],"names":["ModalContainer","theme","miscellaneous","surfaceColor","zIndex","modal","borderRadius","micro","spacing","kilo","shadow"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,qBAAO,KAAP,CAAmC;AACjE,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,YAAa;AACtE;AACA;AACA,aAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACG,MAAN,CAAaC,KAAM;AAC/C;AACA;AACA;AACA,mBAAmB,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACK,YAAN,CAAmBC,KAAM;AAC3D,aAAa,CAAC;AAAEN,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACO,OAAN,CAAcC,IAAK;AAC/C;AACA;AACA,MAAM,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAe,yBAASA,KAAK,CAACC,aAAN,CAAoBQ,MAA7B,EAAqC,IAArC,CAA2C;AAChE,CAbO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const ModalContainer = styled('div')<Partial<StyleProps>>`\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n  margin: auto;\n  position: fixed;\n  z-index: ${({ theme }) => theme.zIndex.modal};\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: ${({ theme }) => theme.borderRadius.micro};\n  padding: ${({ theme }) => theme.spacing.kilo};\n  display: flex;\n  box-shadow: 0 2px 8px\n    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};\n`;\n"],"file":"styled.js"}

package/dist/components/atoms/Table/Container/styled.js

@@ -21,7 +21,7 @@ const TContainer = (0, _styled.default)('div')`
   box-shadow: 0 2px 8px
     ${({
   theme
-}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};
+}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)};
   padding: ${({
   theme
 }) => `${theme.spacing.deca} 0`};

package/dist/components/atoms/Table/Container/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Table/Container/styled.ts"],"names":["TContainer","theme","miscellaneous","surfaceColor","borderRadius","mili","shadow","spacing","deca"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,UAAU,GAAG,qBAAO,KAAP,CAAmC;AAC7D,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,YAAa;AACtE,mBAAmB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACG,YAAN,CAAmBC,IAAK;AAC1D;AACA,MAAM,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAAe,yBAASA,KAAK,CAACC,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AAChE,aAAa,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACM,OAAN,CAAcC,IAAK,IAAI;AACtD,CANO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const TContainer = styled('div')<Partial<StyleProps>>`\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n  box-shadow: 0 2px 8px\n    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.08)};\n  padding: ${({ theme }) => `${theme.spacing.deca} 0`};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../../src/components/atoms/Table/Container/styled.ts"],"names":["TContainer","theme","miscellaneous","surfaceColor","borderRadius","mili","shadow","spacing","deca"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,UAAU,GAAG,qBAAO,KAAP,CAAmC;AAC7D,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,YAAa;AACtE,mBAAmB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACG,YAAN,CAAmBC,IAAK;AAC1D;AACA,MAAM,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAAe,yBAASA,KAAK,CAACC,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AAChE,aAAa,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACM,OAAN,CAAcC,IAAK,IAAI;AACtD,CANO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const TContainer = styled('div')<Partial<StyleProps>>`\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n  box-shadow: 0 2px 8px\n    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};\n  padding: ${({ theme }) => `${theme.spacing.deca} 0`};\n`;\n"],"file":"styled.js"}

package/dist/components/atoms/Table/Row/styled.js

@@ -15,7 +15,7 @@ const TRow = (0, _styled.default)('tr')`
   box-shadow: 0 2px 8px
     ${({
   theme
-}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};
+}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)};
   border-radius: ${({
   theme
 }) => theme.borderRadius.mili};

package/dist/components/atoms/Table/Row/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Table/Row/styled.ts"],"names":["TRow","theme","miscellaneous","shadow","borderRadius","mili"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,IAAI,GAAG,qBAAO,IAAP,CAAkC;AACtD;AACA,MAAM,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAe,yBAASA,KAAK,CAACC,aAAN,CAAoBC,MAA7B,EAAqC,IAArC,CAA2C;AAChE,mBAAmB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACG,YAAN,CAAmBC,IAAK;AAC1D,CAJO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const TRow = styled('tr')<Partial<StyleProps>>`\n  box-shadow: 0 2px 8px\n    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.08)};\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../../src/components/atoms/Table/Row/styled.ts"],"names":["TRow","theme","miscellaneous","shadow","borderRadius","mili"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,IAAI,GAAG,qBAAO,IAAP,CAAkC;AACtD;AACA,MAAM,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAe,yBAASA,KAAK,CAACC,aAAN,CAAoBC,MAA7B,EAAqC,IAArC,CAA2C;AAChE,mBAAmB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACG,YAAN,CAAmBC,IAAK;AAC1D,CAJO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const TRow = styled('tr')<Partial<StyleProps>>`\n  box-shadow: 0 2px 8px\n    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n`;\n"],"file":"styled.js"}

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

@@ -27,7 +27,7 @@ const StyledContainerBreadcrumbs = (0, _styled.default)('div')`
   box-shadow: 0px 2px 8px
     ${({
   theme
-}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};
+}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)};
 `;
 exports.StyledContainerBreadcrumbs = StyledContainerBreadcrumbs;
 //# sourceMappingURL=styled.js.map

package/dist/components/molecules/Breadcrumbs/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Breadcrumbs/styled.ts"],"names":["StyledContainerBreadcrumbs","theme","miscellaneous","surfaceColor","spacing","mili","deca","borderRadius","shadow"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,0BAA0B,GAAG,qBAAO,KAAP,CAAmC;AAC7E,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,YAAa;AACtE;AACA;AACA;AACA,aAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACG,OAAN,CAAcC,IAAK,IAAGJ,KAAK,CAACG,OAAN,CAAcE,IAAK,EAAE;AAC1E,mBAAmB,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACM,YAAN,CAAmBF,IAAK;AACtE;AACA,MAAM,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAAe,yBAASA,KAAK,CAACC,aAAN,CAAoBM,MAA7B,EAAqC,IAArC,CAA2C;AAChE,CATO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerBreadcrumbs = styled('div')<Partial<StyleProps>>`\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0px 2px 8px\n    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.08)};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Breadcrumbs/styled.ts"],"names":["StyledContainerBreadcrumbs","theme","miscellaneous","surfaceColor","spacing","mili","deca","borderRadius","shadow"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,0BAA0B,GAAG,qBAAO,KAAP,CAAmC;AAC7E,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,aAAN,CAAoBC,YAAa;AACtE;AACA;AACA;AACA,aAAa,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACG,OAAN,CAAcC,IAAK,IAAGJ,KAAK,CAACG,OAAN,CAAcE,IAAK,EAAE;AAC1E,mBAAmB,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACM,YAAN,CAAmBF,IAAK;AACtE;AACA,MAAM,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAAe,yBAASA,KAAK,CAACC,aAAN,CAAoBM,MAA7B,EAAqC,IAArC,CAA2C;AAChE,CATO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainerBreadcrumbs = styled('div')<Partial<StyleProps>>`\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0px 2px 8px\n    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};\n`;\n"],"file":"styled.js"}

package/dist/components/molecules/DatePicker/DatePicker.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerProps } from '@tecsinapse/react-core';
+export declare const DatePicker: <T extends any>({ ...rest }: Omit<any, "CalendarComponent" | "renderCalendar" | "requestCloseCalendar" | "requestShowCalendar">) => JSX.Element;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePicker = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = require("./Modal");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const DatePicker = ({ ...rest
+}) => {
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const show = (0, _react.useCallback)(() => setVisible(true), []);
+  const close = (0, _react.useCallback)(() => setVisible(false), []);
+  return _react.default.createElement(_reactCore.DatePicker, _extends({}, rest, {
+    CalendarComponent: _reactCore.Calendar,
+    requestShowCalendar: show,
+    requestCloseCalendar: close,
+    renderCalendar: calendar => _react.default.createElement(_Modal.Modal, {
+      animationType: "fade",
+      visible: visible,
+      onRequestClose: close
+    }, calendar)
+  }));
+};
+
+exports.DatePicker = DatePicker;
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","rest","visible","setVisible","show","close","Calendar","calendar"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;AAEO,MAAMA,UAAU,GAAG,CAA0B,EAAE,GAAGC;AAAL,CAA1B,KAA0K;AAElM,QAAM,CAAEC,OAAF,EAAWC,UAAX,IAA0B,qBAAS,KAAT,CAAhC;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,SACE,6BAAC,qBAAD,eACMF,IADN;AAEE,IAAA,iBAAiB,EAAEK,mBAFrB;AAGE,IAAA,mBAAmB,EAAEF,IAHvB;AAIE,IAAA,oBAAoB,EAAEC,KAJxB;AAKE,IAAA,cAAc,EAAGE,QAAD,IACd,6BAAC,YAAD;AAAO,MAAA,aAAa,EAAC,MAArB;AAA4B,MAAA,OAAO,EAAEL,OAArC;AAA8C,MAAA,cAAc,EAAEG;AAA9D,OACGE,QADH;AANJ,KADF;AAaD,CAnBM","sourcesContent":["import {\n  Calendar,\n  DatePicker as DatePickerCore, DatePickerProps, SelectionType\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useState } from 'react';\nimport { Modal } from './Modal';\n\nexport const DatePicker = <T extends SelectionType>({ ...rest }: Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>): JSX.Element => {\n\n  const [ visible, setVisible ] = useState(false)\n  const show = useCallback(() => setVisible(true), [])\n  const close = useCallback(() => setVisible(false), [])\n  \n  return (\n    <DatePickerCore\n      {...rest}\n      CalendarComponent={Calendar}\n      requestShowCalendar={show}\n      requestCloseCalendar={close}\n      renderCalendar={(calendar) => (\n        <Modal animationType='fade' visible={visible} onRequestClose={close}>\n          {calendar}\n        </Modal>\n      )}\n    />\n  );\n};"],"file":"DatePicker.js"}

package/dist/components/molecules/DatePicker/Modal.d.ts

@@ -0,0 +1,3 @@
+import { CalendarProps } from '@tecsinapse/react-core';
+import { ModalProps } from 'react-native';
+export declare const Modal: <T extends any>({ onRequestClose, children, ...modalProps }: any) => JSX.Element;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactNativeWeb = require("react-native-web");
+
+var _styled = require("./styled");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Component = ({
+  onRequestClose,
+  children,
+  ...modalProps
+}) => {
+  return React.createElement(_reactNativeWeb.Modal, _extends({
+    transparent: true,
+    hardwareAccelerated: true,
+    statusBarTranslucent: true
+  }, modalProps, {
+    onRequestClose: onRequestClose
+  }), React.createElement(_styled.Backdrop, {
+    onPress: onRequestClose,
+    effect: "none"
+  }, React.createElement(_reactCore.PressableSurface, null, React.createElement(_styled.ModalContent, null, children))));
+};
+
+const Modal = Component;
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.js.map

package/dist/components/molecules/DatePicker/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/Modal.tsx"],"names":["Component","onRequestClose","children","modalProps","Modal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,SAAS,GAAG,CAA0B;AAAEC,EAAAA,cAAF;AAAkBC,EAAAA,QAAlB;AAA4B,KAAGC;AAA/B,CAA1B,KAAkJ;AAClK,SACE,oBAAC,qBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMA,UAJN;AAKE,IAAA,cAAc,EAAEF;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,2BAAD,QACE,oBAAC,oBAAD,QACGC,QADH,CADF,CADF,CAPF,CADF;AAiBD,CAlBD;;AAoBO,MAAME,KAAK,GAAGJ,SAAd","sourcesContent":["import { CalendarProps, PressableSurface, SelectionType } from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { Backdrop, ModalContent } from './styled';\n\nconst Component = <T extends SelectionType>({ onRequestClose, children, ...modalProps }: CalendarProps<T> & ModalProps & { children: JSX.Element }): JSX.Element => {\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      statusBarTranslucent\n      {...modalProps}\n      onRequestClose={onRequestClose}\n    >\n      <Backdrop onPress={onRequestClose} effect=\"none\">\n        <PressableSurface>\n          <ModalContent>\n            {children}\n          </ModalContent>\n        </PressableSurface>\n      </Backdrop>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}

package/dist/components/molecules/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DatePicker';

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DatePicker = require("./DatePicker");
+
+Object.keys(_DatePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DatePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DatePicker[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './DatePicker'"],"file":"index.js"}

package/dist/components/molecules/DatePicker/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Backdrop: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<any> | undefined;
+}>;
+export declare const ModalContent: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalContent = exports.Backdrop = void 0;
+
+var _native = _interopRequireWildcard(require("@emotion/native"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _reactNativeWeb = require("react-native-web");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const isWeb = _reactNativeWeb.Platform.OS === 'web';
+const Backdrop = (0, _native.default)(_reactCore.PressableSurface)`
+  ${({
+  theme
+}) => isWeb ? (0, _native.css)`
+          justify-content: center;
+          align-items: center;
+          background-color: ${(0, _reactCore.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
+          height: 100vh;
+        ` : (0, _native.css)`
+          justify-content: flex-end;
+          background-color: ${(0, _reactCore.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
+          height: 100%;
+        `}
+`;
+exports.Backdrop = Backdrop;
+const ModalContent = _native.default.View`
+  background-color: transparent;
+  ${({
+  theme: {
+    borderRadius
+  }
+}) => (0, _native.css)`
+    ${isWeb ? `
+      border-radius: ${borderRadius.micro};
+    ` : `
+      border-top-left-radius: ${borderRadius.deca};
+      border-top-right-radius: ${borderRadius.deca};
+    `}
+  `}
+  overflow: hidden;
+`;
+exports.ModalContent = ModalContent;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["isWeb","Platform","OS","Backdrop","PressableSurface","theme","miscellaneous","overlay","ModalContent","styled","View","borderRadius","micro","deca"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAEA,MAAMA,KAAK,GAAGC,yBAASC,EAAT,KAAgB,KAA9B;AAEO,MAAMC,QAAQ,GAAG,qBAAOC,2BAAP,CAA8C;AACtE,IAAI,CAAC;AAAEC,EAAAA;AAAF,CAAD,KACAL,KAAK,GACD,gBAAI;AACZ;AACA;AACA,8BAA8B,yBAASK,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SANS,GAOD,gBAAI;AACZ;AACA,8BAA8B,yBAASF,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SAAU;AACV,CAdO;;AAgBA,MAAMC,YAAY,GAAGC,gBAAOC,IAA0B;AAC7D;AACA,IAAI,CAAC;AAAEL,EAAAA,KAAK,EAAE;AAAEM,IAAAA;AAAF;AAAT,CAAD,KAAiC,gBAAI;AACzC,MAAMX,KAAK,GACF;AACT,uBAAuBW,YAAY,CAACC,KAAM;AAC1C,KAHW,GAIF;AACT,gCAAgCD,YAAY,CAACE,IAAK;AAClD,iCAAiCF,YAAY,CAACE,IAAK;AACnD,KAAM;AACN,GAAI;AACJ;AACA,CAbO","sourcesContent":["import styled, { css } from \"@emotion/native\";\nimport { hex2rgba, PressableSurface, StyleProps } from \"@tecsinapse/react-core\";\nimport { Platform } from \"react-native\";\n\nconst isWeb = Platform.OS === 'web';\n\nexport const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`\n  ${({ theme }) =>\n    isWeb\n      ? css`\n          justify-content: center;\n          align-items: center;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100vh;\n        `\n      : css`\n          justify-content: flex-end;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100%;\n        `}\n`;\n\nexport const ModalContent = styled.View<Partial<StyleProps>>`\n  background-color: transparent;\n  ${({ theme: { borderRadius } }) => css`\n    ${isWeb\n      ? `\n      border-radius: ${borderRadius.micro};\n    `\n      : `\n      border-top-left-radius: ${borderRadius.deca};\n      border-top-right-radius: ${borderRadius.deca};\n    `}\n  `}\n  overflow: hidden;\n`;\n"],"file":"styled.js"}

package/dist/components/molecules/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,3 @@
+import { DateTimePickerProps } from '@tecsinapse/react-core';
+import { FC } from 'react';
+export declare const DateTimePicker: FC<DateTimePickerProps>;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateTimePicker = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = require("./Modal");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const DateTimePicker = ({ ...rest
+}) => {
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const show = (0, _react.useCallback)(() => setVisible(true), []);
+  const close = (0, _react.useCallback)(() => setVisible(false), []);
+  return _react.default.createElement(_reactCore.DateTimePicker, _extends({}, rest, {
+    requestShowSelector: show,
+    requestCloseSelector: close,
+    renderSelector: selector => _react.default.createElement(_Modal.Modal, {
+      animationType: "fade",
+      visible: visible,
+      onRequestClose: close
+    }, selector)
+  }));
+};
+
+exports.DateTimePicker = DateTimePicker;
+//# sourceMappingURL=DateTimePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","rest","visible","setVisible","show","close","selector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;AAEO,MAAMA,cAAuC,GAAG,CAAC,EAAE,GAAGC;AAAL,CAAD,KAAiB;AAEpE,QAAM,CAAEC,OAAF,EAAWC,UAAX,IAA0B,qBAAS,KAAT,CAAhC;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,SACI,6BAAC,yBAAD,eACQF,IADR;AAEI,IAAA,mBAAmB,EAAEG,IAFzB;AAGI,IAAA,oBAAoB,EAAEC,KAH1B;AAII,IAAA,cAAc,EAAGC,QAAD,IACZ,6BAAC,YAAD;AAAO,MAAA,aAAa,EAAC,MAArB;AAA4B,MAAA,OAAO,EAAEJ,OAArC;AAA8C,MAAA,cAAc,EAAEG;AAA9D,OACKC,QADL;AALR,KADJ;AAYH,CAlBM","sourcesContent":["import {\n    DateTimePicker as DateTimePickerCore,\n    DateTimePickerProps\n} from '@tecsinapse/react-core';\nimport React, { FC, useCallback, useState } from 'react';\nimport { Modal } from './Modal';\n\nexport const DateTimePicker: FC<DateTimePickerProps> = ({ ...rest }) => {\n\n    const [ visible, setVisible ] = useState(false)\n    const show = useCallback(() => setVisible(true), [])\n    const close = useCallback(() => setVisible(false), [])\n\n    return (\n        <DateTimePickerCore\n            {...rest}\n            requestShowSelector={show}\n            requestCloseSelector={close}\n            renderSelector={(selector) => (\n                <Modal animationType='fade' visible={visible} onRequestClose={close}>\n                    {selector}\n                </Modal>\n            )}\n        />\n    );\n};\n"],"file":"DateTimePicker.js"}

package/dist/components/molecules/DateTimePicker/Modal.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const Modal: React.FC<any>;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactNativeWeb = require("react-native-web");
+
+var _styled = require("./styled");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Component = ({
+  onRequestClose,
+  onChange,
+  children,
+  ...rest
+}) => {
+  return React.createElement(_reactNativeWeb.Modal, _extends({
+    transparent: true,
+    hardwareAccelerated: true,
+    statusBarTranslucent: true
+  }, rest, {
+    onRequestClose: onRequestClose
+  }), React.createElement(_styled.Backdrop, {
+    onPress: onRequestClose,
+    effect: "none"
+  }, React.createElement(_styled.ModalContent, null, children)));
+};
+
+const Modal = Component;
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.js.map

package/dist/components/molecules/DateTimePicker/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/Modal.tsx"],"names":["Component","onRequestClose","onChange","children","rest","Modal"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,SAAuD,GAAG,CAAC;AAC/DC,EAAAA,cAD+D;AAE/DC,EAAAA,QAF+D;AAG/DC,EAAAA,QAH+D;AAI/D,KAAGC;AAJ4D,CAAD,KAK1D;AAEJ,SACE,oBAAC,qBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMA,IAJN;AAKE,IAAA,cAAc,EAAEH;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,oBAAD,QACGE,QADH,CADF,CAPF,CADF;AAeD,CAtBD;;AAwBO,MAAME,KAAK,GAAGL,SAAd","sourcesContent":["import { DateTimeSelectorProps } from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { Backdrop, ModalContent } from './styled';\n\nconst Component: React.FC<DateTimeSelectorProps & ModalProps> = ({\n  onRequestClose,\n  onChange,\n  children,\n  ...rest\n}) => {\n\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      statusBarTranslucent\n      {...rest}\n      onRequestClose={onRequestClose}\n    >\n      <Backdrop onPress={onRequestClose} effect=\"none\">\n        <ModalContent>\n          {children}\n        </ModalContent>\n      </Backdrop>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}

package/dist/components/molecules/DateTimePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DateTimePicker';

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DateTimePicker = require("./DateTimePicker");
+
+Object.keys(_DateTimePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DateTimePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DateTimePicker[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/DateTimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './DateTimePicker'"],"file":"index.js"}

package/dist/components/molecules/DateTimePicker/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Backdrop: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<any> | undefined;
+}>;
+export declare const ModalContent: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalContent = exports.Backdrop = void 0;
+
+var _native = _interopRequireWildcard(require("@emotion/native"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _reactNativeWeb = require("react-native-web");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const isWeb = _reactNativeWeb.Platform.OS === 'web';
+const Backdrop = (0, _native.default)(_reactCore.PressableSurface)`
+  ${isWeb ? (0, _native.css)`
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.5);
+        height: 100vh;
+      ` : (0, _native.css)`
+        justify-content: flex-end;
+        background-color: rgba(0, 0, 0, 0.5);
+        height: 100%;
+      `}
+`;
+exports.Backdrop = Backdrop;
+const ModalContent = _native.default.View`
+  background-color: transparent;
+  ${({
+  theme: {
+    borderRadius
+  }
+}) => (0, _native.css)`
+    ${isWeb ? `
+      width: ${(0, _reactCore.RFValueStr)('375px')};
+      border-radius: ${borderRadius.micro};
+    ` : `
+      border-top-left-radius: ${borderRadius.deca};
+      border-top-right-radius: ${borderRadius.deca};
+    `}
+  `}
+  overflow: hidden;
+`;
+exports.ModalContent = ModalContent;
+//# sourceMappingURL=styled.js.map

package/dist/components/molecules/DateTimePicker/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/styled.ts"],"names":["isWeb","Platform","OS","Backdrop","PressableSurface","ModalContent","styled","View","theme","borderRadius","micro","deca"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAEA,MAAMA,KAAK,GAAGC,yBAASC,EAAT,KAAgB,KAA9B;AAEO,MAAMC,QAAQ,GAAG,qBAAOC,2BAAP,CAA8C;AACtE,IAAIJ,KAAK,GACH,gBAAI;AACV;AACA;AACA;AACA;AACA,OANS,GAOH,gBAAI;AACV;AACA;AACA;AACA,OAAQ;AACR,CAbO;;AAeA,MAAMK,YAAY,GAAGC,gBAAOC,IAA0B;AAC7D;AACA,IAAI,CAAC;AAAEC,EAAAA,KAAK,EAAE;AAAEC,IAAAA;AAAF;AAAT,CAAD,KAAiC,gBAAI;AACzC,MAAMT,KAAK,GACF;AACT,eAAe,2BAAW,OAAX,CAAoB;AACnC,uBAAuBS,YAAY,CAACC,KAAM;AAC1C,KAJW,GAKF;AACT,gCAAgCD,YAAY,CAACE,IAAK;AAClD,iCAAiCF,YAAY,CAACE,IAAK;AACnD,KAAM;AACN,GAAI;AACJ;AACA,CAdO","sourcesContent":["import styled, { css } from \"@emotion/native\";\nimport { DateTimeSelectorProps, PressableSurface, RFValueStr, StyleProps } from \"@tecsinapse/react-core\";\nimport { FC } from \"react\";\nimport { Platform } from \"react-native\";\n\nconst isWeb = Platform.OS === 'web';\n\nexport const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`\n  ${isWeb\n    ? css`\n        justify-content: center;\n        align-items: center;\n        background-color: rgba(0, 0, 0, 0.5);\n        height: 100vh;\n      `\n    : css`\n        justify-content: flex-end;\n        background-color: rgba(0, 0, 0, 0.5);\n        height: 100%;\n      `}\n`;\n\nexport const ModalContent = styled.View<Partial<StyleProps>>`\n  background-color: transparent;\n  ${({ theme: { borderRadius } }) => css`\n    ${isWeb\n      ? `\n      width: ${RFValueStr('375px')};\n      border-radius: ${borderRadius.micro};\n    `\n      : `\n      border-top-left-radius: ${borderRadius.deca};\n      border-top-right-radius: ${borderRadius.deca};\n    `}\n  `}\n  overflow: hidden;\n`;"],"file":"styled.js"}

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

@@ -29,7 +29,7 @@ const StyledContainerMenu = (0, _styled.default)('div')`
   align-items: center;
   border-bottom: ${({
   theme
-}) => `${theme.borderWidth.pico} solid ${(0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)}`};
+}) => `${theme.borderWidth.pico} solid ${(0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)}`};
   width: 100%;
   padding-bottom: ${({
   theme

package/dist/components/molecules/Menubar/MenuBlock/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/styled.ts"],"names":["StyledLeftComponent","theme","spacing","mili","StyledRightComponent","StyledContainerMenu","borderWidth","pico","miscellaneous","shadow","StyledContainerItems","StyledText","font","color","orange"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,mBAAmB,GAAG,qBAAO,KAAP,CAAmC;AACtE,kBAAkB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACpD,CAFO;;AAIA,MAAMC,oBAAoB,GAAG,qBAAO,KAAP,CAAmC;AACvE,iBAAiB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACnD,CAFO;;AAIA,MAAME,mBAAmB,GAAG,qBAAO,KAAP,CAAmC;AACtE;AACA;AACA;AACA,mBAAmB,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KACd,GAAEA,KAAK,CAACK,WAAN,CAAkBC,IAAK,UAAS,yBACjCN,KAAK,CAACO,aAAN,CAAoBC,MADa,EAEjC,IAFiC,CAGjC,EAAE;AACR;AACA,oBAAoB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACtD,CAXO;;AAaA,MAAMO,oBAAoB,GAAG,qBAAO,KAAP,CAAmC;AACvE;AACA;AACA,CAHO;;AAKA,MAAMC,UAAU,GAAG,qBAAO,MAAP,CAAoC;AAC9D;AACA,aAAa,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,IAAN,CAAWC,KAAX,CAAiBC,MAAO;AACpD;AACA,CAJO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledLeftComponent = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledRightComponent = styled('div')<Partial<StyleProps>>`\n  margin-left: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledContainerMenu = styled('div')<Partial<StyleProps>>`\n  flex-direction: row;\n  display: flex;\n  align-items: center;\n  border-bottom: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${hex2rgba(\n      theme.miscellaneous.shadow,\n      0.08\n    )}`};\n  width: 100%;\n  padding-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledContainerItems = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledText = styled('span')<Partial<StyleProps>>`\n  &:hover {\n    color: ${({ theme }) => theme.font.color.orange};\n  }\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Menubar/MenuBlock/styled.ts"],"names":["StyledLeftComponent","theme","spacing","mili","StyledRightComponent","StyledContainerMenu","borderWidth","pico","miscellaneous","shadow","StyledContainerItems","StyledText","font","color","orange"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,MAAMA,mBAAmB,GAAG,qBAAO,KAAP,CAAmC;AACtE,kBAAkB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACpD,CAFO;;AAIA,MAAMC,oBAAoB,GAAG,qBAAO,KAAP,CAAmC;AACvE,iBAAiB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACnD,CAFO;;AAIA,MAAME,mBAAmB,GAAG,qBAAO,KAAP,CAAmC;AACtE;AACA;AACA;AACA,mBAAmB,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KACd,GAAEA,KAAK,CAACK,WAAN,CAAkBC,IAAK,UAAS,yBACjCN,KAAK,CAACO,aAAN,CAAoBC,MADa,EAEjC,IAFiC,CAGjC,EAAE;AACR;AACA,oBAAoB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACtD,CAXO;;AAaA,MAAMO,oBAAoB,GAAG,qBAAO,KAAP,CAAmC;AACvE;AACA;AACA,CAHO;;AAKA,MAAMC,UAAU,GAAG,qBAAO,MAAP,CAAoC;AAC9D;AACA,aAAa,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,IAAN,CAAWC,KAAX,CAAiBC,MAAO;AACpD;AACA,CAJO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledLeftComponent = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledRightComponent = styled('div')<Partial<StyleProps>>`\n  margin-left: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledContainerMenu = styled('div')<Partial<StyleProps>>`\n  flex-direction: row;\n  display: flex;\n  align-items: center;\n  border-bottom: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${hex2rgba(\n      theme.miscellaneous.shadow,\n      0.05\n    )}`};\n  width: 100%;\n  padding-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n\nexport const StyledContainerItems = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledText = styled('span')<Partial<StyleProps>>`\n  &:hover {\n    color: ${({ theme }) => theme.font.color.orange};\n  }\n`;\n"],"file":"styled.js"}

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

@@ -21,7 +21,7 @@ const StyledSearchItemContainer = (0, _styled.default)('div')`
 }) => `${theme.spacing.mili} 0 ${theme.spacing.centi} 0`};
   border-top: ${({
   theme
-}) => `${theme.borderWidth.pico} solid ${(0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)}`};
+}) => `${theme.borderWidth.pico} solid ${(0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)}`};
 `;
 exports.StyledSearchItemContainer = StyledSearchItemContainer;
 const HighlightText = (0, _native.default)(_reactCore.Text)`

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Menubar/SearchResultItem/styled.ts"],"names":["StyledSearchItemContainer","theme","spacing","mili","centi","borderWidth","pico","miscellaneous","shadow","HighlightText","Text","font","color","orange"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEO,MAAMA,yBAAyB,GAAG,qBAAO,KAAP,CAAmC;AAC5E;AACA;AACA,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACC,OAAN,CAAcC,IAAK,MAAKF,KAAK,CAACC,OAAN,CAAcE,KAAM,IAAI;AAC/E,gBAAgB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KACX,GAAEA,KAAK,CAACI,WAAN,CAAkBC,IAAK,UAAS,yBACjCL,KAAK,CAACM,aAAN,CAAoBC,MADa,EAEjC,IAFiC,CAGjC,EAAE;AACR,CATO;;AAWA,MAAMC,aAAa,GAAG,qBAAaC,eAAb,CAAwC;AACrE;AACA,2BAA2B,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACU,IAAN,CAAWC,KAAX,CAAiBC,MAAO;AAClE,CAHO","sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps, Text } from '@tecsinapse/react-core';\n\nexport const StyledSearchItemContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => `${theme.spacing.mili} 0 ${theme.spacing.centi} 0`};\n  border-top: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${hex2rgba(\n      theme.miscellaneous.shadow,\n      0.08\n    )}`};\n`;\n\nexport const HighlightText = nativeStyled(Text)<Partial<StyleProps>>`\n  text-decoration: underline;\n  text-decoration-color: ${({ theme }) => theme.font.color.orange};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Menubar/SearchResultItem/styled.ts"],"names":["StyledSearchItemContainer","theme","spacing","mili","centi","borderWidth","pico","miscellaneous","shadow","HighlightText","Text","font","color","orange"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEO,MAAMA,yBAAyB,GAAG,qBAAO,KAAP,CAAmC;AAC5E;AACA;AACA,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACC,OAAN,CAAcC,IAAK,MAAKF,KAAK,CAACC,OAAN,CAAcE,KAAM,IAAI;AAC/E,gBAAgB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KACX,GAAEA,KAAK,CAACI,WAAN,CAAkBC,IAAK,UAAS,yBACjCL,KAAK,CAACM,aAAN,CAAoBC,MADa,EAEjC,IAFiC,CAGjC,EAAE;AACR,CATO;;AAWA,MAAMC,aAAa,GAAG,qBAAaC,eAAb,CAAwC;AACrE;AACA,2BAA2B,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACU,IAAN,CAAWC,KAAX,CAAiBC,MAAO;AAClE,CAHO","sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps, Text } from '@tecsinapse/react-core';\n\nexport const StyledSearchItemContainer = styled('div')<Partial<StyleProps>>`\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => `${theme.spacing.mili} 0 ${theme.spacing.centi} 0`};\n  border-top: ${({ theme }) =>\n    `${theme.borderWidth.pico} solid ${hex2rgba(\n      theme.miscellaneous.shadow,\n      0.05\n    )}`};\n`;\n\nexport const HighlightText = nativeStyled(Text)<Partial<StyleProps>>`\n  text-decoration: underline;\n  text-decoration-color: ${({ theme }) => theme.font.color.orange};\n`;\n"],"file":"styled.js"}

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

@@ -34,9 +34,6 @@ const StyledIconInput = (0, _styled.default)('div')`
 exports.StyledIconInput = StyledIconInput;
 const StyledMenuBar = (0, _styled.default)('div')`
     position: relative;
-    z-index: ${({
-  theme
-}) => theme.zIndex.header};
     background-color: ${({
   theme
 }) => theme.miscellaneous.surfaceColor};
@@ -48,7 +45,7 @@ const StyledMenuBar = (0, _styled.default)('div')`
 }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};
     box-shadow: 0px 2px 8px ${({
   theme
-}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};
+}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)};
 `;
 exports.StyledMenuBar = StyledMenuBar;
 const StyledMenuButton = (0, _native.default)(_Button.Button)`
@@ -75,7 +72,7 @@ exports.StyledMenuButton = StyledMenuButton;
 const StyledContainerOpenMenu = (0, _styled.default)('div')`
     border-top: ${({
   theme
-}) => `${theme.borderWidth.pico} solid ${(0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)}`};
+}) => `${theme.borderWidth.pico} solid ${(0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)}`};
     background-color: ${({
   theme
 }) => theme.miscellaneous.surfaceColor}; 
@@ -87,7 +84,7 @@ const StyledContainerOpenMenu = (0, _styled.default)('div')`
 }) => theme.borderRadius.mili};
     box-shadow: 0px 2px 8px ${({
   theme
-}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};
+}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)};
     padding-right: 8vw;
     padding-left: 8vw;
     padding-top: ${({

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Menubar/styled.ts"],"names":["StyledIconInput","theme","spacing","centi","StyledMenuBar","zIndex","header","miscellaneous","surfaceColor","deca","kilo","shadow","StyledMenuButton","Button","StyledContainerOpenMenu","borderWidth","pico","borderRadius","mili","mega","StyledInput","Input","StyledInputContainer","StyledSearchResultsContainer","StyledSearchTextContainer"],"mappings":"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","sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { Button } from '../../atoms/Button';\nimport { Input } from '../../atoms/Input';\n\nexport const StyledIconInput = webStyled('div')<Partial<StyleProps>>`\n  padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n  padding-left: ${({ theme }) => theme.spacing.centi};\n  padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);\n  padding-right: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`\n    position: relative;\n    z-index: ${({ theme }) => theme.zIndex.header};\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.08)};\n`;\n\nexport const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`\n    padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    margin-right: ${({ theme }) => theme.spacing.kilo};\n    & * {\n      user-select: none;\n    }\n`;\n\nexport const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`\n    border-top: ${({ theme }) =>\n      `${theme.borderWidth.pico} solid ${hex2rgba(\n        theme.miscellaneous.shadow,\n        0.08\n      )}`};\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; \n    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; \n    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.08)};\n    padding-right: 8vw;\n    padding-left: 8vw;\n    padding-top: ${({ theme }) => theme.spacing.kilo};\n    padding-bottom: ${({ theme }) => theme.spacing.mega};\n    position: absolute;\n    z-index: ${({ theme }) => theme.zIndex.header + 1};\n    width: -webkit-fill-available;\n    width: -moz-available;\n`;\n\nexport const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`\n     width: 100%;\n`;\n\nexport const StyledInputContainer = webStyled('div')`\n    display: flex;\n    flex: 1;\n`;\n\nexport const StyledSearchResultsContainer = webStyled('div')`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchTextContainer = webStyled('div')<Partial<StyleProps>>`\n    margin-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Menubar/styled.ts"],"names":["StyledIconInput","theme","spacing","centi","StyledMenuBar","miscellaneous","surfaceColor","deca","kilo","shadow","StyledMenuButton","Button","StyledContainerOpenMenu","borderWidth","pico","borderRadius","mili","mega","zIndex","header","StyledInput","Input","StyledInputContainer","StyledSearchResultsContainer","StyledSearchTextContainer"],"mappings":"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","sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { Button } from '../../atoms/Button';\nimport { Input } from '../../atoms/Input';\n\nexport const StyledIconInput = webStyled('div')<Partial<StyleProps>>`\n  padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n  padding-left: ${({ theme }) => theme.spacing.centi};\n  padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);\n  padding-right: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`\n    position: relative;\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.05)};\n`;\n\nexport const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`\n    padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    margin-right: ${({ theme }) => theme.spacing.kilo};\n    & * {\n      user-select: none;\n    }\n`;\n\nexport const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`\n    border-top: ${({ theme }) =>\n      `${theme.borderWidth.pico} solid ${hex2rgba(\n        theme.miscellaneous.shadow,\n        0.05\n      )}`};\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; \n    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; \n    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.05)};\n    padding-right: 8vw;\n    padding-left: 8vw;\n    padding-top: ${({ theme }) => theme.spacing.kilo};\n    padding-bottom: ${({ theme }) => theme.spacing.mega};\n    position: absolute;\n    z-index: ${({ theme }) => theme.zIndex.header + 1};\n    width: -webkit-fill-available;\n    width: -moz-available;\n`;\n\nexport const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`\n     width: 100%;\n`;\n\nexport const StyledInputContainer = webStyled('div')`\n    display: flex;\n    flex: 1;\n`;\n\nexport const StyledSearchResultsContainer = webStyled('div')`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchTextContainer = webStyled('div')<Partial<StyleProps>>`\n    margin-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n"],"file":"styled.js"}

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

@@ -40,7 +40,7 @@ const StyledContainerDropdown = (0, _styled.default)('div')`
   box-shadow: 0 2px 8px
     ${({
   theme
-}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.08)};
+}) => (0, _reactCore.hex2rgba)(theme.miscellaneous.shadow, 0.05)};
   position: absolute;
   padding-top: ${({
   theme,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/styled.ts"],"names":["anchorBottom","theme","anchor","spacing","centi","anchorTop","StyledContainerDropdown","miscellaneous","surfaceColor","borderRadius","mili","shadow","hideSearchBar","deca","zIndex","select","OptionsContainer","lengthOptions","color","secondary","light","primary","SearchBarContainer","PaddedContainer","StyledContainerCheckAll","xlight","medium","StyledSpan","font","dark","StyledContainerTextLabel"],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { SelectProps } from '../Select';\nimport { css } from '@emotion/react';\n\ntype InjectedProps = Partial<\n  StyleProps &\n    SelectProps<unknown, 'single' | 'multi'> & { lengthOptions: number }\n>;\n\nconst anchorBottom = ({\n  theme,\n  anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n  anchor === 'bottom' &&\n  css`\n    margin-top: ${theme.spacing.centi};\n    top: 100%;\n  `;\n\nconst anchorTop = ({\n  theme,\n  anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n  anchor === 'top' &&\n  css`\n    margin-bottom: ${theme.spacing.centi};\n    bottom: 100%;\n  `;\n\nexport const StyledContainerDropdown = styled('div')<InjectedProps>`\n  width: 100%;\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0 2px 8px\n    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.08)};\n  position: absolute;\n  padding-top: ${({\n    theme,\n    hideSearchBar,\n  }: StyleProps & Partial<SelectProps<unknown, 'single' | 'multi'>>) =>\n    !hideSearchBar ? `${theme.spacing.deca}` : '0px'};\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n  ${anchorTop}\n  ${anchorBottom}\n`;\n\nexport const OptionsContainer = styled('div')<InjectedProps>`\n  max-height: 250px;\n  top: 100%;\n  overflow-y: ${({ lengthOptions = 0 }: InjectedProps) =>\n    lengthOptions > 5 ? 'scroll' : 'hidden'};\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: ${({ theme }: StyleProps) => theme.borderRadius.centi};\n    background-color: ${({ theme }: StyleProps) => theme.color.secondary.light};\n  }\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ${({ theme }: StyleProps) => theme.color.primary.light};\n  },\n`;\n\nexport const SearchBarContainer = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n`;\n\nexport const PaddedContainer = styled('div')<Partial<StyleProps>>`\n  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\n`;\n\nexport const StyledContainerCheckAll = styled(PaddedContainer)<\n  Partial<StyleProps>\n>`\n  flex-direction: row;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: ${({ theme }) => theme.color.primary.xlight};\n  }\n  &:hover span {\n    color: ${({ theme }) => theme.color.primary.medium};\n  }\n`;\n\nexport const StyledSpan = styled('span')<Partial<StyleProps>>`\n  color: ${({ theme }) => theme.font.color.dark};\n  padding: ${({ theme }) => `${theme.spacing.mili} 0px`};\n`;\n\nexport const StyledContainerTextLabel = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../../src/components/molecules/Select/Dropdown/styled.ts"],"names":["anchorBottom","theme","anchor","spacing","centi","anchorTop","StyledContainerDropdown","miscellaneous","surfaceColor","borderRadius","mili","shadow","hideSearchBar","deca","zIndex","select","OptionsContainer","lengthOptions","color","secondary","light","primary","SearchBarContainer","PaddedContainer","StyledContainerCheckAll","xlight","medium","StyledSpan","font","dark","StyledContainerTextLabel"],"mappings":"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","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { SelectProps } from '../Select';\nimport { css } from '@emotion/react';\n\ntype InjectedProps = Partial<\n  StyleProps &\n    SelectProps<unknown, 'single' | 'multi'> & { lengthOptions: number }\n>;\n\nconst anchorBottom = ({\n  theme,\n  anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n  anchor === 'bottom' &&\n  css`\n    margin-top: ${theme.spacing.centi};\n    top: 100%;\n  `;\n\nconst anchorTop = ({\n  theme,\n  anchor,\n}: StyleProps & Omit<InjectedProps, 'theme'>) =>\n  anchor === 'top' &&\n  css`\n    margin-bottom: ${theme.spacing.centi};\n    bottom: 100%;\n  `;\n\nexport const StyledContainerDropdown = styled('div')<InjectedProps>`\n  width: 100%;\n  background-color: ${({ theme }: StyleProps) =>\n    theme.miscellaneous.surfaceColor};\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};\n  box-shadow: 0 2px 8px\n    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.05)};\n  position: absolute;\n  padding-top: ${({\n    theme,\n    hideSearchBar,\n  }: StyleProps & Partial<SelectProps<unknown, 'single' | 'multi'>>) =>\n    !hideSearchBar ? `${theme.spacing.deca}` : '0px'};\n  padding-bottom: ${({ theme }: StyleProps) => theme.spacing.mili};\n  z-index: ${({ theme }: StyleProps) => theme.zIndex.select};\n  ${anchorTop}\n  ${anchorBottom}\n`;\n\nexport const OptionsContainer = styled('div')<InjectedProps>`\n  max-height: 250px;\n  top: 100%;\n  overflow-y: ${({ lengthOptions = 0 }: InjectedProps) =>\n    lengthOptions > 5 ? 'scroll' : 'hidden'};\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n  ::-webkit-scrollbar-thumb {\n    border-radius: ${({ theme }: StyleProps) => theme.borderRadius.centi};\n    background-color: ${({ theme }: StyleProps) => theme.color.secondary.light};\n  }\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ${({ theme }: StyleProps) => theme.color.primary.light};\n  },\n`;\n\nexport const SearchBarContainer = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n`;\n\nexport const PaddedContainer = styled('div')<Partial<StyleProps>>`\n  padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};\n`;\n\nexport const StyledContainerCheckAll = styled(PaddedContainer)<\n  Partial<StyleProps>\n>`\n  flex-direction: row;\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  &:hover {\n    background-color: ${({ theme }) => theme.color.primary.xlight};\n  }\n  &:hover span {\n    color: ${({ theme }) => theme.color.primary.medium};\n  }\n`;\n\nexport const StyledSpan = styled('span')<Partial<StyleProps>>`\n  color: ${({ theme }) => theme.font.color.dark};\n  padding: ${({ theme }) => `${theme.spacing.mili} 0px`};\n`;\n\nexport const StyledContainerTextLabel = styled('div')<Partial<StyleProps>>`\n  padding-left: ${({ theme }) => theme.spacing.mili};\n  width: 100%;\n  display: flex;\n  overflow: hidden;\n`;\n"],"file":"styled.js"}

package/dist/index.d.ts

@@ -16,3 +16,5 @@ export { Modal, ModalProps } from './components/atoms/Modal';
 export { TextArea, TextAreaProps } from './components/molecules/TextArea';
 export { Tooltip, ITooltip } from './components/atoms/Tooltip';
 export * from './hooks';
+export { DatePicker } from './components/molecules/DatePicker';
+export { DateTimePicker } from './components/molecules/DateTimePicker';

package/dist/index.js

@@ -41,7 +41,9 @@ var _exportNames = {
   TextArea: true,
   TextAreaProps: true,
   Tooltip: true,
-  ITooltip: true
+  ITooltip: true,
+  DatePicker: true,
+  DateTimePicker: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -271,6 +273,18 @@ Object.defineProperty(exports, "ITooltip", {
     return _Tooltip.ITooltip;
   }
 });
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePicker;
+  }
+});
+Object.defineProperty(exports, "DateTimePicker", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePicker.DateTimePicker;
+  }
+});
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -332,6 +346,10 @@ Object.keys(_hooks).forEach(function (key) {
   });
 });
 
+var _DatePicker = require("./components/molecules/DatePicker");
+
+var _DateTimePicker = require("./components/molecules/DateTimePicker");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n  default as Badge,\n  BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n  Button,\n  useMouseHover,\n  WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  InputPassword,\n  InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport {\n  Menubar,\n  MenubarProps,\n  MenubarOptionsType,\n  MenubarItemsOptions,\n  MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n  Breadcrumbs,\n  BreadcrumbsProps,\n  BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n  DataGrid,\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport { TextArea, TextAreaProps } from './components/molecules/TextArea';\nexport { Tooltip, ITooltip } from './components/atoms/Tooltip';\nexport * from './hooks';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n  default as Badge,\n  BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n  Button,\n  useMouseHover,\n  WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  InputPassword,\n  InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport {\n  Menubar,\n  MenubarProps,\n  MenubarOptionsType,\n  MenubarItemsOptions,\n  MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n  Breadcrumbs,\n  BreadcrumbsProps,\n  BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n  DataGrid,\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport { TextArea, TextAreaProps } from './components/molecules/TextArea';\nexport { Tooltip, ITooltip } from './components/atoms/Tooltip';\nexport * from './hooks';\nexport { DatePicker } from './components/molecules/DatePicker'\nexport { DateTimePicker } from './components/molecules/DateTimePicker'"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.12.6",
+  "version": "1.12.10",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@tecsinapse/react-core": "^1.12.6",
+    "@tecsinapse/react-core": "^1.12.9",
     "@types/react-native": "^0.64.4",
     "react-native-vector-icons": "^8.1.0",
     "react-transition-group": "^4.4.2"
@@ -33,5 +33,5 @@
     "react-dom": ">=16.8.0",
     "react-native-web": "^0.17.1"
   },
-  "gitHead": "5005537c38efef79cdd69a324563821e01e81f99"
+  "gitHead": "d09f3fbcff7c29fba25ac33ba95142aac0b1efa7"
 }

package/src/components/atoms/Modal/styled.ts

@@ -13,5 +13,5 @@ export const ModalContainer = styled('div')<Partial<StyleProps>>`
   padding: ${({ theme }) => theme.spacing.kilo};
   display: flex;
   box-shadow: 0 2px 8px
-    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.08)};
+    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
 `;

package/src/components/atoms/Table/Container/styled.ts

@@ -5,6 +5,6 @@ export const TContainer = styled('div')<Partial<StyleProps>>`
   background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
   border-radius: ${({ theme }) => theme.borderRadius.mili};
   box-shadow: 0 2px 8px
-    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.08)};
+    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
   padding: ${({ theme }) => `${theme.spacing.deca} 0`};
 `;

package/src/components/atoms/Table/Row/styled.ts

@@ -3,6 +3,6 @@ import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
 
 export const TRow = styled('tr')<Partial<StyleProps>>`
   box-shadow: 0 2px 8px
-    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.08)};
+    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
   border-radius: ${({ theme }) => theme.borderRadius.mili};
 `;

package/src/components/molecules/Breadcrumbs/styled.ts

@@ -9,5 +9,5 @@ export const StyledContainerBreadcrumbs = styled('div')<Partial<StyleProps>>`
   padding: ${({ theme }) => `${theme.spacing.mili} ${theme.spacing.deca}`};
   border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};
   box-shadow: 0px 2px 8px
-    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.08)};
+    ${({ theme }) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
 `;

package/src/components/molecules/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,44 @@
+import { Story } from '@storybook/react';
+import { DatePickerProps, DateRange } from '@tecsinapse/react-core';
+import { ptBR } from 'date-fns/locale';
+import React from 'react';
+import { DatePicker } from './DatePicker';
+
+export default {
+  title: 'Web/Date Picker',
+  component: DatePicker,
+};
+
+const Template: Story<DatePickerProps<'range'>> = args => {
+  const [value, setValue] = React.useState<DateRange>();
+
+  return (
+    <DatePicker {...args} value={value} onChange={setValue} locale={ptBR} />
+  );
+};
+
+export const Range = Template.bind({});
+
+Range.args = {
+  label: 'Select date',
+  placeholder: 'Select date',
+  type: 'range',
+  closeOnPick: true,
+};
+
+const TemplateDay: Story<DatePickerProps<'day'>> = args => {
+  const [value, setValue] = React.useState<Date>();
+
+  return (
+    <DatePicker {...args} value={value} onChange={setValue} locale={ptBR} />
+  );
+};
+
+export const Day = TemplateDay.bind({});
+
+Day.args = {
+  label: 'Select date',
+  placeholder: 'Select date',
+  type: 'day',
+  closeOnPick: true,
+};

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -0,0 +1,27 @@
+import {
+  Calendar,
+  DatePicker as DatePickerCore, DatePickerProps, SelectionType
+} from '@tecsinapse/react-core';
+import React, { useCallback, useState } from 'react';
+import { Modal } from './Modal';
+
+export const DatePicker = <T extends SelectionType>({ ...rest }: Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>): JSX.Element => {
+
+  const [ visible, setVisible ] = useState(false)
+  const show = useCallback(() => setVisible(true), [])
+  const close = useCallback(() => setVisible(false), [])
+  
+  return (
+    <DatePickerCore
+      {...rest}
+      CalendarComponent={Calendar}
+      requestShowCalendar={show}
+      requestCloseCalendar={close}
+      renderCalendar={(calendar) => (
+        <Modal animationType='fade' visible={visible} onRequestClose={close}>
+          {calendar}
+        </Modal>
+      )}
+    />
+  );
+};

package/src/components/molecules/DatePicker/Modal.tsx

@@ -0,0 +1,26 @@
+import { CalendarProps, PressableSurface, SelectionType } from '@tecsinapse/react-core';
+import * as React from 'react';
+import { Modal as RNModal, ModalProps } from 'react-native';
+import { Backdrop, ModalContent } from './styled';
+
+const Component = <T extends SelectionType>({ onRequestClose, children, ...modalProps }: CalendarProps<T> & ModalProps & { children: JSX.Element }): JSX.Element => {
+  return (
+    <RNModal
+      transparent
+      hardwareAccelerated
+      statusBarTranslucent
+      {...modalProps}
+      onRequestClose={onRequestClose}
+    >
+      <Backdrop onPress={onRequestClose} effect="none">
+        <PressableSurface>
+          <ModalContent>
+            {children}
+          </ModalContent>
+        </PressableSurface>
+      </Backdrop>
+    </RNModal>
+  );
+};
+
+export const Modal = Component;

package/src/components/molecules/DatePicker/index.ts

@@ -0,0 +1 @@
+export * from './DatePicker'

package/src/components/molecules/DatePicker/styled.ts

@@ -0,0 +1,36 @@
+import styled, { css } from "@emotion/native";
+import { hex2rgba, PressableSurface, StyleProps } from "@tecsinapse/react-core";
+import { Platform } from "react-native";
+
+const isWeb = Platform.OS === 'web';
+
+export const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`
+  ${({ theme }) =>
+    isWeb
+      ? css`
+          justify-content: center;
+          align-items: center;
+          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};
+          height: 100vh;
+        `
+      : css`
+          justify-content: flex-end;
+          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};
+          height: 100%;
+        `}
+`;
+
+export const ModalContent = styled.View<Partial<StyleProps>>`
+  background-color: transparent;
+  ${({ theme: { borderRadius } }) => css`
+    ${isWeb
+      ? `
+      border-radius: ${borderRadius.micro};
+    `
+      : `
+      border-top-left-radius: ${borderRadius.deca};
+      border-top-right-radius: ${borderRadius.deca};
+    `}
+  `}
+  overflow: hidden;
+`;

package/src/components/molecules/DateTimePicker/DateTimePicker.stories.tsx

@@ -0,0 +1,27 @@
+import { Story } from '@storybook/react';
+import { DateTimePickerProps } from '@tecsinapse/react-core';
+import { ptBR } from 'date-fns/locale';
+import React from 'react';
+import { DateTimePicker } from './DateTimePicker';
+
+export default {
+  title: 'Web/Date Time Picker',
+  component: DateTimePicker,
+};
+
+const Template: Story<DateTimePickerProps> = ({ ...args }) => {
+  const [value, setValue] = React.useState<Date>();
+
+  return (
+    <DateTimePicker
+      label={'Select date and time'}
+      placeholder={'Select date and time'}
+      mode={'datetime'}
+      value={value}
+      onChange={setValue}
+      locale={ptBR}
+    />
+  );
+};
+
+export const Base = Template.bind({});

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,26 @@
+import {
+    DateTimePicker as DateTimePickerCore,
+    DateTimePickerProps
+} from '@tecsinapse/react-core';
+import React, { FC, useCallback, useState } from 'react';
+import { Modal } from './Modal';
+
+export const DateTimePicker: FC<DateTimePickerProps> = ({ ...rest }) => {
+
+    const [ visible, setVisible ] = useState(false)
+    const show = useCallback(() => setVisible(true), [])
+    const close = useCallback(() => setVisible(false), [])
+
+    return (
+        <DateTimePickerCore
+            {...rest}
+            requestShowSelector={show}
+            requestCloseSelector={close}
+            renderSelector={(selector) => (
+                <Modal animationType='fade' visible={visible} onRequestClose={close}>
+                    {selector}
+                </Modal>
+            )}
+        />
+    );
+};

package/src/components/molecules/DateTimePicker/Modal.tsx

@@ -0,0 +1,30 @@
+import { DateTimeSelectorProps } from '@tecsinapse/react-core';
+import * as React from 'react';
+import { Modal as RNModal, ModalProps } from 'react-native';
+import { Backdrop, ModalContent } from './styled';
+
+const Component: React.FC<DateTimeSelectorProps & ModalProps> = ({
+  onRequestClose,
+  onChange,
+  children,
+  ...rest
+}) => {
+
+  return (
+    <RNModal
+      transparent
+      hardwareAccelerated
+      statusBarTranslucent
+      {...rest}
+      onRequestClose={onRequestClose}
+    >
+      <Backdrop onPress={onRequestClose} effect="none">
+        <ModalContent>
+          {children}
+        </ModalContent>
+      </Backdrop>
+    </RNModal>
+  );
+};
+
+export const Modal = Component;

package/src/components/molecules/DateTimePicker/index.ts

@@ -0,0 +1 @@
+export * from './DateTimePicker'

package/src/components/molecules/DateTimePicker/styled.ts

@@ -0,0 +1,37 @@
+import styled, { css } from "@emotion/native";
+import { DateTimeSelectorProps, PressableSurface, RFValueStr, StyleProps } from "@tecsinapse/react-core";
+import { FC } from "react";
+import { Platform } from "react-native";
+
+const isWeb = Platform.OS === 'web';
+
+export const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`
+  ${isWeb
+    ? css`
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.5);
+        height: 100vh;
+      `
+    : css`
+        justify-content: flex-end;
+        background-color: rgba(0, 0, 0, 0.5);
+        height: 100%;
+      `}
+`;
+
+export const ModalContent = styled.View<Partial<StyleProps>>`
+  background-color: transparent;
+  ${({ theme: { borderRadius } }) => css`
+    ${isWeb
+      ? `
+      width: ${RFValueStr('375px')};
+      border-radius: ${borderRadius.micro};
+    `
+      : `
+      border-top-left-radius: ${borderRadius.deca};
+      border-top-right-radius: ${borderRadius.deca};
+    `}
+  `}
+  overflow: hidden;
+`;

package/src/components/molecules/Menubar/MenuBlock/styled.ts

@@ -16,7 +16,7 @@ export const StyledContainerMenu = styled('div')<Partial<StyleProps>>`
   border-bottom: ${({ theme }) =>
     `${theme.borderWidth.pico} solid ${hex2rgba(
       theme.miscellaneous.shadow,
-      0.08
+      0.05
     )}`};
   width: 100%;
   padding-bottom: ${({ theme }) => theme.spacing.mili};

package/src/components/molecules/Menubar/SearchResultItem/styled.ts

@@ -9,7 +9,7 @@ export const StyledSearchItemContainer = styled('div')<Partial<StyleProps>>`
   border-top: ${({ theme }) =>
     `${theme.borderWidth.pico} solid ${hex2rgba(
       theme.miscellaneous.shadow,
-      0.08
+      0.05
     )}`};
 `;
 

package/src/components/molecules/Menubar/styled.ts

@@ -13,14 +13,13 @@ export const StyledIconInput = webStyled('div')<Partial<StyleProps>>`
 
 export const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`
     position: relative;
-    z-index: ${({ theme }) => theme.zIndex.header};
     background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};
     box-shadow: 0px 2px 8px ${({ theme }) =>
-      hex2rgba(theme.miscellaneous.shadow, 0.08)};
+      hex2rgba(theme.miscellaneous.shadow, 0.05)};
 `;
 
 export const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`
@@ -38,13 +37,13 @@ export const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`
     border-top: ${({ theme }) =>
       `${theme.borderWidth.pico} solid ${hex2rgba(
         theme.miscellaneous.shadow,
-        0.08
+        0.05
       )}`};
     background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; 
     border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; 
     border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};
     box-shadow: 0px 2px 8px ${({ theme }) =>
-      hex2rgba(theme.miscellaneous.shadow, 0.08)};
+      hex2rgba(theme.miscellaneous.shadow, 0.05)};
     padding-right: 8vw;
     padding-left: 8vw;
     padding-top: ${({ theme }) => theme.spacing.kilo};

package/src/components/molecules/Select/Dropdown/styled.ts

@@ -34,7 +34,7 @@ export const StyledContainerDropdown = styled('div')<InjectedProps>`
     theme.miscellaneous.surfaceColor};
   border-radius: ${({ theme }: StyleProps) => theme.borderRadius.mili};
   box-shadow: 0 2px 8px
-    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.08)};
+    ${({ theme }: StyleProps) => hex2rgba(theme.miscellaneous.shadow, 0.05)};
   position: absolute;
   padding-top: ${({
     theme,

package/src/index.ts

@@ -40,3 +40,5 @@ export { Modal, ModalProps } from './components/atoms/Modal';
 export { TextArea, TextAreaProps } from './components/molecules/TextArea';
 export { Tooltip, ITooltip } from './components/atoms/Tooltip';
 export * from './hooks';
+export { DatePicker } from './components/molecules/DatePicker'
+export { DateTimePicker } from './components/molecules/DateTimePicker'