@citygross/components 0.8.71 → 0.8.73

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

@@ -10,16 +10,14 @@ export declare enum EListItemAlignment {
     TOP = "flex-start"
 }
 export declare type TListItem = {
-    item?: TItem;
-    loading?: boolean;
+    alignment?: EListItemAlignment;
     children?: React.ReactNode;
     fallBackImage?: string;
     imageAutoHeight?: boolean;
-    boldHeader?: boolean;
-    smallSkeleton?: boolean;
+    item?: TItem;
     isSmall?: boolean;
-    usedInSearch?: boolean;
-    alignment?: EListItemAlignment;
-    textColor?: string;
+    loading?: boolean;
+    showPriceStripe?: boolean;
+    smallSkeleton?: boolean;
 };
 export declare const ListItem: React.FunctionComponent<TListItem>;

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

@@ -1,6 +1,5 @@
 import { EListItemAlignment } from './ListItem';
 export declare type TListItem = {
-    usedInSearch?: boolean;
     alignment?: EListItemAlignment;
 };
 export declare const ItemInformationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TListItem, never>;

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

@@ -15,7 +15,7 @@ export declare type TPriceTag = {
     price: number;
     variant?: EPriceVariant;
     size?: EPriceSize;
-    unit: string;
+    unit?: string;
 };
 export declare type TPriceVariantAttributes = {
     backgroundColor?: string;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TItem } from '../ListItem/ListItem';
+import { TPriceTag } from '../PriceTag/PriceTag.types';
 export declare type TMarking = {
     image: React.ReactNode;
     tooltipText: string;
@@ -7,10 +8,11 @@ export declare type TMarking = {
 };
 export declare type TSearchListItem = {
     button?: React.ReactNode;
-    loading?: boolean;
-    price: React.ReactNode;
+    fallBackImage?: string;
     item: TItem;
+    loading?: boolean;
     markings?: TMarking[];
-    fallBackImage?: string;
+    priceTag: TPriceTag;
+    showMax: boolean;
 };
-export declare const SearchListItem: ({ item, button, loading, price, markings, fallBackImage }: TSearchListItem) => JSX.Element;
+export declare const SearchListItem: ({ button, fallBackImage, item, loading, markings, priceTag, showMax }: TSearchListItem) => JSX.Element;

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

@@ -2,11 +2,15 @@ export declare const SearchListItemWrapper: import("styled-components").StyledCo
 export declare const ListItemWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const PriceTagWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare type Ttooltip = {
+declare type TToolTip = {
     left: number;
     backgroundColor?: string;
 };
-export declare const ToolTip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Ttooltip, never>;
+export declare const ToolTip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TToolTip, never>;
 export declare const MarkingWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Marking: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+declare type TMaxWrapper = {
+    showMax: boolean;
+};
+export declare const MaxWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TMaxWrapper, never>;
 export {};

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

@@ -85,6 +85,9 @@ require('../SideModal/SideModal.styles.js');
 require('../IconText/IconText.styles.js');
 require('../Dropdown/Dropdown.styles.js');
 require('../SearchListItem/SearchListItem.styles.js');
+require('../PriceTag/PriceTag.types.js');
+require('../PriceStripe/PriceStripe.styles.js');
+require('../PriceTag/PriceTag.styles.js');
 require('../MenuListItem/MenuListItem.styles.js');
 require('../SlideInOutContainer/SlideInOutContainer.styles.js');
 require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
@@ -95,9 +98,6 @@ require('../CartSubTotal/CartSubTotal.js');
 require('../CouponCode/CouponCode.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('../CartCard/CartCard.styles.js');
-require('../PriceTag/PriceTag.types.js');
-require('../PriceStripe/PriceStripe.styles.js');
-require('../PriceTag/PriceTag.styles.js');
 require('../Pill/Pill.styles.js');
 require('../SelectButton/SelectButton.styles.js');
 require('../ProductHeader/ProductHeader.js');

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

@@ -6,6 +6,8 @@ var React = require('react');
 var Skeleton = require('react-loading-skeleton');
 var ListItem_styles = require('./ListItem.styles.js');
 var ProductHeader = require('../ProductHeader/ProductHeader.js');
+var PriceTag_types = require('../PriceTag/PriceTag.types.js');
+var PriceStripe = require('../PriceStripe/PriceStripe.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,9 +20,9 @@ exports.EListItemAlignment = void 0;
     EListItemAlignment["TOP"] = "flex-start";
 })(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
 var ListItem = function (_a) {
-    var item = _a.item, loading = _a.loading, isSmall = _a.isSmall, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, smallSkeleton = _a.smallSkeleton, children = _a.children, _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, usedInSearch = _a.usedInSearch;
+    var _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, children = _a.children, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
     return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
-        React__default["default"].createElement(ListItem_styles.ListLeft, { usedInSearch: usedInSearch, alignment: alignment },
+        React__default["default"].createElement(ListItem_styles.ListLeft, { alignment: alignment },
             React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
                 React__default["default"].createElement(ListItem_styles.ListImage, { autoHeight: imageAutoHeight, src: item === null || item === void 0 ? void 0 : item.image, alt: item === null || item === void 0 ? void 0 : item.name, isSmall: isSmall, onError: function (e) {
                         if (fallBackImage) {
@@ -32,10 +34,12 @@ var ListItem = function (_a) {
                             }
                         }
                     } })),
-            React__default["default"].createElement(ListItem_styles.ItemInformationContainer, { usedInSearch: usedInSearch, alignment: alignment },
+            React__default["default"].createElement(ListItem_styles.ItemInformationContainer, { alignment: alignment },
                 loading ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement(Skeleton__default["default"], { height: 15, width: smallSkeleton ? 150 : 250 }),
-                    React__default["default"].createElement(Skeleton__default["default"], { height: 12, width: smallSkeleton ? 100 : 200 }))) : (React__default["default"].createElement(ProductHeader.ProductHeader, { location: ProductHeader.EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name, subTitle: item === null || item === void 0 ? void 0 : item.description })),
+                    React__default["default"].createElement(Skeleton__default["default"], { height: 12, width: smallSkeleton ? 100 : 200 }))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    showPriceStripe && (React__default["default"].createElement(PriceStripe.PriceStripe, { size: PriceTag_types.EPriceSize.SMALL, variant: PriceTag_types.EPriceVariant.PRIO })),
+                    React__default["default"].createElement(ProductHeader.ProductHeader, { location: ProductHeader.EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name, subTitle: item === null || item === void 0 ? void 0 : item.description }))),
                 (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
         children && (React__default["default"].createElement(ListItem_styles.ListRight, { alignment: alignment }, children))));
 };

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

@@ -12,15 +12,13 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var ItemInformationContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: ", "px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: ", "px;\n"])), function (props) {
     var _a;
-    return props.usedInSearch || props.alignment === ListItem.EListItemAlignment.TOP
+    return props.alignment === ListItem.EListItemAlignment.TOP
         ? 0
         : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs;
 });
 var ListItemContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  p {\n    padding: 1px 0px;\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  p {\n    padding: 1px 0px;\n  }\n"])));
 var ListLeft = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: ", ";\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  align-items: ", ";\n  gap: ", "px;\n  @media (min-width: ", "px) {\n    gap: ", "px;\n  }\n"])), function (props) {
-    return props.usedInSearch || props.alignment === ListItem.EListItemAlignment.TOP
-        ? 'inherit'
-        : 'center';
+    return props.alignment === ListItem.EListItemAlignment.TOP ? 'inherit' : 'center';
 }, 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.listItemFlexGap; });
 var ListRight = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: ", ";\n  justify-content: space-between;\n  text-align: right;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: ", ";\n  justify-content: space-between;\n  text-align: right;\n"])), function (props) {
     return props.alignment === ListItem.EListItemAlignment.TOP ? 'flex-start' : 'center';

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

@@ -21,7 +21,7 @@ var PriceTag = function (_a) {
     var priceBase = Math.floor(price$1);
     var priceDecimals = (price$1 % 1).toFixed(2).split('.')[1];
     var showPriceIndicator = priceDecimals === '00';
-    var showUnit = pant || !(isMultiPrice && unit === 'st');
+    var showUnit = pant || (unit !== undefined && !(isMultiPrice && unit === 'st'));
     return (React__default["default"].createElement(PriceTag_styles.PriceTagWrapper, { fontColor: variantAttributes.fontColor },
         variant !== PriceTag_types.EPriceVariant.REGULAR && (React__default["default"].createElement(PriceTag_styles.PriceStripeContainer, null,
             React__default["default"].createElement(PriceStripe.PriceStripe, { multiPrice: multiPrice, size: size, variant: variant }))),
@@ -33,7 +33,7 @@ var PriceTag = function (_a) {
                         : sizeAttributes.detailsNoPantWidth },
                     showPriceIndicator ? (React__default["default"].createElement(PriceTag_styles.PriceIndicatorContainer, { isSmall: size === PriceTag_types.EPriceSize.SMALL, showUnit: showUnit },
                         React__default["default"].createElement(icons.Icons.PriceIndicator, { fill: variantAttributes.fontColor, size: sizeAttributes.indicatorSize }))) : (React__default["default"].createElement(PriceTag_styles.PriceDecimals, { fontSize: sizeAttributes.decimalsFontSize, isSmall: size === PriceTag_types.EPriceSize.SMALL }, priceDecimals)),
-                    React__default["default"].createElement(PriceTag_styles.PriceUnit, { fontSize: sizeAttributes.unitFontSize, isSmall: size === PriceTag_types.EPriceSize.SMALL, pant: pant }, pant ? pantStr : isMultiPrice ? '' : "/".concat(unit)))))));
+                    React__default["default"].createElement(PriceTag_styles.PriceUnit, { fontSize: sizeAttributes.unitFontSize, isSmall: size === PriceTag_types.EPriceSize.SMALL, pant: pant }, pant ? pantStr : isMultiPrice ? '' : unit ? "/".concat(unit) : ''))))));
 };
 
 exports.PriceTag = PriceTag;

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

@@ -2,24 +2,32 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../_virtual/_tslib.js');
 var React = require('react');
 var ListItem = require('../ListItem/ListItem.js');
 var SearchListItem_styles = require('./SearchListItem.styles.js');
+var PriceTag = require('../PriceTag/PriceTag.js');
+var PriceTag_types = require('../PriceTag/PriceTag.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var SearchListItem = function (_a) {
-    var item = _a.item, button = _a.button, loading = _a.loading, price = _a.price, markings = _a.markings, fallBackImage = _a.fallBackImage;
+    var _b;
+    var button = _a.button, fallBackImage = _a.fallBackImage, item = _a.item, _c = _a.loading, loading = _c === void 0 ? false : _c, markings = _a.markings, priceTag = _a.priceTag, _d = _a.showMax, showMax = _d === void 0 ? false : _d;
+    var showPriceStripe = ((_b = priceTag.multiPrice) !== null && _b !== void 0 ? _b : 0) > 1 && priceTag.variant === PriceTag_types.EPriceVariant.PRIO;
     return (React__default["default"].createElement(SearchListItem_styles.SearchListItemWrapper, null,
         markings && (React__default["default"].createElement(SearchListItem_styles.MarkingWrapper, null, markings === null || markings === void 0 ? void 0 : markings.map(function (marking, index) { return (React__default["default"].createElement(SearchListItem_styles.Marking, { key: index },
             React__default["default"].createElement(SearchListItem_styles.ToolTip, { backgroundColor: marking === null || marking === void 0 ? void 0 : marking.backgroundColor, left: (index + 1) * 25 }, marking.tooltipText),
             marking.image)); }))),
         React__default["default"].createElement(SearchListItem_styles.ListItemWrapper, null,
-            React__default["default"].createElement(ListItem.ListItem, { usedInSearch: true, loading: loading, item: item, fallBackImage: fallBackImage })),
-        React__default["default"].createElement(SearchListItem_styles.PriceTagWrapper, null, price),
-        React__default["default"].createElement(SearchListItem_styles.ButtonWrapper, null, button)));
+            React__default["default"].createElement(ListItem.ListItem, { fallBackImage: fallBackImage, item: item, loading: loading, showPriceStripe: showPriceStripe })),
+        React__default["default"].createElement(SearchListItem_styles.PriceTagWrapper, null,
+            React__default["default"].createElement(PriceTag.PriceTag, _tslib.__assign({}, priceTag, { size: PriceTag_types.EPriceSize.SMALL }))),
+        React__default["default"].createElement(SearchListItem_styles.ButtonWrapper, null,
+            React__default["default"].createElement(SearchListItem_styles.MaxWrapper, { showMax: showMax }, "Max antal uppn\u00E5tt"),
+            button)));
 };
 
 exports.SearchListItem = SearchListItem;

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

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

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

@@ -9,24 +9,131 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var SearchListItemWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 2fr 1fr;\n  grid-template-rows: 1fr auto;\n  grid-template-areas:\n    'ListItemWrapper PriceTagWrapper PriceTagWrapper'\n    'ListItemWrapper ButtonWrapper ButtonWrapper';\n\n  align-items: center;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    grid-template-columns: 2fr 1fr;\n    grid-template-rows: 1fr;\n    grid-auto-flow: row;\n    grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 2fr 1fr;\n  grid-template-rows: 1fr auto;\n  grid-template-areas:\n    'ListItemWrapper PriceTagWrapper PriceTagWrapper'\n    'ListItemWrapper ButtonWrapper ButtonWrapper';\n\n  align-items: center;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    grid-template-columns: 2fr 1fr;\n    grid-template-rows: 1fr;\n    grid-auto-flow: row;\n    grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\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.palette) === null || _a === void 0 ? void 0 : _a.light; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint; });
+var SearchListItemWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 2fr 1fr;\n  grid-template-rows: 1fr auto;\n  grid-template-areas:\n    'ListItemWrapper PriceTagWrapper'\n    'ButtonWrapper ButtonWrapper';\n\n  gap: ", "px;\n  align-items: center;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    grid-template-columns: 2fr 1fr auto;\n    grid-template-rows: 1fr;\n    grid-auto-flow: row;\n    grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n    gap: ", "px;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 2fr 1fr;\n  grid-template-rows: 1fr auto;\n  grid-template-areas:\n    'ListItemWrapper PriceTagWrapper'\n    'ButtonWrapper ButtonWrapper';\n\n  gap: ", "px;\n  align-items: center;\n  background-color: ", ";\n  border-bottom: 1px solid ", ";\n  padding: ", "px;\n\n  @media (min-width: ", "px) {\n    grid-template-columns: 2fr 1fr auto;\n    grid-template-rows: 1fr;\n    grid-auto-flow: row;\n    grid-template-areas: 'ListItemWrapper PriceTagWrapper ButtonWrapper';\n    gap: ", "px;\n  }\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.light;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm2;
+});
 var ListItemWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  grid-area: ListItemWrapper;\n"], ["\n  grid-area: ListItemWrapper;\n"])));
-var PriceTagWrapper = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  grid-area: PriceTagWrapper;\n  display: flex;\n  justify-content: flex-end;\n\n  @media (min-width: ", "px) {\n    justify-content: flex-start;\n  }\n"], ["\n  grid-area: PriceTagWrapper;\n  display: flex;\n  justify-content: flex-end;\n\n  @media (min-width: ", "px) {\n    justify-content: flex-start;\n  }\n"])), function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint; });
-var ButtonWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  grid-area: ButtonWrapper;\n  min-width: ", "px;\n  margin-top: ", "px;\n  justify-self: end;\n  @media (min-width: ", "px) {\n    margin-top: 0;\n  }\n"], ["\n  grid-area: ButtonWrapper;\n  min-width: ", "px;\n  margin-top: ", "px;\n  justify-self: end;\n  @media (min-width: ", "px) {\n    margin-top: 0;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.buttonWrapperMinWidth; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint; });
-var ToolTip = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  visibility: hidden;\n  position: absolute;\n  min-width: ", "px;\n  background-color: ", ";\n  color: #fff;\n  text-align: center;\n  padding: ", "px;\n  border-radius: ", "px;\n  z-index: 1;\n  opacity: 0;\n  transition: opacity 0.3s;\n  font-size: ", "px;\n\n  top: ", "%;\n  transform: translateY(-50%);\n  left: ", "px;\n\n  ::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    right: 100%;\n    margin-top: ", "px;\n    border-width: ", "px;\n    border-style: solid;\n    border-color: transparent\n      ", " transparent\n      transparent;\n  }\n"], ["\n  visibility: hidden;\n  position: absolute;\n  min-width: ", "px;\n  background-color: ", ";\n  color: #fff;\n  text-align: center;\n  padding: ", "px;\n  border-radius: ", "px;\n  z-index: 1;\n  opacity: 0;\n  transition: opacity 0.3s;\n  font-size: ", "px;\n\n  top: ", "%;\n  transform: translateY(-50%);\n  left: ", "px;\n\n  ::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    right: 100%;\n    margin-top: ", "px;\n    border-width: ", "px;\n    border-style: solid;\n    border-color: transparent\n      ", " transparent\n      transparent;\n  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.tooltipMinWidth; }, function (props) {
-    var _a;
-    return props.backgroundColor
-        ? props.backgroundColor
-        : (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipBackground;
-}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.iconToolTipTop; }, function (props) { return props.left; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipArrowMarginTop; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipArrowBorderWidth; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.toolTipBackground; });
-var MarkingWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: ", "px;\n  justify-self: flex-start;\n  align-self: start;\n  position: relative;\n  grid-column: 1;\n  grid-row: 1;\n  z-index: 5;\n  grid-gap: ", "px;\n  grid-auto-flow: column;\n"], ["\n  display: grid;\n  grid-template-columns: ", "px;\n  justify-self: flex-start;\n  align-self: start;\n  position: relative;\n  grid-column: 1;\n  grid-row: 1;\n  z-index: 5;\n  grid-gap: ", "px;\n  grid-auto-flow: column;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.searchListItemGridTemplateColumns; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.MarkingWrapperGridGap; });
+var PriceTagWrapper = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  grid-area: PriceTagWrapper;\n  display: flex;\n  justify-content: flex-end;\n\n  @media (min-width: ", "px) {\n    justify-content: flex-end;\n  }\n"], ["\n  grid-area: PriceTagWrapper;\n  display: flex;\n  justify-content: flex-end;\n\n  @media (min-width: ", "px) {\n    justify-content: flex-end;\n  }\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
+});
+var ButtonWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  grid-area: ButtonWrapper;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  justify-self: end;\n  min-width: ", "px;\n\n  @media (min-width: ", "px) {\n    flex-direction: column;\n    gap: ", "px;\n    margin-top: -", "px;\n  }\n"], ["\n  grid-area: ButtonWrapper;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  justify-self: end;\n  min-width: ", "px;\n\n  @media (min-width: ", "px) {\n    flex-direction: column;\n    gap: ", "px;\n    margin-top: -", "px;\n  }\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.buttonWrapperMinWidth;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.headerBreakpoint;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm2;
+});
+var ToolTip = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  visibility: hidden;\n  position: absolute;\n  min-width: ", "px;\n  background-color: ", ";\n  color: ", ";\n  text-align: center;\n  padding: ", "px;\n  border-radius: ", "px;\n  z-index: 1;\n  opacity: 0;\n  transition: opacity 0.3s;\n  font-size: ", "px;\n\n  top: ", "%;\n  transform: translateY(-50%);\n  left: ", "px;\n\n  ::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    right: 100%;\n    margin-top: ", "px;\n    border-width: ", "px;\n    border-style: solid;\n    border-color: transparent\n      ", " transparent\n      transparent;\n  }\n"], ["\n  visibility: hidden;\n  position: absolute;\n  min-width: ", "px;\n  background-color: ", ";\n  color: ", ";\n  text-align: center;\n  padding: ", "px;\n  border-radius: ", "px;\n  z-index: 1;\n  opacity: 0;\n  transition: opacity 0.3s;\n  font-size: ", "px;\n\n  top: ", "%;\n  transform: translateY(-50%);\n  left: ", "px;\n\n  ::after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    right: 100%;\n    margin-top: ", "px;\n    border-width: ", "px;\n    border-style: solid;\n    border-color: transparent\n      ", " transparent\n      transparent;\n  }\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.tooltipMinWidth;
+}, function (_a) {
+    var _b;
+    var backgroundColor = _a.backgroundColor, theme = _a.theme;
+    return backgroundColor || ((_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipBackground);
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xs;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s1;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.iconToolTipTop;
+}, function (_a) {
+    var left = _a.left;
+    return left;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipArrowMarginTop;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipArrowBorderWidth;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.toolTipBackground;
+});
+var MarkingWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: ", "px;\n  justify-self: flex-start;\n  align-self: start;\n  position: relative;\n  grid-column: 1;\n  grid-row: 1;\n  z-index: 5;\n  grid-gap: ", "px;\n  grid-auto-flow: column;\n"], ["\n  display: grid;\n  grid-template-columns: ", "px;\n  justify-self: flex-start;\n  align-self: start;\n  position: relative;\n  grid-column: 1;\n  grid-row: 1;\n  z-index: 5;\n  grid-gap: ", "px;\n  grid-auto-flow: column;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.searchListItemGridTemplateColumns;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.constants) === null || _b === void 0 ? void 0 : _b.MarkingWrapperGridGap;
+});
 var Marking = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  &:hover ", " {\n    visibility: visible;\n    opacity: 0.9;\n  }\n"], ["\n  &:hover ", " {\n    visibility: visible;\n    opacity: 0.9;\n  }\n"])), ToolTip);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var MaxWrapper = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n  opacity: ", ";\n  white-space: nowrap;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n  opacity: ", ";\n  white-space: nowrap;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.xs;
+}, function (_a) {
+    var showMax = _a.showMax;
+    return (showMax ? 1 : 0);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
 
 exports.ButtonWrapper = ButtonWrapper;
 exports.ListItemWrapper = ListItemWrapper;
 exports.Marking = Marking;
 exports.MarkingWrapper = MarkingWrapper;
+exports.MaxWrapper = MaxWrapper;
 exports.PriceTagWrapper = PriceTagWrapper;
 exports.SearchListItemWrapper = SearchListItemWrapper;
 exports.ToolTip = ToolTip;

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

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

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

@@ -85,6 +85,9 @@ require('../SideModal/SideModal.styles.js');
 require('../IconText/IconText.styles.js');
 require('../Dropdown/Dropdown.styles.js');
 require('../SearchListItem/SearchListItem.styles.js');
+require('../PriceTag/PriceTag.types.js');
+require('../PriceStripe/PriceStripe.styles.js');
+require('../PriceTag/PriceTag.styles.js');
 require('../MenuListItem/MenuListItem.styles.js');
 require('../SlideInOutContainer/SlideInOutContainer.styles.js');
 require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
@@ -95,9 +98,6 @@ require('../CartSubTotal/CartSubTotal.js');
 require('../CouponCode/CouponCode.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('../CartCard/CartCard.styles.js');
-require('../PriceTag/PriceTag.types.js');
-require('../PriceStripe/PriceStripe.styles.js');
-require('../PriceTag/PriceTag.styles.js');
 require('../Pill/Pill.styles.js');
 require('../SelectButton/SelectButton.styles.js');
 require('../ProductHeader/ProductHeader.js');

package/build/cjs/utils/build/index.js

@@ -394,6 +394,9 @@ var useFixedModalScroll = function (active, querySelector) {
 };
 
 function comparisonTypes(type) {
+    if (!type) {
+        return '';
+    }
     switch (type) {
         case 'KGM':
             return 'kg';