@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/cjs/recipes/ConditionalFilter.stories.js

@@ -1,35 +1,24 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
-
 var _TrashIcon = _interopRequireDefault(require("mdi-react/TrashIcon"));
-
 var _index = require("../index");
-
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Recipes/Conditional Filter'
 };
 exports["default"] = _default;
 var sx = {
-  customChipStyles: {
+  customBadgeStyles: {
     marginRight: 'sm',
     '& > span': {
       textTransform: 'none',
@@ -62,7 +51,6 @@ var sx = {
     color: 'inherit'
   }
 };
-
 var Default = function Default() {
   var allConditions = [{
     field1: 'Family Name',
@@ -92,7 +80,7 @@ var Default = function Default() {
     key: 'Miscellaneous2Field'
   }];
   var trashButton = (0, _react2.jsx)(_index.IconButton, {
-    "aria-label": "deleteButton",
+    "aria-label": "badge.deleteButton",
     sx: {
       alignSelf: 'center'
     }
@@ -104,12 +92,10 @@ var Default = function Default() {
       }
     }
   }));
-
   var _React$useState = _react["default"].useState(false),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      editOverviewVisible = _React$useState2[0],
-      setEditOverviewVisible = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    editOverviewVisible = _React$useState2[0],
+    setEditOverviewVisible = _React$useState2[1];
   return (0, _react2.jsx)(_index.Box, {
     maxWidth: "800px"
   }, !editOverviewVisible ? (0, _react2.jsx)(_index.Box, {
@@ -132,10 +118,10 @@ var Default = function Default() {
     size: "xs"
   }))), (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Chip, {
+  }, (0, _react2.jsx)(_index.Badge, {
     label: "ALL",
     bg: "decorative.7",
-    sx: sx.customChipStyles
+    sx: sx.customBadgeStyles
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
     return (0, _react2.jsx)(_index.Box, {
       isRow: true,
@@ -143,32 +129,32 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
       width: "100%"
     }, (0, _react2.jsx)(_index.Box, {
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       sx: sx.allConditionsBox
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Chip, {
+    }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3))));
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     mt: "md",
     sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Chip, {
+  }, (0, _react2.jsx)(_index.Badge, {
     label: "ANY",
     bg: "decorative.4",
-    sx: sx.customChipStyles,
+    sx: sx.customBadgeStyles,
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
     ml: "sm"
@@ -180,7 +166,7 @@ var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), (0, _react2.jsx)(_index.Box, {
       mt: "md",
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       width: "100%",
@@ -188,11 +174,11 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Chip, {
+    }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));
   })))), (0, _react2.jsx)(_index.Box, {
@@ -200,15 +186,15 @@ var Default = function Default() {
   }, (0, _react2.jsx)(_index.Bracket, {
     isLast: true
   }), (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     mt: "md",
     sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true
-  }, (0, _react2.jsx)(_index.Chip, {
+  }, (0, _react2.jsx)(_index.Badge, {
     label: "NONE",
     bg: "accent.20",
-    sx: sx.customChipStyles,
+    sx: sx.customBadgeStyles,
     alignSelf: "center"
   }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
     ml: "sm"
@@ -220,7 +206,7 @@ var Default = function Default() {
       isLast: index === noneConditions.length - 1
     }), (0, _react2.jsx)(_index.Box, {
       mt: "md",
-      variant: "forms.input.container",
+      variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,
       width: "100%",
@@ -228,11 +214,11 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Text, {
       pl: "md",
       pr: "sm"
-    }, item.field1), (0, _react2.jsx)(_index.Chip, {
+    }, item.field1), (0, _react2.jsx)(_index.Badge, {
       label: "Equals",
       bg: "accent.90",
       textColor: "neutral.10",
-      sx: sx.customChipStyles,
+      sx: sx.customBadgeStyles,
       alignSelf: "center"
     }), (0, _react2.jsx)(_index.Text, null, item.field3)));
   }))))) : (0, _react2.jsx)(_index.Box, {
@@ -324,7 +310,7 @@ var Default = function Default() {
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true
   }, (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -414,7 +400,7 @@ var Default = function Default() {
     isRow: true,
     mt: "md"
   }, (0, _react2.jsx)(_index.Box, {
-    variant: "forms.input.container",
+    variant: "forms.input.fieldControlWrapper",
     sx: sx.borderedBoxStyles
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -518,5 +504,4 @@ var Default = function Default() {
     "aria-label": "cancel"
   }, "Cancel"))));
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/CopyToClipboard.stories.js

@@ -1,28 +1,19 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../index");
-
 var _useCopyToClipboard = _interopRequireDefault(require("../hooks/useCopyToClipboard"));
-
+var _index = require("../index");
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Recipes/Copy to Clipboard'
 };
 exports["default"] = _default;
-
 var Default = function Default() {
   var textToCopy = 'eyJraWQiOiI4YTg5MmY3ZS1iNTk1LTRkYWQtODBlNC0yMzA4ODkyZTczZDQiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2FwaS5waW5nb25lLmNvbSIsImF1dGhVcmwiOiJodHRwczovL2F1dGgucGluZ29uZS5jb20iLCJjb25zb2xlVXJsIjoiaHR0cHM6Ly9jb25zb2xlLnBpbmdvbmUuY29tIiwiZW52aXJvbm1lbnROYW1lIjoiTW9udGFuYSIsImVudmlyb25tZW50SWQiOiJhYzc2NWQ0Ny1kMDM2LTQ1MGUtODFjMS1mYjQ1NDMxMjM1NjYiLCJvcmdhbml6YXRpb25OYW1lIjoiaW50ZXJuYWxfZXJpa2FhbGRlYm9yZ2hfMjUyMDc1MDMxIiwib3JnYW5pemF0aW9uSWQiOiJkMDYzMmYwZi03YjQ2LTQ5ZjUtYjgyYS1kZWU5MWQ3MDY3ODYiLCJnYXRld2F5TmFtZSI6ImRzZHMiLCJnYXRld2F5SWQiOiJiMDVmNGU5Yy1jMzRiLTRlZTMtYTYyNS01ZGFiNjlkYTE1YTEiLCJnYXRld2F5VHlwZSI6IlBJTkdfRkVERVJBVEUiLCJ0YXJnZXRDbHVzdGVyRW52aXJvbm1lbnQiOiJQUk9EIiwidGFyZ2V0R2VvZ3JhcGh5IjoiTkEiLCJyZWdpb24iOiJOb3J0aCBBbWVyaWNhIiwianRpIjoiMTUwYTQ0OTktZjIyYi00YWVhLWIzY2UtYWM2YWY1NjVjNjk5IiwiaXNzIjoid3NzOi8vZ2F0ZXdheXMucGluZ29uZS5jb20iLCJpYXQiOjE2MjYyODEyMTZ9.JJ9wwqTxQWUwz2vmU0yE54xuYff51xbirzZuEUxd8GDzV45bnpbmx460CY8g9ccdmOjvfVF4RPPsawpKuMZH271tDlLZl67iknxDVWBZSih9K6v0RAmsmNriR4OyOFOkGrULCIz3ISyPWeItp1AVuue_8guWR63KzYg32aPC4SgmOrc2myq9N6XNU2H1KybETbG_s5-VU_cUqaXn7GUzhL2_W6CSVrrlE1cYfjC7pxMKFm4vvIw_KcNYVGO1K6oYgzRZ4A8toQHIdlGB8L-wkCt442LdC93OjoQdkLuGzmXnO8BUohWea-Dn35gGHoH-H1BRQTya_H9AKyWMxCw-vg';
   var copyToClipboard = (0, _useCopyToClipboard["default"])(textToCopy);
@@ -41,5 +32,4 @@ var Default = function Default() {
     "aria-label": "Copy Text To Clipboard"
   }, "Copy To Clipboard"));
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/CountryPicker.stories.js

@@ -1,55 +1,34 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _countriesList = require("countries-list");
-
 var _Box = _interopRequireDefault(require("../components/Box"));
-
 var _ComboBoxField = _interopRequireDefault(require("../components/ComboBoxField"));
-
 var _Input = _interopRequireDefault(require("../components/Input"));
-
 var _index = require("../index");
-
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-
 var _default = {
   title: 'Recipes/Country Picker'
 };
 exports["default"] = _default;
-
 var validatePhoneNumber = function validatePhoneNumber(str) {
   var reg = /^$|^[\d\-(\d)\s.]+$|^\+/g;
   return reg.test(str);
 };
-
 var sx = {
   wrapperBox: {
     width: '100%',
@@ -64,79 +43,64 @@ var sx = {
   comboBoxFieldWrapperClose: {
     position: 'absolute',
     transition: '0.2s width ease',
-    width: '110px'
+    maxWidth: '110px'
   },
   inputWrapper: {
     width: '100%',
-    marginLeft: '110px'
+    ml: '110px'
   }
 };
-
 var Default = function Default() {
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var _useState3 = (0, _react.useState)(''),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      searchValue = _useState4[0],
-      setSearchValue = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
   var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      phoneCodeValue = _useState6[0],
-      setPhoneCodeValue = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    phoneCodeValue = _useState6[0],
+    setPhoneCodeValue = _useState6[1];
   var _useState7 = (0, _react.useState)(null),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      selectedKey = _useState8[0],
-      setSelectedKey = _useState8[1];
-
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    selectedKey = _useState8[0],
+    setSelectedKey = _useState8[1];
   var _useState9 = (0, _react.useState)(''),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      phoneNumber = _useState10[0],
-      setPhoneNumber = _useState10[1];
-
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    phoneNumber = _useState10[0],
+    setPhoneNumber = _useState10[1];
   var getInputValue = function getInputValue() {
     if (isOpen) return searchValue;
     return phoneCodeValue || searchValue;
   };
-
   var inputHandler = function inputHandler(value) {
     setSearchValue(value);
-
     if (!value) {
       setSelectedKey(null);
       setPhoneCodeValue('');
     }
   };
-
   var selectionHandler = function selectionHandler(key) {
     setSelectedKey(key);
-
     if (key) {
       setPhoneCodeValue("+".concat(_countriesList.countries[key].phone.split(',')[0]));
     } else {
       setSearchValue('');
       setPhoneCodeValue('');
     }
-
     setIsOpen(false);
   };
-
   var keyHandler = function keyHandler(e) {
     if (e.keyCode !== 13) setIsOpen(true);
   };
-
   var onPhoneNumberValueChange = function onPhoneNumberValueChange(e) {
     var value = e.target.value;
-
     if (value === '' || validatePhoneNumber(value)) {
       setPhoneNumber(value);
     }
   };
-
   return (0, _react2.jsx)(_Box["default"], {
     isRow: true,
     sx: sx.wrapperBox
@@ -145,7 +109,7 @@ var Default = function Default() {
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
-    wrapperProps: {
+    containerProps: {
       sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {
@@ -160,7 +124,6 @@ var Default = function Default() {
     menuTrigger: "focus"
   }, function (item) {
     var _context, _context2;
-
     return (0, _react2.jsx)(_index.Item, {
       key: item[0]
     }, (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = "".concat(item[1].name)).call(_context2, item[1].name !== item[1]["native"] ? " (".concat(item[1]["native"], ")") : '', " +")).call(_context, item[1].phone.split(',')[0]));
@@ -172,5 +135,4 @@ var Default = function Default() {
     value: phoneNumber
   })));
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/DatePicker.stories.js

@@ -1,47 +1,27 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-
 var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactCalendar = _interopRequireDefault(require("react-calendar"));
-
-require("react-calendar/dist/Calendar.css");
-
 var _CalendarIcon = _interopRequireDefault(require("mdi-react/CalendarIcon"));
-
 var _moment = _interopRequireDefault(require("moment"));
-
+var _Text = require("../components/Text/Text.styles");
 var _index = require("../index");
-
 var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
-
-var _PopoverContainer = _interopRequireDefault(require("../components/PopoverContainer"));
-
+require("react-calendar/dist/Calendar.css");
 var _react2 = require("@emotion/react");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
-
 var _default = {
   title: 'Recipes/Date Picker',
   parameters: {
@@ -60,49 +40,83 @@ var sx = {
     top: 8,
     width: 28,
     height: 28
+  },
+  container: {
+    maxWidth: 300,
+    '.react-calendar': {
+      width: 280,
+      '& .react-calendar__month-view__days__day': {
+        width: 40,
+        height: 40,
+        color: 'neutral.10',
+        fontSize: 'sm',
+        fontWeight: 1
+      },
+      '& .react-calendar__navigation__label__labelText': _Text.text.itemTitle,
+      '& .react-calendar__navigation__arrow, & .react-calendar__month-view__days__day--neighboringMonth': {
+        color: 'neutral.40'
+      },
+      '& .react-calendar__month-view__weekdays': {
+        borderBottom: '1px solid',
+        borderColor: 'neutral.80'
+      },
+      '& .react-calendar__month-view__weekdays__weekday abbr': {
+        textDecoration: 'none',
+        textTransform: 'capitalize'
+      },
+      '& .react-calendar__month-view__days__day--weekend': {
+        color: 'decorative.4'
+      },
+      '& .react-calendar__tile--active, & .react-calendar__tile--hasActive': {
+        backgroundColor: 'active',
+        color: 'white'
+      },
+      '& .react-calendar__year-view__months__month': {
+        padding: '19px 0'
+      },
+      '& .react-calendar__decade-view__years__year, & .react-calendar__month-view__days__day, & .react-calendar__year-view__months__month': {
+        '&:hover': {
+          backgroundColor: 'rgba(70, 96, 162, .1);',
+          color: 'neutral.10'
+        }
+      },
+      '& .react-calendar__navigation': {
+        marginBottom: 0
+      }
+    }
   }
 };
-
 var Default = function Default() {
   var dateFormat = 'YYYY-MM-DD';
-
   var _useState = (0, _react.useState)((0, _moment["default"])('2021-01-01', 'YYYY-MM-DD')),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      date = _useState2[0],
-      setDate = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
   var _useState3 = (0, _react.useState)(date.format(dateFormat)),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      inputValue = _useState4[0],
-      setInputValue = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      error = _useState6[0],
-      setError = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    error = _useState6[0],
+    setError = _useState6[1];
   var triggerRef = _react["default"].useRef();
-
   var overlayRef = _react["default"].useRef();
-
   var popoverState = (0, _index.useOverlayTriggerState)({});
-
   var _useOverlayTrigger = (0, _index.useOverlayTrigger)({
-    type: 'dialog'
-  }, popoverState, triggerRef),
-      triggerProps = _useOverlayTrigger.triggerProps,
-      overlayProps = _useOverlayTrigger.overlayProps;
-
+      type: 'dialog'
+    }, popoverState, triggerRef),
+    triggerProps = _useOverlayTrigger.triggerProps,
+    overlayProps = _useOverlayTrigger.overlayProps;
   var _useOverlayPosition = (0, _index.useOverlayPosition)({
-    targetRef: triggerRef,
-    overlayRef: overlayRef,
-    offset: 15,
-    isOpen: popoverState.isOpen,
-    onClose: popoverState.close,
-    shouldUpdatePosition: true
-  }),
-      positionProps = _useOverlayPosition.overlayProps;
-
+      targetRef: triggerRef,
+      overlayRef: overlayRef,
+      offset: 15,
+      isOpen: popoverState.isOpen,
+      onClose: popoverState.close,
+      shouldUpdatePosition: true
+    }),
+    positionProps = _useOverlayPosition.overlayProps;
   var handleCalendarIconPress = (0, _react.useCallback)(function () {
     return popoverState.open();
   }, []);
@@ -113,7 +127,6 @@ var Default = function Default() {
   var handleOnBlur = (0, _react.useCallback)(function (_ref2) {
     var value = _ref2.target.value;
     var dateFromInput = (0, _moment["default"])(value);
-
     if (dateFromInput.isValid()) {
       setDate(dateFromInput);
       setInputValue(dateFromInput.format(dateFormat));
@@ -128,10 +141,7 @@ var Default = function Default() {
     setError(false);
   }, []);
   return (0, _react2.jsx)(_index.Box, {
-    sx: {
-      maxWidth: 300
-    },
-    variant: "boxes.dataPicker"
+    sx: sx.container
   }, (0, _react2.jsx)(_index.TextField, {
     slots: {
       inContainer: (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
@@ -150,18 +160,17 @@ var Default = function Default() {
     status: error ? _statuses["default"].ERROR : _statuses["default"].DEFAULT,
     value: inputValue,
     "aria-label": "data-picker-input"
-  }), (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({}, overlayProps, positionProps, {
+  }), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
     onClose: popoverState.close,
     hasNoArrow: true,
     isDismissable: true
   }), (0, _react2.jsx)(_index.Box, {
-    variant: "boxes.datePicker"
+    sx: sx.container
   }, (0, _react2.jsx)(_reactCalendar["default"], {
     onChange: handleCalendarChange,
     value: date.toDate()
   }))));
 };
-
 exports.Default = Default;

package/lib/cjs/recipes/DraggableBox.stories.js

@@ -1,34 +1,22 @@
 "use strict";
 
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-
 exports["default"] = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _DragVerticalIcon = _interopRequireDefault(require("mdi-react/DragVerticalIcon"));
-
 var _FormTextboxIcon = _interopRequireDefault(require("mdi-react/FormTextboxIcon"));
-
 var _Box = _interopRequireDefault(require("../components/Box"));
-
 var _Icon = _interopRequireDefault(require("../components/Icon"));
-
 var _Text = _interopRequireDefault(require("../components/Text"));
-
 var _react2 = require("@emotion/react");
-
 var _default = {
   title: 'Recipes/Draggable Box'
 };
 exports["default"] = _default;
-
 var Default = function Default() {
   return (0, _react2.jsx)(_Box["default"], {
     isRow: true,
@@ -54,5 +42,4 @@ var Default = function Default() {
     ml: "md"
   }, "Text Input"));
 };
-
 exports.Default = Default;