@citygross/components 0.17.13 → 0.18.1

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

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare type TPersonalCouponCard = {
+    description: string;
+    name: string;
+    expirationDate?: string;
+    usedDate?: string;
+    imageUrl: string;
+    voucherNbr: string;
+    available: boolean;
+    status?: string;
+};
+export declare const PersonalCouponCard: ({ description, name, expirationDate, usedDate, imageUrl, voucherNbr, available, status }: TPersonalCouponCard) => React.JSX.Element;

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

@@ -0,0 +1,12 @@
+declare type TFooter = {
+    available: boolean;
+};
+export declare const CouponCard: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ContentRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const TextColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const UsedRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const CouponImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
+export declare const Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TFooter, never>;
+export declare const VoucherNbr: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, TFooter, never>;
+export {};

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

@@ -62,6 +62,7 @@ export * from './components/Modal/Modal';
 export * from './components/NavMainLink/NavMainLink';
 export * from './components/Pagination/Pagination';
 export * from './components/Pill/Pill';
+export * from './components/PersonalCouponCard/PersonalCouponCard';
 export * from './components/PriceStripe/PriceStripe';
 export * from './components/PriceTag/PriceTag';
 export * from './components/PriceTag/PriceTag.types';

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

@@ -81,6 +81,8 @@ require('../Modal/Modal.js');
 require('../NavMainLink/NavMainLink.styled.js');
 require('../Pagination/Pagination.styles.js');
 require('../Pill/Pill.styles.js');
+require('styled-components');
+require('../PersonalCouponCard/PersonalCouponCard.styles.js');
 require('../PriceTag/PriceTag.types.js');
 require('../PriceStripe/PriceStripe.styles.js');
 require('../PriceTag/PriceTag.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/PersonalCouponCard/PersonalCouponCard.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var icons = require('@citygross/icons');
+var utils = require('@citygross/utils');
+var styled = require('styled-components');
+var PersonalCouponCard_styles = require('./PersonalCouponCard.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var PersonalCouponCard = function (_a) {
+    var _b, _c, _d;
+    var description = _a.description, name = _a.name, expirationDate = _a.expirationDate, usedDate = _a.usedDate, imageUrl = _a.imageUrl, voucherNbr = _a.voucherNbr, available = _a.available, status = _a.status;
+    var theme = styled.useTheme();
+    var isCouponAvailable = available !== null && available !== void 0 ? available : (status === null || status === void 0 ? void 0 : status.toLowerCase()) === 'available';
+    return (React__default["default"].createElement(PersonalCouponCard_styles.CouponCard, null,
+        React__default["default"].createElement(PersonalCouponCard_styles.ContentRow, null,
+            React__default["default"].createElement(PersonalCouponCard_styles.TextColumn, null,
+                React__default["default"].createElement(PersonalCouponCard_styles.Description, null, description),
+                React__default["default"].createElement("div", null,
+                    name,
+                    " ",
+                    description),
+                isCouponAvailable ? (React__default["default"].createElement("div", null,
+                    "Giltig till ",
+                    utils.formatIsoDate(expirationDate))) : (React__default["default"].createElement(PersonalCouponCard_styles.UsedRow, null,
+                    React__default["default"].createElement(icons.Icons.CheckMark, { "aria-hidden": "true", color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertGreen, height: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm, width: (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.sm }),
+                    "Anv\u00E4nd ",
+                    utils.formatIsoDate(usedDate)))),
+            React__default["default"].createElement(PersonalCouponCard_styles.CouponImage, { alt: description, src: imageUrl })),
+        React__default["default"].createElement(PersonalCouponCard_styles.Footer, { available: isCouponAvailable },
+            React__default["default"].createElement("span", null, "Personlig kod"),
+            React__default["default"].createElement(PersonalCouponCard_styles.VoucherNbr, { available: isCouponAvailable }, voucherNbr))));
+};
+
+exports.PersonalCouponCard = PersonalCouponCard;
+//# sourceMappingURL=PersonalCouponCard.js.map

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

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

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

@@ -0,0 +1,97 @@
+'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 CouponCard = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: flex;\n  flex-direction: column;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: flex;\n  flex-direction: column;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.medium;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
+});
+var ContentRow = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  gap: ", "px;\n  padding: ", "px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  gap: ", "px;\n  padding: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+});
+var TextColumn = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
+});
+var Description = styled__default["default"].span(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  font-weight: ", ";\n"], ["\n  font-weight: ", ";\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight.medium;
+});
+var UsedRow = styled__default["default"].div(templateObject_5 || (templateObject_5 = _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.xs;
+});
+var CouponImage = styled__default["default"].img(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n  object-fit: cover;\n  flex-shrink: 0;\n"], ["\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n  object-fit: cover;\n  flex-shrink: 0;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xl;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xl;
+});
+var Footer = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", "px;\n  padding: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  background-color: ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", "px;\n  padding: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  background-color: ", ";\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
+}, function (_a) {
+    var _b, _c;
+    var available = _a.available, theme = _a.theme;
+    return available ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.blueLighter : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.lighter;
+});
+var VoucherNbr = styled__default["default"].span(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  text-decoration: ", ";\n"], ["\n  text-decoration: ", ";\n"])), function (_a) {
+    var available = _a.available;
+    return (available ? 'none' : 'line-through');
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+exports.ContentRow = ContentRow;
+exports.CouponCard = CouponCard;
+exports.CouponImage = CouponImage;
+exports.Description = Description;
+exports.Footer = Footer;
+exports.TextColumn = TextColumn;
+exports.UsedRow = UsedRow;
+exports.VoucherNbr = VoucherNbr;
+//# sourceMappingURL=PersonalCouponCard.styles.js.map

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

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

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

@@ -69,6 +69,7 @@ var Modal = require('./components/Modal/Modal.js');
 var NavMainLink = require('./components/NavMainLink/NavMainLink.js');
 var Pagination = require('./components/Pagination/Pagination.js');
 var Pill = require('./components/Pill/Pill.js');
+var PersonalCouponCard = require('./components/PersonalCouponCard/PersonalCouponCard.js');
 var PriceStripe = require('./components/PriceStripe/PriceStripe.js');
 var PriceTag = require('./components/PriceTag/PriceTag.js');
 var PriceTag_types = require('./components/PriceTag/PriceTag.types.js');
@@ -236,6 +237,7 @@ exports.Modal = Modal.Modal;
 exports.NavMainLink = NavMainLink.NavMainLink;
 exports.Pagination = Pagination.Pagination;
 exports.Pill = Pill.Pill;
+exports.PersonalCouponCard = PersonalCouponCard.PersonalCouponCard;
 exports.PriceStripe = PriceStripe.PriceStripe;
 exports.PriceTag = PriceTag.PriceTag;
 Object.defineProperty(exports, 'EPriceSize', {

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

@@ -77,6 +77,8 @@ import '../Modal/Modal.js';
 import '../NavMainLink/NavMainLink.styled.js';
 import '../Pagination/Pagination.styles.js';
 import '../Pill/Pill.styles.js';
+import 'styled-components';
+import '../PersonalCouponCard/PersonalCouponCard.styles.js';
 import '../PriceTag/PriceTag.types.js';
 import '../PriceStripe/PriceStripe.styles.js';
 import '../PriceTag/PriceTag.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/PersonalCouponCard/PersonalCouponCard.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Icons } from '@citygross/icons';
+import { formatIsoDate } from '@citygross/utils';
+import { useTheme } from 'styled-components';
+import { CouponCard, ContentRow, TextColumn, Description, UsedRow, CouponImage, Footer, VoucherNbr } from './PersonalCouponCard.styles.js';
+
+var PersonalCouponCard = function (_a) {
+    var _b, _c, _d;
+    var description = _a.description, name = _a.name, expirationDate = _a.expirationDate, usedDate = _a.usedDate, imageUrl = _a.imageUrl, voucherNbr = _a.voucherNbr, available = _a.available, status = _a.status;
+    var theme = useTheme();
+    var isCouponAvailable = available !== null && available !== void 0 ? available : (status === null || status === void 0 ? void 0 : status.toLowerCase()) === 'available';
+    return (React.createElement(CouponCard, null,
+        React.createElement(ContentRow, null,
+            React.createElement(TextColumn, null,
+                React.createElement(Description, null, description),
+                React.createElement("div", null,
+                    name,
+                    " ",
+                    description),
+                isCouponAvailable ? (React.createElement("div", null,
+                    "Giltig till ",
+                    formatIsoDate(expirationDate))) : (React.createElement(UsedRow, null,
+                    React.createElement(Icons.CheckMark, { "aria-hidden": "true", color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.alertGreen, height: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm, width: (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.sm }),
+                    "Anv\u00E4nd ",
+                    formatIsoDate(usedDate)))),
+            React.createElement(CouponImage, { alt: description, src: imageUrl })),
+        React.createElement(Footer, { available: isCouponAvailable },
+            React.createElement("span", null, "Personlig kod"),
+            React.createElement(VoucherNbr, { available: isCouponAvailable }, voucherNbr))));
+};
+
+export { PersonalCouponCard };
+//# sourceMappingURL=PersonalCouponCard.js.map

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

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

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

@@ -0,0 +1,82 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var CouponCard = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: flex;\n  flex-direction: column;\n"], ["\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  display: flex;\n  flex-direction: column;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.medium;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
+});
+var ContentRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  gap: ", "px;\n  padding: ", "px;\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  gap: ", "px;\n  padding: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+});
+var TextColumn = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
+});
+var Description = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: ", ";\n"], ["\n  font-weight: ", ";\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.weight.medium;
+});
+var UsedRow = styled.div(templateObject_5 || (templateObject_5 = __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.xs;
+});
+var CouponImage = styled.img(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n  object-fit: cover;\n  flex-shrink: 0;\n"], ["\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n  object-fit: cover;\n  flex-shrink: 0;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xl;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xl;
+});
+var Footer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", "px;\n  padding: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  background-color: ", ";\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", "px;\n  padding: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  background-color: ", ";\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small;
+}, function (_a) {
+    var _b, _c;
+    var available = _a.available, theme = _a.theme;
+    return available ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.blueLighter : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.lighter;
+});
+var VoucherNbr = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  text-decoration: ", ";\n"], ["\n  text-decoration: ", ";\n"])), function (_a) {
+    var available = _a.available;
+    return (available ? 'none' : 'line-through');
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+
+export { ContentRow, CouponCard, CouponImage, Description, Footer, TextColumn, UsedRow, VoucherNbr };
+//# sourceMappingURL=PersonalCouponCard.styles.js.map

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

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

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

@@ -65,6 +65,7 @@ export { EModalSize, EModalVariant, Modal } from './components/Modal/Modal.js';
 export { NavMainLink } from './components/NavMainLink/NavMainLink.js';
 export { Pagination } from './components/Pagination/Pagination.js';
 export { Pill } from './components/Pill/Pill.js';
+export { PersonalCouponCard } from './components/PersonalCouponCard/PersonalCouponCard.js';
 export { PriceStripe } from './components/PriceStripe/PriceStripe.js';
 export { PriceTag } from './components/PriceTag/PriceTag.js';
 export { EPriceSize, EPriceVariant } from './components/PriceTag/PriceTag.types.js';

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.17.13",
+  "version": "0.18.1",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -68,13 +68,13 @@
   },
   "dependencies": {
     "@citygross/design-tokens": "^0.5.4",
-    "@citygross/icons": "^0.3.5",
+    "@citygross/icons": "^0.3.6",
     "@citygross/react-use-bg-wizard": "^0.0.14",
     "@citygross/typography": "^0.0.128",
-    "@citygross/utils": "^0.0.56",
+    "@citygross/utils": "^0.1.0",
     "motion": "^12.34.3",
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "8d4def81ef7ef489e416db431547a41b70fc623a"
+  "gitHead": "c090ec61be66146f84c565e5ef2f252a7c70c90b"
 }