@citygross/components 0.8.35 → 0.8.37

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

@@ -11,4 +11,8 @@ export declare type TPriceTag = {
     priceVariant?: EPriceVariant;
     unit: string;
 };
+export declare type TSplash = {
+    backgroundColor?: string;
+    fontColor?: string;
+};
 export declare const PriceTag: React.FunctionComponent<TPriceTag>;

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

@@ -1,8 +1,8 @@
-import { TPriceTag } from './PriceTag';
+import { TPriceTag, TSplash } from './PriceTag';
 declare type TPant = Pick<TPriceTag, 'pant'>;
-declare type TPriceVariant = Pick<TPriceTag, 'priceVariant'>;
-export declare const PriceTagComponent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TPriceVariant, never>;
-export declare const PriceTagWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TPant & TPriceVariant, 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 PriceTag: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
@@ -13,5 +13,5 @@ export declare const PriceUnit: import("styled-components").StyledComponent<"spa
 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, TPriceVariant, never>;
+export declare const PriceVariantBadge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TSplash, never>;
 export {};

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

@@ -80,3 +80,4 @@ export * from './components/CouponCode/CouponCode';
 export * from './components/CgButton/CgButton';
 export * from './components/CartCardLabel/CartCardLabel';
 export * from './components/CartCard/CartCard';
+export * from './components/PriceTag/PriceTag';

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

@@ -95,6 +95,7 @@ require('../CartSubTotal/CartSubTotal.js');
 require('../CouponCode/CouponCode.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('../CartCard/CartCard.styles.js');
+require('../PriceTag/PriceTag.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -0,0 +1,76 @@
+'use strict';
+
+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');
+
+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,
+                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,
+                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;
+    var splash = getSplash(priceVariant);
+    var priceBase = Math.floor(price);
+    var priceDecimals = (price % 1).toFixed(2).split('.')[1];
+    var isMultiPrice = multiPrice > 1;
+    var showPriceIndicator = isMultiPrice || (priceDecimals === '00' && unit === 'st');
+    var multiPriceStr = multiPrice + ' för';
+    var priceIndicator = ':-';
+    var pantStr = '+pant';
+    var priceVariantBadgeStr = priceVariant === exports.EPriceVariant.KLIPP
+        ? 'Klipp!'
+        : priceVariant === exports.EPriceVariant.PRIO
+            ? 'PRIO'
+            : null;
+    return (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 : "/".concat(unit))))))),
+        priceVariantBadgeStr && (React__default["default"].createElement(PriceTag_styles.PriceVariantBadge, { backgroundColor: splash.backgroundColor }, priceVariantBadgeStr))));
+};
+
+exports.PriceTag = PriceTag;
+//# sourceMappingURL=PriceTag.js.map

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

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

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

@@ -0,0 +1,42 @@
+'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 PriceTagWrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = _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_2 || (templateObject_2 = _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_3 || (templateObject_3 = _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.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var PriceTagContent = styled__default["default"].div(templateObject_4 || (templateObject_4 = _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_5 || (templateObject_5 = _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, _b; return (props.pant ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2 : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.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_6 || (templateObject_6 = _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_7 || (templateObject_7 = _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_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var PriceDecimals = styled__default["default"].span(templateObject_9 || (templateObject_9 = _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_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n"], ["\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; });
+var PriceIndicatorContainer = styled__default["default"].div(templateObject_11 || (templateObject_11 = _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_12 || (templateObject_12 = _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_13 || (templateObject_13 = _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_14 || (templateObject_14 = _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; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.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;
+
+exports.MultiPriceContainer = MultiPriceContainer;
+exports.Pant = Pant;
+exports.PriceBase = PriceBase;
+exports.PriceDecimals = PriceDecimals;
+exports.PriceDetails = PriceDetails;
+exports.PriceIndicator = PriceIndicator;
+exports.PriceIndicatorContainer = PriceIndicatorContainer;
+exports.PriceSplashContainer = PriceSplashContainer;
+exports.PriceTag = PriceTag;
+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

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

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

@@ -95,6 +95,7 @@ require('../CartSubTotal/CartSubTotal.js');
 require('../CouponCode/CouponCode.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('../CartCard/CartCard.styles.js');
+require('../PriceTag/PriceTag.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -86,6 +86,7 @@ var CgButton = require('./components/CgButton/CgButton.js');
 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');
 
 
 
@@ -224,4 +225,9 @@ 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;
 //# 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/es/components/src/components/AddressBlock/AddressBlock.js

@@ -91,6 +91,7 @@ import '../CartSubTotal/CartSubTotal.js';
 import '../CouponCode/CouponCode.js';
 import '../CartCardLabel/CartCardLabel.styles.js';
 import '../CartCard/CartCard.styles.js';
+import '../PriceTag/PriceTag.js';
 
 function AddressBlock(_a) {
     var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import { 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';
+
+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,
+                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,
+                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;
+    var splash = getSplash(priceVariant);
+    var priceBase = Math.floor(price);
+    var priceDecimals = (price % 1).toFixed(2).split('.')[1];
+    var isMultiPrice = multiPrice > 1;
+    var showPriceIndicator = isMultiPrice || (priceDecimals === '00' && unit === 'st');
+    var multiPriceStr = multiPrice + ' för';
+    var priceIndicator = ':-';
+    var pantStr = '+pant';
+    var priceVariantBadgeStr = priceVariant === EPriceVariant.KLIPP
+        ? 'Klipp!'
+        : priceVariant === EPriceVariant.PRIO
+            ? 'PRIO'
+            : null;
+    return (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 : "/".concat(unit))))))),
+        priceVariantBadgeStr && (React.createElement(PriceVariantBadge, { backgroundColor: splash.backgroundColor }, priceVariantBadgeStr))));
+};
+
+export { EPriceVariant, PriceTag };
+//# sourceMappingURL=PriceTag.js.map

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

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

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

@@ -0,0 +1,21 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var PriceTagWrapper = styled.div(templateObject_1 || (templateObject_1 = __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_2 || (templateObject_2 = __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_3 || (templateObject_3 = __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.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var PriceTagContent = styled.div(templateObject_4 || (templateObject_4 = __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_5 || (templateObject_5 = __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, _b; return (props.pant ? (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2 : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.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_6 || (templateObject_6 = __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_7 || (templateObject_7 = __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_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var PriceDecimals = styled.span(templateObject_9 || (templateObject_9 = __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_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: ", "px;\n"], ["\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; });
+var PriceIndicatorContainer = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var PriceIndicator = styled.span(templateObject_12 || (templateObject_12 = __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_13 || (templateObject_13 = __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_14 || (templateObject_14 = __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; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.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;
+
+export { MultiPriceContainer, Pant, PriceBase, PriceDecimals, PriceDetails, PriceIndicator, PriceIndicatorContainer, PriceSplashContainer, PriceTag, PriceTagContainer, PriceTagContent, PriceTagWrapper, PriceUnit, PriceVariantBadge };
+//# sourceMappingURL=PriceTag.styles.js.map

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

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

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

@@ -91,6 +91,7 @@ import '../CartSubTotal/CartSubTotal.js';
 import '../CouponCode/CouponCode.js';
 import '../CartCardLabel/CartCardLabel.styles.js';
 import '../CartCard/CartCard.styles.js';
+import '../PriceTag/PriceTag.js';
 
 function WarningLabel(_a) {
     var children = _a.children, background = _a.background, toolTip = _a.toolTip;

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -82,4 +82,5 @@ export { CgButton, EButtonVariant, ECgButtonSize } from './components/CgButton/C
 export { CouponCode, ECouponCodeStatus } from './components/CouponCode/CouponCode.js';
 export { CartCardLabel } from './components/CartCardLabel/CartCardLabel.js';
 export { CartCard } from './components/CartCard/CartCard.js';
+export { EPriceVariant, PriceTag } from './components/PriceTag/PriceTag.js';
 //# sourceMappingURL=index.js.map

package/build/es/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.8.35",
+  "version": "0.8.37",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@citygross/design-tokens": "^0.2.67",
-    "@citygross/icons": "^0.1.10",
+    "@citygross/icons": "^0.1.11",
     "@citygross/react-use-bg-wizard": "^0.0.8",
     "@citygross/typography": "^0.0.89",
     "@citygross/utils": "^0.0.37",
@@ -76,5 +76,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "5f6071db73ddb76eacd44801b1a252c29dae7c62"
+  "gitHead": "623be645912e25bedfbb2538e3fe9a0072affc30"
 }