@citygross/components 0.7.93 → 0.7.95

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

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Story } from '@storybook/react';
 declare const _default: {
-    component: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, children }: import("./SideModal").TSideModal) => React.ReactPortal | null;
+    component: ({ onBackdropClick, background, overlayBackground, width, isVisible, slideFrom, querySelector, maxWidth, children }: import("./SideModal").TSideModal) => React.ReactPortal | null;
     title: string;
 };
 export default _default;

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

@@ -2,6 +2,7 @@ declare type TSideModalContainer = {
     width: number;
     background?: string;
     slideFrom?: 'left' | 'right';
+    maxWidth?: string;
 };
 declare type TSideMoodalOverlay = {
     overlayBackground: string;

package/build/@types/index.d.ts

@@ -67,3 +67,5 @@ export * from './components/IconText/IconText';
 export * from './components/Logo/Logo';
 export * from './components/Dropdown/Dropdown';
 export * from './components/SearchListItem/SearchListItem';
+export * from './components/MenuListItem/MenuListHeader';
+export * from './components/MenuListItem/MenuListItem';

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

@@ -82,6 +82,7 @@ require('../SideModal/SideModal.styles.js');
 require('../IconText/IconText.styles.js');
 require('../Dropdown/Dropdown.styles.js');
 require('../SearchListItem/SearchListItem.styles.js');
+require('../MenuListItem/MenuListItem.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

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

package/build/cjs/components/src/components/MenuListItem/MenuListHeader.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Icon = require('@citygross/icons');
+var React = require('react');
+var MenuListItem_styles = require('./MenuListItem.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var MenuListHeader = function (_a) {
+    var onClick = _a.onClick, dropdownHeader = _a.dropdownHeader, mainCategorySelected = _a.mainCategorySelected;
+    return (React__default["default"].createElement(MenuListItem_styles.MainCategoryWrapper, { onClick: onClick },
+        React__default["default"].createElement(MenuListItem_styles.HeaderText, null, dropdownHeader),
+        !mainCategorySelected && React__default["default"].createElement(Icon.Icons.ChevronRight, null)));
+};
+
+exports.MenuListHeader = MenuListHeader;
+//# sourceMappingURL=MenuListHeader.js.map

package/build/cjs/components/src/components/MenuListItem/MenuListHeader.js.map

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

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

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@citygross/design-tokens');
+var Icon = require('@citygross/icons');
+var React = require('react');
+var Dropdown = require('../Dropdown/Dropdown.js');
+var MenuListItem_styles = require('./MenuListItem.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var MenuListItem = function (_a) {
+    var _b, _c, _d, _e;
+    var onClick = _a.onClick, isOpen = _a.isOpen, dropdownHeader = _a.dropdownHeader, _f = _a.paddingLeft, paddingLeft = _f === void 0 ? 0 : _f, backgroundColor = _a.backgroundColor, children = _a.children;
+    return (React__default["default"].createElement(MenuListItem_styles.MenuListItemWrapper, null,
+        React__default["default"].createElement(Dropdown.Dropdown, { onClick: onClick, isOpen: isOpen, dropdownHeader: React__default["default"].createElement(MenuListItem_styles.HeaderWrapper, { paddingLeft: paddingLeft, backgroundColor: backgroundColor, isOpen: isOpen },
+                React__default["default"].createElement(MenuListItem_styles.BodyText, { isOpen: isOpen }, dropdownHeader),
+                isOpen ? (React__default["default"].createElement(Icon.Icons.Minus, { width: (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.menuListItemIconSize, height: (_c = designTokens.theme.constants) === null || _c === void 0 ? void 0 : _c.menuListItemIconSize })) : (React__default["default"].createElement(Icon.Icons.Plus, { width: (_d = designTokens.theme.constants) === null || _d === void 0 ? void 0 : _d.menuListItemIconSize, height: (_e = designTokens.theme.constants) === null || _e === void 0 ? void 0 : _e.menuListItemIconSize }))) },
+            React__default["default"].createElement(MenuListItem_styles.NestedWrapper, { nested: true, paddingLeft: paddingLeft }, children))));
+};
+
+exports.MenuListItem = MenuListItem;
+//# sourceMappingURL=MenuListItem.js.map

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

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

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var MenuListItemWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var MainCategoryWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding: ", "px;\n  cursor: pointer;\n  background-color: ", ";\n  min-height: ", "px;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding: ", "px;\n  cursor: pointer;\n  background-color: ", ";\n  min-height: ", "px;\n  align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return props.isOpen ? props.backgroundColor : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
+var NestedWrapper = styled__default["default"](MainCategoryWrapper)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n"], ["\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n"])), function (props) { var _a; return (props.nested ? 0 : "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")); });
+var HeaderWrapper = styled__default["default"](MainCategoryWrapper)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding-left: ", "px;\n"], ["\n  padding-left: ", "px;\n"])), function (props) { return props.paddingLeft; });
+styled__default["default"](MainCategoryWrapper)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  padding-left: ", "px;\n  align-self: flex-start;\n"], ["\n  padding-left: ", "px;\n  align-self: flex-start;\n"])), function (props) { return props.paddingLeft; });
+var HeaderText = styled__default["default"].h2(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n"], ["\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s4; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m2; });
+var BodyText = styled__default["default"].p(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n  color: ", ";\n"], ["\n  display: flex;\n  gap: ", "px;\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n  color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, 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.isOpen
+        ? (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.medium
+        : (_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.weight.regular;
+}, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+exports.BodyText = BodyText;
+exports.HeaderText = HeaderText;
+exports.HeaderWrapper = HeaderWrapper;
+exports.MainCategoryWrapper = MainCategoryWrapper;
+exports.MenuListItemWrapper = MenuListItemWrapper;
+exports.NestedWrapper = NestedWrapper;
+//# sourceMappingURL=MenuListItem.styles.js.map

package/build/cjs/components/src/components/MenuListItem/MenuListItem.styles.js.map

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

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

@@ -14,13 +14,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var SideModal = function (_a) {
     var _b, _c;
-    var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, children = _a.children;
+    var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, children = _a.children;
     var domSafe = typeof document !== 'undefined';
     return domSafe
         ? reactDom.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, isVisible && (React__default["default"].createElement(SideModal_styles.SideModalOverlay, { onClick: onBackdropClick, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
                 type: 'just'
             } },
-            React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
+            React__default["default"].createElement(SideModal_styles.SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
         : null;
 };
 

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

@@ -11,7 +11,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var SideModalOverlay = styled__default["default"](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { return props.overlayBackground; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
+var SideModalContainer = styled__default["default"](framerMotion.motion.div)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
+    var maxWidth = _a.maxWidth;
+    return maxWidth && "max-width:".concat(maxWidth);
+}, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
 var templateObject_1, templateObject_2;
 
 exports.SideModalContainer = SideModalContainer;

package/build/cjs/components/src/components/SideModal/SideModal.styles.js.map

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

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

@@ -82,6 +82,7 @@ require('../SideModal/SideModal.styles.js');
 require('../IconText/IconText.styles.js');
 require('../Dropdown/Dropdown.styles.js');
 require('../SearchListItem/SearchListItem.styles.js');
+require('../MenuListItem/MenuListItem.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

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

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

@@ -72,6 +72,8 @@ var IconText = require('./components/IconText/IconText.js');
 var Logo = require('./components/Logo/Logo.js');
 var Dropdown = require('./components/Dropdown/Dropdown.js');
 var SearchListItem = require('./components/SearchListItem/SearchListItem.js');
+var MenuListHeader = require('./components/MenuListItem/MenuListHeader.js');
+var MenuListItem = require('./components/MenuListItem/MenuListItem.js');
 
 
 
@@ -176,4 +178,6 @@ exports.IconText = IconText.IconText;
 exports.Logo = Logo.Logo;
 exports.Dropdown = Dropdown.Dropdown;
 exports.SearchListItem = SearchListItem.SearchListItem;
+exports.MenuListHeader = MenuListHeader.MenuListHeader;
+exports.MenuListItem = MenuListItem.MenuListItem;
 //# 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

@@ -78,6 +78,7 @@ import '../SideModal/SideModal.styles.js';
 import '../IconText/IconText.styles.js';
 import '../Dropdown/Dropdown.styles.js';
 import '../SearchListItem/SearchListItem.styles.js';
+import '../MenuListItem/MenuListItem.styles.js';
 
 function AddressBlock(_a) {
     var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;

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

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

package/build/es/components/src/components/MenuListItem/MenuListHeader.js

@@ -0,0 +1,13 @@
+import { Icons } from '@citygross/icons';
+import React from 'react';
+import { MainCategoryWrapper, HeaderText } from './MenuListItem.styles.js';
+
+var MenuListHeader = function (_a) {
+    var onClick = _a.onClick, dropdownHeader = _a.dropdownHeader, mainCategorySelected = _a.mainCategorySelected;
+    return (React.createElement(MainCategoryWrapper, { onClick: onClick },
+        React.createElement(HeaderText, null, dropdownHeader),
+        !mainCategorySelected && React.createElement(Icons.ChevronRight, null)));
+};
+
+export { MenuListHeader };
+//# sourceMappingURL=MenuListHeader.js.map

package/build/es/components/src/components/MenuListItem/MenuListHeader.js.map

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

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

@@ -0,0 +1,18 @@
+import { theme } from '@citygross/design-tokens';
+import { Icons } from '@citygross/icons';
+import React from 'react';
+import { Dropdown } from '../Dropdown/Dropdown.js';
+import { MenuListItemWrapper, HeaderWrapper, BodyText, NestedWrapper } from './MenuListItem.styles.js';
+
+var MenuListItem = function (_a) {
+    var _b, _c, _d, _e;
+    var onClick = _a.onClick, isOpen = _a.isOpen, dropdownHeader = _a.dropdownHeader, _f = _a.paddingLeft, paddingLeft = _f === void 0 ? 0 : _f, backgroundColor = _a.backgroundColor, children = _a.children;
+    return (React.createElement(MenuListItemWrapper, null,
+        React.createElement(Dropdown, { onClick: onClick, isOpen: isOpen, dropdownHeader: React.createElement(HeaderWrapper, { paddingLeft: paddingLeft, backgroundColor: backgroundColor, isOpen: isOpen },
+                React.createElement(BodyText, { isOpen: isOpen }, dropdownHeader),
+                isOpen ? (React.createElement(Icons.Minus, { width: (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.menuListItemIconSize, height: (_c = theme.constants) === null || _c === void 0 ? void 0 : _c.menuListItemIconSize })) : (React.createElement(Icons.Plus, { width: (_d = theme.constants) === null || _d === void 0 ? void 0 : _d.menuListItemIconSize, height: (_e = theme.constants) === null || _e === void 0 ? void 0 : _e.menuListItemIconSize }))) },
+            React.createElement(NestedWrapper, { nested: true, paddingLeft: paddingLeft }, children))));
+};
+
+export { MenuListItem };
+//# sourceMappingURL=MenuListItem.js.map

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

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

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

@@ -0,0 +1,19 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var MenuListItemWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
+var MainCategoryWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding: ", "px;\n  cursor: pointer;\n  background-color: ", ";\n  min-height: ", "px;\n  align-items: center;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding: ", "px;\n  cursor: pointer;\n  background-color: ", ";\n  min-height: ", "px;\n  align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return props.isOpen ? props.backgroundColor : (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
+var NestedWrapper = styled(MainCategoryWrapper)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n"], ["\n  padding: ", ";\n  display: flex;\n  flex-direction: column;\n"])), function (props) { var _a; return (props.nested ? 0 : "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")); });
+var HeaderWrapper = styled(MainCategoryWrapper)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-left: ", "px;\n"], ["\n  padding-left: ", "px;\n"])), function (props) { return props.paddingLeft; });
+styled(MainCategoryWrapper)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: ", "px;\n  align-self: flex-start;\n"], ["\n  padding-left: ", "px;\n  align-self: flex-start;\n"])), function (props) { return props.paddingLeft; });
+var HeaderText = styled.h2(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n"], ["\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s4; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.semiBold; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m2; });
+var BodyText = styled.p(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n  color: ", ";\n"], ["\n  display: flex;\n  gap: ", "px;\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n  color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, 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.isOpen
+        ? (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.medium
+        : (_b = props.theme.typography) === null || _b === void 0 ? void 0 : _b.weight.regular;
+}, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { BodyText, HeaderText, HeaderWrapper, MainCategoryWrapper, MenuListItemWrapper, NestedWrapper };
+//# sourceMappingURL=MenuListItem.styles.js.map

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

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

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

@@ -6,13 +6,13 @@ import { theme } from '@citygross/design-tokens';
 
 var SideModal = function (_a) {
     var _b, _c;
-    var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, children = _a.children;
+    var onBackdropClick = _a.onBackdropClick, _d = _a.background, background = _d === void 0 ? '#fff' : _d, _e = _a.overlayBackground, overlayBackground = _e === void 0 ? (_c = (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkOverlay) !== null && _c !== void 0 ? _c : '' : _e, _f = _a.width, width = _f === void 0 ? 375 : _f, isVisible = _a.isVisible, slideFrom = _a.slideFrom, _g = _a.querySelector, querySelector = _g === void 0 ? '#root' : _g, maxWidth = _a.maxWidth, children = _a.children;
     var domSafe = typeof document !== 'undefined';
     return domSafe
         ? createPortal(React.createElement(AnimatePresence, null, isVisible && (React.createElement(SideModalOverlay, { onClick: onBackdropClick, overlayBackground: overlayBackground, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: {
                 type: 'just'
             } },
-            React.createElement(SideModalContainer, { slideFrom: slideFrom, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
+            React.createElement(SideModalContainer, { slideFrom: slideFrom, maxWidth: maxWidth, transition: { type: 'just' }, width: width, onClick: function (e) { return e.stopPropagation(); }, background: background, initial: { x: slideFrom === 'left' ? '-100%' : '100%' }, animate: { x: 0 }, exit: { x: slideFrom === 'left' ? '-100%' : '100%' } }, children)))), document.querySelector(querySelector) || document.body)
         : null;
 };
 

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

@@ -3,7 +3,10 @@ import styled from 'styled-components';
 import { motion } from 'framer-motion';
 
 var SideModalOverlay = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  z-index: ", ";\n  background: ", ";\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.zIndex.modal; }, function (props) { return props.overlayBackground; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
+var SideModalContainer = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"], ["\n  height: 100vh;\n  background: ", ";\n  width: 100%;\n  ", ";\n  position: absolute;\n  ", ";\n  top: 0;\n\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (min-width: ", "px) {\n    width: ", "px;\n  }\n"])), function (props) { return props.background; }, function (_a) {
+    var maxWidth = _a.maxWidth;
+    return maxWidth && "max-width:".concat(maxWidth);
+}, function (props) { return ((props === null || props === void 0 ? void 0 : props.slideFrom) === 'left' ? "left: 0px" : 'right: 0px'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.width; });
 var templateObject_1, templateObject_2;
 
 export { SideModalContainer, SideModalOverlay };

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

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

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

@@ -78,6 +78,7 @@ import '../SideModal/SideModal.styles.js';
 import '../IconText/IconText.styles.js';
 import '../Dropdown/Dropdown.styles.js';
 import '../SearchListItem/SearchListItem.styles.js';
+import '../MenuListItem/MenuListItem.styles.js';
 
 function WarningLabel(_a) {
     var children = _a.children, background = _a.background, toolTip = _a.toolTip;

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

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

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

@@ -68,4 +68,6 @@ export { IconText } from './components/IconText/IconText.js';
 export { Logo } from './components/Logo/Logo.js';
 export { Dropdown } from './components/Dropdown/Dropdown.js';
 export { SearchListItem } from './components/SearchListItem/SearchListItem.js';
+export { MenuListHeader } from './components/MenuListItem/MenuListHeader.js';
+export { MenuListItem } from './components/MenuListItem/MenuListItem.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.93",
+  "version": "0.7.95",
   "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": "8b0d739acdcc934467c19466816c2fd855acc3f0"
+  "gitHead": "613d3bae224dcb241b7c9968c5a2dca30c81d8c9"
 }