@citygross/components 0.8.114 → 0.8.116

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

@@ -1,19 +1,19 @@
 import React from 'react';
 export declare type TCartCard = {
-    markings?: React.ReactNode;
-    title: string;
     description?: React.ReactNode;
-    secondaryDescription?: React.ReactNode;
-    showDelete?: boolean;
+    image: string;
+    markings?: React.ReactNode;
     maxReachedWarning?: string;
     maxValue?: number;
-    setValue?: (value: number) => void;
-    value?: number;
-    price: React.ReactNode;
-    image: string;
     onDelete?: () => void;
+    price: React.ReactNode;
     quanitytSelector?: React.ReactNode;
+    secondaryDescription?: React.ReactNode;
+    setValue?: (value: number) => void;
+    showDelete?: boolean;
+    title: string;
     titleLineClamp?: number;
     titleLink?: React.ReactNode;
+    value?: number;
 };
-export declare const CartCard: ({ markings, title, description, showDelete, maxReachedWarning, value, price, image, titleLink, onDelete, maxValue, secondaryDescription, quanitytSelector, titleLineClamp, }: TCartCard) => JSX.Element;
+export declare const CartCard: ({ description, image, markings, maxReachedWarning, maxValue, onDelete, price, quanitytSelector, secondaryDescription, showDelete, title, titleLineClamp, titleLink, value }: TCartCard) => JSX.Element;

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

@@ -1,30 +1,12 @@
 import React from 'react';
-export declare enum ECgButtonSize {
-    'small' = 0,
-    'medium' = 1,
-    'large' = 2
-}
-export declare enum EButtonVariant {
-    'primary' = 0,
-    'secondary' = 1,
-    'tertiary' = 2,
-    'prio' = 3,
-    'ghost' = 4
-}
-export declare type TCgButton = {
-    ariaLabel?: string;
-    buttonRef?: React.Ref<HTMLButtonElement>;
+import { EButtonVariant, EButtonSize } from './CgButton.types';
+export declare const CgButton: React.ForwardRefExoticComponent<{
+    boxShadow?: boolean | undefined;
     children?: React.ReactNode;
-    disabled?: boolean;
-    flexReverse?: boolean;
-    fullWidth?: boolean;
-    icon?: React.ReactNode;
-    id?: string;
-    loading?: boolean;
-    onClick?: () => void;
-    round?: boolean;
-    shouldPreventDefault?: boolean;
-    size?: ECgButtonSize;
-    variant?: EButtonVariant;
-};
-export declare const CgButton: ({ ariaLabel, buttonRef, children, disabled, flexReverse, fullWidth, icon, id, loading, onClick, round, shouldPreventDefault, size, variant }: TCgButton) => JSX.Element;
+    circle?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    loading?: boolean | undefined;
+    rounded?: boolean | undefined;
+    size?: EButtonSize | undefined;
+    variant?: EButtonVariant | undefined;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,15 +1 @@
-/// <reference types="react" />
-import { ECgButtonSize, EButtonVariant } from './CgButton';
-export declare type TCgButtonStyleProps = {
-    size?: ECgButtonSize;
-    variant?: EButtonVariant;
-    icon?: React.ReactNode;
-    flexReverse?: boolean;
-    loading?: boolean;
-    isIconOnly?: boolean;
-    fullWidth?: boolean;
-    round?: 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>;
+export declare const Container: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Omit<import("./CgButton.types").TCgButton, "children" | "loading" | "variant"> & import("./CgButton.types").TButtonSizeAttributes & import("./CgButton.types").TButtonVariantAttributes, never>;

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

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+export declare enum EButtonSize {
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+export declare enum EButtonVariant {
+    primary = "primary",
+    secondary = "secondary",
+    tertiary = "tertiary",
+    prio = "prio",
+    ghost = "ghost"
+}
+export declare type TCgButton = {
+    boxShadow?: boolean;
+    children?: React.ReactNode;
+    circle?: boolean;
+    fullWidth?: boolean;
+    loading?: boolean;
+    rounded?: boolean;
+    size?: EButtonSize;
+    variant?: EButtonVariant;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare type TCgButtonStyle = Omit<TCgButton, 'children' | 'loading' | 'variant'> & TButtonSizeAttributes & TButtonVariantAttributes;
+export declare type TButtonSizeAttributes = {
+    fontSize?: number;
+    height?: number;
+    loadingSpinner?: number;
+    paddingX?: number;
+    paddingY?: number;
+};
+export declare type TButtonVariantAttributes = {
+    backgroundActive?: string;
+    backgroundColor?: string;
+    backgroundDisabled?: string;
+    backgroundHover?: string;
+    border?: boolean;
+    fontColor?: string;
+};

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

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

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 export declare type THeader = {
+    children?: ReactNode;
     logoImage?: JSX.Element;
     logOut?: () => void;
     logOutLabel?: string;
-    children?: ReactNode;
-    topLinkLabel: string;
-    topLinkHref?: string;
     lowerContainerMaxWidth?: number;
+    topLinkHref?: string;
+    topLinkLabel: string;
 };
-export declare function Header({ logOut, logOutLabel, topLinkHref, topLinkLabel, logoImage, lowerContainerMaxWidth, children }: THeader): JSX.Element;
+export declare function Header({ children, logoImage, logOut, logOutLabel, lowerContainerMaxWidth, topLinkHref, topLinkLabel }: THeader): JSX.Element;

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { IStepperItem } from '../Stepper/StepperList';
 export declare type TStepperMobile = {
-    steps: IStepperItem[];
+    buttonText: string;
     current: number;
     setCurrent: () => void;
     setPrevious: () => void;
-    buttonText: string;
+    steps: IStepperItem[];
 };
-export declare function StepperMobile({ steps, current, setCurrent, setPrevious, buttonText }: TStepperMobile): JSX.Element;
+export declare const StepperMobile: ({ buttonText, current, setCurrent, setPrevious, steps }: TStepperMobile) => JSX.Element;

package/build/@types/helpers/button.d.ts

@@ -0,0 +1,5 @@
+import { EButtonSize, EButtonVariant, TButtonSizeAttributes, TButtonVariantAttributes } from '../components/CgButton/CgButton.types';
+export declare const getButtonAttributes: (buttonSize?: EButtonSize, buttonVariant?: EButtonVariant) => {
+    sizeAttributes: TButtonSizeAttributes;
+    variantAttributes: TButtonVariantAttributes;
+};

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

@@ -19,6 +19,7 @@ require('@citygross/design-tokens');
 require('../Button/Button.styles.js');
 require('../CartCard/CartCard.styles.js');
 require('../CgButton/CgButton.js');
+require('../CgButton/CgButton.types.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('@citygross/utils');
 require('react-loading-skeleton');

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

@@ -7,23 +7,26 @@ var fallback_grocery = require('./assets/fallback_grocery.svg.js');
 var CartCard_styles = require('./CartCard.styles.js');
 var icons = require('@citygross/icons');
 var CgButton = require('../CgButton/CgButton.js');
+var CgButton_types = require('../CgButton/CgButton.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var CartCard = function (_a) {
-    var markings = _a.markings, title = _a.title, description = _a.description, showDelete = _a.showDelete, maxReachedWarning = _a.maxReachedWarning, value = _a.value, price = _a.price, image = _a.image, titleLink = _a.titleLink, onDelete = _a.onDelete, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, secondaryDescription = _a.secondaryDescription, quanitytSelector = _a.quanitytSelector, _c = _a.titleLineClamp, titleLineClamp = _c === void 0 ? 1 : _c;
+    var description = _a.description, image = _a.image, markings = _a.markings, maxReachedWarning = _a.maxReachedWarning, _b = _a.maxValue, maxValue = _b === void 0 ? 999 : _b, onDelete = _a.onDelete, price = _a.price, quanitytSelector = _a.quanitytSelector, secondaryDescription = _a.secondaryDescription, showDelete = _a.showDelete, title = _a.title, _c = _a.titleLineClamp, titleLineClamp = _c === void 0 ? 1 : _c, titleLink = _a.titleLink, value = _a.value;
     return (React__default["default"].createElement(CartCard_styles.CartCardContainer, null,
         React__default["default"].createElement(CartCard_styles.CartCardImage, { src: image || fallback_grocery }),
         React__default["default"].createElement(CartCard_styles.CartCardInner, null,
             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)),
-                    titleLink || title && (React__default["default"].createElement(CartCard_styles.CartCardTitle, { titleLineClamp: titleLineClamp }, title)),
+                    titleLink ||
+                        (title && (React__default["default"].createElement(CartCard_styles.CartCardTitle, { titleLineClamp: titleLineClamp }, title))),
                     description && description),
                 showDelete && (React__default["default"].createElement(CartCard_styles.CartCardDelete, 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 }) })))),
+                    React__default["default"].createElement(CgButton.CgButton, { onClick: onDelete, variant: CgButton_types.EButtonVariant.secondary },
+                        React__default["default"].createElement(icons.Icons.Trash, { width: 16, height: 16 }))))),
             secondaryDescription && secondaryDescription,
             React__default["default"].createElement(CartCard_styles.CartCardPriceContainer, null,
                 React__default["default"].createElement(CartCard_styles.PriceContainer, null,

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

@@ -2,40 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../_virtual/_tslib.js');
 var React = require('react');
 var CgButton_styles = require('./CgButton.styles.js');
 var Spinner = require('../Spinner/Spinner.js');
+var CgButton_types = require('./CgButton.types.js');
+var button = require('../../helpers/button.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-exports.ECgButtonSize = void 0;
-(function (ECgButtonSize) {
-    ECgButtonSize[ECgButtonSize["small"] = 0] = "small";
-    ECgButtonSize[ECgButtonSize["medium"] = 1] = "medium";
-    ECgButtonSize[ECgButtonSize["large"] = 2] = "large";
-})(exports.ECgButtonSize || (exports.ECgButtonSize = {}));
-exports.EButtonVariant = void 0;
-(function (EButtonVariant) {
-    EButtonVariant[EButtonVariant["primary"] = 0] = "primary";
-    EButtonVariant[EButtonVariant["secondary"] = 1] = "secondary";
-    EButtonVariant[EButtonVariant["tertiary"] = 2] = "tertiary";
-    EButtonVariant[EButtonVariant["prio"] = 3] = "prio";
-    EButtonVariant[EButtonVariant["ghost"] = 4] = "ghost";
-})(exports.EButtonVariant || (exports.EButtonVariant = {}));
-var CgButton = function (_a) {
-    var ariaLabel = _a.ariaLabel, buttonRef = _a.buttonRef, children = _a.children, disabled = _a.disabled, flexReverse = _a.flexReverse, fullWidth = _a.fullWidth, icon = _a.icon, _b = _a.id, id = _b === void 0 ? 'cg-button' : _b, loading = _a.loading, onClick = _a.onClick, round = _a.round, _c = _a.shouldPreventDefault, shouldPreventDefault = _c === void 0 ? true : _c, size = _a.size, variant = _a.variant;
-    return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { "aria-label": ariaLabel, disabled: disabled || loading, flexReverse: flexReverse, fullWidth: fullWidth, isIconOnly: !children, id: id, loading: loading, onClick: function (e) {
-            shouldPreventDefault && e.preventDefault();
-            onClick && onClick();
-        }, ref: buttonRef, round: round, size: size, variant: variant },
-        React__default["default"].createElement(CgButton_styles.CgButtonContent, { flexReverse: flexReverse, loading: loading, size: size },
-            icon,
-            children),
-        loading && (React__default["default"].createElement(CgButton_styles.CgButtonLoader, null,
-            React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: 16 })))));
-};
+var CgButton = React.forwardRef(function (_a, ref) {
+    var boxShadow = _a.boxShadow, children = _a.children, circle = _a.circle, fullWidth = _a.fullWidth, loading = _a.loading, rounded = _a.rounded, _b = _a.size, size = _b === void 0 ? CgButton_types.EButtonSize.medium : _b, _c = _a.variant, variant = _c === void 0 ? CgButton_types.EButtonVariant.primary : _c, props = _tslib.__rest(_a, ["boxShadow", "children", "circle", "fullWidth", "loading", "rounded", "size", "variant"]);
+    var _d = button.getButtonAttributes(size, variant), sizeAttributes = _d.sizeAttributes, variantAttributes = _d.variantAttributes;
+    return (React__default["default"].createElement(CgButton_styles.Container, _tslib.__assign({ backgroundColor: variantAttributes.backgroundColor, backgroundHover: variantAttributes.backgroundHover, backgroundDisabled: variantAttributes.backgroundDisabled, backgroundActive: variantAttributes.backgroundActive, border: variantAttributes.border, boxShadow: boxShadow, circle: circle, fontColor: variantAttributes.fontColor, fontSize: sizeAttributes.fontSize, height: sizeAttributes.height, fullWidth: fullWidth, paddingX: sizeAttributes.paddingX, paddingY: sizeAttributes.paddingY, ref: ref, rounded: rounded, size: size }, props),
+        loading && (React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner })),
+        children));
+});
+CgButton.displayName = 'CgButton';
 
 exports.CgButton = CgButton;
 //# sourceMappingURL=CgButton.js.map

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

@@ -5,77 +5,63 @@ 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 CgButton = require('./CgButton.js');
+var CgButton_types = require('./CgButton.types.js');
+var designTokens = require('@citygross/design-tokens');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var disabledBase = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  background-color: ", ";\n"], ["\n  color: ", ";\n  background-color: ", ";\n"])), 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.palette) === null || _a === void 0 ? void 0 : _a.light; });
-var CgPrimary = styled.css(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    ", "\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    ", "\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue; }, 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.palette) === null || _a === void 0 ? void 0 : _a.brandBlueHover; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlueActive; }, disabledBase);
-var CgGhost = styled.css(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    color: ", ";\n  }\n"])), 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.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, 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; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
-var CgSecondary = styled.css(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  ", "\n  border: 1px solid ", ";\n \n"], ["\n  ", "\n  border: 1px solid ", ";\n \n"])), CgGhost, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledGray; });
-var CgTertiary = styled.css(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    ", "\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    ", "\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellow; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellowHover; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandYellowActive; }, disabledBase);
-var CgPrio = styled.css(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    ", "\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n  &:disabled {\n    ", "\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandPurple; }, 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.palette) === null || _a === void 0 ? void 0 : _a.brandPrioHover; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandPrioActive; }, disabledBase);
-var buttonFontSize = function (size, fontSize) {
-    var _a, _b;
-    switch (size) {
-        case CgButton.ECgButtonSize.small:
-            return "".concat((_a = fontSize === null || fontSize === void 0 ? void 0 : fontSize.size) === null || _a === void 0 ? void 0 : _a.s2, "px");
-        default:
-            return "".concat((_b = fontSize === null || fontSize === void 0 ? void 0 : fontSize.size) === null || _b === void 0 ? void 0 : _b.s3, "px");
-    }
-};
-var buttonPadding = function (size, spacings) {
-    switch (size) {
-        case CgButton.ECgButtonSize.small:
-            return "".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs2, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px");
-        case CgButton.ECgButtonSize.medium:
-            return "".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs2, "px");
-        default:
-            return "".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs2, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.sm, "px");
-    }
-};
-var buttonShadow = function (size, variant) {
-    if (variant === CgButton.EButtonVariant.secondary || variant === CgButton.EButtonVariant.ghost)
-        return 'none';
-    switch (size) {
-        case CgButton.ECgButtonSize.small:
-            return 'inset 0px -1px 0px rgba(0, 0, 0, 0.15)';
-        default:
-            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  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n    font-family: ", ";\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"], ["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n    font-family: ", ";\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"])), function (props) { var _a; return props.round ? '100' : (_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);
-}, function (props) { return (props === null || props === void 0 ? void 0 : props.fullWidth) && "width: 100%;"; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, global_styles.focusVisible, function (props) { return buttonShadow(props.size, props.variant); }, function (props) { var _a; return props.round ? '100' : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
-    switch (props.variant) {
-        case CgButton.EButtonVariant.primary:
-            return CgPrimary;
-        case CgButton.EButtonVariant.secondary:
-            return CgSecondary;
-        case CgButton.EButtonVariant.tertiary:
-            return CgTertiary;
-        case CgButton.EButtonVariant.prio:
-            return CgPrio;
-        case CgButton.EButtonVariant.ghost:
-            return CgGhost;
-        default:
-            return CgPrimary;
-    }
-}, function (props) {
-    var _a;
-    return props.loading &&
-        "\n    background-color: ".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest, "\n    ");
-});
-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", ";\nwhite-space: nowrap;\nmin-width: max-content;\n"], ["\ndisplay: flex;\njustify-content: center;\nalign-items: center;\ngap: ", "px;\nflex-direction: ", ";\nfont-size  ", ";\n", ";\nwhite-space: nowrap;\nmin-width: max-content;\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;
+var _a, _b, _c, _d, _e;
+var Container = styled__default["default"].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: ", "px;\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  transition: background-color 0.3s ease;\n  white-space: nowrap;\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: default;\n  }\n\n  ", "\n"], ["\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: ", "px;\n  font-family: ", ";\n  font-size: ", "px;\n  font-weight: ", ";\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  transition: background-color 0.3s ease;\n  white-space: nowrap;\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: default;\n  }\n\n  ", "\n"])), function (_a) {
+    var _b;
+    var border = _a.border;
+    return border ? "1px solid ".concat((_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder) : 'none';
+}, function (_a) {
+    var _b, _c, _d;
+    var circle = _a.circle, rounded = _a.rounded;
+    return circle
+        ? (_b = designTokens.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.circle
+        : rounded
+            ? "".concat((_c = designTokens.theme.attributes) === null || _c === void 0 ? void 0 : _c.borderRadius.rounded, "px")
+            : "".concat((_d = designTokens.theme.spacings) === null || _d === void 0 ? void 0 : _d.xxs, "px");
+}, function (_a) {
+    var _b, _c;
+    var boxShadow = _a.boxShadow, size = _a.size;
+    return boxShadow
+        ? size === CgButton_types.EButtonSize.small
+            ? (_b = designTokens.theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadowInset
+            : (_c = designTokens.theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow.layoutShadowInsetMedium
+        : 'none';
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor;
+}, function (_a) {
+    var fontColor = _a.fontColor;
+    return fontColor;
+}, (_a = designTokens.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, (_b = designTokens.theme.typography) === null || _b === void 0 ? void 0 : _b.type.primary, function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize;
+}, (_d = (_c = designTokens.theme.typography) === null || _c === void 0 ? void 0 : _c.weight) === null || _d === void 0 ? void 0 : _d.medium, function (_a) {
+    var circle = _a.circle, height = _a.height;
+    return (!circle ? "".concat(height, "px") : 'max-content');
+}, function (_a) {
+    var fullWidth = _a.fullWidth;
+    return (fullWidth ? '100%' : 'max-content');
+}, function (_a) {
+    var circle = _a.circle, paddingX = _a.paddingX, paddingY = _a.paddingY;
+    return circle ? "".concat(paddingY, "px") : "".concat(paddingY, "px ").concat(paddingX, "px");
+}, function (_a) {
+    var backgroundActive = _a.backgroundActive;
+    return backgroundActive;
+}, function (_a) {
+    var backgroundHover = _a.backgroundHover;
+    return backgroundHover;
+}, function (_a) {
+    var backgroundDisabled = _a.backgroundDisabled;
+    return backgroundDisabled;
+}, (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.placeholder, global_styles.focusVisible);
+var templateObject_1;
 
-exports.CgButtonContainer = CgButtonContainer;
-exports.CgButtonContent = CgButtonContent;
-exports.CgButtonLoader = CgButtonLoader;
+exports.Container = Container;
 //# 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/CgButton/CgButton.types.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+exports.EButtonSize = void 0;
+(function (EButtonSize) {
+    EButtonSize["small"] = "small";
+    EButtonSize["medium"] = "medium";
+    EButtonSize["large"] = "large";
+})(exports.EButtonSize || (exports.EButtonSize = {}));
+exports.EButtonVariant = void 0;
+(function (EButtonVariant) {
+    EButtonVariant["primary"] = "primary";
+    EButtonVariant["secondary"] = "secondary";
+    EButtonVariant["tertiary"] = "tertiary";
+    EButtonVariant["prio"] = "prio";
+    EButtonVariant["ghost"] = "ghost";
+})(exports.EButtonVariant || (exports.EButtonVariant = {}));
+//# sourceMappingURL=CgButton.types.js.map

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

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

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var CouponCode_styles = require('./CouponCode.styles.js');
 var CgButton = require('../CgButton/CgButton.js');
+var CgButton_types = require('../CgButton/CgButton.types.js');
 var icons = require('@citygross/icons');
 var designTokens = require('@citygross/design-tokens');
 var Link = require('../Links/Link.js');
@@ -16,10 +17,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 exports.ECouponCodeStatus = void 0;
 (function (ECouponCodeStatus) {
-    ECouponCodeStatus["Success"] = "Success";
-    ECouponCodeStatus["Invalid"] = "Invalid";
-    ECouponCodeStatus["Error"] = "Error";
     ECouponCodeStatus["Empty"] = "Empty";
+    ECouponCodeStatus["Error"] = "Error";
+    ECouponCodeStatus["Invalid"] = "Invalid";
+    ECouponCodeStatus["Success"] = "Success";
 })(exports.ECouponCodeStatus || (exports.ECouponCodeStatus = {}));
 var CouponResultIcon = function (_a) {
     var _b, _c, _d;
@@ -34,9 +35,9 @@ var CouponResultIcon = function (_a) {
     }
 };
 function CouponCode(_a) {
-    var label = _a.label, resetLabel = _a.resetLabel, placeholder = _a.placeholder, onSubmit = _a.onSubmit, status = _a.status, loading = _a.loading, value = _a.value, setValue = _a.setValue, onReset = _a.onReset;
+    var label = _a.label, loading = _a.loading, onReset = _a.onReset, onSubmit = _a.onSubmit, placeholder = _a.placeholder, resetLabel = _a.resetLabel, setValue = _a.setValue, status = _a.status, value = _a.value;
     var _b = React.useState(false), customFocus = _b[0], setCustomFocus = _b[1];
-    return (React__default["default"].createElement(React__default["default"].Fragment, null, (status === null || status === void 0 ? void 0 : status.status) === exports.ECouponCodeStatus.Empty ? (React__default["default"].createElement(CouponCode_styles.CouponContainer, null,
+    return (React__default["default"].createElement(React.Fragment, null, (status === null || status === void 0 ? void 0 : status.status) === exports.ECouponCodeStatus.Empty ? (React__default["default"].createElement(CouponCode_styles.CouponContainer, null,
         React__default["default"].createElement(CouponCode_styles.CouponInputContainer, 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);
@@ -47,9 +48,9 @@ function CouponCode(_a) {
                     }
                 }, onBlur: function () { return setCustomFocus(false); }, customFocus: customFocus })),
         React__default["default"].createElement("div", null,
-            React__default["default"].createElement(CgButton.CgButton, { variant: CgButton.EButtonVariant.secondary, disabled: loading, onClick: function () { return onSubmit(); }, size: CgButton.ECgButtonSize.medium, fullWidth: true, loading: loading }, label)))) : (React__default["default"].createElement(CouponCode_styles.CouponResultContainer, { status: status === null || status === void 0 ? void 0 : status.status }, (status === null || status === void 0 ? void 0 : status.status) === exports.ECouponCodeStatus.Success ? (React__default["default"].createElement(CouponCode_styles.CouponResultMessage, null,
+            React__default["default"].createElement(CgButton.CgButton, { variant: CgButton_types.EButtonVariant.secondary, disabled: loading, onClick: function () { return onSubmit(); }, size: CgButton_types.EButtonSize.medium, fullWidth: true, loading: loading }, label)))) : (React__default["default"].createElement(CouponCode_styles.CouponResultContainer, { status: status === null || status === void 0 ? void 0 : status.status }, (status === null || status === void 0 ? void 0 : status.status) === exports.ECouponCodeStatus.Success ? (React__default["default"].createElement(CouponCode_styles.CouponResultMessage, null,
         React__default["default"].createElement(CouponResultIcon, { status: status === null || status === void 0 ? void 0 : status.status }),
-        React__default["default"].createElement("p", null, status === null || status === void 0 ? void 0 : status.message))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("p", null, status === null || status === void 0 ? void 0 : status.message))) : (React__default["default"].createElement(React.Fragment, null,
         React__default["default"].createElement(CouponCode_styles.CouponResultMessage, null,
             React__default["default"].createElement(CouponResultIcon, { status: status === null || status === void 0 ? void 0 : status.status }),
             React__default["default"].createElement("p", null, status === null || status === void 0 ? void 0 : status.message)),

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

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

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

@@ -10,6 +10,7 @@ var Logo = require('../Logo/Logo.js');
 var Header_styles = require('./Header.styles.js');
 var HeaderLink = require('../HeaderLink/HeaderLink.js');
 var CgButton = require('../CgButton/CgButton.js');
+var CgButton_types = require('../CgButton/CgButton.types.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,14 +18,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Header(_a) {
     var _b, _c;
-    var logOut = _a.logOut, logOutLabel = _a.logOutLabel, _d = _a.topLinkHref, topLinkHref = _d === void 0 ? '/' : _d, topLinkLabel = _a.topLinkLabel, logoImage = _a.logoImage, _e = _a.lowerContainerMaxWidth, lowerContainerMaxWidth = _e === void 0 ? (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.pageContentMaxWidth : _e, children = _a.children;
+    var children = _a.children, logoImage = _a.logoImage, logOut = _a.logOut, logOutLabel = _a.logOutLabel, _d = _a.lowerContainerMaxWidth, lowerContainerMaxWidth = _d === void 0 ? (_b = designTokens.theme.constants) === null || _b === void 0 ? void 0 : _b.pageContentMaxWidth : _d, _e = _a.topLinkHref, topLinkHref = _e === void 0 ? '/' : _e, topLinkLabel = _a.topLinkLabel;
     var device = utils.useDetectDevice();
     return (React__default["default"].createElement(Header_styles.Wrapper, null,
         topLinkLabel && topLinkHref && (React__default["default"].createElement(HeaderLink.HeaderLink, { icon: React__default["default"].createElement(icons.Icons.ChevronLeft, { width: 20, height: 20, color: (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white }), linkHref: topLinkHref, linkLabel: topLinkLabel })),
         (logoImage || logOutLabel) && (React__default["default"].createElement(Header_styles.HeaderWrapper, null,
             React__default["default"].createElement(Header_styles.HeaderContainer, { maxWidth: lowerContainerMaxWidth },
                 logoImage && React__default["default"].createElement(Logo.Logo, { logoImage: logoImage }),
-                logOut && (React__default["default"].createElement(CgButton.CgButton, { onClick: function () { return logOut && logOut(); }, variant: CgButton.EButtonVariant.secondary, size: device.isMobile ? CgButton.ECgButtonSize.medium : CgButton.ECgButtonSize.large }, logOutLabel))))),
+                logOut && (React__default["default"].createElement(CgButton.CgButton, { onClick: function () { return logOut && logOut(); }, variant: CgButton_types.EButtonVariant.secondary, size: device.isMobile ? CgButton_types.EButtonSize.medium : CgButton_types.EButtonSize.large }, logOutLabel))))),
         children && React__default["default"].createElement(Header_styles.MenuContainer, null, children)));
 }
 

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

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