@citygross/components 0.7.238 → 0.7.239

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

@@ -0,0 +1,25 @@
+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 = {
+    size?: ECgButtonSize;
+    variant?: EButtonVariant;
+    icon?: React.ReactNode;
+    flexReverse?: boolean;
+    loading?: boolean;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+};
+declare const CgButton: ({ size, variant, icon, flexReverse, disabled, onClick, children }: TCgButton) => JSX.Element;
+export default CgButton;

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

@@ -0,0 +1,11 @@
+/// <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;
+};
+export declare const CgButtonContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TCgButtonStyleProps, never>;

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

@@ -73,3 +73,4 @@ export * from './components/SlideInOutContainer/SlideInOutContainer';
 export * from './components/SearchSuggestionChip/SearchSuggestionChip';
 export * from './components/ZipCodeInput/ZipCodeInput';
 export * from './components/MaxHeightText/MaxHeightText';
+export * from './components/CgButton/CgButton';

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

@@ -89,6 +89,7 @@ require('../SlideInOutContainer/SlideInOutContainer.styles.js');
 require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
 require('../ZipCodeInput/ZipCodeInput.styles.js');
 require('../MaxHeightText/styles.js');
+require('../CgButton/CgButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

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

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('react');
+require('./CgButton.styles.js');
+
+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 = {}));
+//# sourceMappingURL=CgButton.js.map

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

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

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

@@ -0,0 +1,69 @@
+'use strict';
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+var global_styles = require('../../shared/global.styles.js');
+var CgButton = require('./CgButton.js');
+
+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.medium; });
+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)';
+    }
+};
+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 _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) {
+    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;
+    }
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=CgButton.styles.js.map

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

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

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

@@ -89,6 +89,7 @@ require('../SlideInOutContainer/SlideInOutContainer.styles.js');
 require('../SearchSuggestionChip/SearchSuggestionChip.styles.js');
 require('../ZipCodeInput/ZipCodeInput.styles.js');
 require('../MaxHeightText/styles.js');
+require('../CgButton/CgButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -80,6 +80,7 @@ var SlideInOutContainer = require('./components/SlideInOutContainer/SlideInOutCo
 var SearchSuggestionChip = require('./components/SearchSuggestionChip/SearchSuggestionChip.js');
 var ZipCodeInput = require('./components/ZipCodeInput/ZipCodeInput.js');
 var MaxHeightText = require('./components/MaxHeightText/MaxHeightText.js');
+var CgButton = require('./components/CgButton/CgButton.js');
 
 
 
@@ -192,4 +193,12 @@ exports.SlideInOutContainer = SlideInOutContainer.SlideInOutContainer;
 exports.SearchSuggestionChip = SearchSuggestionChip.SearchSuggestionChip;
 exports.ZipCodeInput = ZipCodeInput.ZipCodeInput;
 exports.MaxHeightText = MaxHeightText.MaxHeightText;
+Object.defineProperty(exports, 'EButtonVariant', {
+	enumerable: true,
+	get: function () { return CgButton.EButtonVariant; }
+});
+Object.defineProperty(exports, 'ECgButtonSize', {
+	enumerable: true,
+	get: function () { return CgButton.ECgButtonSize; }
+});
 //# 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/es/components/src/components/AddressBlock/AddressBlock.js

@@ -85,6 +85,7 @@ import '../SlideInOutContainer/SlideInOutContainer.styles.js';
 import '../SearchSuggestionChip/SearchSuggestionChip.styles.js';
 import '../ZipCodeInput/ZipCodeInput.styles.js';
 import '../MaxHeightText/styles.js';
+import '../CgButton/CgButton.js';
 
 function AddressBlock(_a) {
     var _b = _a.deliverOption, deliverOption = _b === void 0 ? 'Address' : _b, icon = _a.icon, storeName = _a.storeName, customerName = _a.customerName, street = _a.street, zipCode = _a.zipCode, city = _a.city, doorCode = _a.doorCode, floor = _a.floor, deliveryInstructions = _a.deliveryInstructions, xsSpacing = _a.xsSpacing, lgSpacing = _a.lgSpacing;

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

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

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

@@ -0,0 +1,20 @@
+import 'react';
+import './CgButton.styles.js';
+
+var ECgButtonSize;
+(function (ECgButtonSize) {
+    ECgButtonSize[ECgButtonSize["small"] = 0] = "small";
+    ECgButtonSize[ECgButtonSize["medium"] = 1] = "medium";
+    ECgButtonSize[ECgButtonSize["large"] = 2] = "large";
+})(ECgButtonSize || (ECgButtonSize = {}));
+var EButtonVariant;
+(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";
+})(EButtonVariant || (EButtonVariant = {}));
+
+export { EButtonVariant, ECgButtonSize };
+//# sourceMappingURL=CgButton.js.map

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

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

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

@@ -0,0 +1,63 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled, { css } from 'styled-components';
+import { focusVisible } from '../../shared/global.styles.js';
+import { EButtonVariant, ECgButtonSize } from './CgButton.js';
+
+var disabledBase = css(templateObject_1 || (templateObject_1 = __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 = css(templateObject_2 || (templateObject_2 = __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 = css(templateObject_3 || (templateObject_3 = __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 = css(templateObject_4 || (templateObject_4 = __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.medium; });
+var CgTertiary = css(templateObject_5 || (templateObject_5 = __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 = css(templateObject_6 || (templateObject_6 = __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 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 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 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 === EButtonVariant.secondary || variant === EButtonVariant.ghost)
+        return 'none';
+    switch (size) {
+        case 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)';
+    }
+};
+styled.button(templateObject_7 || (templateObject_7 = __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 _a;
+    return props.isIconOnly
+        ? "".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, "px")
+        : buttonPadding(props.size, props.theme.spacings);
+}, 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 EButtonVariant.primary:
+            return CgPrimary;
+        case EButtonVariant.secondary:
+            return CgSecondary;
+        case EButtonVariant.tertiary:
+            return CgTertiary;
+        case EButtonVariant.prio:
+            return CgPrio;
+        case EButtonVariant.ghost:
+            return CgGhost;
+        default:
+            return CgPrimary;
+    }
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+//# sourceMappingURL=CgButton.styles.js.map

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

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

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

@@ -85,6 +85,7 @@ import '../SlideInOutContainer/SlideInOutContainer.styles.js';
 import '../SearchSuggestionChip/SearchSuggestionChip.styles.js';
 import '../ZipCodeInput/ZipCodeInput.styles.js';
 import '../MaxHeightText/styles.js';
+import '../CgButton/CgButton.js';
 
 function WarningLabel(_a) {
     var children = _a.children, background = _a.background, toolTip = _a.toolTip;

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

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

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

@@ -76,4 +76,5 @@ export { SlideInOutContainer } from './components/SlideInOutContainer/SlideInOut
 export { SearchSuggestionChip } from './components/SearchSuggestionChip/SearchSuggestionChip.js';
 export { ZipCodeInput } from './components/ZipCodeInput/ZipCodeInput.js';
 export { MaxHeightText } from './components/MaxHeightText/MaxHeightText.js';
+export { EButtonVariant, ECgButtonSize } from './components/CgButton/CgButton.js';
 //# sourceMappingURL=index.js.map

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.238",
+  "version": "0.7.239",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -76,5 +76,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "7c2cd34456a15ed34b4c191f0b7363aa1f8b4c97"
+  "gitHead": "5387f5b1c301e072a9a1798ec889ee981dcaa5d4"
 }