@citygross/components 0.7.141 → 0.7.142

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

@@ -16,5 +16,6 @@ export declare type TNav = {
     onSearchClick?: () => void;
     closeSearch?: () => void;
     searchIsOpen?: boolean;
+    overlayTopPosition?: number;
 };
-export declare const Nav: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
+export declare const Nav: ({ logo, maxWidth, overlayTopPosition, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;

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

@@ -2,7 +2,7 @@
 import { Story } from '@storybook/react';
 import { TNav } from './Nav';
 declare const _default: {
-    component: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
+    component: ({ logo, maxWidth, overlayTopPosition, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
     title: string;
     argTypes: {
         onScroll: {

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

@@ -8,6 +8,7 @@ declare type TNavContainer = {
 };
 declare type TNavSearchOverlay = {
     show?: boolean;
+    overlayTopPosition?: number;
 };
 declare type TSearchIsOpen = {
     isOpen?: boolean;

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

@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var Nav = function (_a) {
     var _b, _c, _d, _e;
-    var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
+    var logo = _a.logo, maxWidth = _a.maxWidth, overlayTopPosition = _a.overlayTopPosition, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
     var navContainerRef = React.useRef(null);
     var navChildContainerRef = React.useRef(null);
     var searchInputRef = React.useRef(null);
@@ -106,7 +106,7 @@ var Nav = function (_a) {
                                 onSearchClick && onSearchClick();
                             }, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
                 rightContent)),
-        React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: searchIsOpen })));
+        React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: searchIsOpen, overlayTopPosition: overlayTopPosition })));
 };
 
 exports.Nav = Nav;

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

@@ -16,7 +16,10 @@ var NavChildContainer = styled__default["default"].div(templateObject_3 || (temp
 var NavMainLinks = styled__default["default"](framerMotion.motion.div)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
 var SearchContainer = styled__default["default"](framerMotion.motion.div)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"], ["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"])), function (props) { var _a; return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm); });
 styled__default["default"](SearchContainer)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px"); });
+var SearchResultOverlay = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) {
+    var _a, _b, _c;
+    return "calc(".concat((_a = props === null || props === void 0 ? void 0 : props.overlayTopPosition) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall, "px - ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, "px)");
+}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 exports.Nav = Nav;

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/es/components/src/components/Nav/Nav.js

@@ -6,7 +6,7 @@ import { Nav as Nav$1, NavContainer, NavChildContainer, NavMainLinks, SearchCont
 
 var Nav = function (_a) {
     var _b, _c, _d, _e;
-    var logo = _a.logo, maxWidth = _a.maxWidth, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
+    var logo = _a.logo, maxWidth = _a.maxWidth, overlayTopPosition = _a.overlayTopPosition, height = _a.height, topPosition = _a.topPosition, mainLinks = _a.mainLinks, rightContent = _a.rightContent, searchResultElement = _a.searchResultElement, searchCancelLabel = _a.searchCancelLabel, searchIcon = _a.searchIcon, searchPlaceHolder = _a.searchPlaceHolder, searchOnChange = _a.searchOnChange, searchValue = _a.searchValue, searchOnSubmit = _a.searchOnSubmit, onSearchClick = _a.onSearchClick, closeSearch = _a.closeSearch, searchIsOpen = _a.searchIsOpen;
     var navContainerRef = useRef(null);
     var navChildContainerRef = useRef(null);
     var searchInputRef = useRef(null);
@@ -98,7 +98,7 @@ var Nav = function (_a) {
                                 onSearchClick && onSearchClick();
                             }, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
                 rightContent)),
-        React.createElement(SearchResultOverlay, { show: searchIsOpen })));
+        React.createElement(SearchResultOverlay, { show: searchIsOpen, overlayTopPosition: overlayTopPosition })));
 };
 
 export { Nav };

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

@@ -8,7 +8,10 @@ var NavChildContainer = styled.div(templateObject_3 || (templateObject_3 = __mak
 var NavMainLinks = styled(motion.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"], ["\n  display: none;\n  @media (min-width: ", "px) {\n    height: 100%;\n    display: flex;\n    gap: ", "px;\n    align-items: center;\n    width: auto;\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
 var SearchContainer = styled(motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"], ["\n  margin-left: ", "px;\n  display: flex;\n  align-items: center;\n  flex: 1;\n"])), function (props) { var _a; return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm); });
 styled(SearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) { var _a, _b; return "calc(".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px - ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px)"); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px"); });
+var SearchResultOverlay = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"], ["\n  display: ", ";\n  background: #333;\n  opacity: 0.5;\n  width: 100vw;\n  height: 100%;\n  position: fixed;\n  top: ", ";\n  left: 0;\n  overflow: hidden;\n  z-index: 10;\n  @media (min-width: ", "px) {\n    top: ", ";\n  }\n"])), function (props) { return (props.show ? 'block' : 'none'); }, function (props) {
+    var _a, _b, _c;
+    return "calc(".concat((_a = props === null || props === void 0 ? void 0 : props.overlayTopPosition) !== null && _a !== void 0 ? _a : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.navHeaderHeightSmall, "px - ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.xs, "px)");
+}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.navHeaderHeightSmall, "px"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 export { Nav, NavChildContainer, NavContainer, NavMainLinks, SearchContainer, SearchResultOverlay };

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.141",
+  "version": "0.7.142",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -62,14 +62,14 @@
     "styled-components": "^5.2.1"
   },
   "dependencies": {
-    "@citygross/design-tokens": "^0.2.40",
+    "@citygross/design-tokens": "^0.2.41",
     "@citygross/icons": "^0.1.8",
     "@citygross/react-use-bg-wizard": "^0.0.8",
-    "@citygross/typography": "^0.0.70",
+    "@citygross/typography": "^0.0.71",
     "@citygross/utils": "^0.0.22",
     "framer-motion": "^4.1.17",
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "895a450e2103a5104466fc9ae32a0112cd843cc4"
+  "gitHead": "0d8480df9b1e72774676b8161732a2fcbbcb4b53"
 }