@citygross/components 0.16.26 → 0.17.0

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextTypes } from '@citygross/typography';
+export declare type TAvailabilityLabelProps = {
+    label: string;
+    textSize?: TextTypes.TextSize;
+};
+export declare const AvailabilityLabel: React.FunctionComponent<TAvailabilityLabelProps>;

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

@@ -0,0 +1,2 @@
+export declare const Root: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Dot: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextTypes } from '@citygross/typography';
 export declare type TItem = {
     amount?: number;
     image?: string;
@@ -8,6 +9,10 @@ export declare type TItem = {
     };
     secondaryDescription?: React.ReactNode;
     subtitle?: string;
+    status?: {
+        label: string;
+        textSize?: TextTypes.TextSize;
+    };
 };
 export declare enum EListItemAlignment {
     CENTER = "center",

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

@@ -1,8 +1,13 @@
+/// <reference types="react" />
 import { type TModal } from './Modal';
 declare type TOverlay = Pick<TModal, 'noOverlay'>;
 export declare const Overlay: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TOverlay, never>;
 declare type TFrame = Pick<TModal, 'size'>;
 export declare const Frame: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TFrame, never>;
 export declare const Header: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h2/h2").TH2) => import("react").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
+declare type TFooter = {
+    rowReverse?: boolean;
+};
+export declare const Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TFooter, never>;
 export {};

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

@@ -1,6 +1,7 @@
 export * from './components/AddressBlock/AddressBlock';
 export * from './components/Accordion/Accordion';
 export * from './components/AlertBox/AlertBox';
+export * from './components/AvailabilityLabel/AvailabilityLabel';
 export * from './components/BackButton/BackButton';
 export * from './components/BackgroundImage/BackgroundImage';
 export * from './components/Badge/Badge';

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

@@ -9,6 +9,7 @@ require('@citygross/design-tokens');
 require('@citygross/icons');
 require('../Accordion/Accordion.styles.js');
 require('../AlertBox/AlertBox.js');
+require('../AvailabilityLabel/AvailabilityLabel.styles.js');
 require('../BackButton/BackButton.styles.js');
 require('../BackgroundImage/BackgroundImage.styles.js');
 require('../Badge/Badge.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/AvailabilityLabel/AvailabilityLabel.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var typography = require('@citygross/typography');
+var AvailabilityLabel_styles = require('./AvailabilityLabel.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var AvailabilityLabel = function (_a) {
+    var label = _a.label, _b = _a.textSize, textSize = _b === void 0 ? typography.TextTypes.TextSize.EXTRASMALL : _b;
+    return (React__default["default"].createElement(AvailabilityLabel_styles.Root, null,
+        React__default["default"].createElement(AvailabilityLabel_styles.Dot, null),
+        React__default["default"].createElement(typography.BodyText, { size: textSize }, label)));
+};
+
+exports.AvailabilityLabel = AvailabilityLabel;
+//# sourceMappingURL=AvailabilityLabel.js.map

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

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

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

@@ -0,0 +1,18 @@
+'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 Root = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  margin-top: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var Dot = styled__default["default"].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: ", ";\n"], ["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs1; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs1; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellow; });
+var templateObject_1, templateObject_2;
+
+exports.Dot = Dot;
+exports.Root = Root;
+//# sourceMappingURL=AvailabilityLabel.styles.js.map

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

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

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

@@ -7,6 +7,7 @@ var Skeleton = require('react-loading-skeleton');
 var Fieldset = require('../Fieldset/Fieldset.js');
 var Checkbox = require('../FormElements/Checkbox/Checkbox.js');
 var PriceStripe = require('../PriceStripe/PriceStripe.js');
+var AvailabilityLabel = require('../AvailabilityLabel/AvailabilityLabel.js');
 var ProductHeader = require('../ProductHeader/ProductHeader.js');
 var ListItem_styles = require('./ListItem.styles.js');
 var PriceTag_types = require('../PriceTag/PriceTag.types.js');
@@ -22,7 +23,8 @@ exports.EListItemAlignment = void 0;
     EListItemAlignment["TOP"] = "flex-start";
 })(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
 var ListItem = function (_a) {
-    var _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
+    var _b;
+    var _c = _a.alignment, alignment = _c === void 0 ? exports.EListItemAlignment.CENTER : _c, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.showPriceStripe, showPriceStripe = _e === void 0 ? false : _e, smallSkeleton = _a.smallSkeleton;
     return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
         React__default["default"].createElement(ListItem_styles.ListLeft, { alignment: alignment },
             React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
@@ -43,6 +45,7 @@ var ListItem = function (_a) {
                     checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(Skeleton__default["default"], { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React__default["default"].createElement(React.Fragment, null,
                     showPriceStripe && (React__default["default"].createElement(PriceStripe.PriceStripe, { size: PriceTag_types.EPriceSize.SMALL, variant: PriceTag_types.EPriceVariant.PRIO })),
                     React__default["default"].createElement(ProductHeader.ProductHeader, { location: ProductHeader.EProductHeader.LIST_ITEM, subtitle: item === null || item === void 0 ? void 0 : item.subtitle, title: item === null || item === void 0 ? void 0 : item.name }),
+                    ((_b = item === null || item === void 0 ? void 0 : item.status) === null || _b === void 0 ? void 0 : _b.label) && (React__default["default"].createElement(AvailabilityLabel.AvailabilityLabel, { label: item.status.label, textSize: item.status.textSize })),
                     checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(Fieldset.Fieldset, null,
                         checkboxLegendLabel && (React__default["default"].createElement(ListItem_styles.VisuallyHiddenLegend, null, checkboxLegendLabel)),
                         React__default["default"].createElement(ListItem_styles.CheckboxContainer, null, checkboxes.map(function (checkbox, index) {

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

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

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

@@ -6,7 +6,6 @@ var React = require('react');
 var reactDom = require('react-dom');
 var designTokens = require('@citygross/design-tokens');
 var icons = require('@citygross/icons');
-var typography = require('@citygross/typography');
 var utils = require('@citygross/utils');
 var CgButton = require('../CgButton/CgButton.js');
 var Modal_styles = require('./Modal.styles.js');
@@ -38,8 +37,6 @@ var Modal = function (_a) {
     var _b, _c, _d;
     var children = _a.children, inertSelectors = _a.inertSelectors, _e = _a.labelCancel, labelCancel = _e === void 0 ? 'Avbryt' : _e, _f = _a.labelCta, labelCta = _f === void 0 ? 'Okej' : _f, _g = _a.noOverlay, noOverlay = _g === void 0 ? false : _g, onClose = _a.onClose, onConfirm = _a.onConfirm, portalHostSelector = _a.portalHostSelector, _h = _a.size, size = _h === void 0 ? exports.EModalSize.medium : _h, title = _a.title, variant = _a.variant;
     var titleId = React.useId();
-    var modalRef = React.useRef(null);
-    var cancelButtonRef = React.useRef(null);
     var previouslyFocusedElement = React.useRef(null);
     var portalRoot = React.useMemo(function () { return getPortalRoot(portalHostSelector); }, [portalHostSelector]);
     React.useEffect(function () {
@@ -64,14 +61,6 @@ var Modal = function (_a) {
             return utils.escapeKeyboardEventHandler({ event: event, onEscape: onClose });
         };
         document.addEventListener('keydown', handleEscape);
-        requestAnimationFrame(function () {
-            var _a, _b;
-            if (variant === exports.EModalVariant.destructive) {
-                (_a = cancelButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                return;
-            }
-            (_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        });
         return function () {
             restoreInert();
             body.style.overflow = previousBodyOverflow;
@@ -81,19 +70,21 @@ var Modal = function (_a) {
                 previouslyFocusedElement.current.focus();
             }
         };
-    }, [inertSelectors, onClose, variant]);
+    }, [inertSelectors, onClose]);
     if (!portalRoot)
         return null;
+    var cancelButton = (React__default["default"].createElement(CgButton.CgButton, { onClick: onClose, variant: CgButton_types.EButtonVariant.secondary }, labelCancel));
     return reactDom.createPortal(React__default["default"].createElement(Modal_styles.Overlay, { noOverlay: noOverlay, onClick: onClose },
-        React__default["default"].createElement(Modal_styles.Frame, { "aria-labelledby": titleId, "aria-modal": "true", onClick: function (event) { return event.stopPropagation(); }, ref: modalRef, role: variant === exports.EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
+        React__default["default"].createElement(Modal_styles.Frame, { "aria-labelledby": titleId, "aria-modal": "true", onClick: function (event) { return event.stopPropagation(); }, role: variant === exports.EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
             React__default["default"].createElement(Modal_styles.Header, null,
-                React__default["default"].createElement(typography.H2, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
+                React__default["default"].createElement(Modal_styles.Title, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
                 variant !== exports.EModalVariant.destructive && (React__default["default"].createElement(CgButton.CgButton, { "aria-label": labelCancel, circle: true, onClick: onClose, variant: CgButton_types.EButtonVariant.ghost },
                     React__default["default"].createElement(icons.Icons.Cross, { "aria-hidden": "true", height: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.sm2, width: (_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.sm2 })))),
             children,
-            React__default["default"].createElement(Modal_styles.Footer, null,
+            React__default["default"].createElement(Modal_styles.Footer, { rowReverse: variant === exports.EModalVariant.destructive },
+                variant === exports.EModalVariant.destructive && cancelButton,
                 React__default["default"].createElement(CgButton.CgButton, { onClick: onConfirm, variant: CgButton_types.EButtonVariant.primary }, labelCta),
-                variant !== exports.EModalVariant.informational && (React__default["default"].createElement(CgButton.CgButton, { onClick: onClose, ref: cancelButtonRef, variant: CgButton_types.EButtonVariant.secondary }, labelCancel))))), portalRoot);
+                variant === exports.EModalVariant.transactional && cancelButton))), portalRoot);
 };
 
 exports.Modal = Modal;

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

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

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
+var typography = require('@citygross/typography');
 var styled = require('styled-components');
 var Modal = require('./Modal.js');
 
@@ -59,7 +60,11 @@ var Header = styled__default["default"].div(templateObject_3 || (templateObject_
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
 });
-var Footer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"])), function (_a) {
+var Title = styled__default["default"](typography.H2)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var Footer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"])), function (_a) {
+    var rowReverse = _a.rowReverse;
+    return (rowReverse ? 'row-reverse' : 'row');
+}, function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
@@ -68,10 +73,11 @@ var Footer = styled__default["default"].div(templateObject_4 || (templateObject_
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.lg;
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.Footer = Footer;
 exports.Frame = Frame;
 exports.Header = Header;
 exports.Overlay = Overlay;
+exports.Title = Title;
 //# sourceMappingURL=Modal.styles.js.map

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

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

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var AddressBlock = require('./components/AddressBlock/AddressBlock.js');
 var Accordion = require('./components/Accordion/Accordion.js');
 var AlertBox = require('./components/AlertBox/AlertBox.js');
+var AvailabilityLabel = require('./components/AvailabilityLabel/AvailabilityLabel.js');
 var BackButton = require('./components/BackButton/BackButton.js');
 var BackgroundImage = require('./components/BackgroundImage/BackgroundImage.js');
 var Badge = require('./components/Badge/Badge.js');
@@ -115,6 +116,7 @@ Object.defineProperty(exports, 'EAlertBoxVariant', {
 	enumerable: true,
 	get: function () { return AlertBox.EAlertBoxVariant; }
 });
+exports.AvailabilityLabel = AvailabilityLabel.AvailabilityLabel;
 exports.BackButton = BackButton.BackButton;
 exports.BackgroundImage = BackgroundImage.BackgroundImage;
 exports.Badge = Badge.Badge;

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

@@ -5,6 +5,7 @@ import '@citygross/design-tokens';
 import '@citygross/icons';
 import '../Accordion/Accordion.styles.js';
 import '../AlertBox/AlertBox.js';
+import '../AvailabilityLabel/AvailabilityLabel.styles.js';
 import '../BackButton/BackButton.styles.js';
 import '../BackgroundImage/BackgroundImage.styles.js';
 import '../Badge/Badge.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/AvailabilityLabel/AvailabilityLabel.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { TextTypes, BodyText } from '@citygross/typography';
+import { Root, Dot } from './AvailabilityLabel.styles.js';
+
+var AvailabilityLabel = function (_a) {
+    var label = _a.label, _b = _a.textSize, textSize = _b === void 0 ? TextTypes.TextSize.EXTRASMALL : _b;
+    return (React.createElement(Root, null,
+        React.createElement(Dot, null),
+        React.createElement(BodyText, { size: textSize }, label)));
+};
+
+export { AvailabilityLabel };
+//# sourceMappingURL=AvailabilityLabel.js.map

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

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

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

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  margin-top: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var Dot = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: ", ";\n"], ["\n  width: ", "px;\n  height: ", "px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs1; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs1; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellow; });
+var templateObject_1, templateObject_2;
+
+export { Dot, Root };
+//# sourceMappingURL=AvailabilityLabel.styles.js.map

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

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

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

@@ -3,6 +3,7 @@ import Skeleton from 'react-loading-skeleton';
 import { Fieldset } from '../Fieldset/Fieldset.js';
 import { Checkbox } from '../FormElements/Checkbox/Checkbox.js';
 import { PriceStripe } from '../PriceStripe/PriceStripe.js';
+import { AvailabilityLabel } from '../AvailabilityLabel/AvailabilityLabel.js';
 import { ProductHeader, EProductHeader } from '../ProductHeader/ProductHeader.js';
 import { ListItemContainer, ListLeft, ListImageContainer, ListImage, ItemInformationContainer, VisuallyHiddenLegend, CheckboxContainer, ListRight } from './ListItem.styles.js';
 import { EPriceSize, EPriceVariant } from '../PriceTag/PriceTag.types.js';
@@ -13,7 +14,8 @@ var EListItemAlignment;
     EListItemAlignment["TOP"] = "flex-start";
 })(EListItemAlignment || (EListItemAlignment = {}));
 var ListItem = function (_a) {
-    var _b = _a.alignment, alignment = _b === void 0 ? EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
+    var _b;
+    var _c = _a.alignment, alignment = _c === void 0 ? EListItemAlignment.CENTER : _c, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, checkboxLegendLabel = _a.checkboxLegendLabel, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _d = _a.loading, loading = _d === void 0 ? false : _d, _e = _a.showPriceStripe, showPriceStripe = _e === void 0 ? false : _e, smallSkeleton = _a.smallSkeleton;
     return (React.createElement(ListItemContainer, null,
         React.createElement(ListLeft, { alignment: alignment },
             React.createElement(ListImageContainer, { isSmall: isSmall },
@@ -34,6 +36,7 @@ var ListItem = function (_a) {
                     checkboxes && checkboxes.length > 0 && (React.createElement(Skeleton, { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React.createElement(Fragment, null,
                     showPriceStripe && (React.createElement(PriceStripe, { size: EPriceSize.SMALL, variant: EPriceVariant.PRIO })),
                     React.createElement(ProductHeader, { location: EProductHeader.LIST_ITEM, subtitle: item === null || item === void 0 ? void 0 : item.subtitle, title: item === null || item === void 0 ? void 0 : item.name }),
+                    ((_b = item === null || item === void 0 ? void 0 : item.status) === null || _b === void 0 ? void 0 : _b.label) && (React.createElement(AvailabilityLabel, { label: item.status.label, textSize: item.status.textSize })),
                     checkboxes && checkboxes.length > 0 && (React.createElement(Fieldset, null,
                         checkboxLegendLabel && (React.createElement(VisuallyHiddenLegend, null, checkboxLegendLabel)),
                         React.createElement(CheckboxContainer, null, checkboxes.map(function (checkbox, index) {

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

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

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

@@ -2,10 +2,9 @@ import React, { useId, useRef, useMemo, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { theme } from '@citygross/design-tokens';
 import { Icons } from '@citygross/icons';
-import { H2 } from '@citygross/typography';
 import { toggleInert, escapeKeyboardEventHandler } from '@citygross/utils';
 import { CgButton } from '../CgButton/CgButton.js';
-import { Overlay, Frame, Header, Footer } from './Modal.styles.js';
+import { Overlay, Frame, Header, Title, Footer } from './Modal.styles.js';
 import { EButtonVariant } from '../CgButton/CgButton.types.js';
 
 var EModalSize;
@@ -30,8 +29,6 @@ var Modal = function (_a) {
     var _b, _c, _d;
     var children = _a.children, inertSelectors = _a.inertSelectors, _e = _a.labelCancel, labelCancel = _e === void 0 ? 'Avbryt' : _e, _f = _a.labelCta, labelCta = _f === void 0 ? 'Okej' : _f, _g = _a.noOverlay, noOverlay = _g === void 0 ? false : _g, onClose = _a.onClose, onConfirm = _a.onConfirm, portalHostSelector = _a.portalHostSelector, _h = _a.size, size = _h === void 0 ? EModalSize.medium : _h, title = _a.title, variant = _a.variant;
     var titleId = useId();
-    var modalRef = useRef(null);
-    var cancelButtonRef = useRef(null);
     var previouslyFocusedElement = useRef(null);
     var portalRoot = useMemo(function () { return getPortalRoot(portalHostSelector); }, [portalHostSelector]);
     useEffect(function () {
@@ -56,14 +53,6 @@ var Modal = function (_a) {
             return escapeKeyboardEventHandler({ event: event, onEscape: onClose });
         };
         document.addEventListener('keydown', handleEscape);
-        requestAnimationFrame(function () {
-            var _a, _b;
-            if (variant === EModalVariant.destructive) {
-                (_a = cancelButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                return;
-            }
-            (_b = modalRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        });
         return function () {
             restoreInert();
             body.style.overflow = previousBodyOverflow;
@@ -73,19 +62,21 @@ var Modal = function (_a) {
                 previouslyFocusedElement.current.focus();
             }
         };
-    }, [inertSelectors, onClose, variant]);
+    }, [inertSelectors, onClose]);
     if (!portalRoot)
         return null;
+    var cancelButton = (React.createElement(CgButton, { onClick: onClose, variant: EButtonVariant.secondary }, labelCancel));
     return createPortal(React.createElement(Overlay, { noOverlay: noOverlay, onClick: onClose },
-        React.createElement(Frame, { "aria-labelledby": titleId, "aria-modal": "true", onClick: function (event) { return event.stopPropagation(); }, ref: modalRef, role: variant === EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
+        React.createElement(Frame, { "aria-labelledby": titleId, "aria-modal": "true", onClick: function (event) { return event.stopPropagation(); }, role: variant === EModalVariant.destructive ? 'alertdialog' : 'dialog', size: size },
             React.createElement(Header, null,
-                React.createElement(H2, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
+                React.createElement(Title, { color: (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.darkest, id: titleId }, title),
                 variant !== EModalVariant.destructive && (React.createElement(CgButton, { "aria-label": labelCancel, circle: true, onClick: onClose, variant: EButtonVariant.ghost },
                     React.createElement(Icons.Cross, { "aria-hidden": "true", height: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.sm2, width: (_d = theme.spacings) === null || _d === void 0 ? void 0 : _d.sm2 })))),
             children,
-            React.createElement(Footer, null,
+            React.createElement(Footer, { rowReverse: variant === EModalVariant.destructive },
+                variant === EModalVariant.destructive && cancelButton,
                 React.createElement(CgButton, { onClick: onConfirm, variant: EButtonVariant.primary }, labelCta),
-                variant !== EModalVariant.informational && (React.createElement(CgButton, { onClick: onClose, ref: cancelButtonRef, variant: EButtonVariant.secondary }, labelCancel))))), portalRoot);
+                variant === EModalVariant.transactional && cancelButton))), portalRoot);
 };
 
 export { EModalSize, EModalVariant, Modal };

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

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

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

@@ -1,4 +1,5 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import { H2 } from '@citygross/typography';
 import styled from 'styled-components';
 import { EModalSize } from './Modal.js';
 
@@ -51,7 +52,11 @@ var Header = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateOb
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
 });
-var Footer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"])), function (_a) {
+var Title = styled(H2)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+var Footer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  gap: ", "px;\n  margin-top: ", "px;\n  width: 100%;\n\n  > * {\n    flex: 1 1 0;\n    min-width: 0;\n  }\n"])), function (_a) {
+    var rowReverse = _a.rowReverse;
+    return (rowReverse ? 'row-reverse' : 'row');
+}, function (_a) {
     var _b;
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm;
@@ -60,7 +65,7 @@ var Footer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateOb
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.lg;
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
-export { Footer, Frame, Header, Overlay };
+export { Footer, Frame, Header, Overlay, Title };
 //# sourceMappingURL=Modal.styles.js.map

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

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

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

@@ -1,6 +1,7 @@
 export { AddressBlock } from './components/AddressBlock/AddressBlock.js';
 export { Accordion } from './components/Accordion/Accordion.js';
 export { AlertBox, EAlertBoxVariant } from './components/AlertBox/AlertBox.js';
+export { AvailabilityLabel } from './components/AvailabilityLabel/AvailabilityLabel.js';
 export { BackButton } from './components/BackButton/BackButton.js';
 export { BackgroundImage } from './components/BackgroundImage/BackgroundImage.js';
 export { Badge } from './components/Badge/Badge.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.16.26",
+  "version": "0.17.0",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "705ad01b06d115e22f11761eda44db1a4637e26d"
+  "gitHead": "b5b914cabeadacbc80b22e4a49250e918ccb2a73"
 }