@citygross/components 0.7.79 → 0.7.80

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

@@ -59,3 +59,10 @@ export * from './containers/TwoColumnsContainer/TwoColumnsPageContainer';
 export * from './components/UnorderedList';
 export * from './components/WarningLabel/WarningLabel';
 export * from './components/MobileTable';
+export * from './components/Nav/Nav';
+export * from './components/NavMainLink/NavMainLink';
+export * from './components/SearchBar/SearchBar';
+export * from './components/SideModal/SideModal';
+export * from './components/IconText/IconText';
+export * from './components/Logo/Logo';
+export * from './components/Dropdown/Dropdown';

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

@@ -73,6 +73,13 @@ require('../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js'
 require('../UnorderedList/UnorderedList.styles.js');
 require('../WarningLabel/WarningLabel.styles.js');
 require('../MobileTable/MobileTable.styles.js');
+require('../NavMainLink/NavMainLink.styled.js');
+require('../SearchBar/SearchBar.styles.js');
+require('../Nav/Nav.styles.js');
+require('framer-motion');
+require('../SideModal/SideModal.styles.js');
+require('../IconText/IconText.styles.js');
+require('../Dropdown/Dropdown.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

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

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var framerMotion = require('framer-motion');
+var React = require('react');
+var Dropdown_styles = require('./Dropdown.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Dropdown = function (_a) {
+    var isOpen = _a.isOpen, onClick = _a.onClick, dropdownHeader = _a.dropdownHeader, children = _a.children;
+    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)))));
+};
+
+exports.Dropdown = Dropdown;
+//# sourceMappingURL=Dropdown.js.map

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

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

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+var framerMotion = require('framer-motion');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var DropdownContainer = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject([""], [""])));
+var DropdownHeader = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var DropdownChildContainer = styled__default["default"](framerMotion.motion.div)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
+
+exports.DropdownChildContainer = DropdownChildContainer;
+exports.DropdownContainer = DropdownContainer;
+exports.DropdownHeader = DropdownHeader;
+//# sourceMappingURL=Dropdown.styles.js.map

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

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

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n"])), function (props) { var _a, _b; return (_a = props.spacing) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
+var templateObject_1;
+//# sourceMappingURL=IconText.styles.js.map

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

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

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
+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.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+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"])));
+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.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, 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; });
+styled__default["default"](NavDummySearchContainer)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    display: flex;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    display: flex;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
+styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: ", ";\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    height: calc(100vh - ", "px);\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: ", ";\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    height: calc(100vh - ", "px);\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a; return "calc(100vh - " + ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall) + "px)"; }, function (props) { var _a, _b; return "calc(" + ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall) + "px - " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px)"; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; }, function (props) { var _a; return "calc(" + ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight) + "px - 8px)"; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+exports.NavDummySearchContainer = NavDummySearchContainer;
+//# sourceMappingURL=Nav.styles.js.map

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

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

package/build/cjs/components/src/components/NavMainLink/NavMainLink.styled.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+styled__default["default"].a(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  height: 100%;\n  display: inline-flex;\n  cursor: pointer;\n  align-items: center;\n  white-space: nowrap;\n  font-weight: ", ";\n  ", ";\n  &:hover {\n    box-shadow: inset 0 -4px 0 ", ";\n  }\n"], ["\n  height: 100%;\n  display: inline-flex;\n  cursor: pointer;\n  align-items: center;\n  white-space: nowrap;\n  font-weight: ", ";\n  ", ";\n  &:hover {\n    box-shadow: inset 0 -4px 0 ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) {
+    var _a, _b;
+    return (props === null || props === void 0 ? void 0 : props.active) &&
+        "\n    box-shadow: inset 0 -4px 0 " + ((_a = props === null || props === void 0 ? void 0 : props.borderColor) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.primary) + ";\n  ";
+}, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.borderColor) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.primary; });
+var templateObject_1;
+//# sourceMappingURL=NavMainLink.styled.js.map

package/build/cjs/components/src/components/NavMainLink/NavMainLink.styled.js.map

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

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  position: absolute;\n  top: ", ";\n  left: 0;\n  width: 100%;\n"], ["\n  display: ", ";\n  position: absolute;\n  top: ", ";\n  left: 0;\n  width: 100%;\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 'block' : 'none'); }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px)"; });
+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; });
+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  @media (min-width: ", "px) {\n    flex-direction: row-reverse;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    background: ", ";\n    border-top: 1px solid ", ";\n    border-radius: ", "px;\n    ", "\n  }\n"], ["\n  ", ";\n\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n\n  @media (min-width: ", "px) {\n    flex-direction: row-reverse;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    background: ", ";\n    border-top: 1px solid ", ";\n    border-radius: ", "px;\n    ", "\n  }\n"])), function (props) { return props.flexGrow && "flex: 1;"; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, 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; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) {
+    return props.isOpen &&
+        "\n       flex-direction: row;\n      box-shadow: inset 0 0 2px " + props.activeBorderColor + ";\n    ";
+});
+styled__default["default"].input(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: none;\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  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n  @media (min-width: ", "px) {\n    display: block;\n  }\n"], ["\n  display: none;\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  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n  @media (min-width: ", "px) {\n    display: block;\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;
+    return props.inputSize === 'small'
+        ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs
+        : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2;
+}, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) {
+    var _a, _b;
+    return props.inputSize === 'small'
+        ? (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2
+        : (_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.size.s3;
+}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; });
+styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-right: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-right: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=SearchBar.styles.js.map

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

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

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var reactDom = require('react-dom');
+var SideModal_styles = require('./SideModal.styles.js');
+var designTokens = require('@citygross/design-tokens');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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, children = _a.children;
+    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: {
+                type: 'just'
+            } },
+            React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, 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)
+        : null;
+};
+
+exports.SideModal = SideModal;
+//# sourceMappingURL=SideModal.js.map

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+var framerMotion = require('framer-motion');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var SideModalOverlay = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { return props.overlayBackground; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  overflow: auto;\n  min-height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  overflow: auto;\n  min-height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
+var templateObject_1, templateObject_2;
+
+exports.SideModalContainer = SideModalContainer;
+exports.SideModalOverlay = SideModalOverlay;
+//# sourceMappingURL=SideModal.styles.js.map

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

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

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

@@ -73,6 +73,13 @@ require('../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js'
 require('../UnorderedList/UnorderedList.styles.js');
 var WarningLabel_styles = require('./WarningLabel.styles.js');
 require('../MobileTable/MobileTable.styles.js');
+require('../NavMainLink/NavMainLink.styled.js');
+require('../SearchBar/SearchBar.styles.js');
+require('../Nav/Nav.styles.js');
+require('framer-motion');
+require('../SideModal/SideModal.styles.js');
+require('../IconText/IconText.styles.js');
+require('../Dropdown/Dropdown.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

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

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

@@ -64,6 +64,16 @@ var TwoColumnsPageContainer = require('./containers/TwoColumnsContainer/TwoColum
 var UnorderedList_styles = require('./components/UnorderedList/UnorderedList.styles.js');
 var WarningLabel = require('./components/WarningLabel/WarningLabel.js');
 var MobileTable_styles = require('./components/MobileTable/MobileTable.styles.js');
+require('@citygross/design-tokens');
+require('@citygross/utils');
+require('react');
+require('./components/NavMainLink/NavMainLink.styled.js');
+require('./components/SearchBar/SearchBar.styles.js');
+require('./components/Nav/Nav.styles.js');
+var SideModal = require('./components/SideModal/SideModal.js');
+require('./components/IconText/IconText.styles.js');
+var Logo = require('./components/Logo/Logo.js');
+var Dropdown = require('./components/Dropdown/Dropdown.js');
 
 
 
@@ -160,4 +170,7 @@ exports.WarningLabel = WarningLabel.WarningLabel;
 exports.MobileLabel = MobileTable_styles.MobileLabel;
 exports.MobileTable = MobileTable_styles.MobileTable;
 exports.MobileTd = MobileTable_styles.MobileTd;
+exports.SideModal = SideModal.SideModal;
+exports.Logo = Logo.Logo;
+exports.Dropdown = Dropdown.Dropdown;
 //# sourceMappingURL=index.js.map

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

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

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

@@ -69,6 +69,13 @@ import '../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js';
 import '../UnorderedList/UnorderedList.styles.js';
 import '../WarningLabel/WarningLabel.styles.js';
 import '../MobileTable/MobileTable.styles.js';
+import '../NavMainLink/NavMainLink.styled.js';
+import '../SearchBar/SearchBar.styles.js';
+import '../Nav/Nav.styles.js';
+import 'framer-motion';
+import '../SideModal/SideModal.styles.js';
+import '../IconText/IconText.styles.js';
+import '../Dropdown/Dropdown.styles.js';
 
 function AddressBlock(_a) {
     var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;

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

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

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

@@ -0,0 +1,16 @@
+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;
+    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)))));
+};
+
+export { Dropdown };
+//# sourceMappingURL=Dropdown.js.map

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

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

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

@@ -0,0 +1,11 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+
+var DropdownContainer = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var DropdownHeader = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n"], ["\n  cursor: pointer;\n"])));
+var DropdownChildContainer = styled(motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { DropdownChildContainer, DropdownContainer, DropdownHeader };
+//# sourceMappingURL=Dropdown.styles.js.map

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

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

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

@@ -0,0 +1,6 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n"])), function (props) { var _a, _b; return (_a = props.spacing) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
+var templateObject_1;
+//# sourceMappingURL=IconText.styles.js.map

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

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

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

@@ -0,0 +1,14 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+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.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; });
+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.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+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"])));
+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.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, 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; });
+styled(NavDummySearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    display: flex;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    display: flex;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
+styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: ", ";\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    height: calc(100vh - ", "px);\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: ", ";\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    height: calc(100vh - ", "px);\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a; return "calc(100vh - " + ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall) + "px)"; }, function (props) { var _a, _b; return "calc(" + ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall) + "px - " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px)"; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight; }, function (props) { var _a; return "calc(" + ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeight) + "px - 8px)"; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { NavDummySearchContainer };
+//# sourceMappingURL=Nav.styles.js.map

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

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

package/build/es/components/src/components/NavMainLink/NavMainLink.styled.js

@@ -0,0 +1,10 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+styled.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  display: inline-flex;\n  cursor: pointer;\n  align-items: center;\n  white-space: nowrap;\n  font-weight: ", ";\n  ", ";\n  &:hover {\n    box-shadow: inset 0 -4px 0 ", ";\n  }\n"], ["\n  height: 100%;\n  display: inline-flex;\n  cursor: pointer;\n  align-items: center;\n  white-space: nowrap;\n  font-weight: ", ";\n  ", ";\n  &:hover {\n    box-shadow: inset 0 -4px 0 ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) {
+    var _a, _b;
+    return (props === null || props === void 0 ? void 0 : props.active) &&
+        "\n    box-shadow: inset 0 -4px 0 " + ((_a = props === null || props === void 0 ? void 0 : props.borderColor) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.primary) + ";\n  ";
+}, function (props) { var _a, _b; return (_a = props === null || props === void 0 ? void 0 : props.borderColor) !== null && _a !== void 0 ? _a : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.primary; });
+var templateObject_1;
+//# sourceMappingURL=NavMainLink.styled.js.map

package/build/es/components/src/components/NavMainLink/NavMainLink.styled.js.map

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

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

@@ -0,0 +1,23 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  position: absolute;\n  top: ", ";\n  left: 0;\n  width: 100%;\n"], ["\n  display: ", ";\n  position: absolute;\n  top: ", ";\n  left: 0;\n  width: 100%;\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 'block' : 'none'); }, function (props) { var _a, _b; return (_a = props.topPosition) !== null && _a !== void 0 ? _a : "calc(100% + " + ((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs) + "px)"; });
+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; });
+styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n\n  @media (min-width: ", "px) {\n    flex-direction: row-reverse;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    background: ", ";\n    border-top: 1px solid ", ";\n    border-radius: ", "px;\n    ", "\n  }\n"], ["\n  ", ";\n\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n\n  @media (min-width: ", "px) {\n    flex-direction: row-reverse;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    background: ", ";\n    border-top: 1px solid ", ";\n    border-radius: ", "px;\n    ", "\n  }\n"])), function (props) { return props.flexGrow && "flex: 1;"; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, 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; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall; }, function (props) {
+    return props.isOpen &&
+        "\n       flex-direction: row;\n      box-shadow: inset 0 0 2px " + props.activeBorderColor + ";\n    ";
+});
+styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\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  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n  @media (min-width: ", "px) {\n    display: block;\n  }\n"], ["\n  display: none;\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  @media (min-width: ", "px) {\n    font-size: ", "px;\n  }\n  @media (min-width: ", "px) {\n    display: block;\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;
+    return props.inputSize === 'small'
+        ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs
+        : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2;
+}, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.mediumDark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) {
+    var _a, _b;
+    return props.inputSize === 'small'
+        ? (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2
+        : (_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.size.s3;
+}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; });
+styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  margin-right: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  margin-right: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+//# sourceMappingURL=SearchBar.styles.js.map

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { AnimatePresence } from 'framer-motion';
+import { createPortal } from 'react-dom';
+import { SideModalOverlay, SideModalContainer } from './SideModal.styles.js';
+import { theme } from '@citygross/design-tokens';
+
+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, children = _a.children;
+    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: {
+                type: 'just'
+            } },
+            React.createElement(SideModalContainer, { slideFrom: slideFrom, 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)
+        : null;
+};
+
+export { SideModal };
+//# sourceMappingURL=SideModal.js.map

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

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

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

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

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

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

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

@@ -69,6 +69,13 @@ import '../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js';
 import '../UnorderedList/UnorderedList.styles.js';
 import { WarningIndicator } from './WarningLabel.styles.js';
 import '../MobileTable/MobileTable.styles.js';
+import '../NavMainLink/NavMainLink.styled.js';
+import '../SearchBar/SearchBar.styles.js';
+import '../Nav/Nav.styles.js';
+import 'framer-motion';
+import '../SideModal/SideModal.styles.js';
+import '../IconText/IconText.styles.js';
+import '../Dropdown/Dropdown.styles.js';
 
 function WarningLabel(_a) {
     var children = _a.children, background = _a.background, toolTip = _a.toolTip;

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

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

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

@@ -60,4 +60,14 @@ export { TwoColumnsPageContainer } from './containers/TwoColumnsContainer/TwoCol
 export { UnorderedList, UnorderedListItem } from './components/UnorderedList/UnorderedList.styles.js';
 export { WarningLabel } from './components/WarningLabel/WarningLabel.js';
 export { MobileLabel, MobileTable, MobileTd } from './components/MobileTable/MobileTable.styles.js';
+import '@citygross/design-tokens';
+import '@citygross/utils';
+import 'react';
+import './components/NavMainLink/NavMainLink.styled.js';
+import './components/SearchBar/SearchBar.styles.js';
+import './components/Nav/Nav.styles.js';
+export { SideModal } from './components/SideModal/SideModal.js';
+import './components/IconText/IconText.styles.js';
+export { Logo } from './components/Logo/Logo.js';
+export { Dropdown } from './components/Dropdown/Dropdown.js';
 //# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.79",
+  "version": "0.7.80",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "2f70e6546b103bc7d2929abee1544c6bd1fd4931"
+  "gitHead": "08e4bf5ca179bcfca31e82cc5797a128181fc124"
 }