@citygross/components 0.9.0 → 0.9.1

package/build/es/components/src/components/CartCard/assets/fallback_grocery.svg.js

@@ -1,4 +1,4 @@
-var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\n    <title>shopping_cart_loaded</title>\n    <desc>Created with Sketch.</desc>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\n                </g>\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                </g>\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                </g>\n            </g>\n        </g>\n    </g>\n</svg>";
+var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\r\n    <title>shopping_cart_loaded</title>\r\n    <desc>Created with Sketch.</desc>\r\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\r\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\r\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\r\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\r\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\r\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\r\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\r\n                </g>\r\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\r\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\r\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\r\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\r\n                </g>\r\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\r\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\r\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\r\n                </g>\r\n            </g>\r\n        </g>\r\n    </g>\r\n</svg>";
 
 export { FallbackIcon as default };
 //# sourceMappingURL=fallback_grocery.svg.js.map

package/build/es/components/src/components/ListItem/assets/fallback_grocery.svg.js

@@ -1,4 +1,4 @@
-var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\n    <title>shopping_cart_loaded</title>\n    <desc>Created with Sketch.</desc>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\n                </g>\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                </g>\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                </g>\n            </g>\n        </g>\n    </g>\n</svg>";
+var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\r\n    <title>shopping_cart_loaded</title>\r\n    <desc>Created with Sketch.</desc>\r\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\r\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\r\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\r\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\r\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\r\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\r\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\r\n                </g>\r\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\r\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\r\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\r\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\r\n                </g>\r\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\r\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\r\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\r\n                </g>\r\n            </g>\r\n        </g>\r\n    </g>\r\n</svg>";
 
 export { FallbackIcon as default };
 //# sourceMappingURL=fallback_grocery.svg.js.map

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

@@ -35,10 +35,11 @@ function Pagination(_a) {
     var _d = useState(Math.floor((currentPage - 1) / numOfPaginationsToShow)), currentIndex = _d[0], setIndex = _d[1];
     var pagination = createPagination(totalItems, itemsPerPage, numOfPaginationsToShow);
     return (React.createElement(Box, null, pagination && pagination.length > 0 && (React.createElement(Flex, null,
-        React.createElement(LeftPaginationButtonWrapper, { show: currentIndex > 0 }, currentIndex > 0 && (React.createElement(PaginationButton, { color: 'white', onClick: function () {
-                setPage && setPage(currentPage - 1);
-                setIndex(currentIndex - 1);
-            }, width: 36, height: 36 }, leftIcon || '...'))), (_b = pagination === null || pagination === void 0 ? void 0 : pagination[currentIndex]) === null || _b === void 0 ? void 0 :
+        currentIndex > 0 && (React.createElement(LeftPaginationButtonWrapper, null,
+            React.createElement(PaginationButton, { color: 'white', onClick: function () {
+                    setPage && setPage(currentPage - 1);
+                    setIndex(currentIndex - 1);
+                }, width: 36, height: 36 }, leftIcon || '...'))), (_b = pagination === null || pagination === void 0 ? void 0 : pagination[currentIndex]) === null || _b === void 0 ? void 0 :
         _b.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,

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

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

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

@@ -3,288 +3,288 @@ export { __exports as default } from '../../_virtual/index.js';
 
 Object.defineProperty(build, '__esModule', { value: true });
 
-var attributes = {
-    borderRadius: {
-        extraSmall: 2,
-        small: 5,
-        default: 10,
-        big: 20,
-        rounded: 100,
-        circle: '50%'
-    },
-    boxShadow: {
-        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',
-        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',
-        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',
-        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',
-        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',
-        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',
-        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',
-        layoutShadowInsetMedium: 'inset 0 -2px 0 rgba(0, 0, 0, 0.15)',
-        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)',
-        highlightBoxShadow: '0 2px 5px 0 rgba(7,52,99,0.15)',
-        focusVisible: '0 0 0 2px #000'
-    },
-    zIndex: {
-        modal: 5,
-        footer: 4,
-        high: 3,
-        middle: 2,
-        low: 1
-    },
-    transition: {
-        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',
-        inputTransition: 'box-shadow 250ms ease'
-    }
+var attributes = {
+    borderRadius: {
+        extraSmall: 2,
+        small: 5,
+        default: 10,
+        big: 20,
+        rounded: 100,
+        circle: '50%'
+    },
+    boxShadow: {
+        small: '0 0 46px 0 rgba(0, 0, 0, 0.13)',
+        hover: '0 0 15px 0 rgba(0, 0, 0, 0.13)',
+        buttonHover: '0 1px 5px rgba(0, 0, 0, 0.35)',
+        buttonActive: 'inset 0 0px 5px rgba(0, 0, 0, 0.15)',
+        iconButtonHover: '0 1px 8px rgba(0, 0, 0, 0.35)',
+        layoutShadow: '0 1px 0 rgba(0, 0, 0, 0.15)',
+        layoutShadowInset: 'inset 0 -1px 0 rgba(0, 0, 0, 0.15)',
+        layoutShadowInsetMedium: 'inset 0 -2px 0 rgba(0, 0, 0, 0.15)',
+        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)',
+        highlightBoxShadow: '0 2px 5px 0 rgba(7,52,99,0.15)',
+        focusVisible: '0 0 0 2px #000'
+    },
+    zIndex: {
+        modal: 5,
+        footer: 4,
+        high: 3,
+        middle: 2,
+        low: 1
+    },
+    transition: {
+        t1: '550ms cubic-bezier(0.19, 1, 0.22, 1)',
+        inputTransition: 'box-shadow 250ms ease'
+    }
 };
 
-var breakpoints = {
-    xxs: 360,
-    xs: 480,
-    sm: 576,
-    md: 768,
-    lg: 960,
-    xl: 1060,
-    xxl: 1280,
-    xxxl: 1400
+var breakpoints = {
+    xxs: 360,
+    xs: 480,
+    sm: 576,
+    md: 768,
+    lg: 960,
+    xl: 1060,
+    xxl: 1280,
+    xxxl: 1400
 };
 
-var constants = {
-    headerScrollFadeRange: 50,
-    modalContainerMaxWidth: 615,
-    modalConfirmMaxWidth: 480,
-    pageContainerMaxWidth: 776,
-    twoColumnsContainerMaxWidth: 1024,
-    deliverySlotItemWidth: 130,
-    deliverySlotItemWidthDesktop: 146,
-    deliverySlotItemHeight: 91,
-    deliverySlotArrowOffset: 42,
-    itemGap: 2,
-    listImageMaxWidth: 64,
-    listImageMaxHeight: 50,
-    listImageMaxWidthSmall: 32,
-    listImageMaxHeightSmall: 32,
-    listItemFlexGap: 20,
-    infoBlockImageMaxWidthDesktop: 100,
-    chipCheckBox: 12,
-    pageContentMaxWidth: 1232,
-    infoBlockBorderWidth: 4,
-    tableRowVerticalPadding: 16,
-    tableRowHorizontalPadding: 14,
-    tableHeaderVerticalPadding: 12,
-    menuHorizontalMargin: 12,
-    headerWrapperVerticalPadding: 20,
-    iconToolTipArrowLeft: 2.5,
-    iconToolTipArrowTop: 32,
-    iconToolTipBoxWidth: 300,
-    iconToolTipTop: 36,
-    dateBoxHorizontalPadding: 12,
-    BackgroundOverlayOpacity: 0.3,
-    selectWidth: 225,
-    selectMobileWidth: 175,
-    selectPadding: 2,
-    cartListItemDescriptionSize: 11,
-    mobileTablePadding: 12,
-    mobileTablePaddingBottom: 6,
-    mobileLabelVerticalPadding: 10,
-    mobileLabelPaddingRight: 35,
-    mobileLabelVerticalPaddingMobile: 8,
-    mobileLabelPaddingRightMobile: 20,
-    menuListItemIconSize: 16,
-    priceIndicatorRotate: 1,
-    priceRotate: 2.5,
-    priceSplashHorizontalPadding: 10,
-    priceVariantBadgeSize: 48,
-    buttonWrapperMinWidth: 120,
-    buttonChildGap: 12,
-    buttonChildSmallGap: 8,
-    buttonChildExtraSmallGap: 4,
-    buttonBadgeTopPosition: -3,
-    buttonBadgeRightPosition: -4,
-    buttonBadgePadding: 6,
-    buttonBadgePaddingSmall: 2,
-    buttonBadgeFontSize: 11,
-    navHeaderHeight: 81,
-    navHeaderHeightSmall: 64,
-    searchModalZIndex: 900,
-    searchBarHorizontalPadding: 12,
-    headerBreakpoint: 991,
-    zipCodeInputSize: 48,
-    zipCodeInputSizeSmall: 40,
-    tooltipMinWidth: 80,
-    toolTipTop: 35,
-    toolTipArrowMarginTop: -5,
-    toolTipBackground: 'rgba(0,0,0,.7)',
-    toolTipArrowBorderWidth: 5,
-    searchListItemGridTemplateColumns: 25,
-    MarkingWrapperGridGap: 2,
-    InputWithIconPaddingRight: 45,
-    navMainLinkWidth: 105,
-    maxHeightFaderHeight: 50,
-    paginationButtonWidth: 44,
-    cartCardImageSize: 48,
-    toolTipCloseSize: 20,
-    couponButtonContainer: 102,
-    selectButtonWidth: 169,
-    quantitySelectorWidthLarge: 140,
-    quantitySelectorWidthSmall: 123,
-    priceBaseLetterSpacing: -0.03
+var constants = {
+    headerScrollFadeRange: 50,
+    modalContainerMaxWidth: 615,
+    modalConfirmMaxWidth: 480,
+    pageContainerMaxWidth: 776,
+    twoColumnsContainerMaxWidth: 1024,
+    deliverySlotItemWidth: 130,
+    deliverySlotItemWidthDesktop: 146,
+    deliverySlotItemHeight: 91,
+    deliverySlotArrowOffset: 42,
+    itemGap: 2,
+    listImageMaxWidth: 64,
+    listImageMaxHeight: 50,
+    listImageMaxWidthSmall: 32,
+    listImageMaxHeightSmall: 32,
+    listItemFlexGap: 20,
+    infoBlockImageMaxWidthDesktop: 100,
+    chipCheckBox: 12,
+    pageContentMaxWidth: 1232,
+    infoBlockBorderWidth: 4,
+    tableRowVerticalPadding: 16,
+    tableRowHorizontalPadding: 14,
+    tableHeaderVerticalPadding: 12,
+    menuHorizontalMargin: 12,
+    headerWrapperVerticalPadding: 20,
+    iconToolTipArrowLeft: 2.5,
+    iconToolTipArrowTop: 32,
+    iconToolTipBoxWidth: 300,
+    iconToolTipTop: 36,
+    dateBoxHorizontalPadding: 12,
+    BackgroundOverlayOpacity: 0.3,
+    selectWidth: 225,
+    selectMobileWidth: 175,
+    selectPadding: 2,
+    cartListItemDescriptionSize: 11,
+    mobileTablePadding: 12,
+    mobileTablePaddingBottom: 6,
+    mobileLabelVerticalPadding: 10,
+    mobileLabelPaddingRight: 35,
+    mobileLabelVerticalPaddingMobile: 8,
+    mobileLabelPaddingRightMobile: 20,
+    menuListItemIconSize: 16,
+    priceIndicatorRotate: 1,
+    priceRotate: 2.5,
+    priceSplashHorizontalPadding: 10,
+    priceVariantBadgeSize: 48,
+    buttonWrapperMinWidth: 120,
+    buttonChildGap: 12,
+    buttonChildSmallGap: 8,
+    buttonChildExtraSmallGap: 4,
+    buttonBadgeTopPosition: -3,
+    buttonBadgeRightPosition: -4,
+    buttonBadgePadding: 6,
+    buttonBadgePaddingSmall: 2,
+    buttonBadgeFontSize: 11,
+    navHeaderHeight: 81,
+    navHeaderHeightSmall: 64,
+    searchModalZIndex: 900,
+    searchBarHorizontalPadding: 12,
+    headerBreakpoint: 991,
+    zipCodeInputSize: 48,
+    zipCodeInputSizeSmall: 40,
+    tooltipMinWidth: 80,
+    toolTipTop: 35,
+    toolTipArrowMarginTop: -5,
+    toolTipBackground: 'rgba(0,0,0,.7)',
+    toolTipArrowBorderWidth: 5,
+    searchListItemGridTemplateColumns: 25,
+    MarkingWrapperGridGap: 2,
+    InputWithIconPaddingRight: 45,
+    navMainLinkWidth: 105,
+    maxHeightFaderHeight: 50,
+    paginationButtonWidth: 44,
+    cartCardImageSize: 48,
+    toolTipCloseSize: 20,
+    couponButtonContainer: 102,
+    selectButtonWidth: 169,
+    quantitySelectorWidthLarge: 140,
+    quantitySelectorWidthSmall: 123,
+    priceBaseLetterSpacing: -0.03
 };
 
-var palette = {
-    // pallette same as brand colors
-    primary: '#FFDF43',
-    secondary: '#0071B9',
-    // brand colors
-    brandYellow: '#FFDF43',
-    brandBlue: '#0071B9',
-    brandPurple: '#A71680',
-    brandPrio: '#a80073',
-    // shades
-    yellowLighter: '#FFFBE7',
-    yellowLight: '#FFF7D1',
-    blueLight: '#ECF7FE',
-    blueLighter: '#D3EDFD',
-    blueMedium: '#92B9D3',
-    greenLight: '#F2FDF2',
-    greenMedium: '#BEE5BE',
-    redLight: '#FCE9E9',
-    priceTagRed: '#C80700',
-    // recipeTags
-    recipeVego: '#65DB69',
-    recipeLactose: '#8CCDF0',
-    recipeGluten: '#D5642A',
-    // link same as alert blue
-    link: '#0072BB',
-    // black / white
-    white: '#FFFFFF',
-    black: '#000000',
-    // grayscale
-    lightest: '#F7F7F7',
-    lighter: '#F1F1F1',
-    light: '#E8E8E8',
-    medium: '#DBDBDB',
-    mediumDark: '#6C6C6C',
-    dark: '#979797',
-    darker: '#4A4A4A',
-    darkest: '#333333',
-    buttonGray: '#E5E4E5',
-    disabledGray: '#B8B8B8',
-    disabledDarkGray: '#5c5c5c',
-    placeholder: '#8f8f8f',
-    border: '#0069AE',
-    boxShadow: '#E1E1E1',
-    boxShadowActive: 'rgba(7, 52, 99, 0.15)',
-    // Alerts
-    alertRed: '#E02721',
-    alertBlue: '#0072BB',
-    alertGreen: '#3F9A3C',
-    // overlay
-    darkOverlay: 'rgba(0, 0, 0, 0.6)',
-    // transparent
-    transparent: '#ffffff00',
-    // hover
-    brandBlueHover: '#005C99',
-    brandYellowHover: '#F5D800',
-    brandPrioHover: '#90136F',
-    brandBlueActive: '#004D80',
-    brandYellowActive: '#DBC100',
-    brandPrioActive: '#7A105E',
-    none: 'none'
+var palette = {
+    // pallette same as brand colors
+    primary: '#FFDF43',
+    secondary: '#0071B9',
+    // brand colors
+    brandYellow: '#FFDF43',
+    brandBlue: '#0071B9',
+    brandPurple: '#A71680',
+    brandPrio: '#a80073',
+    // shades
+    yellowLighter: '#FFFBE7',
+    yellowLight: '#FFF7D1',
+    blueLight: '#ECF7FE',
+    blueLighter: '#D3EDFD',
+    blueMedium: '#92B9D3',
+    greenLight: '#F2FDF2',
+    greenMedium: '#BEE5BE',
+    redLight: '#FCE9E9',
+    priceTagRed: '#C80700',
+    // recipeTags
+    recipeVego: '#65DB69',
+    recipeLactose: '#8CCDF0',
+    recipeGluten: '#D5642A',
+    // link same as alert blue
+    link: '#0072BB',
+    // black / white
+    white: '#FFFFFF',
+    black: '#000000',
+    // grayscale
+    lightest: '#F7F7F7',
+    lighter: '#F1F1F1',
+    light: '#E8E8E8',
+    medium: '#DBDBDB',
+    mediumDark: '#6C6C6C',
+    dark: '#979797',
+    darker: '#4A4A4A',
+    darkest: '#333333',
+    buttonGray: '#E5E4E5',
+    disabledGray: '#B8B8B8',
+    disabledDarkGray: '#5c5c5c',
+    placeholder: '#8f8f8f',
+    border: '#0069AE',
+    boxShadow: '#E1E1E1',
+    boxShadowActive: 'rgba(7, 52, 99, 0.15)',
+    // Alerts
+    alertRed: '#E02721',
+    alertBlue: '#0072BB',
+    alertGreen: '#3F9A3C',
+    // overlay
+    darkOverlay: 'rgba(0, 0, 0, 0.6)',
+    // transparent
+    transparent: '#ffffff00',
+    // hover
+    brandBlueHover: '#005C99',
+    brandYellowHover: '#F5D800',
+    brandPrioHover: '#90136F',
+    brandBlueActive: '#004D80',
+    brandYellowActive: '#DBC100',
+    brandPrioActive: '#7A105E',
+    none: 'none'
 };
 
-var spacings = {
-    xxxs: 2,
-    xxs: 4,
-    xxs2: 6,
-    xs: 8,
-    xs1: 10,
-    xs2: 12,
-    xs3: 14,
-    sm: 16,
-    sm1: 18,
-    sm2: 20,
-    md: 24,
-    lg: 32,
-    xl: 40,
-    xl2: 48,
-    xxl: 56
-    // More in figma, but talk with Johan to generalize it more.
-    // xxx: 72, 88, 120, 152 ?
+var spacings = {
+    xxxs: 2,
+    xxs: 4,
+    xxs2: 6,
+    xs: 8,
+    xs1: 10,
+    xs2: 12,
+    xs3: 14,
+    sm: 16,
+    sm1: 18,
+    sm2: 20,
+    md: 24,
+    lg: 32,
+    xl: 40,
+    xl2: 48,
+    xxl: 56
+    // More in figma, but talk with Johan to generalize it more.
+    // xxx: 72, 88, 120, 152 ?
 };
 
-var typography = {
-    type: {
-        primary: '"Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif',
-        display: '"Dom Casual"',
-        code: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace'
-    },
-    weight: {
-        regular: '400',
-        medium: '500',
-        semiBold: '600',
-        bold: '700',
-        extraBold: '800'
-    },
-    size: {
-        // xs all from 0-10
-        xs: 10,
-        // s all from 11-20
-        s0: 11,
-        s1: 12,
-        s2: 13,
-        s3: 15,
-        s4: 18,
-        // m all from 21-40
-        m1: 24,
-        m2: 30,
-        // l all from 41 >
-        l1: 41,
-        code: 90
-    },
-    lineHeight: {
-        // xs all from 0-15
-        xs: 15,
-        // s all from 16-20
-        s1: 18,
-        s2: 19,
-        // m all from 21-40
-        m1: 22,
-        m2: 27,
-        m3: 36,
-        // l all from 41 >
-        l1: 45
-    }
+var typography = {
+    type: {
+        primary: '"Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif',
+        display: '"Dom Casual"',
+        code: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace'
+    },
+    weight: {
+        regular: '400',
+        medium: '500',
+        semiBold: '600',
+        bold: '700',
+        extraBold: '800'
+    },
+    size: {
+        // xs all from 0-10
+        xs: 10,
+        // s all from 11-20
+        s0: 11,
+        s1: 12,
+        s2: 13,
+        s3: 15,
+        s4: 18,
+        // m all from 21-40
+        m1: 24,
+        m2: 30,
+        // l all from 41 >
+        l1: 41,
+        code: 90
+    },
+    lineHeight: {
+        // xs all from 0-15
+        xs: 15,
+        // s all from 16-20
+        s1: 18,
+        s2: 19,
+        // m all from 21-40
+        m1: 22,
+        m2: 27,
+        m3: 36,
+        // l all from 41 >
+        l1: 45
+    }
 };
 
-var animations = {
-    tapScale: 0.9,
-    hoverScale: 1.1,
-    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',
-    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)',
-    saveButtonAnimationComplete: 600
+var animations = {
+    tapScale: 0.9,
+    hoverScale: 1.1,
+    buttonTransition: 'all 250ms cubic-bezier(0.165, 0.84, 0.44, 1)',
+    rippleTransition: '750ms cubic-bezier(0.19, 1, 0.22, 1)',
+    saveButtonAnimationComplete: 600
 };
 
-var createTheme = function (_a) {
-    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;
-    return ({
-        palette: palette,
-        typography: typography,
-        attributes: attributes,
-        breakpoints: breakpoints,
-        spacings: spacings,
-        constants: constants,
-        animations: animations
-    });
-};
-var theme = createTheme({
-    palette: palette,
-    typography: typography,
-    attributes: attributes,
-    breakpoints: breakpoints,
-    spacings: spacings,
-    constants: constants,
-    animations: animations
+var createTheme = function (_a) {
+    var palette = _a.palette, typography = _a.typography, attributes = _a.attributes, breakpoints = _a.breakpoints, spacings = _a.spacings, constants = _a.constants, animations = _a.animations;
+    return ({
+        palette: palette,
+        typography: typography,
+        attributes: attributes,
+        breakpoints: breakpoints,
+        spacings: spacings,
+        constants: constants,
+        animations: animations
+    });
+};
+var theme = createTheme({
+    palette: palette,
+    typography: typography,
+    attributes: attributes,
+    breakpoints: breakpoints,
+    spacings: spacings,
+    constants: constants,
+    animations: animations
 });
 
 build.animations = animations;