@citygross/components 0.12.0 → 0.12.3

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

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

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

@@ -42,10 +42,8 @@ var ListImage = styled__default["default"].img(templateObject_6 || (templateObje
             ? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.listImageMaxHeightSmall
             : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.listImageMaxHeight, "px");
 });
-var CheckboxContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n  margin-top: ", "px;\n\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n  margin-top: ", "px;\n\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    gap: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === 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; }, 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 templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 
-exports.CheckboxContainer = CheckboxContainer;
 exports.ItemInformationContainer = ItemInformationContainer;
 exports.ListImage = ListImage;
 exports.ListImageContainer = ListImageContainer;

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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>";
 
 module.exports = FallbackIcon;
 //# sourceMappingURL=fallback_grocery.svg.js.map

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

@@ -3,53 +3,55 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var icons = require('@citygross/icons');
-var typography = require('@citygross/typography');
-var designTokens = require('@citygross/design-tokens');
+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 Pagination(_a) {
-    var _b, _c, _d, _e;
-    var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, _f = _a.itemsPerPage, itemsPerPage = _f === void 0 ? 10 : _f, setPage = _a.setPage, _g = _a.pageLabel, pageLabel = _g === void 0 ? 'Sida' : _g, onPageChange = _a.onPageChange;
-    var totalPages = Math.ceil((totalItems || 0) / itemsPerPage);
-    var hasNextPage = currentPage < totalPages;
-    var hasPrevPage = currentPage > 1;
-    var handlePrev = function () {
-        if (hasPrevPage) {
-            var newPage = currentPage - 1;
-            setPage && setPage(newPage);
-            fetchItems(newPage);
-            onPageChange && onPageChange(newPage);
+function createPagination(totalItems, itemsPerPage, numOfPaginationsToShow) {
+    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 < (numOfPaginationsToShow !== null && numOfPaginationsToShow !== void 0 ? numOfPaginationsToShow : 4) - 1) {
+            counter++;
+            block.push(index);
+            if (index === amountOfPages - 1) {
+                pagination.push(block);
+            }
         }
-    };
-    var handleNext = function () {
-        if (hasNextPage) {
-            var newPage = currentPage + 1;
-            setPage && setPage(newPage);
-            fetchItems(newPage);
-            onPageChange && onPageChange(newPage);
+        else {
+            counter = 0;
+            block.push(index);
+            pagination.push(block);
+            block = [];
         }
-    };
-    if (totalPages === 0) {
         return null;
-    }
-    return (React__default["default"].createElement("nav", { "aria-labelledby": "pagination_heading" },
-        React__default["default"].createElement(Pagination_styles.PaginationContainer, null,
-            React__default["default"].createElement(Pagination_styles.ArrowButton, { onClick: handlePrev, disabled: !hasPrevPage, "aria-disabled": !hasPrevPage, "aria-label": "F\u00F6reg\u00E5ende sida" },
-                React__default["default"].createElement(icons.Icons.ChevronLeft, { width: 20, height: 20, color: !hasPrevPage ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder : (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkest })),
-            React__default["default"].createElement(Pagination_styles.PageInfo, null,
-                React__default["default"].createElement(typography.BodyText, { id: "pagination_heading", "aria-live": "polite" },
-                    pageLabel,
-                    " ",
-                    currentPage,
-                    " av ",
-                    totalPages)),
-            React__default["default"].createElement(Pagination_styles.ArrowButton, { onClick: handleNext, disabled: !hasNextPage, "aria-disabled": !hasNextPage, "aria-label": "N\u00E4sta sida" },
-                React__default["default"].createElement(icons.Icons.ChevronRight, { width: 20, height: 20, color: !hasNextPage ? (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.placeholder : (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.darkest })))));
+    });
+    return pagination;
+}
+function Pagination(_a) {
+    var _b;
+    var totalItems = _a.totalItems, currentPage = _a.currentPage, fetchItems = _a.fetchItems, itemsPerPage = _a.itemsPerPage, setPage = _a.setPage, _c = _a.numOfPaginationsToShow, numOfPaginationsToShow = _c === void 0 ? 4 : _c, rightIcon = _a.rightIcon, leftIcon = _a.leftIcon;
+    var _d = React.useState(Math.floor((currentPage - 1) / numOfPaginationsToShow)), currentIndex = _d[0], setIndex = _d[1];
+    var pagination = createPagination(totalItems, itemsPerPage, numOfPaginationsToShow);
+    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.LeftPaginationButtonWrapper, null,
+            React__default["default"].createElement(PaginationButton.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__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 }, rightIcon || '...')))))));
 }
 
 exports.Pagination = Pagination;

package/build/cjs/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/cjs/components/src/components/Pagination/Pagination.styles.js

@@ -9,12 +9,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var PaginationContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
-var ArrowButton = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: none;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  padding: 0;\n  width: 36px;\n  height: 36px;\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.2s ease;\n\n  &:hover:not(:disabled):not([aria-disabled='true']) {\n    border-color: ", ";\n  }\n\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n    border-radius: ", ";\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n"], ["\n  background: none;\n  border: 1px solid transparent;\n  border-radius: ", ";\n  padding: 0;\n  width: 36px;\n  height: 36px;\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.2s ease;\n\n  &:hover:not(:disabled):not([aria-disabled='true']) {\n    border-color: ", ";\n  }\n\n  &:focus {\n    outline: 2px solid ", ";\n    outline-offset: 2px;\n    border-radius: ", ";\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.circle; }, function (props) { return (props.disabled ? 'not-allowed' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.placeholder; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.black; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.circle; });
-var PageInfo = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+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 LeftPaginationButtonWrapper = styled__default["default"](PaginationButtonWrapper)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  padding: 0 ", "px;\n  width: ", "px;\n"], ["\n  padding: 0 ", "px;\n  width: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.paginationButtonWidth; });
+var Flex = styled__default["default"].div(templateObject_3 || (templateObject_3 = _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, templateObject_3;
 
-exports.ArrowButton = ArrowButton;
-exports.PageInfo = PageInfo;
-exports.PaginationContainer = PaginationContainer;
+exports.Flex = Flex;
+exports.LeftPaginationButtonWrapper = LeftPaginationButtonWrapper;
+exports.PaginationButtonWrapper = PaginationButtonWrapper;
 //# sourceMappingURL=Pagination.styles.js.map

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

@@ -18,20 +18,21 @@ exports.EProductHeader = void 0;
 })(exports.EProductHeader || (exports.EProductHeader = {}));
 var ProductHeader = function (_a) {
     var _b, _c, _d, _e, _f, _g;
-    var description = _a.description, location = _a.location, title = _a.title;
+    var location = _a.location, subTitle = _a.subTitle, title = _a.title;
+    var subTitleUpperCase = subTitle === null || subTitle === void 0 ? void 0 : subTitle.toUpperCase();
     switch (location) {
         case exports.EProductHeader.DETAIL_PAGE:
             return (React__default["default"].createElement("div", null,
                 React__default["default"].createElement(typography.H1, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest }, title),
-                React__default["default"].createElement(typography.BodyText, { color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkest }, description)));
+                React__default["default"].createElement(typography.BodyText, { color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkest }, subTitleUpperCase)));
         case exports.EProductHeader.CARD:
             return (React__default["default"].createElement("div", null,
                 React__default["default"].createElement(typography.H3, { color: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.darkest }, title),
-                React__default["default"].createElement(typography.BodyText, { color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.darkest, size: typography.TextTypes.TextSize.EXTRASMALL }, description)));
+                React__default["default"].createElement(typography.BodyText, { color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.darkest, size: typography.TextTypes.TextSize.EXTRASMALL }, subTitleUpperCase)));
         case exports.EProductHeader.LIST_ITEM:
             return (React__default["default"].createElement("div", null,
                 React__default["default"].createElement(typography.BodyText, { color: (_f = designTokens.theme.palette) === null || _f === void 0 ? void 0 : _f.darkest, fontWeight: "medium", size: typography.TextTypes.TextSize.REGULAR }, title),
-                React__default["default"].createElement(typography.BodyText, { color: (_g = designTokens.theme.palette) === null || _g === void 0 ? void 0 : _g.darkest, size: typography.TextTypes.TextSize.EXTRASMALL }, description)));
+                React__default["default"].createElement(typography.BodyText, { color: (_g = designTokens.theme.palette) === null || _g === void 0 ? void 0 : _g.darkest, size: typography.TextTypes.TextSize.EXTRASMALL }, subTitleUpperCase)));
         default:
             return null;
     }

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

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

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

@@ -25,7 +25,7 @@ require('@citygross/utils');
 require('react-loading-skeleton');
 require('../CartItemSummary/CartItemSummary.styles.js');
 require('../CartSubTotal/CartSubTotal.js');
-require('../ToolTipDialog/ToolTipDialog.styles.js');
+require('../Divider/Divider.styles.js');
 require('../CartSummary/CartSummary.styles.js');
 require('../../../../design-tokens/build/index.js');
 require('../CgButton/ButtonAsLink/ButtonAsLink.styles.js');
@@ -38,7 +38,6 @@ require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
 require('../DateBox/DateBox.styles.js');
 require('../DeliverySlotItem/DeliverySlotItem.styles.js');
 require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
-require('../Divider/Divider.styles.js');
 require('../DotIndicator/DotIndicator.styles.js');
 require('../Flex/Flex.styles.js');
 require('../Form/Form.styles.js');
@@ -102,6 +101,7 @@ require('../StepperMobile/StepperMobile.styles.js');
 require('../Table/Table.styles.js');
 require('../Tag/Tag.styles.js');
 require('../Timeline/Timeline.styles.js');
+require('../ToolTipDialog/ToolTipDialog.styles.js');
 require('../UnorderedList/UnorderedList.styles.js');
 var WarningLabel_styles = require('./WarningLabel.styles.js');
 require('../ZipCodeInput/ZipCodeInput.styles.js');