@citygross/components 0.7.80 → 0.7.82

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

@@ -1,11 +1,10 @@
 import React, { ChangeEventHandler } from 'react';
-import { TNavMainLink } from '../NavMainLink/NavMainLink';
 export declare type TNav = {
     logo: React.ReactNode;
     maxWidth?: number;
     height?: number;
     topPosition?: number;
-    mainLinks?: TNavMainLink[];
+    mainLinks?: React.ReactNode[];
     mainLinksBorderColor?: string;
     rightContent?: React.ReactNode;
     searchResultElement?: React.ReactNode;
@@ -16,5 +15,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

@@ -1,9 +1,10 @@
+import React from 'react';
 export declare type TNavMainLink = {
     text: string;
     href?: string;
     active?: boolean;
     target?: '_blank' | '_self';
     borderColor?: string;
+    component?: React.ReactNode;
 };
-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/cjs/components/src/components/AddressBlock/AddressBlock.js

@@ -73,9 +73,9 @@ 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('../NavMainLink/NavMainLink.styled.js');
 require('framer-motion');
 require('../SideModal/SideModal.styles.js');
 require('../IconText/IconText.styles.js');

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

@@ -39,7 +39,7 @@ function Button(_a) {
             icon,
             children)) : (children),
         React__default["default"].createElement("span", { className: "ripple" }),
-        buttonBadge && React__default["default"].createElement(Button_styles.ButtonBadge, null, buttonBadge)));
+        buttonBadge ? (React__default["default"].createElement(Button_styles.ButtonBadge, null, buttonBadge)) : null));
 }
 
 exports.Button = Button;

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

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _tslib = require('../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
 
@@ -7,6 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 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 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

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

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

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@citygross/design-tokens');
+var utils = require('@citygross/utils');
+var React = require('react');
+var SearchBar = require('../SearchBar/SearchBar.js');
+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; _d === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.primary : _d; var 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 link; })),
+                    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

@@ -9,14 +9,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 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 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; });
-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 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

@@ -1 +1 @@
-{"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
+{"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

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _tslib = require('../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
 
@@ -7,10 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 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 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

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

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

@@ -0,0 +1,33 @@
+'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]);
+    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

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _tslib = require('../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
 
@@ -7,13 +9,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 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) {
+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    ";
 });
-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 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
@@ -24,6 +26,12 @@ styled__default["default"].input(templateObject_4 || (templateObject_4 = _tslib.
         ? (_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 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

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

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

@@ -73,9 +73,9 @@ 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('../NavMainLink/NavMainLink.styled.js');
 require('framer-motion');
 require('../SideModal/SideModal.styles.js');
 require('../IconText/IconText.styles.js');

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

@@ -64,14 +64,11 @@ 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 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');
-require('./components/IconText/IconText.styles.js');
+var IconText = require('./components/IconText/IconText.js');
 var Logo = require('./components/Logo/Logo.js');
 var Dropdown = require('./components/Dropdown/Dropdown.js');
 
@@ -170,7 +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,9 +69,9 @@ 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 '../NavMainLink/NavMainLink.styled.js';
 import 'framer-motion';
 import '../SideModal/SideModal.styles.js';
 import '../IconText/IconText.styles.js';

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

@@ -31,7 +31,7 @@ function Button(_a) {
             icon,
             children)) : (children),
         React.createElement("span", { className: "ripple" }),
-        buttonBadge && React.createElement(ButtonBadge, null, buttonBadge)));
+        buttonBadge ? (React.createElement(ButtonBadge, null, buttonBadge)) : null));
 }
 
 export { Button, ButtonColor, ButtonSize };

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

@@ -1,6 +1,8 @@
 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 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

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

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

@@ -0,0 +1,68 @@
+import { theme } from '@citygross/design-tokens';
+import { useWindowSize } from '@citygross/utils';
+import React, { useRef, useState, useEffect } from 'react';
+import { SearchBar } from '../SearchBar/SearchBar.js';
+import { Nav as Nav$1, NavContainer, NavChildContainer, NavSearchContainer, NavMainLinks, NavDummySearchContainer, SearchResultOverlay } from './Nav.styles.js';
+
+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; _d === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.primary : _d; var 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 link; })),
+                    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

@@ -1,14 +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 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; });
-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 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 { NavDummySearchContainer };
+export { Nav, NavChildContainer, NavContainer, NavDummySearchContainer, NavMainLinks, NavSearchContainer, SearchResultOverlay };
 //# sourceMappingURL=Nav.styles.js.map

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

@@ -1,10 +1,12 @@
 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 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

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

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

@@ -0,0 +1,25 @@
+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]);
+    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

@@ -1,13 +1,13 @@
 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) {
+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    ";
 });
-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 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
@@ -18,6 +18,8 @@ styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n
         ? (_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 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

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

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

@@ -69,9 +69,9 @@ 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 '../NavMainLink/NavMainLink.styled.js';
 import 'framer-motion';
 import '../SideModal/SideModal.styles.js';
 import '../IconText/IconText.styles.js';

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

@@ -60,14 +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';
-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 { 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';
-import './components/IconText/IconText.styles.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.80",
+  "version": "0.7.82",
   "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": "08e4bf5ca179bcfca31e82cc5797a128181fc124"
+  "gitHead": "deb2bd9f4c54ae9de1a5034c4223f0d3d1752d5e"
 }