@citygross/components 0.8.56 → 0.8.58

package/build/cjs/components/src/helpers/price.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@citygross/design-tokens');
+var PriceTag_types = require('../components/PriceTag/PriceTag.types.js');
+
+var getPriceBannerSizeAttributes = function (size) {
+    switch (size) {
+        case PriceTag_types.EPriceSize.LARGE:
+            return {
+                fontSize: 14
+            };
+        case PriceTag_types.EPriceSize.MEDIUM:
+            return {
+                fontSize: 13
+            };
+        case PriceTag_types.EPriceSize.SMALL:
+            return {
+                fontSize: 10
+            };
+        default:
+            return {};
+    }
+};
+var getPriceTagSizeAttributes = function (size) {
+    switch (size) {
+        case PriceTag_types.EPriceSize.LARGE:
+            return {
+                baseFontSize: 46,
+                decimalsFontSize: 25,
+                detailsPantWidth: 40,
+                indicatorSize: 25,
+                unitFontSize: 12
+            };
+        case PriceTag_types.EPriceSize.MEDIUM:
+            return {
+                baseFontSize: 38,
+                decimalsFontSize: 20,
+                detailsPantWidth: 32,
+                indicatorSize: 20,
+                unitFontSize: 10
+            };
+        case PriceTag_types.EPriceSize.SMALL:
+            return {
+                baseFontSize: 28,
+                decimalsFontSize: 15,
+                detailsPantWidth: 24,
+                indicatorSize: 15,
+                unitFontSize: 8
+            };
+        default:
+            return {};
+    }
+};
+var getPriceVariantAttributes = function (priceVariant) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    switch (priceVariant) {
+        case PriceTag_types.EPriceVariant.CAMPAIGN:
+            return {
+                backgroundColor: (_a = designTokens.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellow,
+                fontColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed
+            };
+        case PriceTag_types.EPriceVariant.KLIPP:
+            return {
+                backgroundColor: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertRed,
+                fontColor: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.white
+            };
+        case PriceTag_types.EPriceVariant.PRIO:
+            return {
+                backgroundColor: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.brandPrio,
+                fontColor: (_f = designTokens.theme.palette) === null || _f === void 0 ? void 0 : _f.white
+            };
+        case PriceTag_types.EPriceVariant.REGULAR:
+            return {
+                backgroundColor: (_g = designTokens.theme.palette) === null || _g === void 0 ? void 0 : _g.white,
+                fontColor: (_h = designTokens.theme.palette) === null || _h === void 0 ? void 0 : _h.darkest
+            };
+        default:
+            return {
+                backgroundColor: (_j = designTokens.theme.palette) === null || _j === void 0 ? void 0 : _j.white,
+                fontColor: (_k = designTokens.theme.palette) === null || _k === void 0 ? void 0 : _k.darkest
+            };
+    }
+};
+var getPriceBannerAttributes = function (priceSize, priceVariant) { return ({
+    sizeAttributes: getPriceBannerSizeAttributes(priceSize),
+    variantAttributes: getPriceVariantAttributes(priceVariant)
+}); };
+var getPriceTagAttributes = function (priceSize, priceVariant) { return ({
+    sizeAttributes: getPriceTagSizeAttributes(priceSize),
+    variantAttributes: getPriceVariantAttributes(priceVariant)
+}); };
+
+exports.getPriceBannerAttributes = getPriceBannerAttributes;
+exports.getPriceTagAttributes = getPriceTagAttributes;
+//# sourceMappingURL=price.js.map

package/build/cjs/components/src/helpers/price.js.map

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

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

@@ -87,6 +87,7 @@ var CouponCode = require('./components/CouponCode/CouponCode.js');
 var CartCardLabel = require('./components/CartCardLabel/CartCardLabel.js');
 var CartCard = require('./components/CartCard/CartCard.js');
 var PriceTag = require('./components/PriceTag/PriceTag.js');
+var PriceBanner = require('./components/PriceBanner/PriceBanner.js');
 var Pill = require('./components/Pill/Pill.js');
 var SelectButton = require('./components/SelectButton/SelectButton.js');
 
@@ -231,11 +232,8 @@ Object.defineProperty(exports, 'ECouponCodeStatus', {
 });
 exports.CartCardLabel = CartCardLabel.CartCardLabel;
 exports.CartCard = CartCard.CartCard;
-Object.defineProperty(exports, 'EPriceVariant', {
-	enumerable: true,
-	get: function () { return PriceTag.EPriceVariant; }
-});
 exports.PriceTag = PriceTag.PriceTag;
+exports.PriceBanner = PriceBanner.PriceBanner;
 exports.Pill = Pill.Pill;
 exports.SelectButton = SelectButton.SelectButton;
 //# sourceMappingURL=index.js.map

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

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

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

@@ -91,7 +91,7 @@ var constants = {
     mobileLabelPaddingRightMobile: 20,
     menuListItemIconSize: 16,
     priceIndicatorRotate: 1,
-    priceRotate: 3.5,
+    priceRotate: 2.5,
     priceSplashHorizontalPadding: 10,
     priceVariantBadgeSize: 48,
     buttonWrapperMinWidth: 120,

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

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

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

@@ -91,7 +91,9 @@ import '../CartSubTotal/CartSubTotal.js';
 import '../CouponCode/CouponCode.js';
 import '../CartCardLabel/CartCardLabel.styles.js';
 import '../CartCard/CartCard.styles.js';
-import '../PriceTag/PriceTag.js';
+import '../PriceTag/PriceTag.types.js';
+import '../PriceBanner/PriceBanner.styles.js';
+import '../PriceTag/PriceTag.styles.js';
 import '../Pill/Pill.styles.js';
 import '../SelectButton/SelectButton.styles.js';
 

package/build/es/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/es/components/src/components/ListItem/ListItem.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { BodyText, TextTypes } from '@citygross/typography';
 import Skeleton from 'react-loading-skeleton';
-import FallbackIcon from './assets/fallback_grocery.svg.js';
 import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ItemInformationContainer, ListRight } from './ListItem.styles.js';
 import { theme as theme_1 } from '../../../../design-tokens/build/index.js';
 
@@ -10,26 +9,29 @@ var EListItemAlignment;
     EListItemAlignment["CENTER"] = "center";
     EListItemAlignment["TOP"] = "flex-start";
 })(EListItemAlignment || (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 ? EListItemAlignment.CENTER : _d, textColor = _a.textColor, usedInSearch = _a.usedInSearch;
     return (React.createElement(ListItemContainer, null,
         React.createElement(ListLeft, { usedInSearch: usedInSearch, alignment: alignment },
             React.createElement(ListImageContainer, { isSmall: isSmall },
-                React.createElement(ListImage, { autoHeight: imageAutoHeight, src: (item === null || item === void 0 ? void 0 : item.image) || fallBackImage || FallbackIcon, 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 || FallbackIcon;
+                React.createElement(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.createElement(ItemInformationContainer, { usedInSearch: usedInSearch, alignment: alignment },
-                React.createElement(BodyText, { fontWeight: boldHeader ? 'semiBold' : 'regular', color: textColor || ((_b = theme_1.palette) === null || _b === void 0 ? void 0 : _b.darkest), size: isSmall
-                        ? TextTypes.TextSize.EXTRASMALL
-                        : TextTypes.TextSize.REGULAR }, (item === null || item === void 0 ? void 0 : item.name) || React.createElement(Skeleton, { width: smallSkeleton ? 150 : 250 })),
+                React.createElement(BodyText, { fontWeight: boldHeader ? 'semiBold' : 'regular', color: textColor || ((_b = theme_1.palette) === null || _b === void 0 ? void 0 : _b.darkest), size: isSmall ? TextTypes.TextSize.EXTRASMALL : TextTypes.TextSize.REGULAR }, (item === null || item === void 0 ? void 0 : item.name) || React.createElement(Skeleton, { width: smallSkeleton ? 150 : 250 })),
                 loading ? (React.createElement(BodyText, { size: TextTypes.TextSize.SMALL },
                     React.createElement(Skeleton, { width: smallSkeleton ? 150 : 250 }))) : (item === null || item === void 0 ? void 0 : item.description) ? (React.createElement(BodyText, { size: isSmall ? TextTypes.TextSize.TINY : TextTypes.TextSize.SMALL, color: textColor || ((_c = theme_1.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.createElement(ListRight, { alignment: alignment }, children))));
-}
+};
 
 export { EListItemAlignment, ListItem };
 //# sourceMappingURL=ListItem.js.map

package/build/es/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/es/components/src/components/PriceBanner/PriceBanner.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { getPriceBannerAttributes } from '../../helpers/price.js';
+import { PriceBanner as PriceBanner$1 } from './PriceBanner.styles.js';
+import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types.js';
+
+var PriceBanner = function (_a) {
+    var multiPrice = _a.multiPrice, _b = _a.size, size = _b === void 0 ? EPriceSize.MEDIUM : _b, variant = _a.variant;
+    var _c = getPriceBannerAttributes(size, variant), sizeAttributes = _c.sizeAttributes, variantAttributes = _c.variantAttributes;
+    var isMultiPrice = multiPrice && multiPrice > 1;
+    var bannerText = isMultiPrice
+        ? "".concat(variant === EPriceVariant.KLIPP ? variant + ' ' : '').concat(multiPrice, " f\u00F6r")
+        : variant;
+    return (React.createElement(PriceBanner$1, { backgroundColor: variantAttributes.backgroundColor, fontColor: variantAttributes.fontColor, fontSize: sizeAttributes.fontSize }, bannerText));
+};
+
+export { PriceBanner };
+//# sourceMappingURL=PriceBanner.js.map

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

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

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

@@ -0,0 +1,29 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var PriceBanner = styled.div(templateObject_1 || (templateObject_1 = __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;
+
+export { PriceBanner };
+//# sourceMappingURL=PriceBanner.styles.js.map

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

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

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

@@ -1,66 +1,30 @@
 import React from 'react';
-import { PriceTagComponent, PriceTagWrapper, PriceSplashContainer, PriceTagContainer, PriceTagContent, MultiPriceContainer, PriceTag as PriceTag$1, PriceBase, PriceIndicatorContainer, PriceIndicator, Pant, PriceDetails, PriceDecimals, PriceUnit, PriceVariantBadge } from './PriceTag.styles.js';
 import { Icons } from '@citygross/icons';
-import { theme } from '@citygross/design-tokens';
+import { getPriceTagAttributes } from '../../helpers/price.js';
+import { PriceBanner } from '../PriceBanner/PriceBanner.js';
+import { PriceTagWrapper, PriceBannerContainer, PriceTagContainer, PriceTag as PriceTag$1, PriceBase, PriceDetails, PriceIndicatorContainer, PriceDecimals, PriceUnit } from './PriceTag.styles.js';
+import { EPriceVariant, EPriceSize } from './PriceTag.types.js';
 
-var EPriceVariant;
-(function (EPriceVariant) {
-    EPriceVariant["KLIPP"] = "klipp";
-    EPriceVariant["PRIO"] = "prio";
-    EPriceVariant["REGULAR_OFFER"] = "regular-offer";
-})(EPriceVariant || (EPriceVariant = {}));
-var getSplash = function (priceVariant) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    switch (priceVariant) {
-        case EPriceVariant.KLIPP:
-            return {
-                backgroundColor: (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.alertRed,
-                badgeStr: 'Klipp!',
-                fontColor: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white
-            };
-        case EPriceVariant.PRIO:
-            return {
-                backgroundColor: (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.brandPrio,
-                badgeStr: 'PRIO',
-                fontColor: (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.white
-            };
-        case EPriceVariant.REGULAR_OFFER:
-            return {
-                backgroundColor: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.brandYellow,
-                fontColor: (_f = theme.palette) === null || _f === void 0 ? void 0 : _f.alertRed
-            };
-        default:
-            return {
-                fontColor: (_g = 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 _b = _a.multiPrice, multiPrice = _b === void 0 ? 0 : _b, _c = _a.pant, pant = _c === void 0 ? false : _c, price = _a.price, _d = _a.variant, variant = _d === void 0 ? EPriceVariant.REGULAR : _d, _e = _a.size, size = _e === void 0 ? EPriceSize.MEDIUM : _e, unit = _a.unit;
+    var _f = getPriceTagAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
     var priceBase = Math.floor(price);
     var priceDecimals = (price % 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.createElement(PriceTagComponent, { badgeStr: splash.badgeStr },
-        React.createElement(PriceTagWrapper, { fontColor: splash.fontColor },
-            splash.backgroundColor && (React.createElement(PriceSplashContainer, null,
-                React.createElement(Icons.PriceSplash, { backgroundColor: splash.backgroundColor }))),
-            React.createElement(PriceTagContainer, null,
-                React.createElement(PriceTagContent, null,
-                    isMultiPrice && (React.createElement(MultiPriceContainer, { pant: pant }, multiPriceStr)),
-                    React.createElement(PriceTag$1, null,
-                        React.createElement(PriceBase, null, priceBase),
-                        showPriceIndicator ? (React.createElement(PriceIndicatorContainer, null,
-                            React.createElement(PriceIndicator, { pant: pant }, priceIndicator),
-                            pant && React.createElement(Pant, null, pantStr))) : (React.createElement(PriceDetails, null,
-                            React.createElement(PriceDecimals, null, priceDecimals),
-                            React.createElement(PriceUnit, null, pant ? pantStr : isMultiPrice ? '' : "/".concat(unit))))))),
-            splash.badgeStr && (React.createElement(PriceVariantBadge, { backgroundColor: splash.backgroundColor, isInSmallContainer: isInSmallContainer }, splash.badgeStr)))));
+    return (React.createElement(PriceTagWrapper, { fontColor: variantAttributes.fontColor },
+        variant !== EPriceVariant.REGULAR && (React.createElement(PriceBannerContainer, null,
+            React.createElement(PriceBanner, { multiPrice: multiPrice, size: size, variant: variant }))),
+        React.createElement(PriceTagContainer, { backgroundColor: variantAttributes.backgroundColor },
+            React.createElement(PriceTag$1, null,
+                React.createElement(PriceBase, { fontSize: sizeAttributes.baseFontSize }, priceBase),
+                React.createElement(PriceDetails, { pant: pant, width: sizeAttributes.detailsPantWidth },
+                    showPriceIndicator ? (React.createElement(PriceIndicatorContainer, { isSmall: size === EPriceSize.SMALL, showUnit: showUnit },
+                        React.createElement(Icons.PriceIndicator, { fill: variantAttributes.fontColor, size: sizeAttributes.indicatorSize }))) : (React.createElement(PriceDecimals, { fontSize: sizeAttributes.decimalsFontSize, isSmall: size === EPriceSize.SMALL }, priceDecimals)),
+                    showUnit && (React.createElement(PriceUnit, { fontSize: sizeAttributes.unitFontSize, isSmall: size === EPriceSize.SMALL, pant: pant }, pant ? pantStr : isMultiPrice ? '' : "/".concat(unit))))))));
 };
 
-export { EPriceVariant, PriceTag };
+export { PriceTag };
 //# sourceMappingURL=PriceTag.js.map

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

@@ -1,22 +1,66 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
-var PriceTagComponent = styled.div(templateObject_1 || (templateObject_1 = __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.div(templateObject_2 || (templateObject_2 = __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.div(templateObject_3 || (templateObject_3 = __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.div(templateObject_4 || (templateObject_4 = __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.div(templateObject_5 || (templateObject_5 = __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.div(templateObject_6 || (templateObject_6 = __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.div(templateObject_7 || (templateObject_7 = __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.span(templateObject_8 || (templateObject_8 = __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.div(templateObject_9 || (templateObject_9 = __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.span(templateObject_10 || (templateObject_10 = __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.span(templateObject_11 || (templateObject_11 = __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.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var PriceIndicator = styled.span(templateObject_13 || (templateObject_13 = __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.span(templateObject_14 || (templateObject_14 = __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.div(templateObject_15 || (templateObject_15 = __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.div(templateObject_1 || (templateObject_1 = __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.div(templateObject_2 || (templateObject_2 = __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.div(templateObject_3 || (templateObject_3 = __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.div(templateObject_4 || (templateObject_4 = __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.span(templateObject_5 || (templateObject_5 = __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.div(templateObject_6 || (templateObject_6 = __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.div(templateObject_7 || (templateObject_7 = __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.span(templateObject_8 || (templateObject_8 = __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.span(templateObject_9 || (templateObject_9 = __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;
 
-export { MultiPriceContainer, Pant, PriceBase, PriceDecimals, PriceDetails, PriceIndicator, PriceIndicatorContainer, PriceSplashContainer, PriceTag, PriceTagComponent, PriceTagContainer, PriceTagContent, PriceTagWrapper, PriceUnit, PriceVariantBadge };
+export { PriceBannerContainer, PriceBase, PriceDecimals, PriceDetails, PriceIndicatorContainer, PriceTag, PriceTagContainer, PriceTagWrapper, PriceUnit };
 //# sourceMappingURL=PriceTag.styles.js.map

package/build/es/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/es/components/src/components/PriceTag/PriceTag.types.js

@@ -0,0 +1,16 @@
+var EPriceSize;
+(function (EPriceSize) {
+    EPriceSize["LARGE"] = "large";
+    EPriceSize["MEDIUM"] = "medium";
+    EPriceSize["SMALL"] = "small";
+})(EPriceSize || (EPriceSize = {}));
+var EPriceVariant;
+(function (EPriceVariant) {
+    EPriceVariant["CAMPAIGN"] = "Kampanj";
+    EPriceVariant["KLIPP"] = "Klipp!";
+    EPriceVariant["PRIO"] = "Prio-pris";
+    EPriceVariant["REGULAR"] = "Ordinarie";
+})(EPriceVariant || (EPriceVariant = {}));
+
+export { EPriceSize, EPriceVariant };
+//# sourceMappingURL=PriceTag.types.js.map

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

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

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

@@ -3,13 +3,13 @@ import { ListItem } from '../ListItem/ListItem.js';
 import { SearchListItemWrapper, MarkingWrapper, Marking, ToolTip, ListItemWrapper, PriceTagWrapper, ButtonWrapper } from './SearchListItem.styles.js';
 
 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.createElement(SearchListItemWrapper, null,
         markings && (React.createElement(MarkingWrapper, null, markings === null || markings === void 0 ? void 0 : markings.map(function (marking, index) { return (React.createElement(Marking, { key: index },
             React.createElement(ToolTip, { backgroundColor: marking === null || marking === void 0 ? void 0 : marking.backgroundColor, left: (index + 1) * 25 }, marking.tooltipText),
             marking.image)); }))),
         React.createElement(ListItemWrapper, null,
-            React.createElement(ListItem, { usedInSearch: true, loading: loading, item: item })),
+            React.createElement(ListItem, { usedInSearch: true, loading: loading, item: item, fallBackImage: fallBackImage })),
         React.createElement(PriceTagWrapper, null, price),
         React.createElement(ButtonWrapper, null, button)));
 };

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

@@ -91,7 +91,9 @@ import '../CartSubTotal/CartSubTotal.js';
 import '../CouponCode/CouponCode.js';
 import '../CartCardLabel/CartCardLabel.styles.js';
 import '../CartCard/CartCard.styles.js';
-import '../PriceTag/PriceTag.js';
+import '../PriceTag/PriceTag.types.js';
+import '../PriceBanner/PriceBanner.styles.js';
+import '../PriceTag/PriceTag.styles.js';
 import '../Pill/Pill.styles.js';
 import '../SelectButton/SelectButton.styles.js';
 

package/build/es/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}