@citygross/components 0.8.40 → 0.8.42

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

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

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

@@ -8,6 +8,7 @@ export declare type TCgButtonStyleProps = {
     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>;

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

@@ -81,3 +81,4 @@ export * from './components/CgButton/CgButton';
 export * from './components/CartCardLabel/CartCardLabel';
 export * from './components/CartCard/CartCard';
 export * from './components/PriceTag/PriceTag';
+export * from './components/Pill/Pill';

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

@@ -96,6 +96,7 @@ require('../CouponCode/CouponCode.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('../CartCard/CartCard.styles.js');
 require('../PriceTag/PriceTag.js');
+require('../Pill/Pill.styles.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

@@ -25,8 +25,8 @@ exports.EButtonVariant = void 0;
     EButtonVariant[EButtonVariant["ghost"] = 4] = "ghost";
 })(exports.EButtonVariant || (exports.EButtonVariant = {}));
 var CgButton = function (_a) {
-    var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth, buttonRef = _a.buttonRef;
-    return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { ref: buttonRef, size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, loading: loading, onKeyDown: function (event) {
+    var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth, buttonRef = _a.buttonRef, round = _a.round;
+    return (React__default["default"].createElement(CgButton_styles.CgButtonContainer, { ref: buttonRef, round: round, size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, loading: loading, onKeyDown: function (event) {
             if (event.key === 'Enter') {
                 onClick && onClick();
             }

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

@@ -46,12 +46,12 @@ var buttonShadow = function (size, variant) {
             return 'inset 0px -2px 0px rgba(0, 0, 0, 0.15)';
     }
 };
-var CgButtonContainer = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  ", "\n  &:disabled {\n    cursor: default;\n  }\n  &:after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n  ", "\n"], ["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  ", "\n  &:disabled {\n    cursor: default;\n  }\n  &:after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n  ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
+var CgButtonContainer = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  ", "\n  &:disabled {\n    cursor: default;\n  }\n  &:after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n  ", "\n"], ["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  ", "\n  &:disabled {\n    cursor: default;\n  }\n  &:after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n  ", "\n"])), 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%;"; }, global_styles.focusVisible, function (props) { return buttonShadow(props.size, props.variant); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
+}, function (props) { return (props === null || props === void 0 ? void 0 : props.fullWidth) && "width: 100%;"; }, global_styles.focusVisible, function (props) { return buttonShadow(props.size, props.variant); }, function (props) { var _a; return 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;

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

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var Pill_styles = require('./Pill.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Pill = function (_a) {
+    var _b = _a.active, active = _b === void 0 ? false : _b, amount = _a.amount, onClick = _a.onClick, text = _a.text;
+    return (React__default["default"].createElement(Pill_styles.PillComponent, { active: active, onClick: onClick, onKeyDown: function (e) {
+            if (e.key === 'Enter')
+                onClick();
+        }, tabIndex: 0 },
+        React__default["default"].createElement(Pill_styles.PillContent, null,
+            React__default["default"].createElement(Pill_styles.Text, null, text),
+            amount !== undefined && React__default["default"].createElement(Pill_styles.Amount, null,
+                "(",
+                amount,
+                ")"))));
+};
+
+exports.Pill = Pill;
+//# sourceMappingURL=Pill.js.map

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

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

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+var global_styles = require('../../shared/global.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var PillComponent = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  cursor: pointer;\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n  padding: ", "px\n    ", "px;\n  width: fit-content;\n\n  ", "\n\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  cursor: pointer;\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n  padding: ", "px\n    ", "px;\n  width: fit-content;\n\n  ", "\n\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) { var _a, _b; return props.active ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) {
+    var _a, _b;
+    return props.active
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.medium;
+}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.medium; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; }, global_styles.focusVisible, function (props) {
+    var _a, _b;
+    return props.active
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
+}, function (props) { var _a; return props.active && ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlueHover); }, function (props) {
+    var _a, _b;
+    return props.active
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLighter
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter;
+}, function (props) { var _a; return props.active && ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlueHover); });
+var PillContent = styled__default["default"].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var Text = styled__default["default"].span(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; });
+var Amount = styled__default["default"].span(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.placeholder; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+exports.Amount = Amount;
+exports.PillComponent = PillComponent;
+exports.PillContent = PillContent;
+exports.Text = Text;
+//# sourceMappingURL=Pill.styles.js.map

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

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

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

@@ -96,6 +96,7 @@ require('../CouponCode/CouponCode.js');
 require('../CartCardLabel/CartCardLabel.styles.js');
 require('../CartCard/CartCard.styles.js');
 require('../PriceTag/PriceTag.js');
+require('../Pill/Pill.styles.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

@@ -87,6 +87,7 @@ var CouponCode = require('./components/CouponCode/CouponCode.js');
 var CartCardLabel = require('./components/CartCardLabel/CartCardLabel.js');
 var CartCard = require('./components/CartCard/CartCard.js');
 var PriceTag = require('./components/PriceTag/PriceTag.js');
+var Pill = require('./components/Pill/Pill.js');
 
 
 
@@ -234,4 +235,5 @@ Object.defineProperty(exports, 'EPriceVariant', {
 	get: function () { return PriceTag.EPriceVariant; }
 });
 exports.PriceTag = PriceTag.PriceTag;
+exports.Pill = Pill.Pill;
 //# 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

@@ -92,6 +92,7 @@ import '../CouponCode/CouponCode.js';
 import '../CartCardLabel/CartCardLabel.styles.js';
 import '../CartCard/CartCard.styles.js';
 import '../PriceTag/PriceTag.js';
+import '../Pill/Pill.styles.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

@@ -17,8 +17,8 @@ var EButtonVariant;
     EButtonVariant[EButtonVariant["ghost"] = 4] = "ghost";
 })(EButtonVariant || (EButtonVariant = {}));
 var CgButton = function (_a) {
-    var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth, buttonRef = _a.buttonRef;
-    return (React.createElement(CgButtonContainer, { ref: buttonRef, size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, loading: loading, onKeyDown: function (event) {
+    var size = _a.size, variant = _a.variant, icon = _a.icon, flexReverse = _a.flexReverse, disabled = _a.disabled, onClick = _a.onClick, children = _a.children, loading = _a.loading, fullWidth = _a.fullWidth, buttonRef = _a.buttonRef, round = _a.round;
+    return (React.createElement(CgButtonContainer, { ref: buttonRef, round: round, size: size, variant: variant, isIconOnly: !children, flexReverse: flexReverse, disabled: disabled || loading, fullWidth: fullWidth, loading: loading, onKeyDown: function (event) {
             if (event.key === 'Enter') {
                 onClick && onClick();
             }

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

@@ -38,12 +38,12 @@ var buttonShadow = function (size, variant) {
             return 'inset 0px -2px 0px rgba(0, 0, 0, 0.15)';
     }
 };
-var CgButtonContainer = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  ", "\n  &:disabled {\n    cursor: default;\n  }\n  &:after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n  ", "\n"], ["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  ", "\n  &:disabled {\n    cursor: default;\n  }\n  &:after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n  ", "\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
+var CgButtonContainer = styled.button(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  ", "\n  &:disabled {\n    cursor: default;\n  }\n  &:after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n  ", "\n"], ["\n  border-radius: ", "px;\n  padding: ", ";\n  cursor: pointer;\n  outline: none;\n  border: none;\n  position: relative;\n  ", "\n  ", "\n  &:disabled {\n    cursor: default;\n  }\n  &:after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    box-shadow: ", ";\n    border-radius: ", "px;\n    top: 0;\n    left: 0;\n  }\n\n  ", "\n  ", "\n"])), 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%;"; }, focusVisible, function (props) { return buttonShadow(props.size, props.variant); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
+}, function (props) { return (props === null || props === void 0 ? void 0 : props.fullWidth) && "width: 100%;"; }, 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 EButtonVariant.primary:
             return CgPrimary;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PillComponent, PillContent, Text, Amount } from './Pill.styles.js';
+
+var Pill = function (_a) {
+    var _b = _a.active, active = _b === void 0 ? false : _b, amount = _a.amount, onClick = _a.onClick, text = _a.text;
+    return (React.createElement(PillComponent, { active: active, onClick: onClick, onKeyDown: function (e) {
+            if (e.key === 'Enter')
+                onClick();
+        }, tabIndex: 0 },
+        React.createElement(PillContent, null,
+            React.createElement(Text, null, text),
+            amount !== undefined && React.createElement(Amount, null,
+                "(",
+                amount,
+                ")"))));
+};
+
+export { Pill };
+//# sourceMappingURL=Pill.js.map

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

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

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

@@ -0,0 +1,27 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import { focusVisible } from '../../shared/global.styles.js';
+
+var PillComponent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  cursor: pointer;\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n  padding: ", "px\n    ", "px;\n  width: fit-content;\n\n  ", "\n\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: ", "px;\n  cursor: pointer;\n  font-size: ", "px;\n  font-weight: ", ";\n  line-height: ", "px;\n  padding: ", "px\n    ", "px;\n  width: fit-content;\n\n  ", "\n\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) { var _a, _b; return props.active ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) {
+    var _a, _b;
+    return props.active
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.medium;
+}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.big; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.weight.medium; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.s2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs2; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; }, focusVisible, function (props) {
+    var _a, _b;
+    return props.active
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
+}, function (props) { var _a; return props.active && ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlueHover); }, function (props) {
+    var _a, _b;
+    return props.active
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLighter
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter;
+}, function (props) { var _a; return props.active && ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlueHover); });
+var PillContent = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var Text = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; });
+var Amount = styled.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.placeholder; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+export { Amount, PillComponent, PillContent, Text };
+//# sourceMappingURL=Pill.styles.js.map

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

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

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

@@ -92,6 +92,7 @@ import '../CouponCode/CouponCode.js';
 import '../CartCardLabel/CartCardLabel.styles.js';
 import '../CartCard/CartCard.styles.js';
 import '../PriceTag/PriceTag.js';
+import '../Pill/Pill.styles.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

@@ -83,4 +83,5 @@ export { CouponCode, ECouponCodeStatus } from './components/CouponCode/CouponCod
 export { CartCardLabel } from './components/CartCardLabel/CartCardLabel.js';
 export { CartCard } from './components/CartCard/CartCard.js';
 export { EPriceVariant, PriceTag } from './components/PriceTag/PriceTag.js';
+export { Pill } from './components/Pill/Pill.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.40",
+  "version": "0.8.42",
   "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": "9757b24d1d87641febb8890a7d77b3a2952699cb"
+  "gitHead": "6756c8b3fe74377a3f52958295e8c7854cbd3eac"
 }