@citygross/components 0.7.79 → 0.7.81

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

@@ -5,5 +5,4 @@ export declare type TIconText = {
     showOnlyIcon?: boolean;
     spacing?: number;
 };
-declare const IconText: ({ icon, spacing, children, showOnlyIcon }: TIconText) => JSX.Element;
-export default IconText;
+export declare const IconText: ({ icon, spacing, children, showOnlyIcon }: TIconText) => JSX.Element;

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

@@ -16,5 +16,4 @@ export declare type TNav = {
     searchValue?: string;
     onSearchClick?: () => void;
 };
-declare const Nav: ({ logo, maxWidth, height, topPosition, mainLinks, mainLinksBorderColor, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, onSearchClick }: TNav) => JSX.Element;
-export default Nav;
+export declare const Nav: ({ logo, maxWidth, height, topPosition, mainLinks, mainLinksBorderColor, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, onSearchClick }: TNav) => JSX.Element;

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

@@ -5,5 +5,4 @@ export declare type TNavMainLink = {
     target?: '_blank' | '_self';
     borderColor?: string;
 };
-declare const NavMainLink: ({ text, href, target, active, borderColor }: TNavMainLink) => JSX.Element;
-export default NavMainLink;
+export declare const NavMainLink: ({ text, href, target, active, borderColor }: TNavMainLink) => JSX.Element;

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

@@ -9,5 +9,4 @@ export declare type TSearchBar = styles.SearchInputProps & {
     isOpen?: boolean;
     children?: React.ReactNode;
 };
-declare const SearchBar: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, ...props }: TSearchBar) => JSX.Element;
-export default SearchBar;
+export declare const SearchBar: ({ flexGrow, isValid, inputSize, activeBorderColor, cancelLabel, icon, value, resultBoxTopPosition, children, inputRef, isOpen, onCancelClick, ...props }: TSearchBar) => JSX.Element;

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

@@ -7,6 +7,6 @@ export declare type TSideModal = {
     isVisible?: boolean;
     querySelector?: string;
     slideFrom?: 'left' | 'right';
-    overlayBackground: string;
+    overlayBackground?: string;
 };
 export declare const SideModal: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, children }: TSideModal) => React.ReactPortal | null;

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var IconText_styles = require('./IconText.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var IconText = function (_a) {
+    var icon = _a.icon, spacing = _a.spacing, children = _a.children, showOnlyIcon = _a.showOnlyIcon;
+    return (React__default["default"].createElement(IconText_styles.IconTextContainer, { spacing: spacing },
+        icon,
+        !showOnlyIcon && children));
+};
+
+exports.IconText = IconText;
+//# sourceMappingURL=IconText.js.map

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

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

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var IconTextContainer = 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;
+
+exports.IconTextContainer = IconTextContainer;
+//# 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.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@citygross/design-tokens');
+var utils = require('@citygross/utils');
+var React = require('react');
+var NavMainLink = require('../NavMainLink/NavMainLink.js');
+var SearchBar = require('../SearchBar/SearchBar.js');
+var Nav_styles = require('./Nav.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Nav = function (_a) {
+    var _b, _c;
+    var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, _d = _a.mainLinksBorderColor, mainLinksBorderColor = _d === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.primary : _d, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, onSearchClick = _a.onSearchClick;
+    var searchContainerRef = React.useRef(null);
+    var searchInputRef = React.useRef(null);
+    var navRef = React.useRef(null);
+    var width = utils.useWindowSize().width;
+    var _e = React.useState(0), elToRemove = _e[0], setElToRemove = _e[1];
+    var widthRef = React.useRef(null);
+    var checkWidth = function () {
+        var _a, _b;
+        if ((navRef === null || navRef === void 0 ? void 0 : navRef.current) &&
+            ((_a = navRef === null || navRef === void 0 ? void 0 : navRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) < ((_b = navRef === null || navRef === void 0 ? void 0 : navRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth)) {
+            setElToRemove(function (prev) { return prev + 1; });
+            widthRef.current = width;
+        }
+        else if ((widthRef === null || widthRef === void 0 ? void 0 : widthRef.current) && width >= (widthRef === null || widthRef === void 0 ? void 0 : widthRef.current)) {
+            setElToRemove(0);
+        }
+    };
+    React.useEffect(function () {
+        var debounce = setTimeout(function () {
+            checkWidth();
+        }, 300);
+        return function () {
+            clearTimeout(debounce);
+        };
+    }, [width]);
+    var _f = React.useState(false), openSearch = _f[0], setOpenSearch = _f[1];
+    React__default["default"].useEffect(function () {
+        var handleClick = function (event) {
+            var _a;
+            if ((searchContainerRef === null || searchContainerRef === void 0 ? void 0 : searchContainerRef.current) &&
+                !((_a = searchContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                event.stopPropagation();
+                setOpenSearch(false);
+            }
+        };
+        document.addEventListener('click', function (e) { return handleClick(e); }, true);
+        return function () {
+            document.removeEventListener('click', function (e) { return handleClick(e); }, true);
+        };
+    }, [searchContainerRef]);
+    return (React__default["default"].createElement(Nav_styles.Nav, { height: height, topPosition: topPosition, ref: navRef },
+        React__default["default"].createElement(Nav_styles.NavContainer, { maxWidth: maxWidth },
+            logo,
+            React__default["default"].createElement(Nav_styles.NavChildContainer, null,
+                openSearch ? (React__default["default"].createElement(Nav_styles.NavSearchContainer, { ref: searchContainerRef },
+                    React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, onCancelClick: function () {
+                            setOpenSearch(false);
+                        }, isOpen: openSearch }, searchResultElement))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement(Nav_styles.NavMainLinks, null, (_c = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, mainLinks.length - elToRemove)) === null || _c === void 0 ? void 0 : _c.map(function (link) { return (React__default["default"].createElement(NavMainLink.NavMainLink, { text: link.text, active: link.active, borderColor: mainLinksBorderColor, href: link.href, key: link.text, target: link.target })); })),
+                    React__default["default"].createElement(Nav_styles.NavDummySearchContainer, { onClick: function () {
+                            onSearchClick ? onSearchClick() : setOpenSearch(true);
+                        } },
+                        React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, flexGrow: 1, placeholder: searchPlaceHolder })))),
+                rightContent)),
+        React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: openSearch })));
+};
+
+exports.Nav = Nav;
+//# sourceMappingURL=Nav.js.map

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

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

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

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var 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.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; });
+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.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; });
+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.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; });
+var NavSearchContainer = 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; });
+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: ", ";\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.Nav = Nav;
+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/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.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var NavMainLink_styled = require('./NavMainLink.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var NavMainLink = function (_a) {
+    var text = _a.text, href = _a.href, _b = _a.target, target = _b === void 0 ? '_self' : _b, active = _a.active, borderColor = _a.borderColor;
+    return (React__default["default"].createElement(NavMainLink_styled.MainLinkContainer, { href: href, target: target, active: active, borderColor: borderColor }, text));
+};
+
+exports.NavMainLink = NavMainLink;
+//# sourceMappingURL=NavMainLink.js.map

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

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

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var MainLinkContainer = 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;
+
+exports.MainLinkContainer = MainLinkContainer;
+//# 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.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var React = require('react');
+var SearchBar_styles = require('./SearchBar.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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, onCancelClick = _a.onCancelClick, props = _tslib.__rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "onCancelClick"]);
+    React.useEffect(function () {
+        var _a;
+        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current]);
+    console.log(isOpen, '__________OPEN');
+    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.SearchLeftIcon, null, icon),
+            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();
+                    onCancelClick && onCancelClick();
+                }, isOpen: isOpen }, cancelLabel)) : null,
+            React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen }, children))));
+};
+
+exports.SearchBar = SearchBar;
+//# sourceMappingURL=SearchBar.js.map

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

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

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var SearchResultContainer = 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)"; });
+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 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  @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    ";
+});
+var SearchInput = 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; });
+var SearchLeftIcon = 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;
+
+exports.SearchBarContainer = SearchBarContainer;
+exports.SearchInput = SearchInput;
+exports.SearchLeftIcon = SearchLeftIcon;
+exports.SearchResultContainer = SearchResultContainer;
+exports.SearchRightLabel = SearchRightLabel;
+//# 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,13 @@ 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');
+var Nav = require('./components/Nav/Nav.js');
+var NavMainLink = require('./components/NavMainLink/NavMainLink.js');
+var SearchBar = require('./components/SearchBar/SearchBar.js');
+var SideModal = require('./components/SideModal/SideModal.js');
+var IconText = require('./components/IconText/IconText.js');
+var Logo = require('./components/Logo/Logo.js');
+var Dropdown = require('./components/Dropdown/Dropdown.js');
 
 
 
@@ -160,4 +167,11 @@ exports.WarningLabel = WarningLabel.WarningLabel;
 exports.MobileLabel = MobileTable_styles.MobileLabel;
 exports.MobileTable = MobileTable_styles.MobileTable;
 exports.MobileTd = MobileTable_styles.MobileTd;
+exports.Nav = Nav.Nav;
+exports.NavMainLink = NavMainLink.NavMainLink;
+exports.SearchBar = SearchBar.SearchBar;
+exports.SideModal = SideModal.SideModal;
+exports.IconText = IconText.IconText;
+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.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { IconTextContainer } from './IconText.styles.js';
+
+var IconText = function (_a) {
+    var icon = _a.icon, spacing = _a.spacing, children = _a.children, showOnlyIcon = _a.showOnlyIcon;
+    return (React.createElement(IconTextContainer, { spacing: spacing },
+        icon,
+        !showOnlyIcon && children));
+};
+
+export { IconText };
+//# sourceMappingURL=IconText.js.map

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

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

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

@@ -0,0 +1,8 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var IconTextContainer = 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;
+
+export { IconTextContainer };
+//# 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.js

@@ -0,0 +1,69 @@
+import { theme } from '@citygross/design-tokens';
+import { useWindowSize } from '@citygross/utils';
+import React, { useRef, useState, useEffect } from 'react';
+import { NavMainLink } from '../NavMainLink/NavMainLink.js';
+import { SearchBar } from '../SearchBar/SearchBar.js';
+import { Nav as Nav$1, NavContainer, NavChildContainer, NavSearchContainer, NavMainLinks, NavDummySearchContainer, SearchResultOverlay } from './Nav.styles.js';
+
+var Nav = function (_a) {
+    var _b, _c;
+    var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, _d = _a.mainLinksBorderColor, mainLinksBorderColor = _d === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.primary : _d, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, onSearchClick = _a.onSearchClick;
+    var searchContainerRef = useRef(null);
+    var searchInputRef = useRef(null);
+    var navRef = useRef(null);
+    var width = useWindowSize().width;
+    var _e = useState(0), elToRemove = _e[0], setElToRemove = _e[1];
+    var widthRef = useRef(null);
+    var checkWidth = function () {
+        var _a, _b;
+        if ((navRef === null || navRef === void 0 ? void 0 : navRef.current) &&
+            ((_a = navRef === null || navRef === void 0 ? void 0 : navRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) < ((_b = navRef === null || navRef === void 0 ? void 0 : navRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth)) {
+            setElToRemove(function (prev) { return prev + 1; });
+            widthRef.current = width;
+        }
+        else if ((widthRef === null || widthRef === void 0 ? void 0 : widthRef.current) && width >= (widthRef === null || widthRef === void 0 ? void 0 : widthRef.current)) {
+            setElToRemove(0);
+        }
+    };
+    useEffect(function () {
+        var debounce = setTimeout(function () {
+            checkWidth();
+        }, 300);
+        return function () {
+            clearTimeout(debounce);
+        };
+    }, [width]);
+    var _f = useState(false), openSearch = _f[0], setOpenSearch = _f[1];
+    React.useEffect(function () {
+        var handleClick = function (event) {
+            var _a;
+            if ((searchContainerRef === null || searchContainerRef === void 0 ? void 0 : searchContainerRef.current) &&
+                !((_a = searchContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+                event.stopPropagation();
+                setOpenSearch(false);
+            }
+        };
+        document.addEventListener('click', function (e) { return handleClick(e); }, true);
+        return function () {
+            document.removeEventListener('click', function (e) { return handleClick(e); }, true);
+        };
+    }, [searchContainerRef]);
+    return (React.createElement(Nav$1, { height: height, topPosition: topPosition, ref: navRef },
+        React.createElement(NavContainer, { maxWidth: maxWidth },
+            logo,
+            React.createElement(NavChildContainer, null,
+                openSearch ? (React.createElement(NavSearchContainer, { ref: searchContainerRef },
+                    React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, onCancelClick: function () {
+                            setOpenSearch(false);
+                        }, isOpen: openSearch }, searchResultElement))) : (React.createElement(React.Fragment, null,
+                    React.createElement(NavMainLinks, null, (_c = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, mainLinks.length - elToRemove)) === null || _c === void 0 ? void 0 : _c.map(function (link) { return (React.createElement(NavMainLink, { text: link.text, active: link.active, borderColor: mainLinksBorderColor, href: link.href, key: link.text, target: link.target })); })),
+                    React.createElement(NavDummySearchContainer, { onClick: function () {
+                            onSearchClick ? onSearchClick() : setOpenSearch(true);
+                        } },
+                        React.createElement(SearchBar, { icon: searchIcon, flexGrow: 1, placeholder: searchPlaceHolder })))),
+                rightContent)),
+        React.createElement(SearchResultOverlay, { show: openSearch })));
+};
+
+export { Nav };
+//# sourceMappingURL=Nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Nav.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';
+
+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.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; });
+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.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; });
+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.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; });
+var NavSearchContainer = 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; });
+var SearchResultOverlay = 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 { Nav, NavChildContainer, NavContainer, NavDummySearchContainer, NavMainLinks, NavSearchContainer, SearchResultOverlay };
+//# 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.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { MainLinkContainer } from './NavMainLink.styled.js';
+
+var NavMainLink = function (_a) {
+    var text = _a.text, href = _a.href, _b = _a.target, target = _b === void 0 ? '_self' : _b, active = _a.active, borderColor = _a.borderColor;
+    return (React.createElement(MainLinkContainer, { href: href, target: target, active: active, borderColor: borderColor }, text));
+};
+
+export { NavMainLink };
+//# sourceMappingURL=NavMainLink.js.map

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

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

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

@@ -0,0 +1,12 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var MainLinkContainer = 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;
+
+export { MainLinkContainer };
+//# 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.js

@@ -0,0 +1,26 @@
+import { __rest, __assign } from '../../../../_virtual/_tslib.js';
+import React, { useEffect } from 'react';
+import { SearchBarContainer, SearchLeftIcon, SearchInput, SearchRightLabel, SearchResultContainer } 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, onCancelClick = _a.onCancelClick, props = __rest(_a, ["flexGrow", "isValid", "inputSize", "activeBorderColor", "cancelLabel", "icon", "value", "resultBoxTopPosition", "children", "inputRef", "isOpen", "onCancelClick"]);
+    useEffect(function () {
+        var _a;
+        if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [inputRef === null || inputRef === void 0 ? void 0 : inputRef.current]);
+    console.log(isOpen, '__________OPEN');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SearchBarContainer, { activeBorderColor: activeBorderColor, inputSize: inputSize, flexGrow: flexGrow, isOpen: isOpen },
+            React.createElement(SearchLeftIcon, null, icon),
+            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();
+                    onCancelClick && onCancelClick();
+                }, isOpen: isOpen }, cancelLabel)) : null,
+            React.createElement(SearchResultContainer, { topPosition: resultBoxTopPosition, isOpen: isOpen }, children))));
+};
+
+export { SearchBar };
+//# sourceMappingURL=SearchBar.js.map

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

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

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

@@ -0,0 +1,25 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var SearchResultContainer = 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)"; });
+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 SearchBarContainer = 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    ";
+});
+var SearchInput = 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; });
+var SearchLeftIcon = 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;
+
+export { SearchBarContainer, SearchInput, SearchLeftIcon, SearchResultContainer, SearchRightLabel };
+//# 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,11 @@ 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';
+export { Nav } from './components/Nav/Nav.js';
+export { NavMainLink } from './components/NavMainLink/NavMainLink.js';
+export { SearchBar } from './components/SearchBar/SearchBar.js';
+export { SideModal } from './components/SideModal/SideModal.js';
+export { IconText } from './components/IconText/IconText.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.81",
   "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": "4434a3936ebb5616e0e59b7950267884f0789d63"
 }