@citygross/components 0.7.140 → 0.7.142

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build/@types/components/Nav/Nav.d.ts +2 -1
  2. package/build/@types/components/Nav/Nav.stories.d.ts +1 -1
  3. package/build/@types/components/Nav/Nav.styles.d.ts +2 -1
  4. package/build/cjs/components/src/components/Nav/Nav.js +6 -6
  5. package/build/cjs/components/src/components/Nav/Nav.styles.js +7 -4
  6. package/build/cjs/components/src/components/Nav/Nav.styles.js.map +1 -1
  7. package/build/es/components/src/components/Nav/Nav.js +7 -7
  8. package/build/es/components/src/components/Nav/Nav.styles.js +7 -4
  9. package/build/es/components/src/components/Nav/Nav.styles.js.map +1 -1
  10. package/package.json +4 -4
package/build/@types/components/Nav/Nav.d.ts CHANGED
@@ -16,5 +16,6 @@ export declare type TNav = {
16
16
  onSearchClick?: () => void;
17
17
  closeSearch?: () => void;
18
18
  searchIsOpen?: boolean;
19
+ overlayTopPosition?: number;
19
20
  };
20
- export declare const Nav: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
21
+ 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 CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Story } from '@storybook/react';
3
3
  import { TNav } from './Nav';
4
4
  declare const _default: {
5
- component: ({ logo, maxWidth, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
5
+ component: ({ logo, maxWidth, overlayTopPosition, height, topPosition, mainLinks, rightContent, searchResultElement, searchCancelLabel, searchIcon, searchPlaceHolder, searchOnChange, searchValue, searchOnSubmit, onSearchClick, closeSearch, searchIsOpen }: TNav) => JSX.Element;
6
6
  title: string;
7
7
  argTypes: {
8
8
  onScroll: {
package/build/@types/components/Nav/Nav.styles.d.ts CHANGED
@@ -8,6 +8,7 @@ declare type TNavContainer = {
8
8
  };
9
9
  declare type TNavSearchOverlay = {
10
10
  show?: boolean;
11
+ overlayTopPosition?: number;
11
12
  };
12
13
  declare type TSearchIsOpen = {
13
14
  isOpen?: boolean;
@@ -16,7 +17,7 @@ export declare const Nav: import("styled-components").StyledComponent<"div", imp
16
17
  export declare const NavContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TNavContainer, never>;
17
18
  export declare const NavChildContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
18
19
  export declare const NavMainLinks: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, {}, never>;
19
- export declare const NavDummySearchContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSearchIsOpen, never>;
20
+ export declare const SearchContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSearchIsOpen, never>;
20
21
  export declare const NavSearchContainer: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TSearchIsOpen, never>;
21
22
  export declare const SearchResultOverlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TNavSearchOverlay, never>;
22
23
  export {};
package/build/cjs/components/src/components/Nav/Nav.js CHANGED
@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
 
15
15
  var Nav = function (_a) {
16
16
  var _b, _c, _d, _e;
17
- 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;
17
+ 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;
18
18
  var navContainerRef = React.useRef(null);
19
19
  var navChildContainerRef = React.useRef(null);
20
20
  var searchInputRef = React.useRef(null);
@@ -101,12 +101,12 @@ var Nav = function (_a) {
101
101
  : searchIsOpen
102
102
  ? 'closed'
103
103
  : 'open', initial: 'open' }, (_e = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _e === void 0 ? void 0 : _e.map(function (link) { return link; })),
104
- React__default["default"].createElement(Nav_styles.NavDummySearchContainer, { onClick: function () {
105
- onSearchClick && onSearchClick();
106
- }, isOpen: searchIsOpen },
107
- React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
104
+ React__default["default"].createElement(Nav_styles.SearchContainer, { isOpen: searchIsOpen },
105
+ React__default["default"].createElement(SearchBar.SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
106
+ onSearchClick && onSearchClick();
107
+ }, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
108
108
  rightContent)),
109
- React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: searchIsOpen })));
109
+ React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: searchIsOpen, overlayTopPosition: overlayTopPosition })));
110
110
  };
111
111
 
112
112
  exports.Nav = Nav;
package/build/cjs/components/src/components/Nav/Nav.styles.js CHANGED
@@ -14,15 +14,18 @@ var Nav = styled__default["default"].div(templateObject_1 || (templateObject_1 =
14
14
  var NavContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n margin: 0 auto;\n max-width: ", "px;\n width: 100%;\n display: flex;\n padding: ", "px;\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"], ["\n margin: 0 auto;\n max-width: ", "px;\n width: 100%;\n display: flex;\n padding: ", "px;\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b, _c; return "".concat((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm, "px"); });
15
15
  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"])));
16
16
  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; });
17
- var NavDummySearchContainer = styled__default["default"](framerMotion.motion.div)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n margin-left: ", "px;\n display: flex;\n align-items: center;\n flex: 1;\n"], ["\n margin-left: ", "px;\n display: flex;\n align-items: center;\n flex: 1;\n"])), function (props) { var _a; return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm); });
18
- styled__default["default"](NavDummySearchContainer)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
19
- 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"); });
17
+ 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); });
18
+ styled__default["default"](SearchContainer)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
19
+ 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) {
20
+ var _a, _b, _c;
21
+ 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)");
22
+ }, 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"); });
20
23
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
21
24
 
22
25
  exports.Nav = Nav;
23
26
  exports.NavChildContainer = NavChildContainer;
24
27
  exports.NavContainer = NavContainer;
25
- exports.NavDummySearchContainer = NavDummySearchContainer;
26
28
  exports.NavMainLinks = NavMainLinks;
29
+ exports.SearchContainer = SearchContainer;
27
30
  exports.SearchResultOverlay = SearchResultOverlay;
28
31
  //# sourceMappingURL=Nav.styles.js.map
package/build/cjs/components/src/components/Nav/Nav.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/es/components/src/components/Nav/Nav.js CHANGED
@@ -2,11 +2,11 @@ import { theme } from '@citygross/design-tokens';
2
2
  import { useWindowSize } from '@citygross/utils';
3
3
  import React, { useRef, useState, useEffect } from 'react';
4
4
  import { SearchBar } from '../SearchBar/SearchBar.js';
5
- import { Nav as Nav$1, NavContainer, NavChildContainer, NavMainLinks, NavDummySearchContainer, SearchResultOverlay } from './Nav.styles.js';
5
+ import { Nav as Nav$1, NavContainer, NavChildContainer, NavMainLinks, SearchContainer, SearchResultOverlay } from './Nav.styles.js';
6
6
 
7
7
  var Nav = function (_a) {
8
8
  var _b, _c, _d, _e;
9
- 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;
9
+ 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;
10
10
  var navContainerRef = useRef(null);
11
11
  var navChildContainerRef = useRef(null);
12
12
  var searchInputRef = useRef(null);
@@ -93,12 +93,12 @@ var Nav = function (_a) {
93
93
  : searchIsOpen
94
94
  ? 'closed'
95
95
  : 'open', initial: 'open' }, (_e = mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.slice(0, (mainLinks === null || mainLinks === void 0 ? void 0 : mainLinks.length) - elToRemove)) === null || _e === void 0 ? void 0 : _e.map(function (link) { return link; })),
96
- React.createElement(NavDummySearchContainer, { onClick: function () {
97
- onSearchClick && onSearchClick();
98
- }, isOpen: searchIsOpen },
99
- React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
96
+ React.createElement(SearchContainer, { isOpen: searchIsOpen },
97
+ React.createElement(SearchBar, { icon: searchIcon, cancelLabel: searchCancelLabel, flexGrow: 1, onClick: function () {
98
+ onSearchClick && onSearchClick();
99
+ }, placeholder: searchPlaceHolder, onChange: searchOnChange, value: searchValue, inputRef: searchInputRef, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, isOpen: searchIsOpen }, searchResultElement))),
100
100
  rightContent)),
101
- React.createElement(SearchResultOverlay, { show: searchIsOpen })));
101
+ React.createElement(SearchResultOverlay, { show: searchIsOpen, overlayTopPosition: overlayTopPosition })));
102
102
  };
103
103
 
104
104
  export { Nav };
package/build/es/components/src/components/Nav/Nav.styles.js CHANGED
@@ -6,10 +6,13 @@ var Nav = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObjec
6
6
  var NavContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n margin: 0 auto;\n max-width: ", "px;\n width: 100%;\n display: flex;\n padding: ", "px;\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"], ["\n margin: 0 auto;\n max-width: ", "px;\n width: 100%;\n display: flex;\n padding: ", "px;\n @media (min-width: ", "px) {\n padding: ", ";\n }\n"])), function (props) { return props.maxWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.headerBreakpoint; }, function (props) { var _a, _b, _c; return "".concat((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px ").concat((_c = props.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm, "px"); });
7
7
  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"])));
8
8
  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; });
9
- var NavDummySearchContainer = styled(motion.div)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n margin-left: ", "px;\n display: flex;\n align-items: center;\n flex: 1;\n"], ["\n margin-left: ", "px;\n display: flex;\n align-items: center;\n flex: 1;\n"])), function (props) { var _a; return ((props === null || props === void 0 ? void 0 : props.isOpen) ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm); });
10
- styled(NavDummySearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
11
- 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"); });
9
+ 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); });
10
+ styled(SearchContainer)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
11
+ 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) {
12
+ var _a, _b, _c;
13
+ 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)");
14
+ }, 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"); });
12
15
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
13
16
 
14
- export { Nav, NavChildContainer, NavContainer, NavDummySearchContainer, NavMainLinks, SearchResultOverlay };
17
+ export { Nav, NavChildContainer, NavContainer, NavMainLinks, SearchContainer, SearchResultOverlay };
15
18
  //# sourceMappingURL=Nav.styles.js.map
package/build/es/components/src/components/Nav/Nav.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Nav.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.140",
3
+ "version": "0.7.142",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -62,14 +62,14 @@
62
62
  "styled-components": "^5.2.1"
63
63
  },
64
64
  "dependencies": {
65
- "@citygross/design-tokens": "^0.2.39",
65
+ "@citygross/design-tokens": "^0.2.41",
66
66
  "@citygross/icons": "^0.1.8",
67
67
  "@citygross/react-use-bg-wizard": "^0.0.8",
68
- "@citygross/typography": "^0.0.69",
68
+ "@citygross/typography": "^0.0.71",
69
69
  "@citygross/utils": "^0.0.22",
70
70
  "framer-motion": "^4.1.17",
71
71
  "moment": "^2.29.1",
72
72
  "react-loading-skeleton": "^2.2.0"
73
73
  },
74
- "gitHead": "da7d8e4449bff730b58e2d7713be1dda30f2f678"
74
+ "gitHead": "0d8480df9b1e72774676b8161732a2fcbbcb4b53"
75
75
  }