@citygross/components 0.7.35 → 0.7.39

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

@@ -6,3 +6,4 @@ declare const _default: {
 export default _default;
 export declare const Default: () => JSX.Element;
 export declare const Logout: () => JSX.Element;
+export declare const WithMenu: () => JSX.Element;

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

@@ -5,9 +5,3 @@ export declare type THeaderContainer = {
 export declare const HeaderWrapper: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
 export declare const HeaderContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, THeaderContainer, never>;
 export declare const MenuContainer: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
-export declare const Relative: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-interface FadeProps {
-    readonly isVisible?: boolean;
-}
-export declare const Fade: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FadeProps, never>;
-export {};

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

@@ -0,0 +1,8 @@
+export declare type TIconToolTip = {
+    icon?: JSX.Element;
+    header?: JSX.Element;
+    children?: JSX.Element;
+    right?: number;
+    left?: number;
+};
+export declare function IconToolTip({ icon, header, right, left, children }: TIconToolTip): JSX.Element;

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

@@ -0,0 +1,13 @@
+import { IconToolTip } from './IconToolTip';
+declare const _default: {
+    component: typeof IconToolTip;
+    title: string;
+};
+export default _default;
+export declare const Default: {
+    (args: any): JSX.Element;
+    args: {
+        header: JSX.Element;
+        children: JSX.Element;
+    };
+};

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

@@ -0,0 +1,9 @@
+export declare type TToolTipBox = {
+    right?: number;
+    left?: number;
+};
+export declare const IconToolTipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ArrowUp: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ToolTipBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TToolTipBox, never>;
+export declare const ToolTipheader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ToolTipIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -3,5 +3,6 @@ export declare type TLayoutBox = {
     background?: string;
     borderRadius?: number;
     shadowInset?: boolean;
+    showOverflow?: boolean;
 };
 export declare const LayoutBox: React.FunctionComponent<TLayoutBox>;

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

@@ -3,6 +3,7 @@ declare type TLayoutBoxContainer = {
     rounded?: boolean;
     borderRadius?: number;
     shadowInset?: boolean;
+    showOverflow?: boolean;
 };
 export declare const LayoutBoxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TLayoutBoxContainer, never>;
 export {};

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

@@ -7,4 +7,5 @@ declare const _default: {
 export default _default;
 export declare const Default: Story<TListItem>;
 export declare const Loading: Story<TListItem>;
+export declare const ItemWithPrice: Story<TListItem>;
 export declare const CartListItem: Story<TListItem>;

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';
@@ -25,6 +26,7 @@ export * from './components/FormElements/Switch/Switch';
 export * from './components/FormGroup/FormGroup';
 export * from './components/GridContainer/GridContainer';
 export * from './components/Header/Header';
+export * from './components/IconToolTip/IconToolTip';
 export * from './components/InfoTextBlock/InfoTextBlock';
 export * from './components/LayoutBox/LayoutBox';
 export * from './components/ListItem/ListItem';
@@ -45,6 +47,7 @@ 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/Header/Header.js

@@ -18,29 +18,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 function Header(_a) {
     var _b, _c;
     var logOut = _a.logOut, logOutLabel = _a.logOutLabel, _d = _a.topLinkHref, topLinkHref = _d === void 0 ? '/' : _d, topLinkLabel = _a.topLinkLabel, logoImage = _a.logoImage, _e = _a.lowerContainerMaxWidth, lowerContainerMaxWidth = _e === void 0 ? (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.pageContentMaxWidth : _e, children = _a.children;
-    var _f = React.useState(true), showFade = _f[0], setShowFade = _f[1];
     var device = utils.useDetectDevice();
-    var onScroll = function (e) {
-        var _a, _b;
-        if (e.scrollWidth - e.scrollLeft >=
-            e.clientWidth + ((_b = (_a = designTokens.theme.constants) === null || _a === void 0 ? void 0 : _a.headerScrollFadeRange) !== null && _b !== void 0 ? _b : 0)) {
-            setShowFade(true);
-        }
-        else {
-            setShowFade(false);
-        }
-    };
     return (React__default['default'].createElement(Header_styles.Wrapper, null,
         topLinkLabel && topLinkHref && (React__default['default'].createElement(HeaderLink.HeaderLink, { linkHref: topLinkHref, icon: React__default['default'].createElement(Icon.Icons.ChevronLeft, { width: 20, height: 20, color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white }), linkLabel: topLinkLabel })),
         React__default['default'].createElement(Header_styles.HeaderWrapper, null,
             React__default['default'].createElement(Header_styles.HeaderContainer, { maxWidth: lowerContainerMaxWidth },
                 React__default['default'].createElement(Logo.Logo, { logoImage: logoImage }),
-                logOut && (React__default['default'].createElement(Button.Button, { onClick: function () { return logOut && logOut(); } }, logOutLabel)))),
-        children && (React__default['default'].createElement(Header_styles.Relative, null,
-            React__default['default'].createElement(Header_styles.MenuContainer, { onScroll: function (e) {
-                    onScroll(e.currentTarget);
-                } }, children),
-            device.isMobile && React__default['default'].createElement(Header_styles.Fade, { isVisible: showFade })))));
+                logOut && (React__default['default'].createElement(Button.Button, { onClick: function () { return logOut && logOut(); }, color: 'white', size: device.isMobile ? 'medium' : 'large' }, logOutLabel)))),
+        children && React__default['default'].createElement(Header_styles.MenuContainer, null, children)));
 }
 
 exports.Header = Header;

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

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

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

@@ -10,17 +10,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var Wrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"], ["\n  position: relative;\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"])));
-var HeaderWrapper = styled__default['default'].header(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: 20px ", "px;\n  }\n"], ["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: 20px ", "px;\n  }\n"])), 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.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.spacings) === null || _a === void 0 ? void 0 : _a.md; });
+var HeaderWrapper = styled__default['default'].header(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: ", "px\n      ", "px;\n  }\n"], ["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: ", "px\n      ", "px;\n  }\n"])), 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.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.constants) === null || _a === void 0 ? void 0 : _a.headerWrapperVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
 var HeaderContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n"])), function (props) { return props.maxWidth; });
-var MenuContainer = styled__default['default'].nav(templateObject_4 || (templateObject_4 = _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  @media (min-width: ", "px) {\n    padding: 0 ", "px;\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  @media (min-width: ", "px) {\n    padding: 0 ", "px;\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.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.sm; });
-var Relative = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var Fade = styled__default['default'].div(templateObject_6 || (templateObject_6 = _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 500ms;\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 500ms;\n  opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) === false ? '0' : '1'); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var MenuContainer = styled__default['default'].nav(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  position: relative;\n  max-width: ", "px;\n  padding-left: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n  @media (min-width: ", "px) {\n    padding-left: 0;\n  }\n"], ["\n  position: relative;\n  max-width: ", "px;\n  padding-left: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n  @media (min-width: ", "px) {\n    padding-left: 0;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxl; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
-exports.Fade = Fade;
 exports.HeaderContainer = HeaderContainer;
 exports.HeaderWrapper = HeaderWrapper;
 exports.MenuContainer = MenuContainer;
-exports.Relative = Relative;
 exports.Wrapper = Wrapper;
 //# sourceMappingURL=Header.styles.js.map

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

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

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

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Icon = require('@citygross/icons');
+var IconToolTip_styles = require('./IconToolTip.styles.js');
+var Spacer = require('../Spacer/Spacer.js');
+var index = require('../../../../design-tokens/build/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function IconToolTip(_a) {
+    var _b, _c;
+    var _d = _a.icon, icon = _d === void 0 ? React__default['default'].createElement(Icon.Icons.Info, { width: 17, height: 17, color: (_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }) : _d, header = _a.header, right = _a.right, left = _a.left, children = _a.children;
+    var _e = React.useState(false), open = _e[0], setOpen = _e[1];
+    return (React__default['default'].createElement(IconToolTip_styles.IconToolTipContainer, null,
+        React__default['default'].createElement("div", { onClick: function () { return setOpen(!open); } }, icon),
+        open && (React__default['default'].createElement(React__default['default'].Fragment, null,
+            React__default['default'].createElement(IconToolTip_styles.ArrowUp, null),
+            React__default['default'].createElement(IconToolTip_styles.ToolTipBox, { left: left, right: right },
+                React__default['default'].createElement(IconToolTip_styles.ToolTipheader, null,
+                    header,
+                    React__default['default'].createElement(IconToolTip_styles.ToolTipIconContainer, { onClick: function () { return setOpen(false); } },
+                        React__default['default'].createElement(Icon.Icons.Cross, { color: (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.white }))),
+                React__default['default'].createElement(Spacer.Spacer, null),
+                children)))));
+}
+
+exports.IconToolTip = IconToolTip;
+//# sourceMappingURL=IconToolTip.js.map

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

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

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

@@ -0,0 +1,30 @@
+'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 IconToolTipContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n"], ["\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n"])));
+var ArrowUp = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  width: 0;\n  left: ", "px;\n  height: 0;\n  border-left: ", "px solid\n    transparent;\n  border-right: ", "px solid\n    transparent;\n  border-bottom: ", "px solid\n    ", ";\n"], ["\n  position: absolute;\n  top: ", "px;\n  width: 0;\n  left: ", "px;\n  height: 0;\n  border-left: ", "px solid\n    transparent;\n  border-right: ", "px solid\n    transparent;\n  border-bottom: ", "px solid\n    ", ";\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowLeft; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; });
+var ToolTipBox = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  ", ";\n  width: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  padding: ", "px;\n  z-index: 99;\n"], ["\n  position: absolute;\n  top: ", "px;\n  ", ";\n  width: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  padding: ", "px;\n  z-index: 99;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) {
+    return props.right
+        ? "right: " + props.right + "px"
+        : props.left
+            ? "left:" + props.left + "px"
+            : null;
+}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipBoxWidth; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var ToolTipheader = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var ToolTipIconContainer = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+exports.ArrowUp = ArrowUp;
+exports.IconToolTipContainer = IconToolTipContainer;
+exports.ToolTipBox = ToolTipBox;
+exports.ToolTipIconContainer = ToolTipIconContainer;
+exports.ToolTipheader = ToolTipheader;
+//# sourceMappingURL=IconToolTip.styles.js.map

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

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

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

@@ -10,8 +10,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var LayoutBox = function (_a) {
-    var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, children = _a.children;
-    return (React__default['default'].createElement(LayoutBox_styles.LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff' }, children));
+    var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, showOverflow = _a.showOverflow, children = _a.children;
+    return (React__default['default'].createElement(LayoutBox_styles.LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff', showOverflow: showOverflow }, children));
 };
 
 exports.LayoutBox = LayoutBox;

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

@@ -9,12 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var LayoutBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"], ["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) {
+var LayoutBoxContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"], ["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) {
     var _a, _b, _c, _d;
     return props.shadowInset
         ? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.layoutShadowInset
         : (_d = (_c = props.theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow) === null || _d === void 0 ? void 0 : _d.layoutShadow;
-}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
+}, function (props) { return (props.showOverflow ? 'visible' : 'hidden'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
 var templateObject_1;
 
 exports.LayoutBoxContainer = LayoutBoxContainer;

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

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 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 MenuContainer = styled__default['default'].nav(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  gap: ", "px;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\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    width: calc(100% - 40px);\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  gap: ", "px;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\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    width: calc(100% - 40px);\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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  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  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.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;
 

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/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');
@@ -29,6 +30,7 @@ var Radio = require('./components/FormElements/Radio/Radio.js');
 var Switch = require('./components/FormElements/Switch/Switch.js');
 var FormGroup = require('./components/FormGroup/FormGroup.js');
 var GridContainer = require('./components/GridContainer/GridContainer.js');
+var IconToolTip = require('./components/IconToolTip/IconToolTip.js');
 var InfoTextBlock = require('./components/InfoTextBlock/InfoTextBlock.js');
 var LayoutBox = require('./components/LayoutBox/LayoutBox.js');
 var ListItem = require('./components/ListItem/ListItem.js');
@@ -50,6 +52,7 @@ 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');
@@ -76,6 +79,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;
@@ -101,6 +105,7 @@ exports.Radio = Radio.Radio;
 exports.Switch = Switch.Switch;
 exports.FormGroup = FormGroup.FormGroup;
 exports.GridContainer = GridContainer.GridContainer;
+exports.IconToolTip = IconToolTip.IconToolTip;
 exports.InfoWithButtonBlock = InfoTextBlock.InfoWithButtonBlock;
 exports.LayoutBox = LayoutBox.LayoutBox;
 exports.ListItem = ListItem.ListItem;
@@ -138,6 +143,7 @@ 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;

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/cjs/design-tokens/build/index.js

@@ -62,7 +62,12 @@ var constants = {
     infoBlockBorderWidth: 4,
     tableRowVerticalPadding: 16,
     tableRowHorizontalPadding: 14,
-    tableHeaderVerticalPadding: 12
+    tableHeaderVerticalPadding: 12,
+    headerWrapperVerticalPadding: 20,
+    iconToolTipArrowLeft: 2.5,
+    iconToolTipArrowTop: 32,
+    iconToolTipBoxWidth: 300,
+    iconToolTipTop: 36
 };
 
 var palette = {

package/build/cjs/design-tokens/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    ListImageMaxWidth: 64,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxs: 4,\n    xs: 8,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // s all from 0-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        code: 90\n    },\n    lineHeight: {\n        // s all from 0-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    ListImageMaxWidth: 64,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12,\n    headerWrapperVerticalPadding: 20,\n    iconToolTipArrowLeft: 2.5,\n    iconToolTipArrowTop: 32,\n    iconToolTipBoxWidth: 300,\n    iconToolTipTop: 36\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxs: 4,\n    xs: 8,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // s all from 0-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        code: 90\n    },\n    lineHeight: {\n        // s all from 0-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":["build"],"mappings":"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"}

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/Header/Header.js

@@ -1,38 +1,23 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useDetectDevice } from '@citygross/utils';
 import { theme } from '@citygross/design-tokens';
 import { Icons } from '@citygross/icons';
 import { Button } from '../Button/Button.js';
 import { Logo } from '../Logo/Logo.js';
-import { Wrapper, HeaderWrapper, HeaderContainer, Relative, MenuContainer, Fade } from './Header.styles.js';
+import { Wrapper, HeaderWrapper, HeaderContainer, MenuContainer } from './Header.styles.js';
 import { HeaderLink } from '../HeaderLink/HeaderLink.js';
 
 function Header(_a) {
     var _b, _c;
     var logOut = _a.logOut, logOutLabel = _a.logOutLabel, _d = _a.topLinkHref, topLinkHref = _d === void 0 ? '/' : _d, topLinkLabel = _a.topLinkLabel, logoImage = _a.logoImage, _e = _a.lowerContainerMaxWidth, lowerContainerMaxWidth = _e === void 0 ? (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.pageContentMaxWidth : _e, children = _a.children;
-    var _f = useState(true), showFade = _f[0], setShowFade = _f[1];
     var device = useDetectDevice();
-    var onScroll = function (e) {
-        var _a, _b;
-        if (e.scrollWidth - e.scrollLeft >=
-            e.clientWidth + ((_b = (_a = theme.constants) === null || _a === void 0 ? void 0 : _a.headerScrollFadeRange) !== null && _b !== void 0 ? _b : 0)) {
-            setShowFade(true);
-        }
-        else {
-            setShowFade(false);
-        }
-    };
     return (React.createElement(Wrapper, null,
         topLinkLabel && topLinkHref && (React.createElement(HeaderLink, { linkHref: topLinkHref, icon: React.createElement(Icons.ChevronLeft, { width: 20, height: 20, color: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.white }), linkLabel: topLinkLabel })),
         React.createElement(HeaderWrapper, null,
             React.createElement(HeaderContainer, { maxWidth: lowerContainerMaxWidth },
                 React.createElement(Logo, { logoImage: logoImage }),
-                logOut && (React.createElement(Button, { onClick: function () { return logOut && logOut(); } }, logOutLabel)))),
-        children && (React.createElement(Relative, null,
-            React.createElement(MenuContainer, { onScroll: function (e) {
-                    onScroll(e.currentTarget);
-                } }, children),
-            device.isMobile && React.createElement(Fade, { isVisible: showFade })))));
+                logOut && (React.createElement(Button, { onClick: function () { return logOut && logOut(); }, color: 'white', size: device.isMobile ? 'medium' : 'large' }, logOutLabel)))),
+        children && React.createElement(MenuContainer, null, children)));
 }
 
 export { Header };

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

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

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

@@ -2,12 +2,10 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
 var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"], ["\n  position: relative;\n  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);\n"])));
-var HeaderWrapper = styled.header(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: 20px ", "px;\n  }\n"], ["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: 20px ", "px;\n  }\n"])), 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.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.spacings) === null || _a === void 0 ? void 0 : _a.md; });
+var HeaderWrapper = styled.header(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: ", "px\n      ", "px;\n  }\n"], ["\n  background: ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    padding: ", "px\n      ", "px;\n  }\n"])), 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.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.constants) === null || _a === void 0 ? void 0 : _a.headerWrapperVerticalPadding; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
 var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  max-width: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n"])), function (props) { return props.maxWidth; });
-var MenuContainer = styled.nav(templateObject_4 || (templateObject_4 = __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  @media (min-width: ", "px) {\n    padding: 0 ", "px;\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  @media (min-width: ", "px) {\n    padding: 0 ", "px;\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.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.sm; });
-var Relative = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var Fade = styled.div(templateObject_6 || (templateObject_6 = __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 500ms;\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 500ms;\n  opacity: ", ";\n"])), function (props) { return ((props === null || props === void 0 ? void 0 : props.isVisible) === false ? '0' : '1'); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+var MenuContainer = styled.nav(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  max-width: ", "px;\n  padding-left: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n  @media (min-width: ", "px) {\n    padding-left: 0;\n  }\n"], ["\n  position: relative;\n  max-width: ", "px;\n  padding-left: ", "px;\n  margin-left: auto;\n  margin-right: auto;\n\n  @media (min-width: ", "px) {\n    padding-left: ", "px;\n  }\n  @media (min-width: ", "px) {\n    padding-left: 0;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.pageContentMaxWidth; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xxl; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
 
-export { Fade, HeaderContainer, HeaderWrapper, MenuContainer, Relative, Wrapper };
+export { HeaderContainer, HeaderWrapper, MenuContainer, Wrapper };
 //# sourceMappingURL=Header.styles.js.map

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

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

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

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Icons } from '@citygross/icons';
+import { IconToolTipContainer, ArrowUp, ToolTipBox, ToolTipheader, ToolTipIconContainer } from './IconToolTip.styles.js';
+import { Spacer } from '../Spacer/Spacer.js';
+import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
+
+function IconToolTip(_a) {
+    var _b, _c;
+    var _d = _a.icon, icon = _d === void 0 ? React.createElement(Icons.Info, { width: 17, height: 17, color: (_b = theme_1.palette) === null || _b === void 0 ? void 0 : _b.dark }) : _d, header = _a.header, right = _a.right, left = _a.left, children = _a.children;
+    var _e = useState(false), open = _e[0], setOpen = _e[1];
+    return (React.createElement(IconToolTipContainer, null,
+        React.createElement("div", { onClick: function () { return setOpen(!open); } }, icon),
+        open && (React.createElement(React.Fragment, null,
+            React.createElement(ArrowUp, null),
+            React.createElement(ToolTipBox, { left: left, right: right },
+                React.createElement(ToolTipheader, null,
+                    header,
+                    React.createElement(ToolTipIconContainer, { onClick: function () { return setOpen(false); } },
+                        React.createElement(Icons.Cross, { color: (_c = theme_1.palette) === null || _c === void 0 ? void 0 : _c.white }))),
+                React.createElement(Spacer, null),
+                children)))));
+}
+
+export { IconToolTip };
+//# sourceMappingURL=IconToolTip.js.map

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

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

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

@@ -0,0 +1,18 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var IconToolTipContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n"], ["\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n"])));
+var ArrowUp = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  width: 0;\n  left: ", "px;\n  height: 0;\n  border-left: ", "px solid\n    transparent;\n  border-right: ", "px solid\n    transparent;\n  border-bottom: ", "px solid\n    ", ";\n"], ["\n  position: absolute;\n  top: ", "px;\n  width: 0;\n  left: ", "px;\n  height: 0;\n  border-left: ", "px solid\n    transparent;\n  border-right: ", "px solid\n    transparent;\n  border-bottom: ", "px solid\n    ", ";\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipArrowLeft; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; });
+var ToolTipBox = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  ", ";\n  width: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  padding: ", "px;\n  z-index: 99;\n"], ["\n  position: absolute;\n  top: ", "px;\n  ", ";\n  width: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  padding: ", "px;\n  z-index: 99;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) {
+    return props.right
+        ? "right: " + props.right + "px"
+        : props.left
+            ? "left:" + props.left + "px"
+            : null;
+}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipBoxWidth; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var ToolTipheader = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  align-items: center;\n"])));
+var ToolTipIconContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+export { ArrowUp, IconToolTipContainer, ToolTipBox, ToolTipIconContainer, ToolTipheader };
+//# sourceMappingURL=IconToolTip.styles.js.map

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

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

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { LayoutBoxContainer } from './LayoutBox.styles.js';
 
 var LayoutBox = function (_a) {
-    var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, children = _a.children;
-    return (React.createElement(LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff' }, children));
+    var background = _a.background, borderRadius = _a.borderRadius, shadowInset = _a.shadowInset, showOverflow = _a.showOverflow, children = _a.children;
+    return (React.createElement(LayoutBoxContainer, { borderRadius: borderRadius, shadowInset: shadowInset, background: background || '#fff', showOverflow: showOverflow }, children));
 };
 
 export { LayoutBox };

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

@@ -1,12 +1,12 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
-var LayoutBoxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"], ["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) {
+var LayoutBoxContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"], ["\n  background: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  @media (min-width: ", "px) {\n    border-radius: ", "px;\n  }\n"])), function (props) { return props.background; }, function (props) {
     var _a, _b, _c, _d;
     return props.shadowInset
         ? (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.layoutShadowInset
         : (_d = (_c = props.theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow) === null || _d === void 0 ? void 0 : _d.layoutShadow;
-}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
+}, function (props) { return (props.showOverflow ? 'visible' : 'hidden'); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return props.borderRadius || ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small); });
 var templateObject_1;
 
 export { LayoutBoxContainer };

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

@@ -1,8 +1,8 @@
 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 MenuContainer = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  gap: ", "px;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\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    width: calc(100% - 40px);\n  }\n"], ["\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  overflow-x: auto;\n  overflow-y: hidden;\n  gap: ", "px;\n  -webkit-overflow-scrolling: touch;\n  -ms-overflow-style: -ms-autohiding-scrollbar;\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    width: calc(100% - 40px);\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, 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  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  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.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;
 

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/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';
@@ -25,6 +26,7 @@ export { Radio } from './components/FormElements/Radio/Radio.js';
 export { Switch } from './components/FormElements/Switch/Switch.js';
 export { FormGroup } from './components/FormGroup/FormGroup.js';
 export { GridContainer } from './components/GridContainer/GridContainer.js';
+export { IconToolTip } from './components/IconToolTip/IconToolTip.js';
 export { InfoWithButtonBlock } from './components/InfoTextBlock/InfoTextBlock.js';
 export { LayoutBox } from './components/LayoutBox/LayoutBox.js';
 export { ListItem } from './components/ListItem/ListItem.js';
@@ -46,6 +48,7 @@ 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';

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/build/es/design-tokens/build/index.js

@@ -59,7 +59,12 @@ var constants = {
     infoBlockBorderWidth: 4,
     tableRowVerticalPadding: 16,
     tableRowHorizontalPadding: 14,
-    tableHeaderVerticalPadding: 12
+    tableHeaderVerticalPadding: 12,
+    headerWrapperVerticalPadding: 20,
+    iconToolTipArrowLeft: 2.5,
+    iconToolTipArrowTop: 32,
+    iconToolTipBoxWidth: 300,
+    iconToolTipTop: 36
 };
 
 var palette = {

package/build/es/design-tokens/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    ListImageMaxWidth: 64,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxs: 4,\n    xs: 8,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // s all from 0-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        code: 90\n    },\n    lineHeight: {\n        // s all from 0-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../design-tokens/build/index.js"],"sourcesContent":["'use strict';\n\nObject.defineProperty(exports, '__esModule', { value: true });\n\nvar attributes = {\n    borderRadius: {\n        extraSmall: 2,\n        small: 5,\n        default: 10,\n        big: 20\n    },\n    boxShadow: {\n        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',\n        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',\n        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',\n        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',\n        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',\n        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',\n        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',\n        stepperShadow: '0px -5px 20px rgba(0, 0, 0, 0.04), 0px -2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)'\n    },\n    zIndex: {\n        modal: 5,\n        footer: 4,\n        high: 3,\n        middle: 2,\n        low: 1\n    },\n    transition: {\n        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',\n        inputTransition: 'box-shadow 250ms ease'\n    }\n};\n\nvar breakpoints = {\n    xs: 480,\n    sm: 576,\n    md: 768,\n    lg: 960,\n    xl: 1060,\n    xxl: 1280,\n    xxxl: 1400\n};\n\nvar constants = {\n    headerScrollFadeRange: 50,\n    modalContainerMaxWidth: 615,\n    modalConfirmMaxWidth: 480,\n    pageContainerMaxWidth: 776,\n    twoColumnsContainerMaxWidth: 1024,\n    deliverySlotItemWidth: 80,\n    deliverySlotItemWidthDesktop: 120,\n    itemGap: 2,\n    ListImageMaxWidth: 64,\n    infoBlockImageMaxWidthDesktop: 100,\n    chipCheckBox: 12,\n    pageContentMaxWidth: 1232,\n    infoBlockBorderWidth: 4,\n    tableRowVerticalPadding: 16,\n    tableRowHorizontalPadding: 14,\n    tableHeaderVerticalPadding: 12,\n    headerWrapperVerticalPadding: 20,\n    iconToolTipArrowLeft: 2.5,\n    iconToolTipArrowTop: 32,\n    iconToolTipBoxWidth: 300,\n    iconToolTipTop: 36\n};\n\nvar palette = {\n    // pallette same as brand colors\n    primary: '#FFE522',\n    secondary: '#0069AE',\n    // brand colors\n    brandYellow: '#FFE522',\n    brandBlue: '#0069AE',\n    brandPurple: '#A71680',\n    // shades\n    yellowLighter: '#FFFBE7',\n    yellowLight: '#FFF7D1',\n    blueLight: '#ECF7FE',\n    blueMedium: '#92B9D3',\n    greenLight: '#F2FDF2',\n    greenMedium: '#BEE5BE',\n    // link same as alert blue\n    link: '#0072BB',\n    // black / white\n    white: '#FFFFFF',\n    black: '#000000',\n    // grayscale\n    lightest: '#F7F7F7',\n    lighter: '#F1F1F1',\n    light: '#E8E8E8',\n    medium: '#DBDBDB',\n    dark: '#979797',\n    darker: '#4A4A4A',\n    darkest: '#333333',\n    border: '#0069AE',\n    boxShadow: '#E1E1E1',\n    boxShadowActive: 'rgba(7, 52, 99, 0.15)',\n    // Alerts\n    alertRed: '#E02721',\n    alertBlue: '#0072BB',\n    alertGreen: '#3F9A3C',\n    // overlay\n    darkOverlay: 'rgba(0, 0, 0, 0.6)',\n    // transparent\n    transparent: '#ffffff00',\n    none: 'none'\n};\n\nvar spacings = {\n    xxs: 4,\n    xs: 8,\n    sm: 16,\n    md: 24,\n    lg: 32,\n    xl: 40,\n    xxl: 56\n    // More in figma, but talk with Johan to generalize it more.\n    // xxx: 72, 88, 120, 152 ?\n};\n\nvar typography = {\n    type: {\n        primary: '\"Poppins\", \"Helvetica Neue\", Helvetica, Arial, sans-serif',\n        code: '\"SFMono-Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace'\n    },\n    weight: {\n        regular: '400',\n        medium: '500',\n        semiBold: '600',\n        bold: '700'\n    },\n    size: {\n        // s all from 0-20\n        s1: 12,\n        s2: 13,\n        s3: 15,\n        s4: 18,\n        // m all from 21-40\n        m1: 24,\n        m2: 30,\n        // l all from 41 >\n        code: 90\n    },\n    lineHeight: {\n        // s all from 0-20\n        s1: 18,\n        s2: 19,\n        // m all from 21-40\n        m1: 22,\n        m2: 27,\n        m3: 36,\n        // l all from 41 >\n        l1: 45\n    }\n};\n\nvar animations = {\n    tapScale: 0.9,\n    hoverScale: 1.1,\n    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',\n    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)'\n};\n\nvar createTheme = function (_a) {\n    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;\n    return ({\n        palette: palette,\n        typography: typography,\n        attributes: attributes,\n        breakpoints: breakpoints,\n        spacings: spacings,\n        constants: constants,\n        animations: animations\n    });\n};\nvar theme = createTheme({\n    palette: palette,\n    typography: typography,\n    attributes: attributes,\n    breakpoints: breakpoints,\n    spacings: spacings,\n    constants: constants,\n    animations: animations\n});\n\nexports.animations = animations;\nexports.attributes = attributes;\nexports.breakpoints = breakpoints;\nexports.constants = constants;\nexports.palette = palette;\nexports.spacings = spacings;\nexports.theme = theme;\nexports.typography = typography;\n//# sourceMappingURL=index.js.map\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.35",
+  "version": "0.7.39",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -62,14 +62,14 @@
     "styled-components": "^5.2.1"
   },
   "dependencies": {
-    "@citygross/design-tokens": "^0.2.14",
+    "@citygross/design-tokens": "^0.2.15",
     "@citygross/icons": "^0.1.1",
     "@citygross/react-use-bg-wizard": "^0.0.7",
-    "@citygross/typography": "^0.0.41",
+    "@citygross/typography": "^0.0.42",
     "@citygross/utils": "^0.0.19",
     "framer-motion": "^4.1.17",
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "9ea301b2402ec9d90eb2fcf8f9abaca8dfe8c90b"
+  "gitHead": "33bdc32d15bcacaaa914dd3a0c1befd5c90de964"
 }