@citygross/components 0.8.142 → 0.8.144

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

@@ -1,3 +1,10 @@
-export declare const Button: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Omit<import("./CgButton.types").TCgButtonRoot, "children" | "loading" | "variant"> & import("./CgButton.types").TButtonSizeAttributes & import("./CgButton.types").TButtonVariantAttributes, never>;
-export declare const LinkAsButton: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Omit<import("./CgButton.types").TCgButtonRoot, "children" | "loading" | "variant"> & import("./CgButton.types").TButtonSizeAttributes & import("./CgButton.types").TButtonVariantAttributes, never>;
-export declare const CgReactRouterLinkAsButton: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Omit<import("./CgButton.types").TCgButtonRoot, "children" | "loading" | "variant"> & import("./CgButton.types").TButtonSizeAttributes & import("./CgButton.types").TButtonVariantAttributes, never>;
+import { TCgButtonStyle } from './CgButton.types';
+export declare const sharedButtonStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemedStyledProps<TCgButtonStyle, import("styled-components").DefaultTheme>>;
+export declare const ButtonStyle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, Omit<import("./CgButton.types").TCgButtonRoot, "children" | "loading" | "variant"> & {
+    sizeAttributes: import("./CgButton.types").TButtonSizeAttributes;
+    variantAttributes: import("./CgButton.types").TButtonVariantAttributes;
+}, never>;
+export declare const DivAsButton: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<import("./CgButton.types").TCgButtonRoot, "children" | "loading" | "variant"> & {
+    sizeAttributes: import("./CgButton.types").TButtonSizeAttributes;
+    variantAttributes: import("./CgButton.types").TButtonVariantAttributes;
+}, never>;

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

@@ -22,8 +22,10 @@ export declare type TCgButtonRoot = {
     variant?: EButtonVariant;
 };
 export declare type TCgButton = TCgButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export declare type TCgReactRouterLinkAsButton = TCgButtonRoot;
-export declare type TCgButtonStyle = Omit<TCgButtonRoot, 'children' | 'loading' | 'variant'> & TButtonSizeAttributes & TButtonVariantAttributes;
+export declare type TCgButtonStyle = Omit<TCgButtonRoot, 'children' | 'loading' | 'variant'> & {
+    sizeAttributes: TButtonSizeAttributes;
+    variantAttributes: TButtonVariantAttributes;
+};
 export declare type TButtonSizeAttributes = {
     fontSize?: number;
     height?: number;

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

@@ -0,0 +1,2 @@
+import { TCgButtonRoot } from '../CgButton.types';
+export declare const DivAsButton: ({ boxShadow, children, circle, fullWidth, rounded, size, variant, ...props }: TCgButtonRoot) => JSX.Element;

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

@@ -12,8 +12,8 @@ export * from './components/CartItemSummary/CartItemSummary';
 export * from './components/CartSubTotal/CartSubTotal';
 export * from './components/CartSummary/CartSummary';
 export * from './components/CgButton/CgButton';
-export * from './components/CgButton/ReactRouterLinkAsButton';
 export * from './components/CgButton/CgButton.types';
+export * from './components/CgButton/CgButton.styles';
 export * from './components/Chips/Chip';
 export * from './components/Collapsable/Collapsable';
 export * from './components/CouponCode/CouponCode';
@@ -89,3 +89,4 @@ export * from './components/WarningLabel/WarningLabel';
 export * from './components/ZipCodeInput/ZipCodeInput';
 export * from './containers/PageContainer/PageContainer';
 export * from './containers/TwoColumnsContainer/TwoColumnsPageContainer';
+export * from './helpers/button';

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

@@ -16,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 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.Button, _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),
+    return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({ boxShadow: boxShadow, circle: circle, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, variantAttributes: variantAttributes }, props),
         loading && (React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner })),
         children));
 });

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

@@ -13,10 +13,12 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var _a, _b, _c, _d, _e;
-var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  color: ", ";\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  ", "\n"], ["\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  color: ", ";\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  ", "\n"])), function (_a) {
+var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  color: ", ";\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  &:not(:disabled):hover {\n    background-color: ", ";\n  }\n\n  &:not(:disabled):active,\n  &:not(:disabled):hover:active,\n  &:not(:disabled):focus:active {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  color: ", ";\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  &:not(:disabled):hover {\n    background-color: ", ";\n  }\n\n  &:not(:disabled):active,\n  &:not(:disabled):hover:active,\n  &:not(:disabled):focus:active {\n    background-color: ", ";\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';
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.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;
@@ -34,38 +36,40 @@ var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tsl
             : (_c = designTokens.theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow.layoutShadowInsetMedium
         : 'none';
 }, function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return backgroundColor;
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.backgroundColor;
 }, function (_a) {
-    var fontColor = _a.fontColor;
-    return fontColor;
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.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;
+    var sizeAttributes = _a.sizeAttributes;
+    return sizeAttributes.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');
+    var circle = _a.circle, sizeAttributes = _a.sizeAttributes;
+    return !circle ? "".concat(sizeAttributes.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");
+    var circle = _a.circle, sizeAttributes = _a.sizeAttributes;
+    return circle
+        ? "".concat(sizeAttributes.paddingY, "px")
+        : "".concat(sizeAttributes.paddingY, "px ").concat(sizeAttributes.paddingX, "px");
 }, function (_a) {
-    var backgroundActive = _a.backgroundActive;
-    return backgroundActive;
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.backgroundHover;
 }, function (_a) {
-    var backgroundHover = _a.backgroundHover;
-    return backgroundHover;
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.backgroundActive;
 }, global_styles.focusVisible);
-var Button = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  ", "\n\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: default;\n  }\n"], ["\n  ", "\n\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: default;\n  }\n"])), sharedButtonStyles, function (_a) {
-    var backgroundDisabled = _a.backgroundDisabled;
-    return backgroundDisabled;
+var ButtonStyle = styled__default["default"].button(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  ", "\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: default;\n  }\n"], ["\n  ", "\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: default;\n  }\n"])), sharedButtonStyles, function (_a) {
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.backgroundDisabled;
 }, (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.placeholder);
-styled__default["default"].a(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  ", "\n  text-decoration: none;\n"], ["\n  ", "\n  text-decoration: none;\n"])), sharedButtonStyles);
-var CgReactRouterLinkAsButton = styled__default["default"].a(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  ", "\n  text-decoration: none;\n"], ["\n  ", "\n  text-decoration: none;\n"])), sharedButtonStyles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var DivAsButton = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  ", "\n  cursor: pointer;\n"], ["\n  ", "\n  cursor: pointer;\n"])), sharedButtonStyles);
+var templateObject_1, templateObject_2, templateObject_3;
 
-exports.Button = Button;
-exports.CgReactRouterLinkAsButton = CgReactRouterLinkAsButton;
+exports.ButtonStyle = ButtonStyle;
+exports.DivAsButton = DivAsButton;
+exports.sharedButtonStyles = sharedButtonStyles;
 //# 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/index.js

@@ -19,8 +19,8 @@ var CartItemSummary = require('./components/CartItemSummary/CartItemSummary.js')
 var CartSubTotal = require('./components/CartSubTotal/CartSubTotal.js');
 var CartSummary = require('./components/CartSummary/CartSummary.js');
 var CgButton = require('./components/CgButton/CgButton.js');
-var ReactRouterLinkAsButton = require('./components/CgButton/ReactRouterLinkAsButton.js');
 var CgButton_types = require('./components/CgButton/CgButton.types.js');
+var CgButton_styles = require('./components/CgButton/CgButton.styles.js');
 var Chip = require('./components/Chips/Chip.js');
 var Collapsable = require('./components/Collapsable/Collapsable.js');
 var CouponCode = require('./components/CouponCode/CouponCode.js');
@@ -98,6 +98,7 @@ var WarningLabel = require('./components/WarningLabel/WarningLabel.js');
 var ZipCodeInput = require('./components/ZipCodeInput/ZipCodeInput.js');
 var PageContainer = require('./containers/PageContainer/PageContainer.js');
 var TwoColumnsPageContainer = require('./containers/TwoColumnsContainer/TwoColumnsPageContainer.js');
+var button = require('./helpers/button.js');
 
 
 
@@ -130,7 +131,6 @@ Object.defineProperty(exports, 'ECartSubTotalTypes', {
 });
 exports.CartSummary = CartSummary.CartSummary;
 exports.CgButton = CgButton.CgButton;
-exports.CgReactRouterLinkAsButton = ReactRouterLinkAsButton.CgReactRouterLinkAsButton;
 Object.defineProperty(exports, 'EButtonSize', {
 	enumerable: true,
 	get: function () { return CgButton_types.EButtonSize; }
@@ -139,6 +139,9 @@ Object.defineProperty(exports, 'EButtonVariant', {
 	enumerable: true,
 	get: function () { return CgButton_types.EButtonVariant; }
 });
+exports.ButtonStyle = CgButton_styles.ButtonStyle;
+exports.DivAsButton = CgButton_styles.DivAsButton;
+exports.sharedButtonStyles = CgButton_styles.sharedButtonStyles;
 exports.Chip = Chip.Chip;
 exports.Collapsable = Collapsable.Collapsable;
 exports.CouponCode = CouponCode.CouponCode;
@@ -268,4 +271,5 @@ exports.WarningLabel = WarningLabel.WarningLabel;
 exports.ZipCodeInput = ZipCodeInput.ZipCodeInput;
 exports.PageContainer = PageContainer.PageContainer;
 exports.TwoColumnsPageContainer = TwoColumnsPageContainer.TwoColumnsPageContainer;
+exports.getButtonAttributes = button.getButtonAttributes;
 //# 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/CgButton/CgButton.js

@@ -1,6 +1,6 @@
 import { __rest, __assign } from '../../../../_virtual/_tslib.js';
 import React, { forwardRef } from 'react';
-import { Button } from './CgButton.styles.js';
+import { ButtonStyle } from './CgButton.styles.js';
 import { Spinner } from '../Spinner/Spinner.js';
 import { EButtonSize, EButtonVariant } from './CgButton.types.js';
 import { getButtonAttributes } from '../../helpers/button.js';
@@ -8,7 +8,7 @@ import { getButtonAttributes } from '../../helpers/button.js';
 var CgButton = 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 ? EButtonSize.medium : _b, _c = _a.variant, variant = _c === void 0 ? EButtonVariant.primary : _c, props = __rest(_a, ["boxShadow", "children", "circle", "fullWidth", "loading", "rounded", "size", "variant"]);
     var _d = getButtonAttributes(size, variant), sizeAttributes = _d.sizeAttributes, variantAttributes = _d.variantAttributes;
-    return (React.createElement(Button, __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),
+    return (React.createElement(ButtonStyle, __assign({ boxShadow: boxShadow, circle: circle, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, variantAttributes: variantAttributes }, props),
         loading && (React.createElement(Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner })),
         children));
 });

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

@@ -5,10 +5,12 @@ import { EButtonSize } from './CgButton.types.js';
 import { theme } from '@citygross/design-tokens';
 
 var _a, _b, _c, _d, _e;
-var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  color: ", ";\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  ", "\n"], ["\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  color: ", ";\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  ", "\n"])), function (_a) {
+var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  color: ", ";\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  &:not(:disabled):hover {\n    background-color: ", ";\n  }\n\n  &:not(:disabled):active,\n  &:not(:disabled):hover:active,\n  &:not(:disabled):focus:active {\n    background-color: ", ";\n  }\n\n  ", "\n"], ["\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  color: ", ";\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  &:not(:disabled):hover {\n    background-color: ", ";\n  }\n\n  &:not(:disabled):active,\n  &:not(:disabled):hover:active,\n  &:not(:disabled):focus:active {\n    background-color: ", ";\n  }\n\n  ", "\n"])), function (_a) {
     var _b;
-    var border = _a.border;
-    return border ? "1px solid ".concat((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder) : 'none';
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.border
+        ? "1px solid ".concat((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.placeholder)
+        : 'none';
 }, function (_a) {
     var _b, _c, _d;
     var circle = _a.circle, rounded = _a.rounded;
@@ -26,37 +28,38 @@ var sharedButtonStyles = css(templateObject_1 || (templateObject_1 = __makeTempl
             : (_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow.layoutShadowInsetMedium
         : 'none';
 }, function (_a) {
-    var backgroundColor = _a.backgroundColor;
-    return backgroundColor;
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.backgroundColor;
 }, function (_a) {
-    var fontColor = _a.fontColor;
-    return fontColor;
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.fontColor;
 }, (_a = theme.spacings) === null || _a === void 0 ? void 0 : _a.xs, (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.type.primary, function (_a) {
-    var fontSize = _a.fontSize;
-    return fontSize;
+    var sizeAttributes = _a.sizeAttributes;
+    return sizeAttributes.fontSize;
 }, (_d = (_c = 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');
+    var circle = _a.circle, sizeAttributes = _a.sizeAttributes;
+    return !circle ? "".concat(sizeAttributes.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");
+    var circle = _a.circle, sizeAttributes = _a.sizeAttributes;
+    return circle
+        ? "".concat(sizeAttributes.paddingY, "px")
+        : "".concat(sizeAttributes.paddingY, "px ").concat(sizeAttributes.paddingX, "px");
 }, function (_a) {
-    var backgroundActive = _a.backgroundActive;
-    return backgroundActive;
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.backgroundHover;
 }, function (_a) {
-    var backgroundHover = _a.backgroundHover;
-    return backgroundHover;
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.backgroundActive;
 }, focusVisible);
-var Button = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: default;\n  }\n"], ["\n  ", "\n\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: default;\n  }\n"])), sharedButtonStyles, function (_a) {
-    var backgroundDisabled = _a.backgroundDisabled;
-    return backgroundDisabled;
+var ButtonStyle = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: default;\n  }\n"], ["\n  ", "\n  cursor: pointer;\n\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: default;\n  }\n"])), sharedButtonStyles, function (_a) {
+    var variantAttributes = _a.variantAttributes;
+    return variantAttributes.backgroundDisabled;
 }, (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.placeholder);
-styled.a(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  text-decoration: none;\n"], ["\n  ", "\n  text-decoration: none;\n"])), sharedButtonStyles);
-var CgReactRouterLinkAsButton = styled.a(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  text-decoration: none;\n"], ["\n  ", "\n  text-decoration: none;\n"])), sharedButtonStyles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var DivAsButton = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  cursor: pointer;\n"], ["\n  ", "\n  cursor: pointer;\n"])), sharedButtonStyles);
+var templateObject_1, templateObject_2, templateObject_3;
 
-export { Button, CgReactRouterLinkAsButton };
+export { ButtonStyle, DivAsButton, sharedButtonStyles };
 //# sourceMappingURL=CgButton.styles.js.map

package/build/es/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/es/components/src/index.js

@@ -15,8 +15,8 @@ export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js
 export { CartSubTotal, ECartSubTotalTypes } from './components/CartSubTotal/CartSubTotal.js';
 export { CartSummary } from './components/CartSummary/CartSummary.js';
 export { CgButton } from './components/CgButton/CgButton.js';
-export { CgReactRouterLinkAsButton } from './components/CgButton/ReactRouterLinkAsButton.js';
 export { EButtonSize, EButtonVariant } from './components/CgButton/CgButton.types.js';
+export { ButtonStyle, DivAsButton, sharedButtonStyles } from './components/CgButton/CgButton.styles.js';
 export { Chip } from './components/Chips/Chip.js';
 export { Collapsable } from './components/Collapsable/Collapsable.js';
 export { CouponCode, ECouponCodeStatus } from './components/CouponCode/CouponCode.js';
@@ -94,4 +94,5 @@ export { WarningLabel } from './components/WarningLabel/WarningLabel.js';
 export { ZipCodeInput } from './components/ZipCodeInput/ZipCodeInput.js';
 export { PageContainer } from './containers/PageContainer/PageContainer.js';
 export { TwoColumnsPageContainer } from './containers/TwoColumnsContainer/TwoColumnsPageContainer.js';
+export { getButtonAttributes } from './helpers/button.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.8.142",
+  "version": "0.8.144",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "961e05b14868e4153d7062da5b823f5abe5c13d9"
+  "gitHead": "6e953b71579d653a5f1e24897e69183101f0a469"
 }

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { TCgReactRouterLinkAsButton } from './CgButton.types';
-export declare const CgReactRouterLinkAsButton: ({ children, size, variant, ...props }: TCgReactRouterLinkAsButton) => JSX.Element;

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

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _tslib = require('../../../../_virtual/_tslib.js');
-var React = require('react');
-var button = require('../../helpers/button.js');
-var CgButton_types = require('./CgButton.types.js');
-var CgButton_styles = require('./CgButton.styles.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-var CgReactRouterLinkAsButton = function (_a) {
-    var children = _a.children, _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, ["children", "size", "variant"]);
-    var _d = button.getButtonAttributes(size, variant), sizeAttributes = _d.sizeAttributes, variantAttributes = _d.variantAttributes;
-    return (React__default["default"].createElement(CgButton_styles.CgReactRouterLinkAsButton, _tslib.__assign({ backgroundColor: variantAttributes.backgroundColor, backgroundHover: variantAttributes.backgroundHover, backgroundDisabled: variantAttributes.backgroundDisabled, backgroundActive: variantAttributes.backgroundActive, border: variantAttributes.border, boxShadow: props.boxShadow, circle: props.circle, fontColor: variantAttributes.fontColor, fontSize: sizeAttributes.fontSize, height: sizeAttributes.height, fullWidth: props.fullWidth, paddingX: sizeAttributes.paddingX, paddingY: sizeAttributes.paddingY, rounded: props.rounded, size: size }, props), children));
-};
-
-exports.CgReactRouterLinkAsButton = CgReactRouterLinkAsButton;
-//# sourceMappingURL=ReactRouterLinkAsButton.js.map

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

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

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

@@ -1,14 +0,0 @@
-import { __rest, __assign } from '../../../../_virtual/_tslib.js';
-import React from 'react';
-import { getButtonAttributes } from '../../helpers/button.js';
-import { EButtonSize, EButtonVariant } from './CgButton.types.js';
-import { CgReactRouterLinkAsButton as CgReactRouterLinkAsButton$1 } from './CgButton.styles.js';
-
-var CgReactRouterLinkAsButton = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? EButtonSize.medium : _b, _c = _a.variant, variant = _c === void 0 ? EButtonVariant.primary : _c, props = __rest(_a, ["children", "size", "variant"]);
-    var _d = getButtonAttributes(size, variant), sizeAttributes = _d.sizeAttributes, variantAttributes = _d.variantAttributes;
-    return (React.createElement(CgReactRouterLinkAsButton$1, __assign({ backgroundColor: variantAttributes.backgroundColor, backgroundHover: variantAttributes.backgroundHover, backgroundDisabled: variantAttributes.backgroundDisabled, backgroundActive: variantAttributes.backgroundActive, border: variantAttributes.border, boxShadow: props.boxShadow, circle: props.circle, fontColor: variantAttributes.fontColor, fontSize: sizeAttributes.fontSize, height: sizeAttributes.height, fullWidth: props.fullWidth, paddingX: sizeAttributes.paddingX, paddingY: sizeAttributes.paddingY, rounded: props.rounded, size: size }, props), children));
-};
-
-export { CgReactRouterLinkAsButton };
-//# sourceMappingURL=ReactRouterLinkAsButton.js.map

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

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