@citygross/components 0.7.109 → 0.7.111

package/build/@types/components/Nav/Nav.styles.d.ts

@@ -9,11 +9,14 @@ declare type TNavContainer = {
 declare type TNavSearchOverlay = {
     show?: boolean;
 };
+declare type TSearchIsOpen = {
+    isOpen?: boolean;
+};
 export declare const Nav: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TNav, never>;
 export declare const NavContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TNavContainer, never>;
 export declare const NavChildContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const NavMainLinks: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const NavDummySearchContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const NavSearchContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const NavMainLinks: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
+export declare const NavDummySearchContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSearchIsOpen, never>;
+export declare const NavSearchContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSearchIsOpen, never>;
 export declare const SearchResultOverlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TNavSearchOverlay, never>;
 export {};

package/build/@types/components/SearchBar/SearchBar.styles.d.ts

@@ -12,8 +12,8 @@ declare type SearchResultContainerProps = {
     topPosition?: string;
     isOpen?: boolean;
 };
-export declare const SearchResultContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SearchResultContainerProps, never>;
-export declare const SearchRightLabel: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<SearchResultContainerProps, "isOpen">, never>;
+export declare const SearchResultContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, SearchResultContainerProps, never>;
+export declare const SearchRightLabel: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
 export declare const SearchBarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, SearchInputProps, never>;
 export declare const SearchInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, SearchInputProps, never>;
 export declare const MobileSearchFormContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/ZipCodeInput/ZipCodeInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare type TZipCodeInput = {
+    setZipCode: (zipCode: number) => void;
+    verified: boolean;
+    setVerified: (verified: boolean) => void;
+    backgroundColor?: string;
+    verifiedBackground?: string;
+};
+export declare const ZipCodeInput: React.FunctionComponent<TZipCodeInput>;

package/build/@types/components/ZipCodeInput/ZipCodeInput.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { TZipCodeInput } from './ZipCodeInput';
+declare const _default: {
+    component: React.FunctionComponent<TZipCodeInput>;
+    title: string;
+};
+export default _default;
+export declare const Default: Story<TZipCodeInput>;

package/build/@types/components/ZipCodeInput/ZipCodeInput.styles.d.ts

@@ -0,0 +1,9 @@
+declare type TInputBox = {
+    marginLeft?: boolean;
+    verified?: boolean;
+    backgroundColor?: string;
+    verifiedBackground?: string;
+};
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ZipCodeInputBox: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TInputBox, never>;
+export {};

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

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var framerMotion = require('framer-motion');
 var React = require('react');
 var Dropdown_styles = require('./Dropdown.styles.js');
 
@@ -12,12 +11,19 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Dropdown = function (_a) {
     var isOpen = _a.isOpen, onClick = _a.onClick, dropdownHeader = _a.dropdownHeader, children = _a.children;
+    var variants = {
+        closed: {
+            height: 0,
+            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+        },
+        open: {
+            height: 'auto',
+            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+        }
+    };
     return (React__default["default"].createElement(Dropdown_styles.DropdownContainer, null,
         React__default["default"].createElement(Dropdown_styles.DropdownHeader, { onClick: onClick }, dropdownHeader),
-        React__default["default"].createElement(framerMotion.AnimatePresence, { initial: false }, isOpen && (React__default["default"].createElement(Dropdown_styles.DropdownChildContainer, { isOpen: isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: {
-                open: { height: 'auto' },
-                collapsed: { height: 0 }
-            }, transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] } }, children)))));
+        React__default["default"].createElement(Dropdown_styles.DropdownChildContainer, { isOpen: isOpen, variants: variants, animate: isOpen ? 'open' : 'closed', initial: 'closed' }, children)));
 };
 
 exports.Dropdown = Dropdown;

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

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

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var designTokens = require('@citygross/design-tokens');
 var utils = require('@citygross/utils');
 var React = require('react');
 var SearchBar = require('../SearchBar/SearchBar.js');
@@ -12,14 +13,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Nav = function (_a) {
-    var _b;
+    var _b, _c;
     var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
     var navContainerRef = React.useRef(null);
     var searchInputRef = React.useRef(null);
     var searchInputMobileRef = React.useRef(null);
     var navRef = React.useRef(null);
     var width = utils.useWindowSize().width;
-    var _c = React.useState(0), elToRemove = _c[0], setElToRemove = _c[1];
+    var _d = React.useState(0), elToRemove = _d[0], setElToRemove = _d[1];
     var widthRef = React.useRef(null);
     var checkWidth = function () {
         var _a, _b;
@@ -53,17 +54,33 @@ var Nav = function (_a) {
             document.removeEventListener('click', function (e) { return handleClick(e); }, true);
         };
     }, [navContainerRef]);
+    var variants = {
+        closed: {
+            width: '0',
+            transition: {
+                duration: 0.1,
+                ease: 'linear'
+            }
+        },
+        open: {
+            width: 'auto',
+            transition: { duration: 0.1, ease: 'linear' }
+        }
+    };
     return (React__default["default"].createElement(Nav_styles.Nav, { height: height, topPosition: topPosition, ref: navRef },
         React__default["default"].createElement(Nav_styles.NavContainer, { maxWidth: maxWidth, ref: navContainerRef },
             logo,
             React__default["default"].createElement(Nav_styles.NavChildContainer, null,
-                searchIsOpen ? (React__default["default"].createElement(Nav_styles.NavSearchContainer, null,
-                    React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
-                    React__default["default"].createElement(Nav_styles.NavMainLinks, null, (_b = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _b === void 0 ? void 0 : _b.map(function (link) { return link; })),
+                React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(Nav_styles.NavMainLinks, { variants: variants, animate: designTokens.theme.constants && width < ((_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint)
+                            ? false
+                            : searchIsOpen
+                                ? 'closed'
+                                : 'open' }, (_c = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _c === void 0 ? void 0 : _c.map(function (link) { return link; })),
                     React__default["default"].createElement(Nav_styles.NavDummySearchContainer, { onClick: function () {
                             onSearchClick && onSearchClick();
-                        } },
-                        React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, flexGrow: 1, placeholder: searchPlaceHolder, value: searchValue, onChange: searchOnChange })))),
+                        }, isOpen: searchIsOpen },
+                        React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
                 rightContent)),
         React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: searchIsOpen })));
 };

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

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

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

@@ -3,19 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
+var framerMotion = require('framer-motion');
 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 Nav = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    height: ", "px;\n  }\n"], ["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    height: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.height) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
-var NavContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var Nav = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  /* @media (min-width: ", "px) {\n    height: ", "px;\n  } */\n"], ["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  /* @media (min-width: ", "px) {\n    height: ", "px;\n  } */\n"])), function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.height) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
+var NavContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", ";\n  }\n"], ["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", ";\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b, _c; return "".concat((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm, "px"); });
 var NavChildContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  justify-content: flex-end;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  z-index: 20;\n"], ["\n  justify-content: flex-end;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  z-index: 20;\n"])));
-var NavMainLinks = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var NavDummySearchContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"], ["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var NavSearchContainer = styled__default["default"](NavDummySearchContainer)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
+var NavMainLinks = styled__default["default"](framerMotion.motion.div)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var NavDummySearchContainer = styled__default["default"](framerMotion.motion.div)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"], ["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"])), function (props) { var _a; return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm); });
+styled__default["default"](NavDummySearchContainer)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 exports.Nav = Nav;
@@ -23,6 +24,5 @@ exports.NavChildContainer = NavChildContainer;
 exports.NavContainer = NavContainer;
 exports.NavDummySearchContainer = NavDummySearchContainer;
 exports.NavMainLinks = NavMainLinks;
-exports.NavSearchContainer = NavSearchContainer;
 exports.SearchResultOverlay = SearchResultOverlay;
 //# sourceMappingURL=Nav.styles.js.map

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

@@ -13,7 +13,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var SearchBar = function (_a) {
-    var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef"]);
+    var _b, _c;
+    var flexGrow = _a.flexGrow, isValid = _a.isValid, _d = _a.inputSize, inputSize = _d === void 0 ? 'medium' : _d, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef"]);
     var width = utils.useWindowSize().width;
     var theme = styled.useTheme();
     React.useEffect(function () {
@@ -29,6 +30,36 @@ var SearchBar = function (_a) {
             }
         }
     }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current]);
+    var resultVariants = {
+        closed: {
+            height: '0',
+            transition: { duration: 0, ease: 'linear' }
+        },
+        open: {
+            height: 'auto',
+            transition: {
+                duration: theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint)
+                    ? 0
+                    : 0.2,
+                delay: theme.constants && width < ((_c = theme.constants) === null || _c === void 0 ? void 0 : _c.headerBreakpoint)
+                    ? 0
+                    : 0.1,
+                ease: 'linear'
+            }
+        }
+    };
+    var iconVariants = {
+        closed: {
+            opacity: 0,
+            display: 'none',
+            transition: { duration: 0, delay: 0, ease: 'linear' }
+        },
+        open: {
+            opacity: 1,
+            display: 'flex',
+            transition: { duration: 0.1, delay: 0.1, ease: 'linear' }
+        }
+    };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(SearchBar_styles.SearchBarContainer, { activeBorderColor: activeBorderColor, inputSize: inputSize, flexGrow: flexGrow, isOpen: isOpen },
             React__default["default"].createElement(SearchBar_styles.SearchForm, { hideInMobile: true, isOpen: isOpen, onSubmit: function (e) {
@@ -39,10 +70,10 @@ var SearchBar = function (_a) {
                 React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value })),
                 cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) {
                         e.stopPropagation();
-                    }, isOpen: isOpen }, cancelLabel)) : null),
+                    }, variants: iconVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' }, cancelLabel)) : null),
             React__default["default"].createElement(SearchBar_styles.MobileSearchIconContainer, null,
                 React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, icon)),
-            React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen },
+            React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen, variants: resultVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' },
                 React__default["default"].createElement(SearchBar_styles.MobileSearchFormContainer, null,
                     React__default["default"].createElement(SearchBar_styles.SearchForm, { onSubmit: function (e) {
                             e.preventDefault();
@@ -52,7 +83,7 @@ var SearchBar = function (_a) {
                         React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ flexGrow: flexGrow, isValid: isValid, inputSize: 'small', activeBorderColor: activeBorderColor, ref: searchInputMobileRef }, props, { value: value })),
                         cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) {
                                 e.stopPropagation();
-                            }, isOpen: isOpen }, cancelLabel)) : null)),
+                            } }, cancelLabel)) : null)),
                 children))));
 };
 

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

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

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

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
+var framerMotion = require('framer-motion');
 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 SearchResultContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 'block' : 'none'); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchModalZIndex; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
-var SearchRightLabel = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"], ["\n  display: ", ";\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 'flex' : 'none'); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var SearchResultContainer = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchModalZIndex; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
+var SearchRightLabel = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var SearchBarContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  ", ";\n\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  ", ";\n\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n"])), function (props) { return props.flexGrow && "flex: 1;"; });
 var SearchInput = styled__default["default"].input(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: ", "px;\n  padding: ", "px;\n\n  ::placeholder {\n    /* Chrome, Firefox, Opera, Safari 10.1+ */\n    color: ", ";\n    opacity: 1; /* Firefox */\n  }\n\n  :-ms-input-placeholder {\n    /* Internet Explorer 10-11 */\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    /* Microsoft Edge */\n    color: ", ";\n  }\n\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n"], ["\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: ", "px;\n  padding: ", "px;\n\n  ::placeholder {\n    /* Chrome, Firefox, Opera, Safari 10.1+ */\n    color: ", ";\n    opacity: 1; /* Firefox */\n  }\n\n  :-ms-input-placeholder {\n    /* Internet Explorer 10-11 */\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    /* Microsoft Edge */\n    color: ", ";\n  }\n\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
     var _a, _b;

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

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

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

@@ -15,9 +15,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 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 domSafe = typeof document !== 'undefined';
     return domSafe
-        ? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { onClick: onBackdropClick, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+        ? 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)

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/SlideInOutContainer/SlideInOutContainer.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
-var framerMotion = require('framer-motion');
 var React = require('react');
 var SlideInOutContainer_styles = require('./SlideInOutContainer.styles.js');
 
@@ -13,9 +12,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var SlideInOutContainer = function (_a) {
     var _b = _a.slideFrom, slideFrom = _b === void 0 ? 'right' : _b, isVisible = _a.isVisible, isInitial = _a.isInitial, fullHeight = _a.fullHeight, children = _a.children, props = _tslib.__rest(_a, ["slideFrom", "isVisible", "isInitial", "fullHeight", "children"]);
-    return (React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SlideInOutContainer_styles.SideModalContainer, _tslib.__assign({ slideFrom: slideFrom, transition: { type: 'just' }, onClick: function (e) { return e.stopPropagation(); }, fullHeight: fullHeight, initial: {
-            x: isInitial ? 0 : slideFrom === 'left' ? '-100%' : '100%'
-        }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, props), children))));
+    var iconVariants = {
+        show: {
+            x: 0,
+            transition: { duration: isInitial ? 0 : 0.3, delay: 0, ease: 'linear' }
+        },
+        hide: {
+            x: isInitial ? 0 : slideFrom === 'left' ? '-100%' : '100%',
+            transition: { duration: 0.3, delay: 0, ease: 'linear' }
+        }
+    };
+    return (React__default["default"].createElement(SlideInOutContainer_styles.SideModalContainer, _tslib.__assign({ slideFrom: slideFrom, onClick: function (e) { return e.stopPropagation(); }, fullHeight: fullHeight, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: isInitial ? 'show' : 'hide', animate: isVisible ? 'show' : 'hide', variants: iconVariants }, props), children));
 };
 
 exports.SlideInOutContainer = SlideInOutContainer;

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

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

package/build/cjs/design-tokens/build/index.js

@@ -100,6 +100,7 @@ var constants = {
     searchModalZIndex: 900,
     searchBarHorizontalPadding: 12,
     headerBreakpoint: 991,
+    zipCodeInputSize: 48,
     tooltipMinWidth: 80,
     toolTipTop: 35,
     toolTipArrowMarginTop: -5,
@@ -159,6 +160,7 @@ var palette = {
 };
 
 var spacings = {
+    xxxs: 2,
     xxs: 4,
     xs: 8,
     xs2: 12,

package/build/cjs/design-tokens/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',\n        highlightBoxShadow: '0 2px 5px 0 rgba(7,52,99,0.15)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xxs: 360,\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    listImageMaxWidth: 64,\n    listImageMaxHeight: 50,\n    listImageMaxWidthSmall: 32,\n    listImageMaxHeightSmall: 32,\n    listItemFlexGap: 20,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12,\n    menuHorizontalMargin: 12,\n    headerWrapperVerticalPadding: 20,\n    iconToolTipArrowLeft: 2.5,\n    iconToolTipArrowTop: 32,\n    iconToolTipBoxWidth: 300,\n    iconToolTipTop: 36,\n    dateBoxHorizontalPadding: 12,\n    BackgroundOverlayOpacity: 0.3,\n    selectWidth: 225,\n    selectMobileWidth: 175,\n    selectPadding: 2,\n    cartListItemDescriptionSize: 11,\n    mobileTablePadding: 12,\n    mobileTablePaddingBottom: 6,\n    mobileLabelVerticalPadding: 10,\n    mobileLabelPaddingRight: 35,\n    mobileLabelVerticalPaddingMobile: 8,\n    mobileLabelPaddingRightMobile: 20,\n    menuListItemIconSize: 16,\n    priceSplashHorizontalPadding: 10,\n    buttonWrapperMinWidth: 120,\n    buttonChildGap: 12,\n    buttonChildSmallGap: 8,\n    buttonChildExtraSmallGap: 4,\n    buttonBadgeTopPosition: -4,\n    buttonBadgeRightPosition: -2,\n    navHeaderHeight: 81,\n    navHeaderHeightSmall: 64,\n    searchModalZIndex: 900,\n    searchBarHorizontalPadding: 12,\n    headerBreakpoint: 991,\n    tooltipMinWidth: 80,\n    toolTipTop: 35,\n    toolTipArrowMarginTop: -5,\n    toolTipBackground: 'rgba(0,0,0,.7)',\n    toolTipArrowBorderWidth: 5,\n    searchListItemGridTemplateColumns: 25,\n    MarkingWrapperGridGap: 2,\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    redLight: '#FCE9E9',\n    // recipeTags\n    recipeVego: '#237039',\n    recipeLactose: '#5bc5f2',\n    recipeGluten: '#c74f07',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    mediumDark: '#6C6C6C',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    buttonGray: '#E5E4E5',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxs: 4,\n    xs: 8,\n    xs2: 12,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // xs all from 0-10\n        xs: 10,\n        // s all from 11-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        l1: 41,\n        code: 90\n    },\n    lineHeight: {\n        // xs all from 0-15\n        xs: 15,\n        // s all from 16-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',\n        highlightBoxShadow: '0 2px 5px 0 rgba(7,52,99,0.15)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xxs: 360,\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    listImageMaxWidth: 64,\n    listImageMaxHeight: 50,\n    listImageMaxWidthSmall: 32,\n    listImageMaxHeightSmall: 32,\n    listItemFlexGap: 20,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12,\n    menuHorizontalMargin: 12,\n    headerWrapperVerticalPadding: 20,\n    iconToolTipArrowLeft: 2.5,\n    iconToolTipArrowTop: 32,\n    iconToolTipBoxWidth: 300,\n    iconToolTipTop: 36,\n    dateBoxHorizontalPadding: 12,\n    BackgroundOverlayOpacity: 0.3,\n    selectWidth: 225,\n    selectMobileWidth: 175,\n    selectPadding: 2,\n    cartListItemDescriptionSize: 11,\n    mobileTablePadding: 12,\n    mobileTablePaddingBottom: 6,\n    mobileLabelVerticalPadding: 10,\n    mobileLabelPaddingRight: 35,\n    mobileLabelVerticalPaddingMobile: 8,\n    mobileLabelPaddingRightMobile: 20,\n    menuListItemIconSize: 16,\n    priceSplashHorizontalPadding: 10,\n    buttonWrapperMinWidth: 120,\n    buttonChildGap: 12,\n    buttonChildSmallGap: 8,\n    buttonChildExtraSmallGap: 4,\n    buttonBadgeTopPosition: -4,\n    buttonBadgeRightPosition: -2,\n    navHeaderHeight: 81,\n    navHeaderHeightSmall: 64,\n    searchModalZIndex: 900,\n    searchBarHorizontalPadding: 12,\n    headerBreakpoint: 991,\n    zipCodeInputSize: 48,\n    tooltipMinWidth: 80,\n    toolTipTop: 35,\n    toolTipArrowMarginTop: -5,\n    toolTipBackground: 'rgba(0,0,0,.7)',\n    toolTipArrowBorderWidth: 5,\n    searchListItemGridTemplateColumns: 25,\n    MarkingWrapperGridGap: 2,\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    redLight: '#FCE9E9',\n    // recipeTags\n    recipeVego: '#237039',\n    recipeLactose: '#5bc5f2',\n    recipeGluten: '#c74f07',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    mediumDark: '#6C6C6C',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    buttonGray: '#E5E4E5',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxxs: 2,\n    xxs: 4,\n    xs: 8,\n    xs2: 12,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // xs all from 0-10\n        xs: 10,\n        // s all from 11-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        l1: 41,\n        code: 90\n    },\n    lineHeight: {\n        // xs all from 0-15\n        xs: 15,\n        // s all from 16-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}

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

@@ -1,15 +1,21 @@
-import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 import { DropdownContainer, DropdownHeader, DropdownChildContainer } from './Dropdown.styles.js';
 
 var Dropdown = function (_a) {
     var isOpen = _a.isOpen, onClick = _a.onClick, dropdownHeader = _a.dropdownHeader, children = _a.children;
+    var variants = {
+        closed: {
+            height: 0,
+            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+        },
+        open: {
+            height: 'auto',
+            transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }
+        }
+    };
     return (React.createElement(DropdownContainer, null,
         React.createElement(DropdownHeader, { onClick: onClick }, dropdownHeader),
-        React.createElement(AnimatePresence, { initial: false }, isOpen && (React.createElement(DropdownChildContainer, { isOpen: isOpen, initial: "collapsed", animate: "open", exit: "collapsed", variants: {
-                open: { height: 'auto' },
-                collapsed: { height: 0 }
-            }, transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] } }, children)))));
+        React.createElement(DropdownChildContainer, { isOpen: isOpen, variants: variants, animate: isOpen ? 'open' : 'closed', initial: 'closed' }, children)));
 };
 
 export { Dropdown };

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

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

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

@@ -1,17 +1,18 @@
+import { theme } from '@citygross/design-tokens';
 import { useWindowSize } from '@citygross/utils';
 import React, { useRef, useState, useEffect } from 'react';
 import { SearchBar } from '../SearchBar/SearchBar.js';
-import { Nav as Nav$1, NavContainer, NavChildContainer, NavSearchContainer, NavMainLinks, NavDummySearchContainer, SearchResultOverlay } from './Nav.styles.js';
+import { Nav as Nav$1, NavContainer, NavChildContainer, NavMainLinks, NavDummySearchContainer, SearchResultOverlay } from './Nav.styles.js';
 
 var Nav = function (_a) {
-    var _b;
+    var _b, _c;
     var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
     var navContainerRef = useRef(null);
     var searchInputRef = useRef(null);
     var searchInputMobileRef = useRef(null);
     var navRef = useRef(null);
     var width = useWindowSize().width;
-    var _c = useState(0), elToRemove = _c[0], setElToRemove = _c[1];
+    var _d = useState(0), elToRemove = _d[0], setElToRemove = _d[1];
     var widthRef = useRef(null);
     var checkWidth = function () {
         var _a, _b;
@@ -45,17 +46,33 @@ var Nav = function (_a) {
             document.removeEventListener('click', function (e) { return handleClick(e); }, true);
         };
     }, [navContainerRef]);
+    var variants = {
+        closed: {
+            width: '0',
+            transition: {
+                duration: 0.1,
+                ease: 'linear'
+            }
+        },
+        open: {
+            width: 'auto',
+            transition: { duration: 0.1, ease: 'linear' }
+        }
+    };
     return (React.createElement(Nav$1, { height: height, topPosition: topPosition, ref: navRef },
         React.createElement(NavContainer, { maxWidth: maxWidth, ref: navContainerRef },
             logo,
             React.createElement(NavChildContainer, null,
-                searchIsOpen ? (React.createElement(NavSearchContainer, null,
-                    React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))) : (React.createElement(React.Fragment, null,
-                    React.createElement(NavMainLinks, null, (_b = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _b === void 0 ? void 0 : _b.map(function (link) { return link; })),
+                React.createElement(React.Fragment, null,
+                    React.createElement(NavMainLinks, { variants: variants, animate: theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint)
+                            ? false
+                            : searchIsOpen
+                                ? 'closed'
+                                : 'open' }, (_c = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _c === void 0 ? void 0 : _c.map(function (link) { return link; })),
                     React.createElement(NavDummySearchContainer, { onClick: function () {
                             onSearchClick && onSearchClick();
-                        } },
-                        React.createElement(SearchBar, { icon: searchIcon, flexGrow: 1, placeholder: searchPlaceHolder, value: searchValue, onChange: searchOnChange })))),
+                        }, isOpen: searchIsOpen },
+                        React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
                 rightContent)),
         React.createElement(SearchResultOverlay, { show: searchIsOpen })));
 };

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

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

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

@@ -1,14 +1,15 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
 
-var Nav = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    height: ", "px;\n  }\n"], ["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    height: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.height) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
-var NavContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var Nav = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  /* @media (min-width: ", "px) {\n    height: ", "px;\n  } */\n"], ["\n  display: flex;\n  background: ", ";\n  position: fixed;\n  top: ", "px;\n  left: 0;\n  height: ", "px;\n  width: 100%;\n  align-items: center;\n\n  /* @media (min-width: ", "px) {\n    height: ", "px;\n  } */\n"])), function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.background) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { var _a; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : 0; }, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.height) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
+var NavContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", ";\n  }\n"], ["\n  margin: 0 auto;\n  max-width: ", "px;\n  width: 100%;\n  display: flex;\n  padding: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", ";\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b, _c; return "".concat((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm, "px"); });
 var NavChildContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: flex-end;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  z-index: 20;\n"], ["\n  justify-content: flex-end;\n  display: flex;\n  flex: 1;\n  align-items: center;\n  z-index: 20;\n"])));
-var NavMainLinks = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var NavDummySearchContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"], ["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var NavSearchContainer = styled(NavDummySearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
+var NavMainLinks = styled(motion.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var NavDummySearchContainer = styled(motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"], ["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"])), function (props) { var _a; return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm); });
+styled(NavDummySearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
-export { Nav, NavChildContainer, NavContainer, NavDummySearchContainer, NavMainLinks, NavSearchContainer, SearchResultOverlay };
+export { Nav, NavChildContainer, NavContainer, NavDummySearchContainer, NavMainLinks, SearchResultOverlay };
 //# sourceMappingURL=Nav.styles.js.map

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

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

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

@@ -5,7 +5,8 @@ import { useTheme } from 'styled-components';
 import { SearchBarContainer, SearchForm, SearchLeftIcon, SearchInput, SearchRightLabel, MobileSearchIconContainer, SearchResultContainer, MobileSearchFormContainer } from './SearchBar.styles.js';
 
 var SearchBar = function (_a) {
-    var flexGrow = _a.flexGrow, isValid = _a.isValid, _b = _a.inputSize, inputSize = _b === void 0 ? 'medium' : _b, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef"]);
+    var _b, _c;
+    var flexGrow = _a.flexGrow, isValid = _a.isValid, _d = _a.inputSize, inputSize = _d === void 0 ? 'medium' : _d, activeBorderColor = _a.activeBorderColor, cancelLabel = _a.cancelLabel, icon = _a.icon, value = _a.value, resultBoxTopPosition = _a.resultBoxTopPosition, children = _a.children, inputRef = _a.inputRef, isOpen = _a.isOpen, searchOnSubmit = _a.searchOnSubmit, searchInputMobileRef = _a.searchInputMobileRef, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "searchOnSubmit", "searchInputMobileRef"]);
     var width = useWindowSize().width;
     var theme = useTheme();
     useEffect(function () {
@@ -21,6 +22,36 @@ var SearchBar = function (_a) {
             }
         }
     }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current, searchInputMobileRef === null || searchInputMobileRef === void 0 ? void 0 : searchInputMobileRef.current]);
+    var resultVariants = {
+        closed: {
+            height: '0',
+            transition: { duration: 0, ease: 'linear' }
+        },
+        open: {
+            height: 'auto',
+            transition: {
+                duration: theme.constants && width < ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint)
+                    ? 0
+                    : 0.2,
+                delay: theme.constants && width < ((_c = theme.constants) === null || _c === void 0 ? void 0 : _c.headerBreakpoint)
+                    ? 0
+                    : 0.1,
+                ease: 'linear'
+            }
+        }
+    };
+    var iconVariants = {
+        closed: {
+            opacity: 0,
+            display: 'none',
+            transition: { duration: 0, delay: 0, ease: 'linear' }
+        },
+        open: {
+            opacity: 1,
+            display: 'flex',
+            transition: { duration: 0.1, delay: 0.1, ease: 'linear' }
+        }
+    };
     return (React.createElement(React.Fragment, null,
         React.createElement(SearchBarContainer, { activeBorderColor: activeBorderColor, inputSize: inputSize, flexGrow: flexGrow, isOpen: isOpen },
             React.createElement(SearchForm, { hideInMobile: true, isOpen: isOpen, onSubmit: function (e) {
@@ -31,10 +62,10 @@ var SearchBar = function (_a) {
                 React.createElement(SearchInput, __assign({ flexGrow: flexGrow, isValid: isValid, inputSize: inputSize, activeBorderColor: activeBorderColor, ref: inputRef }, props, { value: value })),
                 cancelLabel ? (React.createElement(SearchRightLabel, { onClick: function (e) {
                         e.stopPropagation();
-                    }, isOpen: isOpen }, cancelLabel)) : null),
+                    }, variants: iconVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' }, cancelLabel)) : null),
             React.createElement(MobileSearchIconContainer, null,
                 React.createElement(SearchLeftIcon, null, icon)),
-            React.createElement(SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen },
+            React.createElement(SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen, variants: resultVariants, animate: isOpen ? 'open' : 'closed', initial: 'closed' },
                 React.createElement(MobileSearchFormContainer, null,
                     React.createElement(SearchForm, { onSubmit: function (e) {
                             e.preventDefault();
@@ -44,7 +75,7 @@ var SearchBar = function (_a) {
                         React.createElement(SearchInput, __assign({ flexGrow: flexGrow, isValid: isValid, inputSize: 'small', activeBorderColor: activeBorderColor, ref: searchInputMobileRef }, props, { value: value })),
                         cancelLabel ? (React.createElement(SearchRightLabel, { onClick: function (e) {
                                 e.stopPropagation();
-                            }, isOpen: isOpen }, cancelLabel)) : null)),
+                            } }, cancelLabel)) : null)),
                 children))));
 };
 

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

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

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

@@ -1,8 +1,9 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import { motion } from 'framer-motion';
 import styled from 'styled-components';
 
-var SearchResultContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 'block' : 'none'); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchModalZIndex; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
-var SearchRightLabel = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: ", ";\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"], ["\n  display: ", ";\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 'flex' : 'none'); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var SearchResultContainer = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    position: absolute;\n    top: ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchModalZIndex; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + ".concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); });
+var SearchRightLabel = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-left: ", "px;\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var SearchBarContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n"], ["\n  ", ";\n\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n"])), function (props) { return props.flexGrow && "flex: 1;"; });
 var SearchInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: ", "px;\n  padding: ", "px;\n\n  ::placeholder {\n    /* Chrome, Firefox, Opera, Safari 10.1+ */\n    color: ", ";\n    opacity: 1; /* Firefox */\n  }\n\n  :-ms-input-placeholder {\n    /* Internet Explorer 10-11 */\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    /* Microsoft Edge */\n    color: ", ";\n  }\n\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n"], ["\n  flex: 1;\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: ", "px;\n  padding: ", "px;\n\n  ::placeholder {\n    /* Chrome, Firefox, Opera, Safari 10.1+ */\n    color: ", ";\n    opacity: 1; /* Firefox */\n  }\n\n  :-ms-input-placeholder {\n    /* Internet Explorer 10-11 */\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    /* Microsoft Edge */\n    color: ", ";\n  }\n\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
     var _a, _b;

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { AnimatePresence } from 'framer-motion';
 import { createPortal } from 'react-dom';
 import { SideModalOverlay, SideModalContainer } from './SideModal.styles.js';
@@ -7,9 +7,14 @@ import { theme } from '@citygross/design-tokens';
 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 domSafe = typeof document !== 'undefined';
     return domSafe
-        ? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { onClick: onBackdropClick, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
+        ? 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)

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/SlideInOutContainer/SlideInOutContainer.js

@@ -1,13 +1,20 @@
 import { __rest, __assign } from '../../../../_virtual/_tslib.js';
-import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 import { SideModalContainer } from './SlideInOutContainer.styles.js';
 
 var SlideInOutContainer = function (_a) {
     var _b = _a.slideFrom, slideFrom = _b === void 0 ? 'right' : _b, isVisible = _a.isVisible, isInitial = _a.isInitial, fullHeight = _a.fullHeight, children = _a.children, props = __rest(_a, ["slideFrom", "isVisible", "isInitial", "fullHeight", "children"]);
-    return (React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalContainer, __assign({ slideFrom: slideFrom, transition: { type: 'just' }, onClick: function (e) { return e.stopPropagation(); }, fullHeight: fullHeight, initial: {
-            x: isInitial ? 0 : slideFrom === 'left' ? '-100%' : '100%'
-        }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, props), children))));
+    var iconVariants = {
+        show: {
+            x: 0,
+            transition: { duration: isInitial ? 0 : 0.3, delay: 0, ease: 'linear' }
+        },
+        hide: {
+            x: isInitial ? 0 : slideFrom === 'left' ? '-100%' : '100%',
+            transition: { duration: 0.3, delay: 0, ease: 'linear' }
+        }
+    };
+    return (React.createElement(SideModalContainer, __assign({ slideFrom: slideFrom, onClick: function (e) { return e.stopPropagation(); }, fullHeight: fullHeight, exit: { x: slideFrom === 'left' ? '-100%' : '100%' }, initial: isInitial ? 'show' : 'hide', animate: isVisible ? 'show' : 'hide', variants: iconVariants }, props), children));
 };
 
 export { SlideInOutContainer };

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

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

package/build/es/design-tokens/build/index.js

@@ -97,6 +97,7 @@ var constants = {
     searchModalZIndex: 900,
     searchBarHorizontalPadding: 12,
     headerBreakpoint: 991,
+    zipCodeInputSize: 48,
     tooltipMinWidth: 80,
     toolTipTop: 35,
     toolTipArrowMarginTop: -5,
@@ -156,6 +157,7 @@ var palette = {
 };
 
 var spacings = {
+    xxxs: 2,
     xxs: 4,
     xs: 8,
     xs2: 12,

package/build/es/design-tokens/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',\n        highlightBoxShadow: '0 2px 5px 0 rgba(7,52,99,0.15)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xxs: 360,\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    listImageMaxWidth: 64,\n    listImageMaxHeight: 50,\n    listImageMaxWidthSmall: 32,\n    listImageMaxHeightSmall: 32,\n    listItemFlexGap: 20,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12,\n    menuHorizontalMargin: 12,\n    headerWrapperVerticalPadding: 20,\n    iconToolTipArrowLeft: 2.5,\n    iconToolTipArrowTop: 32,\n    iconToolTipBoxWidth: 300,\n    iconToolTipTop: 36,\n    dateBoxHorizontalPadding: 12,\n    BackgroundOverlayOpacity: 0.3,\n    selectWidth: 225,\n    selectMobileWidth: 175,\n    selectPadding: 2,\n    cartListItemDescriptionSize: 11,\n    mobileTablePadding: 12,\n    mobileTablePaddingBottom: 6,\n    mobileLabelVerticalPadding: 10,\n    mobileLabelPaddingRight: 35,\n    mobileLabelVerticalPaddingMobile: 8,\n    mobileLabelPaddingRightMobile: 20,\n    menuListItemIconSize: 16,\n    priceSplashHorizontalPadding: 10,\n    buttonWrapperMinWidth: 120,\n    buttonChildGap: 12,\n    buttonChildSmallGap: 8,\n    buttonChildExtraSmallGap: 4,\n    buttonBadgeTopPosition: -4,\n    buttonBadgeRightPosition: -2,\n    navHeaderHeight: 81,\n    navHeaderHeightSmall: 64,\n    searchModalZIndex: 900,\n    searchBarHorizontalPadding: 12,\n    headerBreakpoint: 991,\n    tooltipMinWidth: 80,\n    toolTipTop: 35,\n    toolTipArrowMarginTop: -5,\n    toolTipBackground: 'rgba(0,0,0,.7)',\n    toolTipArrowBorderWidth: 5,\n    searchListItemGridTemplateColumns: 25,\n    MarkingWrapperGridGap: 2,\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    redLight: '#FCE9E9',\n    // recipeTags\n    recipeVego: '#237039',\n    recipeLactose: '#5bc5f2',\n    recipeGluten: '#c74f07',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    mediumDark: '#6C6C6C',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    buttonGray: '#E5E4E5',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxs: 4,\n    xs: 8,\n    xs2: 12,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // xs all from 0-10\n        xs: 10,\n        // s all from 11-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        l1: 41,\n        code: 90\n    },\n    lineHeight: {\n        // xs all from 0-15\n        xs: 15,\n        // s all from 16-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',\n        highlightBoxShadow: '0 2px 5px 0 rgba(7,52,99,0.15)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xxs: 360,\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    listImageMaxWidth: 64,\n    listImageMaxHeight: 50,\n    listImageMaxWidthSmall: 32,\n    listImageMaxHeightSmall: 32,\n    listItemFlexGap: 20,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12,\n    menuHorizontalMargin: 12,\n    headerWrapperVerticalPadding: 20,\n    iconToolTipArrowLeft: 2.5,\n    iconToolTipArrowTop: 32,\n    iconToolTipBoxWidth: 300,\n    iconToolTipTop: 36,\n    dateBoxHorizontalPadding: 12,\n    BackgroundOverlayOpacity: 0.3,\n    selectWidth: 225,\n    selectMobileWidth: 175,\n    selectPadding: 2,\n    cartListItemDescriptionSize: 11,\n    mobileTablePadding: 12,\n    mobileTablePaddingBottom: 6,\n    mobileLabelVerticalPadding: 10,\n    mobileLabelPaddingRight: 35,\n    mobileLabelVerticalPaddingMobile: 8,\n    mobileLabelPaddingRightMobile: 20,\n    menuListItemIconSize: 16,\n    priceSplashHorizontalPadding: 10,\n    buttonWrapperMinWidth: 120,\n    buttonChildGap: 12,\n    buttonChildSmallGap: 8,\n    buttonChildExtraSmallGap: 4,\n    buttonBadgeTopPosition: -4,\n    buttonBadgeRightPosition: -2,\n    navHeaderHeight: 81,\n    navHeaderHeightSmall: 64,\n    searchModalZIndex: 900,\n    searchBarHorizontalPadding: 12,\n    headerBreakpoint: 991,\n    zipCodeInputSize: 48,\n    tooltipMinWidth: 80,\n    toolTipTop: 35,\n    toolTipArrowMarginTop: -5,\n    toolTipBackground: 'rgba(0,0,0,.7)',\n    toolTipArrowBorderWidth: 5,\n    searchListItemGridTemplateColumns: 25,\n    MarkingWrapperGridGap: 2,\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    redLight: '#FCE9E9',\n    // recipeTags\n    recipeVego: '#237039',\n    recipeLactose: '#5bc5f2',\n    recipeGluten: '#c74f07',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    mediumDark: '#6C6C6C',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    buttonGray: '#E5E4E5',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxxs: 2,\n    xxs: 4,\n    xs: 8,\n    xs2: 12,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // xs all from 0-10\n        xs: 10,\n        // s all from 11-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        l1: 41,\n        code: 90\n    },\n    lineHeight: {\n        // xs all from 0-15\n        xs: 15,\n        // s all from 16-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.109",
+  "version": "0.7.111",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -62,14 +62,14 @@
     "styled-components": "^5.2.1"
   },
   "dependencies": {
-    "@citygross/design-tokens": "^0.2.31",
+    "@citygross/design-tokens": "^0.2.32",
     "@citygross/icons": "^0.1.7",
     "@citygross/react-use-bg-wizard": "^0.0.8",
-    "@citygross/typography": "^0.0.61",
+    "@citygross/typography": "^0.0.62",
     "@citygross/utils": "^0.0.22",
     "framer-motion": "^4.1.17",
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "7c4dfa102fb554b0d4879244b3e3e332841f6b3e"
+  "gitHead": "9ffc77a5ab0c4685aa33b9ab1caa84751cb4eea1"
 }