@citygross/components 0.7.246 → 0.8.0

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

@@ -8,3 +8,4 @@ export declare const CartCardDelete: import("styled-components").StyledComponent
 export declare const PriceContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const MaxWarning: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const MarkingsContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const CartCardTitle: import("styled-components").StyledComponent<"p", import("styled-components").DefaultTheme, {}, never>;

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

@@ -20,5 +20,6 @@ export declare type TCgButton = {
     children?: React.ReactNode;
     disabled?: boolean;
     onClick?: () => void;
+    fullWidth?: boolean;
 };
-export declare const CgButton: ({ size, variant, icon, flexReverse, disabled, onClick, children }: TCgButton) => JSX.Element;
+export declare const CgButton: ({ size, variant, icon, flexReverse, disabled, onClick, children, loading, fullWidth }: TCgButton) => JSX.Element;

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

@@ -7,5 +7,8 @@ export declare type TCgButtonStyleProps = {
     flexReverse?: boolean;
     loading?: boolean;
     isIconOnly?: boolean;
+    fullWidth?: boolean;
 };
 export declare const CgButtonContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TCgButtonStyleProps, never>;
+export declare const CgButtonContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<TCgButtonStyleProps, "flexReverse" | "size" | "loading">, never>;
+export declare const CgButtonLoader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare enum ECouponCodeStatus {
+    Success = "Success",
+    Invalid = "Invalid",
+    Error = "Error",
+    Empty = "Empty"
+}
+declare type TSubmitResult = {
+    status: ECouponCodeStatus;
+    message: string;
+};
+export declare type TCouponCode = {
+    label: string;
+    resetLabel: string;
+    placeholder: string;
+    onSubmit: (value: string) => Promise<TSubmitResult>;
+};
+export declare function CouponCode({ label, resetLabel, placeholder, onSubmit }: TCouponCode): JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { ECouponCodeStatus } from './CouponCode';
+declare type TCouponInput = {
+    customFocus: boolean;
+    ab?: boolean;
+};
+declare type TCouponResultContainer = {
+    status?: ECouponCodeStatus;
+};
+export declare const CouponContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const CouponInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TCouponInput, never>;
+export declare const CouponResultContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCouponResultContainer, never>;
+export declare const CouponResultMessage: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const CouponButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

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

@@ -6,5 +6,6 @@ export declare type TQuantitySelector = {
     maxValue: number;
     value: number;
     inCart?: boolean;
+    onBlur: () => void;
 };
-export declare function QuantitySelector({ onAdd, onSubtract, onChange, maxValue, value, }: TQuantitySelector): JSX.Element;
+export declare function QuantitySelector({ onAdd, onSubtract, onChange, maxValue, value, onBlur }: TQuantitySelector): JSX.Element;

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

@@ -1,7 +1,10 @@
 declare type TQuantityButton = {
     direction: 'left' | 'right';
 };
+declare type TQuanityInput = {
+    customFocus: 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, {}, never>;
+export declare const QuantityInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, TQuanityInput, never>;
 export {};

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

@@ -76,5 +76,7 @@ export * from './components/MaxHeightText/MaxHeightText';
 export * from './components/ToolTipDialog/ToolTipDialog';
 export * from './components/CartSubTotal/CartSubTotal';
 export * from './components/CgButton/CgButton';
+export * from './components/CouponCode/CouponCode';
+export * from './components/CgButton/CgButton';
 export * from './components/CartCardLabel/CartCardLabel';
 export * from './components/CartCard/CartCard';

package/build/cjs/_virtual/_tslib.js

@@ -40,6 +40,44 @@ function __rest(s, e) {
     return t;
 }
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
 function __makeTemplateObject(cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -49,6 +87,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+exports.__awaiter = __awaiter;
+exports.__generator = __generator;
 exports.__makeTemplateObject = __makeTemplateObject;
 exports.__rest = __rest;
 //# sourceMappingURL=_tslib.js.map

package/build/cjs/_virtual/_tslib.js.map

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

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

@@ -92,6 +92,7 @@ require('../MaxHeightText/styles.js');
 require('../ToolTipDialog/ToolTipDialog.styles.js');
 require('../CartSubTotal/CartSubTotal.js');
 require('../CgButton/CgButton.js');
+require('../CouponCode/CouponCode.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('../CartCard/CartCard.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/CartCard/CartCard.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var fallback_grocery = require('./assets/fallback_grocery.svg.js');
 var CartCard_styles = require('./CartCard.styles.js');
-var typography = require('@citygross/typography');
 var icons = require('@citygross/icons');
 var CgButton = require('../CgButton/CgButton.js');
 
@@ -21,7 +20,7 @@ var CartCard = function (_a) {
             React__default["default"].createElement(CartCard_styles.CartCardInnerTop, null,
                 React__default["default"].createElement(CartCard_styles.CartCardInfo, null,
                     markings && (React__default["default"].createElement(CartCard_styles.MarkingsContainer, null, markings)),
-                    title && React__default["default"].createElement(typography.H3, null, title),
+                    title && React__default["default"].createElement(CartCard_styles.CartCardTitle, null, title),
                     description && description),
                 showDelete && (React__default["default"].createElement("div", null,
                     React__default["default"].createElement(CgButton.CgButton, { onClick: onDelete, variant: CgButton.EButtonVariant.secondary, icon: React__default["default"].createElement(icons.Icons.Trash, { width: 16, height: 16 }) })))),

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

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

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

@@ -10,7 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var CartCardImage = styled__default["default"].img(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 48px;\n  height: 48px;\n"], ["\n  width: 48px;\n  height: 48px;\n"])));
+var CartCardImage = styled__default["default"].img(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  width: 48px;\n  height: 48px;\n  object-fit: contain;\n"], ["\n  width: 48px;\n  height: 48px;\n  object-fit: contain;\n"])));
 var CartCardContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  width: 100%;\n"], ["\n  display: flex;\n  gap: ", "px;\n  align-items: center;\n  width: 100%;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
 var CartCardInfo = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
 var CartCardInnerTop = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
@@ -21,7 +21,8 @@ var MaxWarningAnimate = styled.keyframes(templateObject_8 || (templateObject_8 =
 var PriceContainer = styled__default["default"].div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  position: relative;\n  flex: 1;\n"], ["\n  position: relative;\n  flex: 1;\n"])));
 var MaxWarning = styled__default["default"].div(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  animation: ", " 2s forwards;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: ", ";\n  font-size: ", "px;\n"], ["\n  color: ", ";\n  animation: ", " 2s forwards;\n  position: absolute;\n  top: 0;\n  right: 0;\n  left: 0;\n  bottom: 0;\n  background: ", ";\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertRed; }, MaxWarningAnimate, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
 var MarkingsContainer = styled__default["default"].div(templateObject_11 || (templateObject_11 = _tslib.__makeTemplateObject(["\n  margin-bottom: ", "px;\n"], ["\n  margin-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+var CartCardTitle = styled__default["default"].p(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n  font-weight: ", ";\n  font-size: ", "px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"], ["\n  font-weight: ", ";\n  font-size: ", "px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.medium; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
 
 exports.CartCardContainer = CartCardContainer;
 exports.CartCardImage = CartCardImage;
@@ -29,6 +30,7 @@ exports.CartCardInfo = CartCardInfo;
 exports.CartCardInner = CartCardInner;
 exports.CartCardInnerTop = CartCardInnerTop;
 exports.CartCardPriceContainer = CartCardPriceContainer;
+exports.CartCardTitle = CartCardTitle;
 exports.MarkingsContainer = MarkingsContainer;
 exports.MaxWarning = MaxWarning;
 exports.PriceContainer = PriceContainer;

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

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

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var CgButton_styles = require('./CgButton.styles.js');
+var Spinner = require('../Spinner/Spinner.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,8 +25,8 @@ exports.EButtonVariant = void 0;
     EButtonVariant[EButtonVariant["ghost"] = 4] = "ghost";
 })(exports.EButtonVariant || (exports.EButtonVariant = {}));
 var CgButton = function (_a) {
-    var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children;
-    return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled, onKeyDown: function (event) {
+    var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth;
+    return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, onKeyDown: function (event) {
             if (event.key === 'Enter') {
                 onClick && onClick();
             }
@@ -33,8 +34,11 @@ var CgButton = function (_a) {
             e.preventDefault();
             onClick && onClick();
         } },
-        icon,
-        children));
+        React__default["default"].createElement(CgButton_styles.CgButtonContent, { size: size, flexReverse: flexReverse, loading: loading },
+            icon,
+            children),
+        loading && (React__default["default"].createElement(CgButton_styles.CgButtonLoader, null,
+            React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: 16 })))));
 };
 
 exports.CgButton = CgButton;

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

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

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

@@ -46,12 +46,12 @@ var buttonShadow = function (size, variant) {
             return 'inset 0px -2px 0px rgba(0, 0, 0, 0.15)';
     }
 };
-var CgButtonContainer = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  border-radius: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: ", "px;\n  flex-direction: ", ";\n  font-size  ", ";\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  &:disabled{\n    cursor: default;\n  }\n  &:after{\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n"], ["\n  border-radius: ", "px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: ", "px;\n  flex-direction: ", ";\n  font-size  ", ";\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  &:disabled{\n    cursor: default;\n  }\n  &:after{\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) { return buttonFontSize(props.size, props.theme.typography); }, function (props) {
+var CgButtonContainer = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  ", "\n  &:disabled {\n    cursor: default;\n  }\n  &:after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n"], ["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  ", "\n  &:disabled {\n    cursor: default;\n  }\n  &:after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
     var _a;
     return props.isIconOnly
         ? "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")
         : buttonPadding(props.size, props.theme.spacings);
-}, global_styles.focusVisible, function (props) { return buttonShadow(props.size, props.variant); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
+}, function (props) { return (props === null || props === void 0 ? void 0 : props.fullWidth) && "width: 100%;"; }, global_styles.focusVisible, function (props) { return buttonShadow(props.size, props.variant); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
     switch (props.variant) {
         case CgButton.EButtonVariant.primary:
             return CgPrimary;
@@ -67,7 +67,11 @@ var CgButtonContainer = styled__default["default"].button(templateObject_7 || (t
             return CgPrimary;
     }
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var CgButtonContent = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\ndisplay: flex;\njustify-content: center;\nalign-items: center;\ngap: ", "px;\nflex-direction: ", ";\nfont-size  ", ";\n", ";\n"], ["\ndisplay: flex;\njustify-content: center;\nalign-items: center;\ngap: ", "px;\nflex-direction: ", ";\nfont-size  ", ";\n", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) { return buttonFontSize(props.size, props.theme.typography); }, function (props) { return (props === null || props === void 0 ? void 0 : props.loading) && "opacity: 0"; });
+var CgButtonLoader = styled__default["default"].div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: grid;\n  place-content: center;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\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, templateObject_9;
 
 exports.CgButtonContainer = CgButtonContainer;
+exports.CgButtonContent = CgButtonContent;
+exports.CgButtonLoader = CgButtonLoader;
 //# sourceMappingURL=CgButton.styles.js.map

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

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

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

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var React = require('react');
+var CouponCode_styles = require('./CouponCode.styles.js');
+var CgButton = require('../CgButton/CgButton.js');
+var icons = require('@citygross/icons');
+var designTokens = require('@citygross/design-tokens');
+var Link = require('../Links/Link.js');
+var typography = require('@citygross/typography');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+exports.ECouponCodeStatus = void 0;
+(function (ECouponCodeStatus) {
+    ECouponCodeStatus["Success"] = "Success";
+    ECouponCodeStatus["Invalid"] = "Invalid";
+    ECouponCodeStatus["Error"] = "Error";
+    ECouponCodeStatus["Empty"] = "Empty";
+})(exports.ECouponCodeStatus || (exports.ECouponCodeStatus = {}));
+var CouponResultIcon = function (_a) {
+    var _b, _c, _d;
+    var status = _a.status;
+    switch (status) {
+        case exports.ECouponCodeStatus.Success:
+            return (React__default["default"].createElement(icons.Icons.CheckMark, { color: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.alertGreen, width: 20, height: 20 }));
+        case exports.ECouponCodeStatus.Invalid:
+            return (React__default["default"].createElement(icons.Icons.Cross, { color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertRed, width: 20, height: 20 }));
+        default:
+            return (React__default["default"].createElement(icons.Icons.Alert, { color: (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.alertRed, width: 20, height: 20 }));
+    }
+};
+var initialResult = {
+    status: exports.ECouponCodeStatus.Empty,
+    message: ''
+};
+function CouponCode(_a) {
+    var _this = this;
+    var label = _a.label, resetLabel = _a.resetLabel, placeholder = _a.placeholder, onSubmit = _a.onSubmit;
+    var _b = React.useState(''), value = _b[0], setValue = _b[1];
+    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
+    var _d = React.useState(false), customFocus = _d[0], setCustomFocus = _d[1];
+    var _e = React.useState(initialResult), result = _e[0], setResult = _e[1];
+    var handleSubmit = function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+        var result;
+        return _tslib.__generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setLoading(true);
+                    return [4 /*yield*/, onSubmit(value)];
+                case 1:
+                    result = _a.sent();
+                    setResult(result);
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, (result === null || result === void 0 ? void 0 : result.status) === exports.ECouponCodeStatus.Empty ? (React__default["default"].createElement(CouponCode_styles.CouponContainer, null,
+        React__default["default"].createElement(CouponCode_styles.CouponInput, { type: "text", placeholder: placeholder, value: value, onChange: function (e) { return setValue(e.currentTarget.value); }, onMouseDown: function () {
+                setCustomFocus(true);
+            }, onBlur: function () { return setCustomFocus(false); }, customFocus: customFocus }),
+        React__default["default"].createElement(CouponCode_styles.CouponButtonContainer, null,
+            React__default["default"].createElement(CgButton.CgButton, { variant: CgButton.EButtonVariant.secondary, disabled: loading || !value, onClick: function () { return handleSubmit(); }, size: CgButton.ECgButtonSize.medium, fullWidth: true }, label)))) : (React__default["default"].createElement(CouponCode_styles.CouponResultContainer, { status: result === null || result === void 0 ? void 0 : result.status }, (result === null || result === void 0 ? void 0 : result.status) === exports.ECouponCodeStatus.Success ? (React__default["default"].createElement(CouponCode_styles.CouponResultMessage, null,
+        React__default["default"].createElement(CouponResultIcon, { status: result === null || result === void 0 ? void 0 : result.status }),
+        React__default["default"].createElement("p", null, result === null || result === void 0 ? void 0 :
+            result.message,
+            " ",
+            value))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(CouponCode_styles.CouponResultMessage, null,
+            React__default["default"].createElement(CouponResultIcon, { status: result.status }),
+            React__default["default"].createElement("p", null, result === null || result === void 0 ? void 0 : result.message)),
+        React__default["default"].createElement(Link.Link, { color: "black", size: typography.TextTypes.TextSize.SMALL, textDecoration: "underline", onClick: function () { return setResult(initialResult); } }, resetLabel)))))));
+}
+
+exports.CouponCode = CouponCode;
+//# sourceMappingURL=CouponCode.js.map

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

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

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

@@ -0,0 +1,31 @@
+'use strict';
+
+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 CouponCode = require('./CouponCode.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var CouponContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  width: 100%;\n"], ["\n  display: flex;\n  gap: ", "px;\n  width: 100%;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; });
+var CouponInput = styled__default["default"].input(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  grid-area: 1/1/1/1;\n  border-radius: ", "px;\n  border: 1px solid ", ";\n  background: ", ";\n  padding: ", ";\n  outline: none;\n  background: white;\n  font-size: ", "px;\n  flex: 1;\n  ", "\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n"], ["\n  grid-area: 1/1/1/1;\n  border-radius: ", "px;\n  border: 1px solid ", ";\n  background: ", ";\n  padding: ", ";\n  outline: none;\n  background: white;\n  font-size: ", "px;\n  flex: 1;\n  ", "\n  &:focus-visible {\n    border: 1px solid ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; }, function (props) { var _a, _b; return "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs2, "px"); }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s3; }, function (props) { return !props.customFocus && global_styles.focusVisible; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; });
+var CouponResultContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  padding: ", ";\n  background: ", ";\n  display: flex;\n  height: ", "px;\n  border-radius: ", "px;\n  justify-content: space-between;\n"], ["\n  font-size: ", "px;\n  padding: ", ";\n  background: ", ";\n  display: flex;\n  height: ", "px;\n  border-radius: ", "px;\n  justify-content: space-between;\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s2; }, function (props) { var _a, _b; return "".concat((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.couponContainerPadding, "px ").concat((_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs, "px"); }, function (props) {
+    var _a, _b;
+    return props.status === CouponCode.ECouponCodeStatus.Success
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.greenLight
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.redLight;
+}, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.couponContainerHeight; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var CouponResultMessage = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; });
+var CouponButtonContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  width: ", "px;\n"], ["\n  width: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.couponButtonContainer; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+
+exports.CouponButtonContainer = CouponButtonContainer;
+exports.CouponContainer = CouponContainer;
+exports.CouponInput = CouponInput;
+exports.CouponResultContainer = CouponResultContainer;
+exports.CouponResultMessage = CouponResultMessage;
+//# sourceMappingURL=CouponCode.styles.js.map

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

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

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

@@ -11,12 +11,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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;
+    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];
     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.QuantityButton, { direction: "left", disabled: value <= 0, onClick: onSubtract, tabIndex: -1 },
             React__default["default"].createElement(icons.Icons.Minus, { width: 16, height: 16 })),
-        React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { max: maxValue, value: value, type: "number", onChange: function (e) { return onChange(e); } }),
-        React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: 'right', disabled: value >= maxValue, onClick: onAdd, tabIndex: -1 },
+        React__default["default"].createElement(QuantitySelector_styles.QuantityInput, { customFocus: customFocus, max: maxValue, value: value, type: "number", onMouseDown: function () {
+                setCustomFocus(true);
+            }, onKeyDown: function (event) {
+                if (event.key === 'Enter' || event.key === 'Escape') {
+                    event.currentTarget.blur();
+                }
+            }, onBlur: function () {
+                onBlur && onBlur();
+                setCustomFocus(false);
+            }, onChange: function (e) { return onChange(e); } }),
+        React__default["default"].createElement(QuantitySelector_styles.QuantityButton, { direction: "right", disabled: value >= maxValue, onClick: onAdd, tabIndex: -1 },
             React__default["default"].createElement(icons.Icons.Plus, { width: 16, height: 16 }))));
 }
 

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

@@ -10,13 +10,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var quantityButton = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  &:disabled {\n    background-color: ", ";\n    opacity: 0.5;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:disabled {\n    background-color: ", ";\n    opacity: 0.5;\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  border: 1px solid ", ";"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
+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"], ["\n  border-top-left-radius: ", "px;\n  border-bottom-left-radius: ", "px;\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"], ["\n  border-top-right-radius: ", "px;\n  border-bottom-right-radius: ", "px;\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 QuantityInput = styled__default["default"].input(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n  ", "\n"], ["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n  ", "\n"])), border, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; }, global_styles.focusVisible);
+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 QuantityInput = styled__default["default"].input(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  ", "\n  z-index: 1;\n  border-left: none;\n  border-right: none;\n  text-align: center;\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  border-left: none;\n  border-right: none;\n  text-align: center;\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 templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 exports.QuantityButton = QuantityButton;

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

@@ -92,6 +92,7 @@ require('../MaxHeightText/styles.js');
 require('../ToolTipDialog/ToolTipDialog.styles.js');
 require('../CartSubTotal/CartSubTotal.js');
 require('../CgButton/CgButton.js');
+require('../CouponCode/CouponCode.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('../CartCard/CartCard.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/index.js

@@ -83,6 +83,7 @@ var MaxHeightText = require('./components/MaxHeightText/MaxHeightText.js');
 var ToolTipDialog = require('./components/ToolTipDialog/ToolTipDialog.js');
 var CartSubTotal = require('./components/CartSubTotal/CartSubTotal.js');
 var CgButton = require('./components/CgButton/CgButton.js');
+var CouponCode = require('./components/CouponCode/CouponCode.js');
 var CartCardLabel = require('./components/CartCardLabel/CartCardLabel.js');
 var CartCard = require('./components/CartCard/CartCard.js');
 
@@ -212,6 +213,11 @@ Object.defineProperty(exports, 'ECgButtonSize', {
 	enumerable: true,
 	get: function () { return CgButton.ECgButtonSize; }
 });
+exports.CouponCode = CouponCode.CouponCode;
+Object.defineProperty(exports, 'ECouponCodeStatus', {
+	enumerable: true,
+	get: function () { return CouponCode.ECouponCodeStatus; }
+});
 exports.CartCardLabel = CartCardLabel.CartCardLabel;
 exports.CartCard = CartCard.CartCard;
 //# sourceMappingURL=index.js.map

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

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

package/build/cjs/design-tokens/build/index.js

@@ -119,7 +119,10 @@ var constants = {
     maxHeightFaderHeight: 50,
     paginationButtonWidth: 44,
     cartCardImageSize: 48,
-    toolTipCloseSize: 20
+    toolTipCloseSize: 20,
+    couponContainerHeight: 43,
+    couponButtonContainer: 102,
+    couponContainerPadding: 10
 };
 
 var palette = {