@citygross/components 0.7.33 → 0.7.37

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

@@ -0,0 +1,8 @@
+export declare type TBackButton = {
+    label?: string;
+    icon?: JSX.Element;
+    color?: string;
+    onClick?: () => void;
+    children?: JSX.Element;
+};
+export declare function BackButton({ label, color, icon, onClick, children }: TBackButton): JSX.Element;

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

@@ -0,0 +1,20 @@
+import { Story } from '@storybook/react';
+import { TBackButton, BackButton } from './BackButton';
+declare const _default: {
+    component: typeof BackButton;
+    title: string;
+    argTypes: {
+        color: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
+        icon: {
+            control: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Default: Story<TBackButton>;

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

@@ -0,0 +1,2 @@
+export declare const BackButtonFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const BackText: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -5,6 +5,7 @@ export * from './components/Header/Header';
 export * from './components/Badge/Badge';
 export * from './components/Box/Box';
 export * from './components/Button';
+export * from './components/BackButton/BackButton';
 export * from './components/CartItemSummary/CartItemSummary';
 export * from './components/CartSummary/CartSummary';
 export * from './components/CustomerInfoBlock/CustomerInfoBlock';
@@ -12,6 +13,8 @@ export * from './components/Collapsable/Collapsable';
 export * from './components/DeliverySlotItem/DeliverySlotItem';
 export * from './components/Slider/Slider';
 export * from './components/DeliveryTimeBlock/DeliveryTimeBlock';
+export * from './components/Menu/Menu';
+export * from './components/Menu/MenuItem';
 export * from './components/Divider/Divider';
 export * from './components/DotIndicator/DotIndicator';
 export * from './components/Form/Form';
@@ -39,8 +42,11 @@ export * from './components/Spinner/Spinner';
 export * from './components/Stepper';
 export * from './components/StepperMobile/StepperMobile';
 export * from './components/FormElements/TextArea/TextArea';
+export * from './components/Table/';
 export * from './components/Timeline/Timeline';
 export * from './components/ToolTip/ToolTip';
 export * from './components/QuantitySelector/QuantitySelector';
+export * from './components/Pagination/Pagination';
 export * from './containers/PageContainer/PageContainer';
 export * from './containers/TwoColumnsContainer/TwoColumnsPageContainer';
+export * from './components/UnorderedList';

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

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var BackButton_styles = require('./BackButton.styles.js');
+var Icon = require('@citygross/icons');
+var typography = require('@citygross/typography');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function BackButton(_a) {
+    var label = _a.label, color = _a.color, _b = _a.icon, icon = _b === void 0 ? React__default['default'].createElement(Icon.Icons.ChevronLeft, null) : _b, onClick = _a.onClick, children = _a.children;
+    return (React__default['default'].createElement(BackButton_styles.BackButtonFlex, { onClick: onClick },
+        icon,
+        React__default['default'].createElement(BackButton_styles.BackText, null,
+            label && React__default['default'].createElement(typography.BodyText, { color: color }, label),
+            children)));
+}
+
+exports.BackButton = BackButton;
+//# sourceMappingURL=BackButton.js.map

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

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

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

@@ -0,0 +1,18 @@
+'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 BackButtonFlex = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var BackText = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin-top: 2px;\n"], ["\n  margin-top: 2px;\n"])));
+var templateObject_1, templateObject_2;
+
+exports.BackButtonFlex = BackButtonFlex;
+exports.BackText = BackText;
+//# sourceMappingURL=BackButton.styles.js.map

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

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

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

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Menu_styles = require('./Menu.styles.js');
+var utils = require('@citygross/utils');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function Menu(_a) {
+    var showFade = _a.showFade, onScroll = _a.onScroll, children = _a.children;
+    var isMobile = utils.useDetectDevice().isMobile;
+    return (React__default['default'].createElement(React__default['default'].Fragment, null,
+        React__default['default'].createElement(Menu_styles.MenuContainer, { onScroll: onScroll && onScroll }, children),
+        ' ',
+        isMobile && React__default['default'].createElement(Menu_styles.Fade, { isVisible: showFade })));
+}
+
+exports.Menu = Menu;
+//# sourceMappingURL=Menu.js.map

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

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

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

@@ -0,0 +1,20 @@
+'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 MenuContainer = styled__default['default'].nav(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    padding: 0 20px;\n    width: calc(100% - 40px);\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    padding: 0 20px;\n    width: calc(100% - 40px);\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.twoColumnsContainerMaxWidth; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
+var MenuItem = styled__default['default'].a(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  margin: 0 ", "px;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"], ["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  margin: 0 ", "px;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.bold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, 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.xxs; }, function (props) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary; });
+var Fade = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"], ["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
+var templateObject_1, templateObject_2, templateObject_3;
+
+exports.Fade = Fade;
+exports.MenuContainer = MenuContainer;
+exports.MenuItem = MenuItem;
+//# sourceMappingURL=Menu.styles.js.map

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

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

package/build/cjs/components/src/components/Menu/MenuItem.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var React = require('react');
+var Menu_styles = require('./Menu.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function MenuItem(_a) {
+    var active = _a.active, children = _a.children, props = _tslib.__rest(_a, ["active", "children"]);
+    return (React__default['default'].createElement(Menu_styles.MenuItem, _tslib.__assign({}, props, { active: active }), children));
+}
+
+exports.MenuItem = MenuItem;
+//# sourceMappingURL=MenuItem.js.map

package/build/cjs/components/src/components/Menu/MenuItem.js.map

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

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

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var PaginationButton = require('../Button/PaginationButton.js');
+var Box = require('../Box/Box.js');
+var Pagination_styles = require('./Pagination.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function createPagination(totalItems, itemsPerPage) {
+    var amountOfPages = Math.ceil((totalItems || 0) / (itemsPerPage !== null && itemsPerPage !== void 0 ? itemsPerPage : 6));
+    if (amountOfPages === 0 || itemsPerPage === 0) {
+        return [];
+    }
+    var pagination = [];
+    var block = [];
+    var counter = 0;
+    new Array(amountOfPages).fill(0).map(function (_, index) {
+        if (counter < 3) {
+            counter++;
+            block.push(index);
+            if (index === amountOfPages - 1) {
+                pagination.push(block);
+            }
+        }
+        else {
+            counter = 0;
+            block.push(index);
+            pagination.push(block);
+            block = [];
+        }
+        return null;
+    });
+    return pagination;
+}
+function Pagination(_a) {
+    var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, itemsPerPage = _a.itemsPerPage;
+    var _b = React.useState(Math.floor((currentPage - 1) / 4)), currentIndex = _b[0], setIndex = _b[1];
+    var pagination = createPagination(totalItems, itemsPerPage);
+    return (React__default['default'].createElement(Box.Box, null, pagination && pagination.length > 0 && (React__default['default'].createElement(Pagination_styles.Flex, null,
+        currentIndex > 0 && (React__default['default'].createElement(Pagination_styles.PaginationButtonWrapper, null,
+            React__default['default'].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex - 1); }, width: 36, height: 36 }, '...'))),
+        pagination[currentIndex].map(function (page) { return (React__default['default'].createElement(Pagination_styles.PaginationButtonWrapper, { key: page },
+            React__default['default'].createElement(PaginationButton.PaginationButton, { color: currentPage === page + 1 ? 'primary' : 'white', width: 36, height: 36, onClick: function () { return fetchItems(page + 1); } }, page + 1))); }),
+        pagination.length > 1 && currentIndex < pagination.length - 1 && (React__default['default'].createElement(Pagination_styles.PaginationButtonWrapper, null,
+            React__default['default'].createElement(PaginationButton.PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex + 1); }, width: 36, height: 36 }, '...')))))));
+}
+
+exports.Pagination = Pagination;
+//# sourceMappingURL=Pagination.js.map

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

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

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

@@ -0,0 +1,18 @@
+'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 PaginationButtonWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var Flex = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"])));
+var templateObject_1, templateObject_2;
+
+exports.Flex = Flex;
+exports.PaginationButtonWrapper = PaginationButtonWrapper;
+//# sourceMappingURL=Pagination.styles.js.map

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

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

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

@@ -0,0 +1,29 @@
+'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 Table = styled__default['default'].table(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-collapse: collapse;\n  border-spacing: 0;\n"], ["\n  width: 100%;\n  border: none;\n  border-collapse: collapse;\n  border-spacing: 0;\n"])));
+var Thead = styled__default['default'].thead(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  border-bottom: 1px solid\n    ", ";\n"], ["\n  border-bottom: 1px solid\n    ", ";\n"])), function (props) { var _a; return props.borderColor || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light); });
+var Th = styled__default['default'].th(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: relative;\n  padding: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  text-align: left;\n  &:last-child {\n    text-align: right;\n  }\n  &:first-child {\n    text-align: start;\n  }\n"], ["\n  position: relative;\n  padding: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  text-align: left;\n  &:last-child {\n    text-align: right;\n  }\n  &:first-child {\n    text-align: start;\n  }\n"])), function (props) { var _a, _b; return ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding) + "px " + ((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.tableRowHorizontalPadding) + "px"; }, function (props) { var _a; return props.fontSize || ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3); }, function (props) { var _a; return props.weight || ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.regular); });
+var Tr = styled__default['default'].tr(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; });
+var Td = styled__default['default'].td(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  padding: ", ";\n  font-size: ", "px;\n  text-align: left;\n  border-bottom: 1px solid\n    ", ";\n  &:last-child {\n    text-align: right;\n  }\n  &:first-child {\n    text-align: start;\n  }\n  text-decoration: ", ";\n  color: ", ";\n"], ["\n  padding: ", ";\n  font-size: ", "px;\n  text-align: left;\n  border-bottom: 1px solid\n    ", ";\n  &:last-child {\n    text-align: right;\n  }\n  &:first-child {\n    text-align: start;\n  }\n  text-decoration: ", ";\n  color: ", ";\n"])), function (props) { var _a, _b; return ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableRowVerticalPadding) + "px " + ((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.tableRowHorizontalPadding) + "px"; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.borderColor || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light); }, function (props) { return (props.strikeThrough ? 'line-through' : 'none'); }, function (props) {
+    var _a, _b;
+    return props.strikeThrough
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+exports.Table = Table;
+exports.Td = Td;
+exports.Th = Th;
+exports.Thead = Thead;
+exports.Tr = Tr;
+//# sourceMappingURL=Table.styles.js.map

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

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

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

@@ -0,0 +1,18 @@
+'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 UnorderedList = styled__default['default'].ul(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: 0 ", "px\n    ", "px;\n  list-style: inside disc;\n"], ["\n  padding: 0 ", "px\n    ", "px;\n  list-style: inside disc;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var UnorderedListItem = styled__default['default'].li(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin: ", "px 0;\n  font-size: ", "px;\n  line-height: ", "px;\n"], ["\n  margin: ", "px 0;\n  font-size: ", "px;\n  line-height: ", "px;\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.s3; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2; });
+var templateObject_1, templateObject_2;
+
+exports.UnorderedList = UnorderedList;
+exports.UnorderedListItem = UnorderedListItem;
+//# sourceMappingURL=UnorderedList.styles.js.map

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

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

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

@@ -10,6 +10,7 @@ var Badge = require('./components/Badge/Badge.js');
 var Box = require('./components/Box/Box.js');
 var IconButton = require('./components/Button/IconButton.js');
 var PaginationButton = require('./components/Button/PaginationButton.js');
+var BackButton = require('./components/BackButton/BackButton.js');
 var CartItemSummary = require('./components/CartItemSummary/CartItemSummary.js');
 var CartSummary = require('./components/CartSummary/CartSummary.js');
 var CustomerInfoBlock = require('./components/CustomerInfoBlock/CustomerInfoBlock.js');
@@ -17,6 +18,8 @@ var Collapsable = require('./components/Collapsable/Collapsable.js');
 var DeliverySlotItem = require('./components/DeliverySlotItem/DeliverySlotItem.js');
 var Slider = require('./components/Slider/Slider.js');
 var DeliveryTimeBlock = require('./components/DeliveryTimeBlock/DeliveryTimeBlock.js');
+var Menu = require('./components/Menu/Menu.js');
+var MenuItem = require('./components/Menu/MenuItem.js');
 var Divider = require('./components/Divider/Divider.js');
 var DotIndicator = require('./components/DotIndicator/DotIndicator.js');
 var Form = require('./components/Form/Form.js');
@@ -44,11 +47,14 @@ var StepperList = require('./components/Stepper/StepperList.js');
 var StepperListItem = require('./components/Stepper/StepperListItem.js');
 var StepperMobile = require('./components/StepperMobile/StepperMobile.js');
 var TextArea = require('./components/FormElements/TextArea/TextArea.js');
+var Table_styles = require('./components/Table/Table.styles.js');
 var Timeline = require('./components/Timeline/Timeline.js');
 var ToolTip = require('./components/ToolTip/ToolTip.js');
 var QuantitySelector = require('./components/QuantitySelector/QuantitySelector.js');
+var Pagination = require('./components/Pagination/Pagination.js');
 var PageContainer = require('./containers/PageContainer/PageContainer.js');
 var TwoColumnsPageContainer = require('./containers/TwoColumnsContainer/TwoColumnsPageContainer.js');
+var UnorderedList_styles = require('./components/UnorderedList/UnorderedList.styles.js');
 
 
 
@@ -72,6 +78,7 @@ exports.Badge = Badge.Badge;
 exports.Box = Box.Box;
 exports.IconButton = IconButton.IconButton;
 exports.PaginationButton = PaginationButton.PaginationButton;
+exports.BackButton = BackButton.BackButton;
 exports.CartItemSummary = CartItemSummary.CartItemSummary;
 exports.CartSummary = CartSummary.CartSummary;
 exports.CustomerInfoBlock = CustomerInfoBlock.CustomerInfoBlock;
@@ -79,6 +86,8 @@ exports.Collapsable = Collapsable.Collapsable;
 exports.DeliverySlotItem = DeliverySlotItem.DeliverySlotItem;
 exports.Slider = Slider.Slider;
 exports.DeliveryTimeBlock = DeliveryTimeBlock.DeliveryTimeBlock;
+exports.Menu = Menu.Menu;
+exports.MenuItem = MenuItem.MenuItem;
 exports.Divider = Divider.Divider;
 exports.Dot = DotIndicator.Dot;
 exports.Form = Form.Form;
@@ -124,9 +133,17 @@ exports.StepperList = StepperList.StepperList;
 exports.StepperListItem = StepperListItem.StepperListItem;
 exports.StepperMobile = StepperMobile.StepperMobile;
 exports.TextArea = TextArea.TextArea;
+exports.Table = Table_styles.Table;
+exports.Td = Table_styles.Td;
+exports.Th = Table_styles.Th;
+exports.Thead = Table_styles.Thead;
+exports.Tr = Table_styles.Tr;
 exports.Timeline = Timeline.Timeline;
 exports.ToolTip = ToolTip.ToolTip;
 exports.QuantitySelector = QuantitySelector.QuantitySelector;
+exports.Pagination = Pagination.Pagination;
 exports.PageContainer = PageContainer.PageContainer;
 exports.TwoColumnsPageContainer = TwoColumnsPageContainer.TwoColumnsPageContainer;
+exports.UnorderedList = UnorderedList_styles.UnorderedList;
+exports.UnorderedListItem = UnorderedList_styles.UnorderedListItem;
 //# 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/BackButton/BackButton.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BackButtonFlex, BackText } from './BackButton.styles.js';
+import { Icons } from '@citygross/icons';
+import { BodyText } from '@citygross/typography';
+
+function BackButton(_a) {
+    var label = _a.label, color = _a.color, _b = _a.icon, icon = _b === void 0 ? React.createElement(Icons.ChevronLeft, null) : _b, onClick = _a.onClick, children = _a.children;
+    return (React.createElement(BackButtonFlex, { onClick: onClick },
+        icon,
+        React.createElement(BackText, null,
+            label && React.createElement(BodyText, { color: color }, label),
+            children)));
+}
+
+export { BackButton };
+//# sourceMappingURL=BackButton.js.map

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

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

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

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var BackButtonFlex = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var BackText = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-top: 2px;\n"], ["\n  margin-top: 2px;\n"])));
+var templateObject_1, templateObject_2;
+
+export { BackButtonFlex, BackText };
+//# sourceMappingURL=BackButton.styles.js.map

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

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { MenuContainer, Fade } from './Menu.styles.js';
+import { useDetectDevice } from '@citygross/utils';
+
+function Menu(_a) {
+    var showFade = _a.showFade, onScroll = _a.onScroll, children = _a.children;
+    var isMobile = useDetectDevice().isMobile;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MenuContainer, { onScroll: onScroll && onScroll }, children),
+        ' ',
+        isMobile && React.createElement(Fade, { isVisible: showFade })));
+}
+
+export { Menu };
+//# sourceMappingURL=Menu.js.map

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

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

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

@@ -0,0 +1,10 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var MenuContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    padding: 0 20px;\n    width: calc(100% - 40px);\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  ::-webkit-scrollbar {\n    background: ", ";\n    height: 2px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    border-radius: ", "px;\n    background-color: ", ";\n  }\n  /* for mozilla */\n  scrollbar-width: thin;\n  scrollbar-color: ", ";\n\n  @media (min-width: ", "px) {\n    /* for mozila scroll bar */\n    padding: 0 20px;\n    width: calc(100% - 40px);\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.twoColumnsContainerMaxWidth; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; });
+var MenuItem = styled.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  margin: 0 ", "px;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"], ["\n  flex: 0 0 auto;\n  font-weight: ", ";\n  padding: ", "px 0;\n  margin: 0 ", "px;\n  display: block;\n  border-bottom: ", "px solid;\n  border-bottom-color: ", ";\n  cursor: pointer;\n  font-size: ", "px;\n\n  &:last-child {\n    position: relative;\n    &::after {\n      position: absolute;\n      content: '';\n      right: -", "px;\n      width: ", "px;\n      height: 100%;\n    }\n  }\n  @media (min-width: ", "px) {\n    &:hover {\n      border-bottom-color: ", ";\n    }\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.bold; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding; }, 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.xxs; }, function (props) { var _a; return props.active ? "" + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary) : 'transparent'; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.primary; });
+var Fade = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"], ["\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    rgba(255, 255, 255, 0) 80%,\n    rgba(255, 255, 255, 1)\n  );\n  transition: all 0.5s;\n  opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) ? '1' : '0'); });
+var templateObject_1, templateObject_2, templateObject_3;
+
+export { Fade, MenuContainer, MenuItem };
+//# sourceMappingURL=Menu.styles.js.map

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

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

package/build/es/components/src/components/Menu/MenuItem.js

@@ -0,0 +1,11 @@
+import { __rest, __assign } from '../../../../_virtual/_tslib.js';
+import React from 'react';
+import { MenuItem as MenuItem$1 } from './Menu.styles.js';
+
+function MenuItem(_a) {
+    var active = _a.active, children = _a.children, props = __rest(_a, ["active", "children"]);
+    return (React.createElement(MenuItem$1, __assign({}, props, { active: active }), children));
+}
+
+export { MenuItem };
+//# sourceMappingURL=MenuItem.js.map

package/build/es/components/src/components/Menu/MenuItem.js.map

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

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

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { PaginationButton } from '../Button/PaginationButton.js';
+import { Box } from '../Box/Box.js';
+import { Flex, PaginationButtonWrapper } from './Pagination.styles.js';
+
+function createPagination(totalItems, itemsPerPage) {
+    var amountOfPages = Math.ceil((totalItems || 0) / (itemsPerPage !== null && itemsPerPage !== void 0 ? itemsPerPage : 6));
+    if (amountOfPages === 0 || itemsPerPage === 0) {
+        return [];
+    }
+    var pagination = [];
+    var block = [];
+    var counter = 0;
+    new Array(amountOfPages).fill(0).map(function (_, index) {
+        if (counter < 3) {
+            counter++;
+            block.push(index);
+            if (index === amountOfPages - 1) {
+                pagination.push(block);
+            }
+        }
+        else {
+            counter = 0;
+            block.push(index);
+            pagination.push(block);
+            block = [];
+        }
+        return null;
+    });
+    return pagination;
+}
+function Pagination(_a) {
+    var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, itemsPerPage = _a.itemsPerPage;
+    var _b = useState(Math.floor((currentPage - 1) / 4)), currentIndex = _b[0], setIndex = _b[1];
+    var pagination = createPagination(totalItems, itemsPerPage);
+    return (React.createElement(Box, null, pagination && pagination.length > 0 && (React.createElement(Flex, null,
+        currentIndex > 0 && (React.createElement(PaginationButtonWrapper, null,
+            React.createElement(PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex - 1); }, width: 36, height: 36 }, '...'))),
+        pagination[currentIndex].map(function (page) { return (React.createElement(PaginationButtonWrapper, { key: page },
+            React.createElement(PaginationButton, { color: currentPage === page + 1 ? 'primary' : 'white', width: 36, height: 36, onClick: function () { return fetchItems(page + 1); } }, page + 1))); }),
+        pagination.length > 1 && currentIndex < pagination.length - 1 && (React.createElement(PaginationButtonWrapper, null,
+            React.createElement(PaginationButton, { color: 'white', onClick: function () { return setIndex(currentIndex + 1); }, width: 36, height: 36 }, '...')))))));
+}
+
+export { Pagination };
+//# sourceMappingURL=Pagination.js.map

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

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

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

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var PaginationButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var Flex = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n"])));
+var templateObject_1, templateObject_2;
+
+export { Flex, PaginationButtonWrapper };
+//# sourceMappingURL=Pagination.styles.js.map

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

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

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

@@ -0,0 +1,17 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var Table = styled.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-collapse: collapse;\n  border-spacing: 0;\n"], ["\n  width: 100%;\n  border: none;\n  border-collapse: collapse;\n  border-spacing: 0;\n"])));
+var Thead = styled.thead(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid\n    ", ";\n"], ["\n  border-bottom: 1px solid\n    ", ";\n"])), function (props) { var _a; return props.borderColor || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light); });
+var Th = styled.th(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  padding: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  text-align: left;\n  &:last-child {\n    text-align: right;\n  }\n  &:first-child {\n    text-align: start;\n  }\n"], ["\n  position: relative;\n  padding: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  text-align: left;\n  &:last-child {\n    text-align: right;\n  }\n  &:first-child {\n    text-align: start;\n  }\n"])), function (props) { var _a, _b; return ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableHeaderVerticalPadding) + "px " + ((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.tableRowHorizontalPadding) + "px"; }, function (props) { var _a; return props.fontSize || ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3); }, function (props) { var _a; return props.weight || ((_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.regular); });
+var Tr = styled.tr(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; });
+var Td = styled.td(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: ", ";\n  font-size: ", "px;\n  text-align: left;\n  border-bottom: 1px solid\n    ", ";\n  &:last-child {\n    text-align: right;\n  }\n  &:first-child {\n    text-align: start;\n  }\n  text-decoration: ", ";\n  color: ", ";\n"], ["\n  padding: ", ";\n  font-size: ", "px;\n  text-align: left;\n  border-bottom: 1px solid\n    ", ";\n  &:last-child {\n    text-align: right;\n  }\n  &:first-child {\n    text-align: start;\n  }\n  text-decoration: ", ";\n  color: ", ";\n"])), function (props) { var _a, _b; return ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tableRowVerticalPadding) + "px " + ((_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.tableRowHorizontalPadding) + "px"; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; }, function (props) { var _a; return props.borderColor || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light); }, function (props) { return (props.strikeThrough ? 'line-through' : 'none'); }, function (props) {
+    var _a, _b;
+    return props.strikeThrough
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { Table, Td, Th, Thead, Tr };
+//# sourceMappingURL=Table.styles.js.map

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

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

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

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var UnorderedList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 ", "px\n    ", "px;\n  list-style: inside disc;\n"], ["\n  padding: 0 ", "px\n    ", "px;\n  list-style: inside disc;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var UnorderedListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", "px 0;\n  font-size: ", "px;\n  line-height: ", "px;\n"], ["\n  margin: ", "px 0;\n  font-size: ", "px;\n  line-height: ", "px;\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.s3; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2; });
+var templateObject_1, templateObject_2;
+
+export { UnorderedList, UnorderedListItem };
+//# sourceMappingURL=UnorderedList.styles.js.map

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

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

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

@@ -6,6 +6,7 @@ export { Badge } from './components/Badge/Badge.js';
 export { Box } from './components/Box/Box.js';
 export { IconButton } from './components/Button/IconButton.js';
 export { PaginationButton } from './components/Button/PaginationButton.js';
+export { BackButton } from './components/BackButton/BackButton.js';
 export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js';
 export { CartSummary } from './components/CartSummary/CartSummary.js';
 export { CustomerInfoBlock } from './components/CustomerInfoBlock/CustomerInfoBlock.js';
@@ -13,6 +14,8 @@ export { Collapsable } from './components/Collapsable/Collapsable.js';
 export { DeliverySlotItem } from './components/DeliverySlotItem/DeliverySlotItem.js';
 export { Slider } from './components/Slider/Slider.js';
 export { DeliveryTimeBlock } from './components/DeliveryTimeBlock/DeliveryTimeBlock.js';
+export { Menu } from './components/Menu/Menu.js';
+export { MenuItem } from './components/Menu/MenuItem.js';
 export { Divider } from './components/Divider/Divider.js';
 export { Dot } from './components/DotIndicator/DotIndicator.js';
 export { Form } from './components/Form/Form.js';
@@ -40,9 +43,12 @@ export { StepperList } from './components/Stepper/StepperList.js';
 export { StepperListItem } from './components/Stepper/StepperListItem.js';
 export { StepperMobile } from './components/StepperMobile/StepperMobile.js';
 export { TextArea } from './components/FormElements/TextArea/TextArea.js';
+export { Table, Td, Th, Thead, Tr } from './components/Table/Table.styles.js';
 export { Timeline } from './components/Timeline/Timeline.js';
 export { ToolTip } from './components/ToolTip/ToolTip.js';
 export { QuantitySelector } from './components/QuantitySelector/QuantitySelector.js';
+export { Pagination } from './components/Pagination/Pagination.js';
 export { PageContainer } from './containers/PageContainer/PageContainer.js';
 export { TwoColumnsPageContainer } from './containers/TwoColumnsContainer/TwoColumnsPageContainer.js';
+export { UnorderedList, UnorderedListItem } from './components/UnorderedList/UnorderedList.styles.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.33",
+  "version": "0.7.37",
   "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": "b7a4dbc2f08242e4991b1bc854af729eba566f5e"
+  "gitHead": "78b244982105ec4218731adcd38003b606505caf"
 }