@citygross/components 0.8.56 → 0.8.58

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

@@ -22,4 +22,4 @@ export declare type TListItem = {
     alignment?: EListItemAlignment;
     textColor?: string;
 };
-export declare function ListItem({ item, loading, isSmall, fallBackImage, imageAutoHeight, boldHeader, smallSkeleton, children, alignment, textColor, usedInSearch }: TListItem): JSX.Element;
+export declare const ListItem: ({ item, loading, isSmall, fallBackImage, imageAutoHeight, boldHeader, smallSkeleton, children, alignment, textColor, usedInSearch }: TListItem) => JSX.Element;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types';
+export declare type TPriceBannerSizeAttributes = {
+    fontSize?: number;
+};
+export declare type TPriceBanner = {
+    multiPrice?: number;
+    size?: EPriceSize;
+    variant?: EPriceVariant;
+};
+export declare const PriceBanner: React.FunctionComponent<TPriceBanner>;

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

@@ -0,0 +1,3 @@
+import { TPriceBannerSizeAttributes } from './PriceBanner';
+import { TPriceVariantAttributes } from '../PriceTag/PriceTag.types';
+export declare const PriceBanner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TPriceBannerSizeAttributes & Pick<TPriceVariantAttributes, "backgroundColor" | "fontColor">, never>;

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

@@ -1,21 +1,3 @@
 import React from 'react';
-export declare enum EPriceVariant {
-    KLIPP = "klipp",
-    PRIO = "prio",
-    REGULAR_OFFER = "regular-offer"
-}
-export declare type TPriceTag = {
-    multiPrice?: number;
-    pant?: boolean;
-    price: number;
-    priceVariant?: EPriceVariant;
-    unit: string;
-    isInSmallContainer?: boolean;
-};
-export declare type TSplash = {
-    backgroundColor?: string;
-    badgeStr?: string;
-    fontColor?: string;
-    isInSmallContainer?: boolean;
-};
+import { TPriceTag } from './PriceTag.types';
 export declare const PriceTag: React.FunctionComponent<TPriceTag>;

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

@@ -1,18 +1,24 @@
-import { TPriceTag, TSplash } from './PriceTag';
+import { TPriceTag, TPriceVariantAttributes } from './PriceTag.types';
+declare type TBackgroundColor = Pick<TPriceVariantAttributes, 'backgroundColor'>;
+declare type TFontColor = Pick<TPriceVariantAttributes, 'fontColor'>;
+declare type TFontSize = {
+    fontSize?: number;
+};
+declare type TIsSmall = {
+    isSmall?: boolean;
+};
 declare type TPant = Pick<TPriceTag, 'pant'>;
-export declare const PriceTagComponent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TSplash, never>;
-export declare const PriceTagWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TSplash, never>;
-export declare const PriceSplashContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const PriceTagContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const PriceTagContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const MultiPriceContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TPant, never>;
+export declare const PriceTagWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TFontColor, never>;
+export declare const PriceBannerContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const PriceTagContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBackgroundColor, never>;
 export declare const PriceTag: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const PriceBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const PriceDetails: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const PriceDecimals: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const PriceUnit: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const PriceIndicatorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const PriceIndicator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TPant, never>;
-export declare const Pant: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const PriceVariantBadge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TSplash, never>;
+export declare const PriceBase: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TFontSize, never>;
+export declare const PriceDetails: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    width?: number | undefined;
+} & TPant, never>;
+export declare const PriceIndicatorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    showUnit: boolean;
+} & TIsSmall, never>;
+export declare const PriceDecimals: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TFontSize & TIsSmall, never>;
+export declare const PriceUnit: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TFontSize & TIsSmall & TPant, never>;
 export {};

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

@@ -0,0 +1,31 @@
+export declare enum EPriceSize {
+    LARGE = "large",
+    MEDIUM = "medium",
+    SMALL = "small"
+}
+export declare enum EPriceVariant {
+    CAMPAIGN = "Kampanj",
+    KLIPP = "Klipp!",
+    PRIO = "Prio-pris",
+    REGULAR = "Ordinarie"
+}
+export declare type TPriceTag = {
+    multiPrice?: number;
+    pant?: boolean;
+    price: number;
+    variant?: EPriceVariant;
+    size?: EPriceSize;
+    unit: string;
+};
+export declare type TPriceVariantAttributes = {
+    backgroundColor?: string;
+    fontColor?: string;
+};
+export declare type TPriceTagSizeAttributes = {
+    baseFontSize?: number;
+    decimalsFontSize?: number;
+    detailsPantWidth?: number;
+    indicatorSize?: number;
+    padding?: number;
+    unitFontSize?: number;
+};

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

@@ -11,5 +11,6 @@ export declare type TSearchListItem = {
     price: React.ReactNode;
     item: TItem;
     markings?: TMarking[];
+    fallBackImage?: string;
 };
-export declare const SearchListItem: ({ item, button, loading, price, markings }: TSearchListItem) => JSX.Element;
+export declare const SearchListItem: ({ item, button, loading, price, markings, fallBackImage }: TSearchListItem) => JSX.Element;

package/build/@types/helpers/price.d.ts

@@ -0,0 +1,10 @@
+import { EPriceSize, EPriceVariant, TPriceTagSizeAttributes, TPriceVariantAttributes } from '../components/PriceTag/PriceTag.types';
+import { TPriceBannerSizeAttributes } from '../components/PriceBanner/PriceBanner';
+export declare const getPriceBannerAttributes: (priceSize?: EPriceSize, priceVariant?: EPriceVariant) => {
+    sizeAttributes: TPriceBannerSizeAttributes;
+    variantAttributes: TPriceVariantAttributes;
+};
+export declare const getPriceTagAttributes: (priceSize?: EPriceSize, priceVariant?: EPriceVariant) => {
+    sizeAttributes: TPriceTagSizeAttributes;
+    variantAttributes: TPriceVariantAttributes;
+};

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

@@ -81,5 +81,6 @@ export * from './components/CgButton/CgButton';
 export * from './components/CartCardLabel/CartCardLabel';
 export * from './components/CartCard/CartCard';
 export * from './components/PriceTag/PriceTag';
+export * from './components/PriceBanner/PriceBanner';
 export * from './components/Pill/Pill';
 export * from './components/SelectButton/SelectButton';

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

@@ -95,7 +95,9 @@ require('../CartSubTotal/CartSubTotal.js');
 require('../CouponCode/CouponCode.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('../CartCard/CartCard.styles.js');
-require('../PriceTag/PriceTag.js');
+require('../PriceTag/PriceTag.types.js');
+require('../PriceBanner/PriceBanner.styles.js');
+require('../PriceTag/PriceTag.styles.js');
 require('../Pill/Pill.styles.js');
 require('../SelectButton/SelectButton.styles.js');
 

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

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

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var typography = require('@citygross/typography');
 var Skeleton = require('react-loading-skeleton');
-var fallback_grocery = require('./assets/fallback_grocery.svg.js');
 var ListItem_styles = require('./ListItem.styles.js');
 var index = require('../../../../design-tokens/build/index.js');
 
@@ -19,26 +18,29 @@ exports.EListItemAlignment = void 0;
     EListItemAlignment["CENTER"] = "center";
     EListItemAlignment["TOP"] = "flex-start";
 })(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
-function ListItem(_a) {
+var ListItem = function (_a) {
     var _b, _c;
     var item = _a.item, loading = _a.loading, isSmall = _a.isSmall, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, boldHeader = _a.boldHeader, smallSkeleton = _a.smallSkeleton, children = _a.children, _d = _a.alignment, alignment = _d === void 0 ? exports.EListItemAlignment.CENTER : _d, textColor = _a.textColor, usedInSearch = _a.usedInSearch;
     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.ListImageContainer, { isSmall: isSmall },
-                React__default["default"].createElement(ListItem_styles.ListImage, { autoHeight: imageAutoHeight, src: (item === null || item === void 0 ? void 0 : item.image) || fallBackImage || fallback_grocery, alt: item === null || item === void 0 ? void 0 : item.name, isSmall: isSmall, onError: function (e) {
-                        var target = e.target;
-                        target.onerror = null;
-                        target.src = fallBackImage || fallback_grocery;
+                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) {
+                            var target = e.target;
+                            if (!target.dataset.fallback) {
+                                target.dataset.fallback = 'true';
+                                target.onerror = null;
+                                target.src = fallBackImage;
+                            }
+                        }
                     } })),
             React__default["default"].createElement(ListItem_styles.ItemInformationContainer, { usedInSearch: usedInSearch, alignment: alignment },
-                React__default["default"].createElement(typography.BodyText, { fontWeight: boldHeader ? 'semiBold' : 'regular', color: textColor || ((_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest), size: isSmall
-                        ? typography.TextTypes.TextSize.EXTRASMALL
-                        : typography.TextTypes.TextSize.REGULAR }, (item === null || item === void 0 ? void 0 : item.name) || React__default["default"].createElement(Skeleton__default["default"], { width: smallSkeleton ? 150 : 250 })),
+                React__default["default"].createElement(typography.BodyText, { fontWeight: boldHeader ? 'semiBold' : 'regular', color: textColor || ((_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest), size: isSmall ? typography.TextTypes.TextSize.EXTRASMALL : typography.TextTypes.TextSize.REGULAR }, (item === null || item === void 0 ? void 0 : item.name) || React__default["default"].createElement(Skeleton__default["default"], { width: smallSkeleton ? 150 : 250 })),
                 loading ? (React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL },
                     React__default["default"].createElement(Skeleton__default["default"], { width: smallSkeleton ? 150 : 250 }))) : (item === null || item === void 0 ? void 0 : item.description) ? (React__default["default"].createElement(typography.BodyText, { size: isSmall ? typography.TextTypes.TextSize.TINY : typography.TextTypes.TextSize.SMALL, color: textColor || ((_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark) }, item === null || item === void 0 ? void 0 : item.description)) : null,
                 (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
         children && (React__default["default"].createElement(ListItem_styles.ListRight, { alignment: alignment }, children))));
-}
+};
 
 exports.ListItem = ListItem;
 //# sourceMappingURL=ListItem.js.map

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var price = require('../../helpers/price.js');
+var PriceBanner_styles = require('./PriceBanner.styles.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 PriceBanner = function (_a) {
+    var multiPrice = _a.multiPrice, _b = _a.size, size = _b === void 0 ? PriceTag_types.EPriceSize.MEDIUM : _b, variant = _a.variant;
+    var _c = price.getPriceBannerAttributes(size, variant), sizeAttributes = _c.sizeAttributes, variantAttributes = _c.variantAttributes;
+    var isMultiPrice = multiPrice && multiPrice > 1;
+    var bannerText = isMultiPrice
+        ? "".concat(variant === PriceTag_types.EPriceVariant.KLIPP ? variant + ' ' : '').concat(multiPrice, " f\u00F6r")
+        : variant;
+    return (React__default["default"].createElement(PriceBanner_styles.PriceBanner, { backgroundColor: variantAttributes.backgroundColor, fontColor: variantAttributes.fontColor, fontSize: sizeAttributes.fontSize }, bannerText));
+};
+
+exports.PriceBanner = PriceBanner;
+//# sourceMappingURL=PriceBanner.js.map

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

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

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

@@ -0,0 +1,37 @@
+'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 PriceBanner = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  padding: 0 ", "px;\n  width: fit-content;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  padding: 0 ", "px;\n  width: fit-content;\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var fontColor = _a.fontColor;
+    return fontColor;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.type.primary;
+}, function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight.bold;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
+});
+var templateObject_1;
+
+exports.PriceBanner = PriceBanner;
+//# sourceMappingURL=PriceBanner.styles.js.map

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

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

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

@@ -3,71 +3,35 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var PriceTag_styles = require('./PriceTag.styles.js');
 var icons = require('@citygross/icons');
-var designTokens = require('@citygross/design-tokens');
+var price = require('../../helpers/price.js');
+var PriceBanner = require('../PriceBanner/PriceBanner.js');
+var PriceTag_styles = require('./PriceTag.styles.js');
+var PriceTag_types = require('./PriceTag.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-exports.EPriceVariant = void 0;
-(function (EPriceVariant) {
-    EPriceVariant["KLIPP"] = "klipp";
-    EPriceVariant["PRIO"] = "prio";
-    EPriceVariant["REGULAR_OFFER"] = "regular-offer";
-})(exports.EPriceVariant || (exports.EPriceVariant = {}));
-var getSplash = function (priceVariant) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    switch (priceVariant) {
-        case exports.EPriceVariant.KLIPP:
-            return {
-                backgroundColor: (_a = designTokens.theme.palette) === null || _a === void 0 ? void 0 : _a.alertRed,
-                badgeStr: 'Klipp!',
-                fontColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white
-            };
-        case exports.EPriceVariant.PRIO:
-            return {
-                backgroundColor: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.brandPrio,
-                badgeStr: 'PRIO',
-                fontColor: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.white
-            };
-        case exports.EPriceVariant.REGULAR_OFFER:
-            return {
-                backgroundColor: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.brandYellow,
-                fontColor: (_f = designTokens.theme.palette) === null || _f === void 0 ? void 0 : _f.alertRed
-            };
-        default:
-            return {
-                fontColor: (_g = designTokens.theme.palette) === null || _g === void 0 ? void 0 : _g.darkest
-            };
-    }
-};
 var PriceTag = function (_a) {
-    var _b = _a.multiPrice, multiPrice = _b === void 0 ? 0 : _b, _c = _a.pant, pant = _c === void 0 ? false : _c, price = _a.price, priceVariant = _a.priceVariant, unit = _a.unit, _d = _a.isInSmallContainer, isInSmallContainer = _d === void 0 ? false : _d;
-    var splash = getSplash(priceVariant);
-    var priceBase = Math.floor(price);
-    var priceDecimals = (price % 1).toFixed(2).split('.')[1];
+    var _b = _a.multiPrice, multiPrice = _b === void 0 ? 0 : _b, _c = _a.pant, pant = _c === void 0 ? false : _c, price$1 = _a.price, _d = _a.variant, variant = _d === void 0 ? PriceTag_types.EPriceVariant.REGULAR : _d, _e = _a.size, size = _e === void 0 ? PriceTag_types.EPriceSize.MEDIUM : _e, unit = _a.unit;
+    var _f = price.getPriceTagAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
+    var priceBase = Math.floor(price$1);
+    var priceDecimals = (price$1 % 1).toFixed(2).split('.')[1];
     var isMultiPrice = multiPrice > 1;
-    var showPriceIndicator = priceDecimals === '00' && unit === 'st';
-    var multiPriceStr = multiPrice + ' för';
-    var priceIndicator = ':-';
+    var showPriceIndicator = priceDecimals === '00';
+    var showUnit = pant || unit !== 'st';
     var pantStr = '+pant';
-    return (React__default["default"].createElement(PriceTag_styles.PriceTagComponent, { badgeStr: splash.badgeStr },
-        React__default["default"].createElement(PriceTag_styles.PriceTagWrapper, { fontColor: splash.fontColor },
-            splash.backgroundColor && (React__default["default"].createElement(PriceTag_styles.PriceSplashContainer, null,
-                React__default["default"].createElement(icons.Icons.PriceSplash, { backgroundColor: splash.backgroundColor }))),
-            React__default["default"].createElement(PriceTag_styles.PriceTagContainer, null,
-                React__default["default"].createElement(PriceTag_styles.PriceTagContent, null,
-                    isMultiPrice && (React__default["default"].createElement(PriceTag_styles.MultiPriceContainer, { pant: pant }, multiPriceStr)),
-                    React__default["default"].createElement(PriceTag_styles.PriceTag, null,
-                        React__default["default"].createElement(PriceTag_styles.PriceBase, null, priceBase),
-                        showPriceIndicator ? (React__default["default"].createElement(PriceTag_styles.PriceIndicatorContainer, null,
-                            React__default["default"].createElement(PriceTag_styles.PriceIndicator, { pant: pant }, priceIndicator),
-                            pant && React__default["default"].createElement(PriceTag_styles.Pant, null, pantStr))) : (React__default["default"].createElement(PriceTag_styles.PriceDetails, null,
-                            React__default["default"].createElement(PriceTag_styles.PriceDecimals, null, priceDecimals),
-                            React__default["default"].createElement(PriceTag_styles.PriceUnit, null, pant ? pantStr : isMultiPrice ? '' : "/".concat(unit))))))),
-            splash.badgeStr && (React__default["default"].createElement(PriceTag_styles.PriceVariantBadge, { backgroundColor: splash.backgroundColor, isInSmallContainer: isInSmallContainer }, splash.badgeStr)))));
+    return (React__default["default"].createElement(PriceTag_styles.PriceTagWrapper, { fontColor: variantAttributes.fontColor },
+        variant !== PriceTag_types.EPriceVariant.REGULAR && (React__default["default"].createElement(PriceTag_styles.PriceBannerContainer, null,
+            React__default["default"].createElement(PriceBanner.PriceBanner, { multiPrice: multiPrice, size: size, variant: variant }))),
+        React__default["default"].createElement(PriceTag_styles.PriceTagContainer, { backgroundColor: variantAttributes.backgroundColor },
+            React__default["default"].createElement(PriceTag_styles.PriceTag, null,
+                React__default["default"].createElement(PriceTag_styles.PriceBase, { fontSize: sizeAttributes.baseFontSize }, priceBase),
+                React__default["default"].createElement(PriceTag_styles.PriceDetails, { pant: pant, width: sizeAttributes.detailsPantWidth },
+                    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)),
+                    showUnit && (React__default["default"].createElement(PriceTag_styles.PriceUnit, { fontSize: sizeAttributes.unitFontSize, isSmall: size === PriceTag_types.EPriceSize.SMALL, pant: pant }, pant ? pantStr : isMultiPrice ? '' : "/".concat(unit))))))));
 };
 
 exports.PriceTag = PriceTag;

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

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

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

@@ -9,36 +9,74 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var PriceTagComponent = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding-top: ", "px;\n"], ["\n  padding-top: ", "px;\n"])), function (props) { var _a; return (props.badgeStr ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm2 : 0); });
-var PriceTagWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  display: grid;\n  font-family: ", ";\n  height: fit-content;\n  width: fit-content;\n  position: relative;\n"], ["\n  color: ", ";\n  display: grid;\n  font-family: ", ";\n  height: fit-content;\n  width: fit-content;\n  position: relative;\n"])), function (props) { return props.fontColor; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.type.display; });
-var PriceSplashContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  grid-area: 1 / 1 / 1 / 1;\n  position: absolute;\n  bottom: 0;\n  top: 0;\n  right: 0;\n  left: 0;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"], ["\n  grid-area: 1 / 1 / 1 / 1;\n  position: absolute;\n  bottom: 0;\n  top: 0;\n  right: 0;\n  left: 0;\n\n  svg {\n    width: 100%;\n    height: 100%;\n  }\n"])));
-var PriceTagContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  grid-area: 1 / 1 / 1 / 1;\n  padding: 0 ", "px\n    ", "px\n    ", "px;\n  position: relative;\n  z-index: 1;\n"], ["\n  grid-area: 1 / 1 / 1 / 1;\n  padding: 0 ", "px\n    ", "px\n    ", "px;\n  position: relative;\n  z-index: 1;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var PriceTagContent = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
-var MultiPriceContainer = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  margin-bottom: -", "px;\n  margin-left: ", "px;\n  padding-top: ", "px;\n  transform: rotate(-", "deg);\n  width: fit-content;\n"], ["\n  font-size: ", "px;\n  margin-bottom: -", "px;\n  margin-left: ", "px;\n  padding-top: ", "px;\n  transform: rotate(-", "deg);\n  width: fit-content;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2; }, 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.xxs2; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.priceRotate; });
-var PriceTag = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
-var PriceBase = styled__default["default"].span(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  line-height: 1;\n"], ["\n  font-size: ", "px;\n  line-height: 1;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.l1; });
-var PriceDetails = styled__default["default"].div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n"])));
-var PriceDecimals = styled__default["default"].span(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  margin-top: ", "px;\n"], ["\n  font-size: ", "px;\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s4; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
-var PriceUnit = styled__default["default"].span(templateObject_11 || (templateObject_11 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  margin-top: ", "px;\n"], ["\n  font-size: ", "px;\n  margin-top: ", "px;\n"])), 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.xxxs; });
-var PriceIndicatorContainer = styled__default["default"].div(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var PriceIndicator = styled__default["default"].span(templateObject_13 || (templateObject_13 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  margin-top: -", "px;\n  transform: rotate(", "deg);\n"], ["\n  font-size: ", "px;\n  margin-top: -", "px;\n  transform: rotate(", "deg);\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.l1; }, function (props) { return (props.pant ? 0 : function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2; }); }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.priceIndicatorRotate; });
-var Pant = styled__default["default"].span(templateObject_14 || (templateObject_14 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  margin-top: -", "px;\n"], ["\n  font-size: ", "px;\n  margin-top: -", "px;\n"])), 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.xxs; });
-var PriceVariantBadge = styled__default["default"].div(templateObject_15 || (templateObject_15 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ", "px;\n  width: ", "px;\n  position: absolute;\n  right: -", "px;\n  top: -", "px;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ", "px;\n  width: ", "px;\n  position: absolute;\n  right: -", "px;\n  top: -", "px;\n"])), function (props) { return props.backgroundColor; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.priceVariantBadgeSize; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.priceVariantBadgeSize; }, function (props) { var _a, _b; return (props.isInSmallContainer ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2 : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.md); }, function (props) { var _a, _b; return (props.isInSmallContainer ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.lg); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+var PriceTagWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  display: inline-flex;\n  align-items: flex-start;\n  flex-direction: column;\n  font-family: ", ";\n  font-weight: ", ";\n"], ["\n  color: ", ";\n  display: inline-flex;\n  align-items: flex-start;\n  flex-direction: column;\n  font-family: ", ";\n  font-weight: ", ";\n"])), function (_a) {
+    var fontColor = _a.fontColor;
+    return fontColor;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.type.primary;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight.bold;
+});
+var PriceBannerContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  margin-bottom: 1px;\n  transform: rotate(-", "deg);\n"], ["\n  margin-bottom: 1px;\n  transform: rotate(-", "deg);\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.priceRotate; });
+var PriceTagContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  padding: ", "px;\n  position: relative;\n"], ["\n  background-color: ", ";\n  padding: ", "px;\n  position: relative;\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
+});
+var PriceTag = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs;
+});
+var PriceBase = styled__default["default"].span(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  line-height: 1;\n"], ["\n  font-size: ", "px;\n  line-height: 1;\n"])), function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize;
+});
+var PriceDetails = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\n"])), function (_a) {
+    var pant = _a.pant, width = _a.width;
+    return (pant ? width + 'px' : 'fit-content');
+});
+var PriceIndicatorContainer = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  margin-top: ", "px;\n  padding-right: ", "px;\n"], ["\n  margin-top: ", "px;\n  padding-right: ", "px;\n"])), function (_a) {
+    var isSmall = _a.isSmall, showUnit = _a.showUnit;
+    return showUnit ? (isSmall ? -4 : -5) : isSmall ? 3 : 5;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
+});
+var PriceDecimals = styled__default["default"].span(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  margin-top: ", "px;\n"], ["\n  font-size: ", "px;\n  margin-top: ", "px;\n"])), function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize;
+}, function (_a) {
+    var isSmall = _a.isSmall;
+    return (isSmall ? -10 : -14);
+});
+var PriceUnit = styled__default["default"].span(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  position: absolute;\n  bottom: ", "px;\n  right: ", "px;\n"], ["\n  font-size: ", "px;\n  position: absolute;\n  bottom: ", "px;\n  right: ", "px;\n"])), function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize;
+}, function (_a) {
+    var isSmall = _a.isSmall;
+    return (isSmall ? 4 : 6);
+}, function (_a) {
+    var pant = _a.pant;
+    return (pant ? 3 : 5);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
-exports.MultiPriceContainer = MultiPriceContainer;
-exports.Pant = Pant;
+exports.PriceBannerContainer = PriceBannerContainer;
 exports.PriceBase = PriceBase;
 exports.PriceDecimals = PriceDecimals;
 exports.PriceDetails = PriceDetails;
-exports.PriceIndicator = PriceIndicator;
 exports.PriceIndicatorContainer = PriceIndicatorContainer;
-exports.PriceSplashContainer = PriceSplashContainer;
 exports.PriceTag = PriceTag;
-exports.PriceTagComponent = PriceTagComponent;
 exports.PriceTagContainer = PriceTagContainer;
-exports.PriceTagContent = PriceTagContent;
 exports.PriceTagWrapper = PriceTagWrapper;
 exports.PriceUnit = PriceUnit;
-exports.PriceVariantBadge = PriceVariantBadge;
 //# sourceMappingURL=PriceTag.styles.js.map

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

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

package/build/cjs/components/src/components/PriceTag/PriceTag.types.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.EPriceSize = void 0;
+(function (EPriceSize) {
+    EPriceSize["LARGE"] = "large";
+    EPriceSize["MEDIUM"] = "medium";
+    EPriceSize["SMALL"] = "small";
+})(exports.EPriceSize || (exports.EPriceSize = {}));
+exports.EPriceVariant = void 0;
+(function (EPriceVariant) {
+    EPriceVariant["CAMPAIGN"] = "Kampanj";
+    EPriceVariant["KLIPP"] = "Klipp!";
+    EPriceVariant["PRIO"] = "Prio-pris";
+    EPriceVariant["REGULAR"] = "Ordinarie";
+})(exports.EPriceVariant || (exports.EPriceVariant = {}));
+//# sourceMappingURL=PriceTag.types.js.map

package/build/cjs/components/src/components/PriceTag/PriceTag.types.js.map

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

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

@@ -11,13 +11,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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;
+    var item = _a.item, button = _a.button, loading = _a.loading, price = _a.price, markings = _a.markings, fallBackImage = _a.fallBackImage;
     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 })),
+            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)));
 };

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

@@ -95,7 +95,9 @@ require('../CartSubTotal/CartSubTotal.js');
 require('../CouponCode/CouponCode.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('../CartCard/CartCard.styles.js');
-require('../PriceTag/PriceTag.js');
+require('../PriceTag/PriceTag.types.js');
+require('../PriceBanner/PriceBanner.styles.js');
+require('../PriceTag/PriceTag.styles.js');
 require('../Pill/Pill.styles.js');
 require('../SelectButton/SelectButton.styles.js');
 

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

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