@citygross/components 0.17.12 → 0.18.0

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

@@ -2,4 +2,4 @@
 export declare const CartItemSummaryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const CancelledWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ItemInformationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const AmountText: import("styled-components").StyledComponent<({ as, children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const AmountText: import("styled-components").StyledComponent<({ as, children, color, fontWeight, size, textAlign, whiteSpace, ...props }: import("@citygross/typography").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/CgButton/ButtonAsLink/ButtonAsLink.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+import { TextTypes } from '@citygross/typography';
 export declare type TButtonAsLink = {
     children: React.ReactNode;
+    size?: TextTypes.TextSize;
     type?: 'button' | 'submit' | 'reset';
 } & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export declare const ButtonAsLink: ({ children, type, ...props }: TButtonAsLink) => React.JSX.Element;
+export declare const ButtonAsLink: ({ children, size, type, ...props }: TButtonAsLink) => React.JSX.Element;

package/build/@types/components/Chips/Chip.styles.d.ts

@@ -9,4 +9,4 @@ export declare type TChip = {
 };
 export declare const BaseChip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TChip, never>;
 export declare const ChipCheckbox: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const ChipLabel: import("styled-components").StyledComponent<({ as, children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const ChipLabel: import("styled-components").StyledComponent<({ as, children, color, fontWeight, size, textAlign, whiteSpace, ...props }: import("@citygross/typography").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;

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/components/RadioBox/RadioBoxList.styles.d.ts

@@ -3,4 +3,4 @@ import { TBaseRadioBox } from './RadioBoxItem.styles';
 export declare const BaseRadioBoxList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox, never>;
 export declare const RadioBoxListChildContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioBox, never>;
 export declare const DividerPadding: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const RadioBoxListParagraph: import("styled-components").StyledComponent<({ as, children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+export declare const RadioBoxListParagraph: import("styled-components").StyledComponent<({ as, children, color, fontWeight, size, textAlign, whiteSpace, ...props }: import("@citygross/typography").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;

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

@@ -20,7 +20,7 @@ export declare const StyledH3: import("styled-components").StyledComponent<({ ch
     as: string;
 } & TBaseRadioItemInputWrapper, "as">;
 export declare const RadioRightWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const DisableText: import("styled-components").StyledComponent<({ as, children, color, fontWeight, size, textAlign, ...props }: import("@citygross/typography").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
+export declare const DisableText: import("styled-components").StyledComponent<({ as, children, color, fontWeight, size, textAlign, whiteSpace, ...props }: import("@citygross/typography").TBodyText) => import("react").JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
 export declare const RadioFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWrapMobile, never>;
 export declare const SecondaryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const LabelContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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/CgButton/ButtonAsLink/ButtonAsLink.js

@@ -4,15 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.js');
 var React = require('react');
+var typography = require('@citygross/typography');
 var ButtonAsLink_styles = require('./ButtonAsLink.styles.js');
+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);
 
 var ButtonAsLink = function (_a) {
-    var children = _a.children, _b = _a.type, type = _b === void 0 ? 'button' : _b, props = _tslib.__rest(_a, ["children", "type"]);
-    return (React__default["default"].createElement(ButtonAsLink_styles.ButtonAsLink, _tslib.__assign({ type: type }, props), children));
+    var _b;
+    var children = _a.children, _c = _a.size, size = _c === void 0 ? typography.TextTypes.TextSize.REGULAR : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, props = _tslib.__rest(_a, ["children", "size", "type"]);
+    return (React__default["default"].createElement(ButtonAsLink_styles.ButtonAsLink, _tslib.__assign({ type: type }, props),
+        React__default["default"].createElement(typography.BodyText, { size: size, color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue }, children)));
 };
 
 exports.ButtonAsLink = ButtonAsLink;

package/build/cjs/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.js.map

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

package/build/cjs/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.styles.js

@@ -9,14 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var ButtonAsLink = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: none;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  font-size: ", "px;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  width: fit-content;\n"], ["\n  background: none;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  font-size: ", "px;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  width: fit-content;\n"])), function (_a) {
+var ButtonAsLink = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: none;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  width: fit-content;\n"], ["\n  background: none;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  width: fit-content;\n"])), function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue;
-}, function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
-    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3;
 });
 var templateObject_1;
 

package/build/cjs/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonAsLink.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ButtonAsLink.styles.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/CgButton/ButtonAsLink/ButtonAsLink.js

@@ -1,10 +1,14 @@
 import { __rest, __assign } from '../../../../../_virtual/_tslib.js';
 import React from 'react';
+import { TextTypes, BodyText } from '@citygross/typography';
 import { ButtonAsLink as ButtonAsLink$1 } from './ButtonAsLink.styles.js';
+import { theme } from '@citygross/design-tokens';
 
 var ButtonAsLink = function (_a) {
-    var children = _a.children, _b = _a.type, type = _b === void 0 ? 'button' : _b, props = __rest(_a, ["children", "type"]);
-    return (React.createElement(ButtonAsLink$1, __assign({ type: type }, props), children));
+    var _b;
+    var children = _a.children, _c = _a.size, size = _c === void 0 ? TextTypes.TextSize.REGULAR : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, props = __rest(_a, ["children", "size", "type"]);
+    return (React.createElement(ButtonAsLink$1, __assign({ type: type }, props),
+        React.createElement(BodyText, { size: size, color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue }, children)));
 };
 
 export { ButtonAsLink };

package/build/es/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.js.map

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

package/build/es/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.styles.js

@@ -1,14 +1,10 @@
 import { __makeTemplateObject } from '../../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
-var ButtonAsLink = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  font-size: ", "px;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  width: fit-content;\n"], ["\n  background: none;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  font-size: ", "px;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  width: fit-content;\n"])), function (_a) {
+var ButtonAsLink = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: none;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  width: fit-content;\n"], ["\n  background: none;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  display: inline-block;\n  padding: 0;\n  text-align: left;\n  text-decoration: underline;\n  width: fit-content;\n"])), function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.brandBlue;
-}, function (_a) {
-    var _b, _c;
-    var theme = _a.theme;
-    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s3;
 });
 var templateObject_1;
 

package/build/es/components/src/components/CgButton/ButtonAsLink/ButtonAsLink.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonAsLink.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ButtonAsLink.styles.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.12",
+  "version": "0.18.0",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -70,11 +70,11 @@
     "@citygross/design-tokens": "^0.5.4",
     "@citygross/icons": "^0.3.5",
     "@citygross/react-use-bg-wizard": "^0.0.14",
-    "@citygross/typography": "^0.0.127",
-    "@citygross/utils": "^0.0.56",
+    "@citygross/typography": "^0.0.128",
+    "@citygross/utils": "^0.1.0",
     "motion": "^12.34.3",
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "3d6105e54543744d45aef0c455fbf83ce788d1e4"
+  "gitHead": "eab9dd1e0aeee303783a341a63198b3d63d5a54b"
 }