@citygross/components 0.7.113 → 0.7.115

package/build/@types/index.d.ts

@@ -71,3 +71,4 @@ export * from './components/MenuListItem/MenuListHeader';
 export * from './components/MenuListItem/MenuListItem';
 export * from './components/SlideInOutContainer/SlideInOutContainer';
 export * from './components/SearchSuggestionChip/SearchSuggestionChip';
+export * from './components/ZipCodeInput/ZipCodeInput';

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');
@@ -85,6 +84,7 @@ require('../SearchListItem/SearchListItem.styles.js');
 require('../MenuListItem/MenuListItem.styles.js');
 require('../SlideInOutContainer/SlideInOutContainer.styles.js');
 require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
+require('../ZipCodeInput/ZipCodeInput.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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');
@@ -85,6 +84,7 @@ require('../SearchListItem/SearchListItem.styles.js');
 require('../MenuListItem/MenuListItem.styles.js');
 require('../SlideInOutContainer/SlideInOutContainer.styles.js');
 require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
+require('../ZipCodeInput/ZipCodeInput.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ZipCodeInput_styles = require('./ZipCodeInput.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ZipCodeInput = function (_a) {
+    var setZipCode = _a.setZipCode, verified = _a.verified, setVerified = _a.setVerified, backgroundColor = _a.backgroundColor, verifiedBackground = _a.verifiedBackground;
+    var inputRefs = React.useRef([]);
+    var createZipCode = function () {
+        var zipCode = 0;
+        inputRefs.current.forEach(function (i) {
+            if (zipCode === 0) {
+                zipCode = i.value;
+            }
+            else {
+                zipCode += i.value;
+            }
+        });
+        return zipCode;
+    };
+    var clamp = function (min, max, val) {
+        return Math.max(min, Math.min(val, max));
+    };
+    var handleInput = function (index, e) {
+        var nextIndex = clamp(0, 5 - 1, index + 1);
+        var prevIndex = clamp(0, 5 - 1, index - 1);
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+            inputRefs.current[index].value = null;
+            setVerified(false);
+            inputRefs.current[prevIndex].focus();
+        }
+        else if (e.key === 'ArrowLeft') {
+            inputRefs.current[prevIndex].focus();
+        }
+        else if (e.key === 'ArrowRight') {
+            inputRefs.current[nextIndex].focus();
+        }
+        else {
+            if (inputRefs.current[index].value) {
+                if (e.key >= '1' && e.key <= '9') {
+                    inputRefs.current[index].value = e.key;
+                    inputRefs.current[nextIndex].focus();
+                }
+            }
+        }
+        var counter = 0;
+        inputRefs.current.forEach(function (ref) {
+            if (ref.value) {
+                counter++;
+            }
+        });
+        if (counter === 5) {
+            setVerified(true);
+            setZipCode(createZipCode());
+            inputRefs.current[index].blur();
+        }
+    };
+    return (React__default["default"].createElement(ZipCodeInput_styles.InputWrapper, null, Array.from(Array(5).keys()).map(function (index) { return (React__default["default"].createElement("div", { key: index },
+        React__default["default"].createElement(ZipCodeInput_styles.ZipCodeInputBox, { type: "number", onInput: function (e) { return (e.currentTarget.value = e.currentTarget.value.slice(0, 1)); }, onKeyUp: function (e) { return handleInput(index, e); }, verified: verified, backgroundColor: backgroundColor, verifiedBackground: verifiedBackground, marginLeft: index === 3, ref: function (ref) { return (inputRefs.current[index] = ref); } }))); })));
+};
+
+exports.ZipCodeInput = ZipCodeInput;
+//# sourceMappingURL=ZipCodeInput.js.map

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

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

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var InputWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  gap: ", "px;\n"], ["\n  display: flex;\n  justify-content: center;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var ZipCodeInputBox = styled__default["default"].input(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  font-weight: ", ";\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  text-align: center;\n  background-color: ", ";\n  margin-left: ", ";\n\n  :focus {\n    border: solid 1px ", ";\n    outline: none;\n  }\n\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  font-weight: ", ";\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  text-align: center;\n  background-color: ", ";\n  margin-left: ", ";\n\n  :focus {\n    border: solid 1px ", ";\n    outline: none;\n  }\n\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.zipCodeInputSize; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.zipCodeInputSize; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) {
+    var _a, _b;
+    return props.verified === false
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.greenMedium;
+}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; }, function (props) {
+    var _a, _b;
+    return props.verified === false
+        ? props.backgroundColor
+            ? props.backgroundColor
+            : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white
+        : props.verifiedBackground
+            ? props.verifiedBackground
+            : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.greenLight;
+}, function (props) { var _a; return props.marginLeft ? "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px") : 0; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; });
+var templateObject_1, templateObject_2;
+
+exports.InputWrapper = InputWrapper;
+exports.ZipCodeInputBox = ZipCodeInputBox;
+//# sourceMappingURL=ZipCodeInput.styles.js.map

package/build/cjs/components/src/components/ZipCodeInput/ZipCodeInput.styles.js.map

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

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

@@ -76,6 +76,7 @@ var MenuListHeader = require('./components/MenuListItem/MenuListHeader.js');
 var MenuListItem = require('./components/MenuListItem/MenuListItem.js');
 var SlideInOutContainer = require('./components/SlideInOutContainer/SlideInOutContainer.js');
 var SearchSuggestionChip = require('./components/SearchSuggestionChip/SearchSuggestionChip.js');
+var ZipCodeInput = require('./components/ZipCodeInput/ZipCodeInput.js');
 
 
 
@@ -184,4 +185,5 @@ exports.MenuListHeader = MenuListHeader.MenuListHeader;
 exports.MenuListItem = MenuListItem.MenuListItem;
 exports.SlideInOutContainer = SlideInOutContainer.SlideInOutContainer;
 exports.SearchSuggestionChip = SearchSuggestionChip.SearchSuggestionChip;
+exports.ZipCodeInput = ZipCodeInput.ZipCodeInput;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.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';
@@ -81,6 +80,7 @@ import '../SearchListItem/SearchListItem.styles.js';
 import '../MenuListItem/MenuListItem.styles.js';
 import '../SlideInOutContainer/SlideInOutContainer.styles.js';
 import '../SearchSuggestionChip/SearchSuggestionChip.styles.js';
+import '../ZipCodeInput/ZipCodeInput.styles.js';
 
 function AddressBlock(_a) {
     var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;

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';
@@ -81,6 +80,7 @@ import '../SearchListItem/SearchListItem.styles.js';
 import '../MenuListItem/MenuListItem.styles.js';
 import '../SlideInOutContainer/SlideInOutContainer.styles.js';
 import '../SearchSuggestionChip/SearchSuggestionChip.styles.js';
+import '../ZipCodeInput/ZipCodeInput.styles.js';
 
 function WarningLabel(_a) {
     var children = _a.children, background = _a.background, toolTip = _a.toolTip;

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

@@ -0,0 +1,61 @@
+import React, { useRef } from 'react';
+import { InputWrapper, ZipCodeInputBox } from './ZipCodeInput.styles.js';
+
+var ZipCodeInput = function (_a) {
+    var setZipCode = _a.setZipCode, verified = _a.verified, setVerified = _a.setVerified, backgroundColor = _a.backgroundColor, verifiedBackground = _a.verifiedBackground;
+    var inputRefs = useRef([]);
+    var createZipCode = function () {
+        var zipCode = 0;
+        inputRefs.current.forEach(function (i) {
+            if (zipCode === 0) {
+                zipCode = i.value;
+            }
+            else {
+                zipCode += i.value;
+            }
+        });
+        return zipCode;
+    };
+    var clamp = function (min, max, val) {
+        return Math.max(min, Math.min(val, max));
+    };
+    var handleInput = function (index, e) {
+        var nextIndex = clamp(0, 5 - 1, index + 1);
+        var prevIndex = clamp(0, 5 - 1, index - 1);
+        if (e.key === 'Backspace' || e.key === 'Delete') {
+            inputRefs.current[index].value = null;
+            setVerified(false);
+            inputRefs.current[prevIndex].focus();
+        }
+        else if (e.key === 'ArrowLeft') {
+            inputRefs.current[prevIndex].focus();
+        }
+        else if (e.key === 'ArrowRight') {
+            inputRefs.current[nextIndex].focus();
+        }
+        else {
+            if (inputRefs.current[index].value) {
+                if (e.key >= '1' && e.key <= '9') {
+                    inputRefs.current[index].value = e.key;
+                    inputRefs.current[nextIndex].focus();
+                }
+            }
+        }
+        var counter = 0;
+        inputRefs.current.forEach(function (ref) {
+            if (ref.value) {
+                counter++;
+            }
+        });
+        if (counter === 5) {
+            setVerified(true);
+            setZipCode(createZipCode());
+            inputRefs.current[index].blur();
+        }
+    };
+    return (React.createElement(InputWrapper, null, Array.from(Array(5).keys()).map(function (index) { return (React.createElement("div", { key: index },
+        React.createElement(ZipCodeInputBox, { type: "number", onInput: function (e) { return (e.currentTarget.value = e.currentTarget.value.slice(0, 1)); }, onKeyUp: function (e) { return handleInput(index, e); }, verified: verified, backgroundColor: backgroundColor, verifiedBackground: verifiedBackground, marginLeft: index === 3, ref: function (ref) { return (inputRefs.current[index] = ref); } }))); })));
+};
+
+export { ZipCodeInput };
+//# sourceMappingURL=ZipCodeInput.js.map

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

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

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

@@ -0,0 +1,23 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var InputWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  gap: ", "px;\n"], ["\n  display: flex;\n  justify-content: center;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var ZipCodeInputBox = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  font-weight: ", ";\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  text-align: center;\n  background-color: ", ";\n  margin-left: ", ";\n\n  :focus {\n    border: solid 1px ", ";\n    outline: none;\n  }\n\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  width: ", "px;\n  height: ", "px;\n  font-weight: ", ";\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  text-align: center;\n  background-color: ", ";\n  margin-left: ", ";\n\n  :focus {\n    border: solid 1px ", ";\n    outline: none;\n  }\n\n  ::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.zipCodeInputSize; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.zipCodeInputSize; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) {
+    var _a, _b;
+    return props.verified === false
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.greenMedium;
+}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; }, function (props) {
+    var _a, _b;
+    return props.verified === false
+        ? props.backgroundColor
+            ? props.backgroundColor
+            : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white
+        : props.verifiedBackground
+            ? props.verifiedBackground
+            : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.greenLight;
+}, function (props) { var _a; return props.marginLeft ? "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px") : 0; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; });
+var templateObject_1, templateObject_2;
+
+export { InputWrapper, ZipCodeInputBox };
+//# sourceMappingURL=ZipCodeInput.styles.js.map

package/build/es/components/src/components/ZipCodeInput/ZipCodeInput.styles.js.map

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

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

@@ -72,4 +72,5 @@ export { MenuListHeader } from './components/MenuListItem/MenuListHeader.js';
 export { MenuListItem } from './components/MenuListItem/MenuListItem.js';
 export { SlideInOutContainer } from './components/SlideInOutContainer/SlideInOutContainer.js';
 export { SearchSuggestionChip } from './components/SearchSuggestionChip/SearchSuggestionChip.js';
+export { ZipCodeInput } from './components/ZipCodeInput/ZipCodeInput.js';
 //# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.113",
+  "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": "b535dbca9f84e565b1840ec3b224cf0ab5d06e05"
+  "gitHead": "410b15c9ebb2e7874d723f81e412f43f97d45db6"
 }