@citygross/components 0.8.176 → 0.8.177

package/build/@types/components/Button/NavButton.d.ts

@@ -16,4 +16,25 @@ export declare type TNavButton = styles.TButton & styles.TBaseSmallButton & {
     tabIndex?: number;
     xsSize?: keyof typeof ButtonSize;
 };
-export declare function NavButton({ badgeBackground, badgeMinWidth, border, borderRadius, buttonBadge, center, childGap, children, color, flexReverse, fullWidth, height, width, hoverBackground, keepLabel, icon, id, isDisabled, loading, minWidth, noShadow, noWrap, onClick, shadow, size, tabIndex, xsSize, ...props }: TNavButton): JSX.Element;
+export declare const NavButton: React.ForwardRefExoticComponent<styles.TButton & Omit<styles.TButton, "size" | "flexReverse" | "fullWidth" | "center"> & {
+    width?: number | undefined;
+    height?: number | undefined;
+    color?: string | undefined;
+    opacity?: string | undefined;
+    border?: string | undefined;
+    shadow?: boolean | undefined;
+} & {
+    badgeBackground?: string | undefined;
+    badgeMinWidth?: number | undefined;
+    buttonBadge?: string | undefined;
+    children?: React.ReactNode;
+    color?: "primary" | "secondary" | "white" | "darkest" | "lightest" | "buttonGray" | "brandPurple" | "alertGreen" | undefined;
+    href?: string | undefined;
+    icon: JSX.Element;
+    id?: string | undefined;
+    keepLabel?: boolean | undefined;
+    minWidth?: number | undefined;
+    size: keyof typeof ButtonSize;
+    tabIndex?: number | undefined;
+    xsSize?: "small" | "medium" | "large" | "header" | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

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

@@ -13,6 +13,7 @@ export declare type TNav = {
     rightContent?: React.ReactNode;
     searchAriaLabel: string;
     searchCancelLabel?: React.ReactNode;
+    searchContainerAriaLabel: string;
     searchContainerRef: React.RefObject<HTMLDivElement>;
     searchIcon?: React.ReactNode;
     searchInputMobileRef: React.RefObject<HTMLInputElement>;
@@ -25,4 +26,4 @@ export declare type TNav = {
     searchValue?: string;
     topPosition?: number;
 };
-export declare const Nav: ({ closeSearch, height, inputIcon, logo, mainLinks, maxWidth, mobileTopPosition, onSearchBlur, onSearchClick, overlayTopPosition, rightContent, searchAriaLabel, searchCancelLabel, searchContainerRef, searchIcon, searchInputMobileRef, searchInputRef, searchIsOpen, searchOnChange, searchOnSubmit, searchPlaceHolder, searchResultElement, searchValue, topPosition }: TNav) => JSX.Element;
+export declare const Nav: ({ closeSearch, height, inputIcon, logo, mainLinks, maxWidth, mobileTopPosition, onSearchBlur, onSearchClick, overlayTopPosition, rightContent, searchAriaLabel, searchCancelLabel, searchContainerAriaLabel, searchContainerRef, searchIcon, searchInputMobileRef, searchInputRef, searchIsOpen, searchOnChange, searchOnSubmit, searchPlaceHolder, searchResultElement, searchValue, topPosition }: TNav) => JSX.Element;

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

@@ -16,6 +16,7 @@ require('../Box/Box.styles.js');
 require('../Button/Button.js');
 require('@citygross/design-tokens');
 require('../Button/Button.styles.js');
+require('../Button/NavButton.js');
 require('../CartCard/CartCard.styles.js');
 require('../CgButton/CgButton.js');
 require('../CgButton/CgButton.types.js');

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

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

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

@@ -11,9 +11,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function NavButton(_a) {
+var NavButton = React__default["default"].forwardRef(function (_a, ref) {
     var badgeBackground = _a.badgeBackground, badgeMinWidth = _a.badgeMinWidth, border = _a.border, borderRadius = _a.borderRadius, buttonBadge = _a.buttonBadge, _b = _a.center, center = _b === void 0 ? true : _b, childGap = _a.childGap, children = _a.children, _c = _a.color, color = _c === void 0 ? 'darkest' : _c, flexReverse = _a.flexReverse, fullWidth = _a.fullWidth, height = _a.height, width = _a.width, hoverBackground = _a.hoverBackground, keepLabel = _a.keepLabel, icon = _a.icon, id = _a.id, isDisabled = _a.isDisabled, loading = _a.loading, minWidth = _a.minWidth, noShadow = _a.noShadow, noWrap = _a.noWrap, onClick = _a.onClick, shadow = _a.shadow, size = _a.size, tabIndex = _a.tabIndex, xsSize = _a.xsSize, props = _tslib.__rest(_a, ["badgeBackground", "badgeMinWidth", "border", "borderRadius", "buttonBadge", "center", "childGap", "children", "color", "flexReverse", "fullWidth", "height", "width", "hoverBackground", "keepLabel", "icon", "id", "isDisabled", "loading", "minWidth", "noShadow", "noWrap", "onClick", "shadow", "size", "tabIndex", "xsSize"]);
-    return (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ border: border, borderRadius: borderRadius, center: center, childGap: childGap, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', disabled: loading || isDisabled, height: height, width: width, hoverBackground: hoverBackground, flexReverse: flexReverse, fullWidth: fullWidth, icon: icon, id: id || 'nav-button', isDisabled: loading || isDisabled, keepLabel: keepLabel, loading: loading || null, minWidth: minWidth, noShadow: noShadow, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, shadow: shadow, size: size, tabIndex: tabIndex, xsSize: xsSize }, props),
+    return (React__default["default"].createElement(Button_styles.NavButton, _tslib.__assign({ ref: ref, border: border, borderRadius: borderRadius, center: center, childGap: childGap, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', disabled: loading || isDisabled, height: height, width: width, hoverBackground: hoverBackground, flexReverse: flexReverse, fullWidth: fullWidth, icon: icon, id: id || 'nav-button', isDisabled: loading || isDisabled, keepLabel: keepLabel, loading: loading || null, minWidth: minWidth, noShadow: noShadow, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, shadow: shadow, size: size, tabIndex: tabIndex, xsSize: xsSize }, props),
         loading && (React__default["default"].createElement(Button_styles.Loading, null,
             React__default["default"].createElement(Button_styles.LoadingContainer, null,
                 React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),
@@ -22,7 +22,8 @@ function NavButton(_a) {
             icon,
             children)) : (children),
         buttonBadge ? (React__default["default"].createElement(Button_styles.ButtonBadge, { background: badgeBackground, minWidth: badgeMinWidth, smallBadge: true }, buttonBadge)) : null));
-}
+});
+NavButton.displayName = 'NavButton';
 
 exports.NavButton = NavButton;
 //# sourceMappingURL=NavButton.js.map

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

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

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

@@ -8,6 +8,7 @@ require('../../../../_virtual/_tslib.js');
 var designTokens = require('@citygross/design-tokens');
 require('../Button/Button.styles.js');
 require('@citygross/typography');
+require('../Button/NavButton.js');
 var fallback_grocery = require('../ListItem/assets/fallback_grocery.svg.js');
 var InfoTextBlock_styles = require('./InfoTextBlock.styles.js');
 

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

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

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 closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent, searchAriaLabel = _a.searchAriaLabel, searchCancelLabel = _a.searchCancelLabel, searchContainerRef = _a.searchContainerRef, searchIcon = _a.searchIcon, searchInputMobileRef = _a.searchInputMobileRef, searchInputRef = _a.searchInputRef, searchIsOpen = _a.searchIsOpen, searchOnChange = _a.searchOnChange, searchOnSubmit = _a.searchOnSubmit, searchPlaceHolder = _a.searchPlaceHolder, searchResultElement = _a.searchResultElement, searchValue = _a.searchValue, topPosition = _a.topPosition;
+    var closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent, searchAriaLabel = _a.searchAriaLabel, searchCancelLabel = _a.searchCancelLabel, searchContainerAriaLabel = _a.searchContainerAriaLabel, searchContainerRef = _a.searchContainerRef, searchIcon = _a.searchIcon, searchInputMobileRef = _a.searchInputMobileRef, searchInputRef = _a.searchInputRef, searchIsOpen = _a.searchIsOpen, searchOnChange = _a.searchOnChange, searchOnSubmit = _a.searchOnSubmit, searchPlaceHolder = _a.searchPlaceHolder, searchResultElement = _a.searchResultElement, searchValue = _a.searchValue, topPosition = _a.topPosition;
     var navContainerRef = React.useRef(null);
     var navChildContainerRef = React.useRef(null);
     var navRef = React.useRef(null);
@@ -48,12 +48,11 @@ var Nav = function (_a) {
                 setElToRemove(function (prev) { return prev - 1; });
             }
         }
-        else ;
         setLocalWidth(width);
     };
     React.useEffect(function () {
         var debounce = setTimeout(function () {
-            checkWidth();
+            checkWidth === null || checkWidth === void 0 ? void 0 : checkWidth();
         }, 300);
         return function () {
             clearTimeout(debounce);
@@ -61,21 +60,22 @@ var Nav = function (_a) {
     }, [
         width,
         (_b = navRef === null || navRef === void 0 ? void 0 : navRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
-        (_c = navChildContainerRef === null || navChildContainerRef === void 0 ? void 0 : navChildContainerRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth
+        (_c = navChildContainerRef === null || navChildContainerRef === void 0 ? void 0 : navChildContainerRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth,
+        localWidth
     ]);
-    React__default["default"].useEffect(function () {
+    React.useEffect(function () {
         var handleClick = function (event) {
             var _a;
             if ((navContainerRef === null || navContainerRef === void 0 ? void 0 : navContainerRef.current) &&
-                !((_a = navContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                closeSearch && closeSearch();
+                !((_a = navContainerRef === null || navContainerRef === void 0 ? void 0 : navContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event === null || event === void 0 ? void 0 : event.target))) {
+                closeSearch === null || closeSearch === void 0 ? void 0 : closeSearch();
             }
         };
-        document.addEventListener('click', function (e) { return handleClick(e); }, true);
+        document.addEventListener('click', handleClick, true);
         return function () {
-            document.removeEventListener('click', function (e) { return handleClick(e); }, true);
+            document.removeEventListener('click', handleClick, true);
         };
-    }, [navContainerRef]);
+    }, [closeSearch, navContainerRef]);
     var variants = {
         closed: {
             width: '0',
@@ -99,14 +99,8 @@ var Nav = function (_a) {
                             : searchIsOpen
                                 ? 'closed'
                                 : '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; })),
-                    React__default["default"].createElement(Nav_styles.SearchContainer, { "aria-label": searchAriaLabel, "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
-                        React__default["default"].createElement(SearchBar.SearchBar, { "aria-label": searchPlaceHolder, cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon, inputRef: searchInputRef, isOpen: searchIsOpen, mobileTopPosition: mobileTopPosition, onBlur: onSearchBlur, onChange: searchOnChange, onClick: function () {
-                                onSearchClick && onSearchClick();
-                            }, onKeyDown: function (e) {
-                                if (e.key === 'Enter') {
-                                    onSearchClick && onSearchClick();
-                                }
-                            }, placeholder: searchPlaceHolder, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, value: searchValue }, searchResultElement))),
+                    React__default["default"].createElement(Nav_styles.SearchContainer, { "aria-expanded": searchIsOpen, "aria-label": searchContainerAriaLabel, "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
+                        React__default["default"].createElement(SearchBar.SearchBar, { "aria-label": searchAriaLabel, cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon, inputRef: searchInputRef, isOpen: searchIsOpen, mobileTopPosition: mobileTopPosition, onBlur: onSearchBlur, onChange: searchOnChange, onClick: function () { return onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick(); }, onKeyDown: function (e) { return e.key === 'Enter' && (onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick()); }, placeholder: searchPlaceHolder, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, value: searchValue }, searchResultElement))),
                 rightContent)),
         React__default["default"].createElement(Nav_styles.SearchResultOverlay, { show: searchIsOpen, overlayTopPosition: overlayTopPosition })));
 };

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

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

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

@@ -50,29 +50,25 @@ var SearchBar = function (_a) {
         }
     };
     return (React__default["default"].createElement(React.Fragment, null,
-        React__default["default"].createElement(SearchBar_styles.SearchBarContainer, { activeBorderColor: activeBorderColor, flexGrow: flexGrow, inputSize: inputSize, isOpen: isOpen },
+        React__default["default"].createElement(SearchBar_styles.SearchBarContainer, { activeBorderColor: activeBorderColor, flexGrow: flexGrow, inputSize: inputSize, isOpen: isOpen, role: "search" },
             React__default["default"].createElement(SearchBar_styles.SearchForm, { hideInMobile: true, isOpen: isOpen, onSubmit: function (e) {
                     e.preventDefault();
-                    searchOnSubmit && searchOnSubmit();
+                    searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
                 } },
                 React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, inputIcon),
                 React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, id: "search-input", inputSize: inputSize, isValid: isValid, ref: inputRef, value: value }, props)),
-                cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: 'closed', onClick: function (e) {
-                        e.stopPropagation();
-                    }, variants: iconVariants }, cancelLabel)) : null),
+                cancelLabel && (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: "closed", onClick: function (e) { return e.stopPropagation(); }, variants: iconVariants }, cancelLabel))),
             React__default["default"].createElement(SearchBar_styles.MobileSearchIconContainer, null,
                 React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, icon)),
-            React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { animate: isOpen ? 'open' : 'closed', initial: 'closed', isOpen: isOpen, mobileTopPosition: mobileTopPosition, topPosition: resultBoxTopPosition, variants: resultVariants },
+            React__default["default"].createElement(SearchBar_styles.SearchResultContainer, { animate: isOpen ? 'open' : 'closed', initial: "closed", isOpen: isOpen, mobileTopPosition: mobileTopPosition, topPosition: resultBoxTopPosition, variants: resultVariants },
                 React__default["default"].createElement(SearchBar_styles.MobileSearchFormContainer, null,
                     React__default["default"].createElement(SearchBar_styles.SearchForm, { onSubmit: function (e) {
                             e.preventDefault();
-                            searchOnSubmit && searchOnSubmit();
+                            searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
                         } },
                         React__default["default"].createElement(SearchBar_styles.SearchLeftIcon, null, inputIcon),
                         React__default["default"].createElement(SearchBar_styles.SearchInput, _tslib.__assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, isValid: isValid, ref: searchInputMobileRef, value: value, tabIndex: isOpen ? 0 : -1 }, props)),
-                        cancelLabel ? (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) {
-                                e.stopPropagation();
-                            } }, cancelLabel)) : null)),
+                        cancelLabel && (React__default["default"].createElement(SearchBar_styles.SearchRightLabel, { onClick: function (e) { return e.stopPropagation(); } }, cancelLabel)))),
                 children))));
 };
 

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

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

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

@@ -16,6 +16,7 @@ require('../Box/Box.styles.js');
 require('../Button/Button.js');
 require('@citygross/design-tokens');
 require('../Button/Button.styles.js');
+require('../Button/NavButton.js');
 require('../CartCard/CartCard.styles.js');
 require('../CgButton/CgButton.js');
 require('../CgButton/CgButton.types.js');

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

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

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

@@ -12,6 +12,7 @@ import '../Box/Box.styles.js';
 import '../Button/Button.js';
 import '@citygross/design-tokens';
 import '../Button/Button.styles.js';
+import '../Button/NavButton.js';
 import '../CartCard/CartCard.styles.js';
 import '../CgButton/CgButton.js';
 import '../CgButton/CgButton.types.js';

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

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

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

@@ -3,9 +3,9 @@ import React from 'react';
 import { NavButton as NavButton$1, Loading, LoadingContainer, LoadingSpinner, NavButtonIcon, NavButtonChild, ButtonBadge } from './Button.styles.js';
 import { theme } from '@citygross/design-tokens';
 
-function NavButton(_a) {
+var NavButton = React.forwardRef(function (_a, ref) {
     var badgeBackground = _a.badgeBackground, badgeMinWidth = _a.badgeMinWidth, border = _a.border, borderRadius = _a.borderRadius, buttonBadge = _a.buttonBadge, _b = _a.center, center = _b === void 0 ? true : _b, childGap = _a.childGap, children = _a.children, _c = _a.color, color = _c === void 0 ? 'darkest' : _c, flexReverse = _a.flexReverse, fullWidth = _a.fullWidth, height = _a.height, width = _a.width, hoverBackground = _a.hoverBackground, keepLabel = _a.keepLabel, icon = _a.icon, id = _a.id, isDisabled = _a.isDisabled, loading = _a.loading, minWidth = _a.minWidth, noShadow = _a.noShadow, noWrap = _a.noWrap, onClick = _a.onClick, shadow = _a.shadow, size = _a.size, tabIndex = _a.tabIndex, xsSize = _a.xsSize, props = __rest(_a, ["badgeBackground", "badgeMinWidth", "border", "borderRadius", "buttonBadge", "center", "childGap", "children", "color", "flexReverse", "fullWidth", "height", "width", "hoverBackground", "keepLabel", "icon", "id", "isDisabled", "loading", "minWidth", "noShadow", "noWrap", "onClick", "shadow", "size", "tabIndex", "xsSize"]);
-    return (React.createElement(NavButton$1, __assign({ border: border, borderRadius: borderRadius, center: center, childGap: childGap, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', disabled: loading || isDisabled, height: height, width: width, hoverBackground: hoverBackground, flexReverse: flexReverse, fullWidth: fullWidth, icon: icon, id: id || 'nav-button', isDisabled: loading || isDisabled, keepLabel: keepLabel, loading: loading || null, minWidth: minWidth, noShadow: noShadow, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, shadow: shadow, size: size, tabIndex: tabIndex, xsSize: xsSize }, props),
+    return (React.createElement(NavButton$1, __assign({ ref: ref, border: border, borderRadius: borderRadius, center: center, childGap: childGap, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', disabled: loading || isDisabled, height: height, width: width, hoverBackground: hoverBackground, flexReverse: flexReverse, fullWidth: fullWidth, icon: icon, id: id || 'nav-button', isDisabled: loading || isDisabled, keepLabel: keepLabel, loading: loading || null, minWidth: minWidth, noShadow: noShadow, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, shadow: shadow, size: size, tabIndex: tabIndex, xsSize: xsSize }, props),
         loading && (React.createElement(Loading, null,
             React.createElement(LoadingContainer, null,
                 React.createElement(LoadingSpinner, null)))),
@@ -14,7 +14,8 @@ function NavButton(_a) {
             icon,
             children)) : (children),
         buttonBadge ? (React.createElement(ButtonBadge, { background: badgeBackground, minWidth: badgeMinWidth, smallBadge: true }, buttonBadge)) : null));
-}
+});
+NavButton.displayName = 'NavButton';
 
 export { NavButton };
 //# sourceMappingURL=NavButton.js.map

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

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

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

@@ -4,6 +4,7 @@ import '../../../../_virtual/_tslib.js';
 import { theme } from '@citygross/design-tokens';
 import '../Button/Button.styles.js';
 import '@citygross/typography';
+import '../Button/NavButton.js';
 import FallbackIcon from '../ListItem/assets/fallback_grocery.svg.js';
 import { InfoBlock, InfoTextWrapper, ImageContainer, Image, ButtonContainer } from './InfoTextBlock.styles.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"InfoTextBlock.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"InfoTextBlock.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 closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent, searchAriaLabel = _a.searchAriaLabel, searchCancelLabel = _a.searchCancelLabel, searchContainerRef = _a.searchContainerRef, searchIcon = _a.searchIcon, searchInputMobileRef = _a.searchInputMobileRef, searchInputRef = _a.searchInputRef, searchIsOpen = _a.searchIsOpen, searchOnChange = _a.searchOnChange, searchOnSubmit = _a.searchOnSubmit, searchPlaceHolder = _a.searchPlaceHolder, searchResultElement = _a.searchResultElement, searchValue = _a.searchValue, topPosition = _a.topPosition;
+    var closeSearch = _a.closeSearch, height = _a.height, inputIcon = _a.inputIcon, logo = _a.logo, mainLinks = _a.mainLinks, maxWidth = _a.maxWidth, mobileTopPosition = _a.mobileTopPosition, onSearchBlur = _a.onSearchBlur, onSearchClick = _a.onSearchClick, overlayTopPosition = _a.overlayTopPosition, rightContent = _a.rightContent, searchAriaLabel = _a.searchAriaLabel, searchCancelLabel = _a.searchCancelLabel, searchContainerAriaLabel = _a.searchContainerAriaLabel, searchContainerRef = _a.searchContainerRef, searchIcon = _a.searchIcon, searchInputMobileRef = _a.searchInputMobileRef, searchInputRef = _a.searchInputRef, searchIsOpen = _a.searchIsOpen, searchOnChange = _a.searchOnChange, searchOnSubmit = _a.searchOnSubmit, searchPlaceHolder = _a.searchPlaceHolder, searchResultElement = _a.searchResultElement, searchValue = _a.searchValue, topPosition = _a.topPosition;
     var navContainerRef = useRef(null);
     var navChildContainerRef = useRef(null);
     var navRef = useRef(null);
@@ -40,12 +40,11 @@ var Nav = function (_a) {
                 setElToRemove(function (prev) { return prev - 1; });
             }
         }
-        else ;
         setLocalWidth(width);
     };
     useEffect(function () {
         var debounce = setTimeout(function () {
-            checkWidth();
+            checkWidth === null || checkWidth === void 0 ? void 0 : checkWidth();
         }, 300);
         return function () {
             clearTimeout(debounce);
@@ -53,21 +52,22 @@ var Nav = function (_a) {
     }, [
         width,
         (_b = navRef === null || navRef === void 0 ? void 0 : navRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
-        (_c = navChildContainerRef === null || navChildContainerRef === void 0 ? void 0 : navChildContainerRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth
+        (_c = navChildContainerRef === null || navChildContainerRef === void 0 ? void 0 : navChildContainerRef.current) === null || _c === void 0 ? void 0 : _c.offsetWidth,
+        localWidth
     ]);
-    React.useEffect(function () {
+    useEffect(function () {
         var handleClick = function (event) {
             var _a;
             if ((navContainerRef === null || navContainerRef === void 0 ? void 0 : navContainerRef.current) &&
-                !((_a = navContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
-                closeSearch && closeSearch();
+                !((_a = navContainerRef === null || navContainerRef === void 0 ? void 0 : navContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event === null || event === void 0 ? void 0 : event.target))) {
+                closeSearch === null || closeSearch === void 0 ? void 0 : closeSearch();
             }
         };
-        document.addEventListener('click', function (e) { return handleClick(e); }, true);
+        document.addEventListener('click', handleClick, true);
         return function () {
-            document.removeEventListener('click', function (e) { return handleClick(e); }, true);
+            document.removeEventListener('click', handleClick, true);
         };
-    }, [navContainerRef]);
+    }, [closeSearch, navContainerRef]);
     var variants = {
         closed: {
             width: '0',
@@ -91,14 +91,8 @@ var Nav = function (_a) {
                             : searchIsOpen
                                 ? 'closed'
                                 : '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; })),
-                    React.createElement(SearchContainer, { "aria-label": searchAriaLabel, "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
-                        React.createElement(SearchBar, { "aria-label": searchPlaceHolder, cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon, inputRef: searchInputRef, isOpen: searchIsOpen, mobileTopPosition: mobileTopPosition, onBlur: onSearchBlur, onChange: searchOnChange, onClick: function () {
-                                onSearchClick && onSearchClick();
-                            }, onKeyDown: function (e) {
-                                if (e.key === 'Enter') {
-                                    onSearchClick && onSearchClick();
-                                }
-                            }, placeholder: searchPlaceHolder, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, value: searchValue }, searchResultElement))),
+                    React.createElement(SearchContainer, { "aria-expanded": searchIsOpen, "aria-label": searchContainerAriaLabel, "aria-modal": "true", isOpen: searchIsOpen, ref: searchContainerRef, role: "dialog" },
+                        React.createElement(SearchBar, { "aria-label": searchAriaLabel, cancelLabel: searchCancelLabel, flexGrow: true, icon: searchIcon, inputIcon: inputIcon, inputRef: searchInputRef, isOpen: searchIsOpen, mobileTopPosition: mobileTopPosition, onBlur: onSearchBlur, onChange: searchOnChange, onClick: function () { return onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick(); }, onKeyDown: function (e) { return e.key === 'Enter' && (onSearchClick === null || onSearchClick === void 0 ? void 0 : onSearchClick()); }, placeholder: searchPlaceHolder, searchInputMobileRef: searchInputMobileRef, searchOnSubmit: searchOnSubmit, value: searchValue }, searchResultElement))),
                 rightContent)),
         React.createElement(SearchResultOverlay, { show: searchIsOpen, overlayTopPosition: overlayTopPosition })));
 };

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

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

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

@@ -42,29 +42,25 @@ var SearchBar = function (_a) {
         }
     };
     return (React.createElement(Fragment, null,
-        React.createElement(SearchBarContainer, { activeBorderColor: activeBorderColor, flexGrow: flexGrow, inputSize: inputSize, isOpen: isOpen },
+        React.createElement(SearchBarContainer, { activeBorderColor: activeBorderColor, flexGrow: flexGrow, inputSize: inputSize, isOpen: isOpen, role: "search" },
             React.createElement(SearchForm, { hideInMobile: true, isOpen: isOpen, onSubmit: function (e) {
                     e.preventDefault();
-                    searchOnSubmit && searchOnSubmit();
+                    searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
                 } },
                 React.createElement(SearchLeftIcon, null, inputIcon),
                 React.createElement(SearchInput, __assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, id: "search-input", inputSize: inputSize, isValid: isValid, ref: inputRef, value: value }, props)),
-                cancelLabel ? (React.createElement(SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: 'closed', onClick: function (e) {
-                        e.stopPropagation();
-                    }, variants: iconVariants }, cancelLabel)) : null),
+                cancelLabel && (React.createElement(SearchRightLabel, { animate: isOpen ? 'open' : 'closed', initial: "closed", onClick: function (e) { return e.stopPropagation(); }, variants: iconVariants }, cancelLabel))),
             React.createElement(MobileSearchIconContainer, null,
                 React.createElement(SearchLeftIcon, null, icon)),
-            React.createElement(SearchResultContainer, { animate: isOpen ? 'open' : 'closed', initial: 'closed', isOpen: isOpen, mobileTopPosition: mobileTopPosition, topPosition: resultBoxTopPosition, variants: resultVariants },
+            React.createElement(SearchResultContainer, { animate: isOpen ? 'open' : 'closed', initial: "closed", isOpen: isOpen, mobileTopPosition: mobileTopPosition, topPosition: resultBoxTopPosition, variants: resultVariants },
                 React.createElement(MobileSearchFormContainer, null,
                     React.createElement(SearchForm, { onSubmit: function (e) {
                             e.preventDefault();
-                            searchOnSubmit && searchOnSubmit();
+                            searchOnSubmit === null || searchOnSubmit === void 0 ? void 0 : searchOnSubmit();
                         } },
                         React.createElement(SearchLeftIcon, null, inputIcon),
                         React.createElement(SearchInput, __assign({ activeBorderColor: activeBorderColor, autoComplete: "off", "data-form-type": "other", "data-lpignore": "true", flexGrow: flexGrow, isValid: isValid, ref: searchInputMobileRef, value: value, tabIndex: isOpen ? 0 : -1 }, props)),
-                        cancelLabel ? (React.createElement(SearchRightLabel, { onClick: function (e) {
-                                e.stopPropagation();
-                            } }, cancelLabel)) : null)),
+                        cancelLabel && (React.createElement(SearchRightLabel, { onClick: function (e) { return e.stopPropagation(); } }, cancelLabel)))),
                 children))));
 };
 

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

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

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

@@ -12,6 +12,7 @@ import '../Box/Box.styles.js';
 import '../Button/Button.js';
 import '@citygross/design-tokens';
 import '../Button/Button.styles.js';
+import '../Button/NavButton.js';
 import '../CartCard/CartCard.styles.js';
 import '../CgButton/CgButton.js';
 import '../CgButton/CgButton.types.js';

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.8.176",
+  "version": "0.8.177",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "5ca33b66e00c90f7da86b05803286fb66b778ed8"
+  "gitHead": "7eee28e1d4ebf6b6ada7c3b149f6ab4e2f847251"
 }