@citygross/components 0.8.117 → 0.8.118

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

@@ -1,11 +1,3 @@
-import React from 'react';
-export declare type TQuantitySelector = {
-    onAdd: () => void;
-    onSubtract: () => void;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    maxValue: number;
-    value: number;
-    inCart?: boolean;
-    onBlur: () => void;
-};
-export declare function QuantitySelector({ onAdd, onSubtract, onChange, maxValue, value, onBlur }: TQuantitySelector): JSX.Element;
+/// <reference types="react" />
+import { TQuantitySelector } from './QuantitySelector.types';
+export declare function QuantitySelector({ maxQuantity, onAdd, onBlur, onChange, onSubtract, productName, quantity, size }: TQuantitySelector): JSX.Element;

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

@@ -1,11 +1,13 @@
-declare type TQuantityButton = {
-    direction: 'left' | 'right';
+import { TQuantitySelector } from './QuantitySelector.types';
+declare type TContainer = Pick<TQuantitySelector, 'size'>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TContainer, never>;
+declare type TStepButton = {
+    direction: 'add' | 'subtract';
 };
-declare type TQuanityInput = {
-    customFocus: boolean;
+export declare const StepButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TStepButton, never>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+declare type TInput = {
+    isMaxQuantity?: boolean;
 };
-export declare const QuantitySelectorContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const QuantityButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TQuantityButton, never>;
-export declare const QuantityInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TQuanityInput, never>;
-export declare const IconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TInput, never>;
 export {};

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare enum EQuantitySelectorSize {
+    dynamic = "dynamic",
+    small = "small",
+    large = "large"
+}
+export declare type TQuantitySelector = {
+    maxQuantity: number;
+    onAdd: () => void;
+    onBlur: () => void;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onSubtract: () => void;
+    productName?: string;
+    quantity: number;
+    size?: EQuantitySelectorSize;
+};
+export declare type TQuantitySelectorSizeAttributes = {
+    fontSize?: number;
+    height?: number;
+};

package/build/@types/helpers/quantity-selector.d.ts

@@ -0,0 +1,2 @@
+import { EQuantitySelectorSize, TQuantitySelectorSizeAttributes } from '../components/QuantitySelector/QuantitySelector.types';
+export declare const getQuantitySelectorSizeAttributes: (size?: EQuantitySelectorSize) => TQuantitySelectorSizeAttributes;

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

@@ -59,6 +59,7 @@ export * from './components/PriceTag/PriceTag.types';
 export * from './components/ProductHeader/ProductHeader';
 export * from './components/ProgressBar/ProgressBar';
 export * from './components/QuantitySelector/QuantitySelector';
+export * from './components/QuantitySelector/QuantitySelector.types';
 export * from './components/RadioBox';
 export * from './components/RadioGroup';
 export * from './components/RadioListItem/RadioListItem';

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

@@ -76,6 +76,7 @@ require('../PriceTag/PriceTag.styles.js');
 require('../ProductHeader/ProductHeader.js');
 require('../ProgressBar/ProgressBar.styled.js');
 require('../QuantitySelector/QuantitySelector.styles.js');
+require('../QuantitySelector/QuantitySelector.types.js');
 require('../RadioBox/RadioBoxItem.styles.js');
 require('../RadioBox/RadioBoxList.styles.js');
 require('../RadioGroup/RadioGroup.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/QuantitySelector/QuantitySelector.js

@@ -3,48 +3,45 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var QuantitySelector_styles = require('./QuantitySelector.styles.js');
 var icons = require('@citygross/icons');
+var QuantitySelector_styles = require('./QuantitySelector.styles.js');
+var designTokens = require('@citygross/design-tokens');
+var QuantitySelector_types = require('./QuantitySelector.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function QuantitySelector(_a) {
-    var onAdd = _a.onAdd, onSubtract = _a.onSubtract, onChange = _a.onChange, maxValue = _a.maxValue, value = _a.value, onBlur = _a.onBlur;
-    var _b = React.useState(false), customFocus = _b[0], setCustomFocus = _b[1];
-    var inputRef = React.useRef(null);
-    return (React__default["default"].createElement(QuantitySelector_styles.QuantitySelectorContainer, null,
-        React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
-            React__default["default"].createElement(QuantitySelector_styles.IconContainer, null,
-                React__default["default"].createElement(icons.Icons.Minus, { width: 16, height: 16 }))),
-        React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { customFocus: customFocus, max: maxValue, value: value, ref: inputRef, type: "number", pattern: "[0-9]*", onMouseDown: function () {
-                setCustomFocus(true);
-            }, onClick: function () {
-                if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
-                    inputRef.current.select();
-                }
-            }, onFocus: function () {
-                if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
-                    inputRef.current.select();
-                }
-            }, onKeyDown: function (event) {
-                if (event.key === ',' || event.key === '.') {
-                    event.preventDefault();
-                }
-                if (event.key === 'Enter' || event.key === 'Escape') {
-                    event.currentTarget.blur();
-                }
-            }, onBlur: function () {
-                onBlur && onBlur();
-                setCustomFocus(false);
-            }, onChange: function (e) {
-                console.log(e.target.value);
-                onChange(e);
-            } }),
-        React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: "right", disabled: value >= maxValue, onClick: onAdd, tabIndex: -1 },
-            React__default["default"].createElement(QuantitySelector_styles.IconContainer, null,
-                React__default["default"].createElement(icons.Icons.Plus, { width: 16, height: 16 })))));
+    var _b, _c, _d, _e;
+    var maxQuantity = _a.maxQuantity, onAdd = _a.onAdd, onBlur = _a.onBlur, onChange = _a.onChange, onSubtract = _a.onSubtract, productName = _a.productName, quantity = _a.quantity, _f = _a.size, size = _f === void 0 ? QuantitySelector_types.EQuantitySelectorSize.large : _f;
+    var _g = React.useState(false), isFocused = _g[0], setIsFocused = _g[1];
+    var disabledAdd = quantity >= maxQuantity;
+    var disabledSubtract = quantity <= 0;
+    var handleBlur = function () {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === ',' ||
+            e.key === '.' ||
+            (e.currentTarget.value.length >= 2 && /^[0-9]$/.test(e.key))) {
+            e.preventDefault();
+        }
+        if (e.key === 'Enter' || e.key === 'Escape') {
+            e.currentTarget.blur();
+        }
+    };
+    return (React__default["default"].createElement(QuantitySelector_styles.Container, { size: size },
+        React__default["default"].createElement(QuantitySelector_styles.StepButton, { "aria-label": "Minska antal ".concat(productName || ''), direction: "subtract", disabled: disabledSubtract, onClick: onSubtract },
+            React__default["default"].createElement(icons.Icons.Minus, { color: disabledSubtract
+                    ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder
+                    : (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.darkest, height: 16, width: 16 })),
+        React__default["default"].createElement(QuantitySelector_styles.Label, null,
+            quantity === maxQuantity && !isFocused && (React__default["default"].createElement("span", { "aria-label": "Max antal ".concat(maxQuantity), "aria-live": "polite", role: "status" }, "Max")),
+            React__default["default"].createElement(QuantitySelector_styles.Input, { "aria-label": "Ange antal", id: "quantity-input", inputMode: "numeric", isMaxQuantity: quantity === maxQuantity && !isFocused, max: maxQuantity, min: 0, onBlur: handleBlur, onChange: function (e) { return onChange(e); }, onFocus: function () { return setIsFocused(true); }, onKeyDown: handleKeyDown, pattern: "[0-9]*", type: "number", value: quantity })),
+        React__default["default"].createElement(QuantitySelector_styles.StepButton, { "aria-label": "\u00D6ka antal ".concat(productName || ''), direction: "add", disabled: disabledAdd, onClick: onAdd },
+            React__default["default"].createElement(icons.Icons.Plus, { color: disabledAdd ? (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.placeholder : (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.darkest, height: 16, width: 16 }))));
 }
 
 exports.QuantitySelector = QuantitySelector;

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

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

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

@@ -4,26 +4,43 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
-var global_styles = require('../../shared/global.styles.js');
+var designTokens = require('@citygross/design-tokens');
+var QuantitySelector_types = require('./QuantitySelector.types.js');
+var quantitySelector = require('../../helpers/quantity-selector.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var quantityButton = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; });
-var border = styled.css(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
-var borderRadiusLeft = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-right: none;\n"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-right: none;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
-var borderRadiusRight = styled.css(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  border-left: none;\n"], ["\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  border-left: none;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
-var QuantitySelectorContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 40px 48px 40px;\n  height: 40px;\n  background: ", ";\n  width: 128px;\n\n  @media (min-width: ", "px) {\n    grid-template-columns: 32px 40px 32px;\n    width: 104px;\n    height: 32px;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 40px 48px 40px;\n  height: 40px;\n  background: ", ";\n  width: 128px;\n\n  @media (min-width: ", "px) {\n    grid-template-columns: 32px 40px 32px;\n    width: 104px;\n    height: 32px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.transparent; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
-var QuantityButton = styled__default["default"].button(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, quantityButton, border, function (props) {
-    return props.direction === 'left' ? borderRadiusLeft : borderRadiusRight;
+var _a, _b, _c, _d, _e, _f, _g, _h;
+var border = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), (_a = designTokens.theme.palette) === null || _a === void 0 ? void 0 : _a.placeholder);
+var borderRadiusLeft = styled.css(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-right: none;\n"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-right: none;\n"])), (_b = designTokens.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small, (_c = designTokens.theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.small);
+var borderRadiusRight = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  border-left: none;\n"], ["\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  border-left: none;\n"])), (_d = designTokens.theme.attributes) === null || _d === void 0 ? void 0 : _d.borderRadius.small, (_e = designTokens.theme.attributes) === null || _e === void 0 ? void 0 : _e.borderRadius.small);
+var Container = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var _b;
+    var size = _a.size;
+    var resolvedSize = size === QuantitySelector_types.EQuantitySelectorSize.dynamic
+        ? QuantitySelector_types.EQuantitySelectorSize.small
+        : size;
+    var _c = quantitySelector.getQuantitySelectorSizeAttributes(resolvedSize), fontSize = _c.fontSize, height = _c.height;
+    var largeSize = quantitySelector.getQuantitySelectorSizeAttributes(QuantitySelector_types.EQuantitySelectorSize.large);
+    return styled.css(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n      display: grid;\n      font-size: ", "px;\n      grid-template-columns: ", "px 1fr ", "px;\n      height: ", "px;\n\n      ", "\n    "], ["\n      display: grid;\n      font-size: ", "px;\n      grid-template-columns: ", "px 1fr ", "px;\n      height: ", "px;\n\n      ", "\n    "])), fontSize, height, height, height, size === QuantitySelector_types.EQuantitySelectorSize.dynamic && styled.css(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n          @media (max-width: ", "px) {\n            font-size: ", "px;\n            grid-template-columns: ", "px 1fr ", "px;\n            height: ", "px;\n          }\n        "], ["\n          @media (max-width: ", "px) {\n            font-size: ", "px;\n            grid-template-columns: ", "px 1fr ", "px;\n            height: ", "px;\n          }\n        "])), (_b = designTokens.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.sm, largeSize.fontSize, largeSize.height, largeSize.height, largeSize.height));
 });
-var QuantityInput = styled__default["default"].input(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  ", "\n  z-index: 1;\n  text-align: center;\n  border-radius: 0;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"], ["\n  ", "\n  z-index: 1;\n  text-align: center;\n  border-radius: 0;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"])), border, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; }, function (props) { return !props.customFocus && global_styles.focusVisible; });
-var IconContainer = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  display: grid;\n  place-content: center;\n"], ["\n  display: grid;\n  place-content: center;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var StepButton = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  ", "\n  ", "\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  background-color: ", ";\n  ", "\n  ", "\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), (_f = designTokens.theme.palette) === null || _f === void 0 ? void 0 : _f.white, border, function (_a) {
+    var direction = _a.direction;
+    return direction === 'subtract'
+        ? borderRadiusLeft
+        : borderRadiusRight;
+}, (_g = designTokens.theme.palette) === null || _g === void 0 ? void 0 : _g.lightest, (_h = designTokens.theme.palette) === null || _h === void 0 ? void 0 : _h.light);
+var Label = styled__default["default"].label(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  ", "\n  border-radius: 0;\n  cursor: pointer;\n  text-align: center;\n"], ["\n  ", "\n  border-radius: 0;\n  cursor: pointer;\n  text-align: center;\n"])), border);
+var Input = styled__default["default"].input(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  border: none;\n  height: 100%;\n  text-align: center;\n  width: ", ";\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n"], ["\n  border: none;\n  height: 100%;\n  text-align: center;\n  width: ", ";\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n"])), function (_a) {
+    var isMaxQuantity = _a.isMaxQuantity;
+    return (isMaxQuantity ? 'max-content' : '100%');
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
-exports.IconContainer = IconContainer;
-exports.QuantityButton = QuantityButton;
-exports.QuantityInput = QuantityInput;
-exports.QuantitySelectorContainer = QuantitySelectorContainer;
+exports.Container = Container;
+exports.Input = Input;
+exports.Label = Label;
+exports.StepButton = StepButton;
 //# sourceMappingURL=QuantitySelector.styles.js.map

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

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

package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.types.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.EQuantitySelectorSize = void 0;
+(function (EQuantitySelectorSize) {
+    EQuantitySelectorSize["dynamic"] = "dynamic";
+    EQuantitySelectorSize["small"] = "small";
+    EQuantitySelectorSize["large"] = "large";
+})(exports.EQuantitySelectorSize || (exports.EQuantitySelectorSize = {}));
+//# sourceMappingURL=QuantitySelector.types.js.map

package/build/cjs/components/src/components/QuantitySelector/QuantitySelector.types.js.map

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

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

@@ -76,6 +76,7 @@ require('../PriceTag/PriceTag.styles.js');
 require('../ProductHeader/ProductHeader.js');
 require('../ProgressBar/ProgressBar.styled.js');
 require('../QuantitySelector/QuantitySelector.styles.js');
+require('../QuantitySelector/QuantitySelector.types.js');
 require('../RadioBox/RadioBoxItem.styles.js');
 require('../RadioBox/RadioBoxList.styles.js');
 require('../RadioGroup/RadioGroup.styles.js');

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

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

package/build/cjs/components/src/helpers/quantity-selector.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@citygross/design-tokens');
+var QuantitySelector_types = require('../components/QuantitySelector/QuantitySelector.types.js');
+
+var getQuantitySelectorSizeAttributes = function (size) {
+    var _a, _b, _c, _d, _e, _f;
+    switch (size) {
+        case QuantitySelector_types.EQuantitySelectorSize.small:
+            return {
+                fontSize: (_b = (_a = designTokens.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s2,
+                height: (_c = designTokens.theme.spacings) === null || _c === void 0 ? void 0 : _c.lg
+            };
+        case QuantitySelector_types.EQuantitySelectorSize.large:
+            return {
+                fontSize: (_e = (_d = designTokens.theme.typography) === null || _d === void 0 ? void 0 : _d.size) === null || _e === void 0 ? void 0 : _e.s2,
+                height: (_f = designTokens.theme.spacings) === null || _f === void 0 ? void 0 : _f.xl
+            };
+        default:
+            return {};
+    }
+};
+
+exports.getQuantitySelectorSizeAttributes = getQuantitySelectorSizeAttributes;
+//# sourceMappingURL=quantity-selector.js.map

package/build/cjs/components/src/helpers/quantity-selector.js.map

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

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

@@ -66,6 +66,7 @@ var PriceTag_types = require('./components/PriceTag/PriceTag.types.js');
 var ProductHeader = require('./components/ProductHeader/ProductHeader.js');
 var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
 var QuantitySelector = require('./components/QuantitySelector/QuantitySelector.js');
+var QuantitySelector_types = require('./components/QuantitySelector/QuantitySelector.types.js');
 var RadioBoxItem = require('./components/RadioBox/RadioBoxItem.js');
 var RadioBoxList = require('./components/RadioBox/RadioBoxList.js');
 var RadioGroup = require('./components/RadioGroup/RadioGroup.js');
@@ -218,6 +219,10 @@ Object.defineProperty(exports, 'EProductHeader', {
 exports.ProductHeader = ProductHeader.ProductHeader;
 exports.ProgressBar = ProgressBar.ProgressBar;
 exports.QuantitySelector = QuantitySelector.QuantitySelector;
+Object.defineProperty(exports, 'EQuantitySelectorSize', {
+	enumerable: true,
+	get: function () { return QuantitySelector_types.EQuantitySelectorSize; }
+});
 exports.RadioBoxItem = RadioBoxItem.RadioBoxItem;
 exports.RadioBoxList = RadioBoxList.RadioBoxList;
 exports.RadioGroup = RadioGroup.RadioGroup;

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

@@ -72,6 +72,7 @@ import '../PriceTag/PriceTag.styles.js';
 import '../ProductHeader/ProductHeader.js';
 import '../ProgressBar/ProgressBar.styled.js';
 import '../QuantitySelector/QuantitySelector.styles.js';
+import '../QuantitySelector/QuantitySelector.types.js';
 import '../RadioBox/RadioBoxItem.styles.js';
 import '../RadioBox/RadioBoxList.styles.js';
 import '../RadioGroup/RadioGroup.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/QuantitySelector/QuantitySelector.js

@@ -1,42 +1,39 @@
-import React, { useState, useRef } from 'react';
-import { QuantitySelectorContainer, QuantityButton, IconContainer, QuantityInput } from './QuantitySelector.styles.js';
+import React, { useState } from 'react';
 import { Icons } from '@citygross/icons';
+import { Container, StepButton, Label, Input } from './QuantitySelector.styles.js';
+import { theme } from '@citygross/design-tokens';
+import { EQuantitySelectorSize } from './QuantitySelector.types.js';
 
 function QuantitySelector(_a) {
-    var onAdd = _a.onAdd, onSubtract = _a.onSubtract, onChange = _a.onChange, maxValue = _a.maxValue, value = _a.value, onBlur = _a.onBlur;
-    var _b = useState(false), customFocus = _b[0], setCustomFocus = _b[1];
-    var inputRef = useRef(null);
-    return (React.createElement(QuantitySelectorContainer, null,
-        React.createElement(QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
-            React.createElement(IconContainer, null,
-                React.createElement(Icons.Minus, { width: 16, height: 16 }))),
-        React.createElement(QuantityInput, { customFocus: customFocus, max: maxValue, value: value, ref: inputRef, type: "number", pattern: "[0-9]*", onMouseDown: function () {
-                setCustomFocus(true);
-            }, onClick: function () {
-                if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
-                    inputRef.current.select();
-                }
-            }, onFocus: function () {
-                if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
-                    inputRef.current.select();
-                }
-            }, onKeyDown: function (event) {
-                if (event.key === ',' || event.key === '.') {
-                    event.preventDefault();
-                }
-                if (event.key === 'Enter' || event.key === 'Escape') {
-                    event.currentTarget.blur();
-                }
-            }, onBlur: function () {
-                onBlur && onBlur();
-                setCustomFocus(false);
-            }, onChange: function (e) {
-                console.log(e.target.value);
-                onChange(e);
-            } }),
-        React.createElement(QuantityButton, { direction: "right", disabled: value >= maxValue, onClick: onAdd, tabIndex: -1 },
-            React.createElement(IconContainer, null,
-                React.createElement(Icons.Plus, { width: 16, height: 16 })))));
+    var _b, _c, _d, _e;
+    var maxQuantity = _a.maxQuantity, onAdd = _a.onAdd, onBlur = _a.onBlur, onChange = _a.onChange, onSubtract = _a.onSubtract, productName = _a.productName, quantity = _a.quantity, _f = _a.size, size = _f === void 0 ? EQuantitySelectorSize.large : _f;
+    var _g = useState(false), isFocused = _g[0], setIsFocused = _g[1];
+    var disabledAdd = quantity >= maxQuantity;
+    var disabledSubtract = quantity <= 0;
+    var handleBlur = function () {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    };
+    var handleKeyDown = function (e) {
+        if (e.key === ',' ||
+            e.key === '.' ||
+            (e.currentTarget.value.length >= 2 && /^[0-9]$/.test(e.key))) {
+            e.preventDefault();
+        }
+        if (e.key === 'Enter' || e.key === 'Escape') {
+            e.currentTarget.blur();
+        }
+    };
+    return (React.createElement(Container, { size: size },
+        React.createElement(StepButton, { "aria-label": "Minska antal ".concat(productName || ''), direction: "subtract", disabled: disabledSubtract, onClick: onSubtract },
+            React.createElement(Icons.Minus, { color: disabledSubtract
+                    ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder
+                    : (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.darkest, height: 16, width: 16 })),
+        React.createElement(Label, null,
+            quantity === maxQuantity && !isFocused && (React.createElement("span", { "aria-label": "Max antal ".concat(maxQuantity), "aria-live": "polite", role: "status" }, "Max")),
+            React.createElement(Input, { "aria-label": "Ange antal", id: "quantity-input", inputMode: "numeric", isMaxQuantity: quantity === maxQuantity && !isFocused, max: maxQuantity, min: 0, onBlur: handleBlur, onChange: function (e) { return onChange(e); }, onFocus: function () { return setIsFocused(true); }, onKeyDown: handleKeyDown, pattern: "[0-9]*", type: "number", value: quantity })),
+        React.createElement(StepButton, { "aria-label": "\u00D6ka antal ".concat(productName || ''), direction: "add", disabled: disabledAdd, onClick: onAdd },
+            React.createElement(Icons.Plus, { color: disabledAdd ? (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.placeholder : (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.darkest, height: 16, width: 16 }))));
 }
 
 export { QuantitySelector };

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

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

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

@@ -1,18 +1,35 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled, { css } from 'styled-components';
-import { focusVisible } from '../../shared/global.styles.js';
+import { theme } from '@citygross/design-tokens';
+import { EQuantitySelectorSize } from './QuantitySelector.types.js';
+import { getQuantitySelectorSizeAttributes } from '../../helpers/quantity-selector.js';
 
-var quantityButton = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  cursor: pointer;\n  &:disabled {\n    background-color: ", ";\n    opacity: 0.5;\n    cursor: default;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; });
-var border = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
-var borderRadiusLeft = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-right: none;\n"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-right: none;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
-var borderRadiusRight = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  border-left: none;\n"], ["\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  border-left: none;\n"])), function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; });
-var QuantitySelectorContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 40px 48px 40px;\n  height: 40px;\n  background: ", ";\n  width: 128px;\n\n  @media (min-width: ", "px) {\n    grid-template-columns: 32px 40px 32px;\n    width: 104px;\n    height: 32px;\n  }\n"], ["\n  display: grid;\n  grid-template-columns: 40px 48px 40px;\n  height: 40px;\n  background: ", ";\n  width: 128px;\n\n  @media (min-width: ", "px) {\n    grid-template-columns: 32px 40px 32px;\n    width: 104px;\n    height: 32px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.transparent; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.sm; });
-var QuantityButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  ", "\n  ", "\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: ", ";\n  ", "\n  ", "\n  ", "\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, quantityButton, border, function (props) {
-    return props.direction === 'left' ? borderRadiusLeft : borderRadiusRight;
+var _a, _b, _c, _d, _e, _f, _g, _h;
+var border = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid ", ";\n"], ["\n  border: 1px solid ", ";\n"])), (_a = theme.palette) === null || _a === void 0 ? void 0 : _a.placeholder);
+var borderRadiusLeft = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-right: none;\n"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\n  border-right: none;\n"])), (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.small, (_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.small);
+var borderRadiusRight = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  border-left: none;\n"], ["\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\n  border-left: none;\n"])), (_d = theme.attributes) === null || _d === void 0 ? void 0 : _d.borderRadius.small, (_e = theme.attributes) === null || _e === void 0 ? void 0 : _e.borderRadius.small);
+var Container = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
+    var _b;
+    var size = _a.size;
+    var resolvedSize = size === EQuantitySelectorSize.dynamic
+        ? EQuantitySelectorSize.small
+        : size;
+    var _c = getQuantitySelectorSizeAttributes(resolvedSize), fontSize = _c.fontSize, height = _c.height;
+    var largeSize = getQuantitySelectorSizeAttributes(EQuantitySelectorSize.large);
+    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: grid;\n      font-size: ", "px;\n      grid-template-columns: ", "px 1fr ", "px;\n      height: ", "px;\n\n      ", "\n    "], ["\n      display: grid;\n      font-size: ", "px;\n      grid-template-columns: ", "px 1fr ", "px;\n      height: ", "px;\n\n      ", "\n    "])), fontSize, height, height, height, size === EQuantitySelectorSize.dynamic && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          @media (max-width: ", "px) {\n            font-size: ", "px;\n            grid-template-columns: ", "px 1fr ", "px;\n            height: ", "px;\n          }\n        "], ["\n          @media (max-width: ", "px) {\n            font-size: ", "px;\n            grid-template-columns: ", "px 1fr ", "px;\n            height: ", "px;\n          }\n        "])), (_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.sm, largeSize.fontSize, largeSize.height, largeSize.height, largeSize.height));
 });
-var QuantityInput = styled.input(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  z-index: 1;\n  text-align: center;\n  border-radius: 0;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"], ["\n  ", "\n  z-index: 1;\n  text-align: center;\n  border-radius: 0;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n  outline: none;\n  ", "\n"])), border, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertBlue; }, function (props) { return !props.customFocus && focusVisible; });
-var IconContainer = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: grid;\n  place-content: center;\n"], ["\n  display: grid;\n  place-content: center;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+var StepButton = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  ", "\n  ", "\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"], ["\n  background-color: ", ";\n  ", "\n  ", "\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    cursor: default;\n  }\n"])), (_f = theme.palette) === null || _f === void 0 ? void 0 : _f.white, border, function (_a) {
+    var direction = _a.direction;
+    return direction === 'subtract'
+        ? borderRadiusLeft
+        : borderRadiusRight;
+}, (_g = theme.palette) === null || _g === void 0 ? void 0 : _g.lightest, (_h = theme.palette) === null || _h === void 0 ? void 0 : _h.light);
+var Label = styled.label(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n  border-radius: 0;\n  cursor: pointer;\n  text-align: center;\n"], ["\n  ", "\n  border-radius: 0;\n  cursor: pointer;\n  text-align: center;\n"])), border);
+var Input = styled.input(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border: none;\n  height: 100%;\n  text-align: center;\n  width: ", ";\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n"], ["\n  border: none;\n  height: 100%;\n  text-align: center;\n  width: ", ";\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  -moz-appearance: textfield;\n  appearance: textfield;\n"])), function (_a) {
+    var isMaxQuantity = _a.isMaxQuantity;
+    return (isMaxQuantity ? 'max-content' : '100%');
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
 
-export { IconContainer, QuantityButton, QuantityInput, QuantitySelectorContainer };
+export { Container, Input, Label, StepButton };
 //# sourceMappingURL=QuantitySelector.styles.js.map

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

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

package/build/es/components/src/components/QuantitySelector/QuantitySelector.types.js

@@ -0,0 +1,9 @@
+var EQuantitySelectorSize;
+(function (EQuantitySelectorSize) {
+    EQuantitySelectorSize["dynamic"] = "dynamic";
+    EQuantitySelectorSize["small"] = "small";
+    EQuantitySelectorSize["large"] = "large";
+})(EQuantitySelectorSize || (EQuantitySelectorSize = {}));
+
+export { EQuantitySelectorSize };
+//# sourceMappingURL=QuantitySelector.types.js.map

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

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

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

@@ -72,6 +72,7 @@ import '../PriceTag/PriceTag.styles.js';
 import '../ProductHeader/ProductHeader.js';
 import '../ProgressBar/ProgressBar.styled.js';
 import '../QuantitySelector/QuantitySelector.styles.js';
+import '../QuantitySelector/QuantitySelector.types.js';
 import '../RadioBox/RadioBoxItem.styles.js';
 import '../RadioBox/RadioBoxList.styles.js';
 import '../RadioGroup/RadioGroup.styles.js';

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

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

package/build/es/components/src/helpers/quantity-selector.js

@@ -0,0 +1,23 @@
+import { theme } from '@citygross/design-tokens';
+import { EQuantitySelectorSize } from '../components/QuantitySelector/QuantitySelector.types.js';
+
+var getQuantitySelectorSizeAttributes = function (size) {
+    var _a, _b, _c, _d, _e, _f;
+    switch (size) {
+        case EQuantitySelectorSize.small:
+            return {
+                fontSize: (_b = (_a = theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s2,
+                height: (_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.lg
+            };
+        case EQuantitySelectorSize.large:
+            return {
+                fontSize: (_e = (_d = theme.typography) === null || _d === void 0 ? void 0 : _d.size) === null || _e === void 0 ? void 0 : _e.s2,
+                height: (_f = theme.spacings) === null || _f === void 0 ? void 0 : _f.xl
+            };
+        default:
+            return {};
+    }
+};
+
+export { getQuantitySelectorSizeAttributes };
+//# sourceMappingURL=quantity-selector.js.map

package/build/es/components/src/helpers/quantity-selector.js.map

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

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

@@ -62,6 +62,7 @@ export { EPriceSize, EPriceVariant } from './components/PriceTag/PriceTag.types.
 export { EProductHeader, ProductHeader } from './components/ProductHeader/ProductHeader.js';
 export { ProgressBar } from './components/ProgressBar/ProgressBar.js';
 export { QuantitySelector } from './components/QuantitySelector/QuantitySelector.js';
+export { EQuantitySelectorSize } from './components/QuantitySelector/QuantitySelector.types.js';
 export { RadioBoxItem } from './components/RadioBox/RadioBoxItem.js';
 export { RadioBoxList } from './components/RadioBox/RadioBoxList.js';
 export { RadioGroup } from './components/RadioGroup/RadioGroup.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.8.117",
+  "version": "0.8.118",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "241f3a0c92971e0ee22fdff8984246c3f9750b8e"
+  "gitHead": "59b9fc83018e2d1316c418719d5eabfdca70be76"
 }