@citygross/components 0.7.114 → 0.7.115

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js

@@ -77,7 +77,6 @@ require('styled-components');
 require('../SearchBar/SearchBar.styles.js');
 require('../Nav/Nav.styles.js');
 require('../NavMainLink/NavMainLink.styled.js');
-require('framer-motion');
 require('../SideModal/SideModal.styles.js');
 require('../IconText/IconText.styles.js');
 require('../Dropdown/Dropdown.styles.js');

package/build/cjs/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/SideModal/SideModal.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var framerMotion = require('framer-motion');
 var reactDom = require('react-dom');
 var SideModal_styles = require('./SideModal.styles.js');
 var designTokens = require('@citygross/design-tokens');
@@ -16,16 +15,27 @@ var SideModal = function (_a) {
     var _b, _c;
     var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, children = _a.children;
     var ref = React.useRef(null);
+    var variants = {
+        hide: {
+            x: slideFrom === 'left' ? '-100%' : '100%',
+            transition: { duration: 0.3, delay: 0, ease: 'linear' }
+        },
+        show: {
+            x: 0,
+            transition: { duration: 0.3, delay: 0, ease: 'linear' }
+        }
+    };
     var domSafe = typeof document !== 'undefined';
     return domSafe
-        ? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { ref: ref, onMouseDown: function (e) {
-                if (ref && e.target === (ref === null || ref === void 0 ? void 0 : ref.current)) {
-                    onBackdropClick();
-                }
-            }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
-                type: 'just'
-            } },
-            React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
+        ? reactDom.createPortal(React__default["default"].createElement(React__default["default"].Fragment, null,
+            isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { ref: ref, onMouseDown: function (e) {
+                    if (ref && e.target === (ref === null || ref === void 0 ? void 0 : ref.current)) {
+                        onBackdropClick();
+                    }
+                }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+                    type: 'just'
+                } })),
+            React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, variants: variants, animate: isVisible ? 'show' : 'hide' }, children)), document.querySelector(querySelector) || document.body)
         : null;
 };
 

package/build/cjs/components/src/components/SideModal/SideModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/cjs/components/src/components/SideModal/SideModal.styles.js

@@ -11,10 +11,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var SideModalOverlay = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { return props.overlayBackground; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
+var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
     var maxWidth = _a.maxWidth;
     return maxWidth && "max-width:".concat(maxWidth);
-}, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
+}, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
 var templateObject_1, templateObject_2;
 
 exports.SideModalContainer = SideModalContainer;

package/build/cjs/components/src/components/WarningLabel/WarningLabel.js

@@ -77,7 +77,6 @@ require('styled-components');
 require('../SearchBar/SearchBar.styles.js');
 require('../Nav/Nav.styles.js');
 require('../NavMainLink/NavMainLink.styled.js');
-require('framer-motion');
 require('../SideModal/SideModal.styles.js');
 require('../IconText/IconText.styles.js');
 require('../Dropdown/Dropdown.styles.js');

package/build/cjs/components/src/components/WarningLabel/WarningLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/AddressBlock/AddressBlock.js

@@ -73,7 +73,6 @@ import 'styled-components';
 import '../SearchBar/SearchBar.styles.js';
 import '../Nav/Nav.styles.js';
 import '../NavMainLink/NavMainLink.styled.js';
-import 'framer-motion';
 import '../SideModal/SideModal.styles.js';
 import '../IconText/IconText.styles.js';
 import '../Dropdown/Dropdown.styles.js';

package/build/es/components/src/components/AddressBlock/AddressBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AddressBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/SideModal/SideModal.js

@@ -1,5 +1,4 @@
 import React, { useRef } from 'react';
-import { AnimatePresence } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import { SideModalOverlay, SideModalContainer } from './SideModal.styles.js';
 import { theme } from '@citygross/design-tokens';
@@ -8,16 +7,27 @@ var SideModal = function (_a) {
     var _b, _c;
     var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, children = _a.children;
     var ref = useRef(null);
+    var variants = {
+        hide: {
+            x: slideFrom === 'left' ? '-100%' : '100%',
+            transition: { duration: 0.3, delay: 0, ease: 'linear' }
+        },
+        show: {
+            x: 0,
+            transition: { duration: 0.3, delay: 0, ease: 'linear' }
+        }
+    };
     var domSafe = typeof document !== 'undefined';
     return domSafe
-        ? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { ref: ref, onMouseDown: function (e) {
-                if (ref && e.target === (ref === null || ref === void 0 ? void 0 : ref.current)) {
-                    onBackdropClick();
-                }
-            }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
-                type: 'just'
-            } },
-            React.createElement(SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
+        ? createPortal(React.createElement(React.Fragment, null,
+            isVisible && (React.createElement(SideModalOverlay, { ref: ref, onMouseDown: function (e) {
+                    if (ref && e.target === (ref === null || ref === void 0 ? void 0 : ref.current)) {
+                        onBackdropClick();
+                    }
+                }, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+                    type: 'just'
+                } })),
+            React.createElement(SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, variants: variants, animate: isVisible ? 'show' : 'hide' }, children)), document.querySelector(querySelector) || document.body)
         : null;
 };
 

package/build/es/components/src/components/SideModal/SideModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SideModal.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/es/components/src/components/SideModal/SideModal.styles.js

@@ -3,10 +3,10 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 
 var SideModalOverlay = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { return props.overlayBackground; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
+var SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n  z-index: ", ";\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
     var maxWidth = _a.maxWidth;
     return maxWidth && "max-width:".concat(maxWidth);
-}, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
+}, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
 var templateObject_1, templateObject_2;
 
 export { SideModalContainer, SideModalOverlay };

package/build/es/components/src/components/WarningLabel/WarningLabel.js

@@ -73,7 +73,6 @@ import 'styled-components';
 import '../SearchBar/SearchBar.styles.js';
 import '../Nav/Nav.styles.js';
 import '../NavMainLink/NavMainLink.styled.js';
-import 'framer-motion';
 import '../SideModal/SideModal.styles.js';
 import '../IconText/IconText.styles.js';
 import '../Dropdown/Dropdown.styles.js';

package/build/es/components/src/components/WarningLabel/WarningLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"WarningLabel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.114",
+  "version": "0.7.115",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "653a9a391aca85f24aa635bf55b8dffd4b0acc09"
+  "gitHead": "410b15c9ebb2e7874d723f81e412f43f97d45db6"
 }