@citygross/components 0.12.3 → 0.12.6

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

@@ -1,30 +1,33 @@
-/// <reference types="react" />
+import React from 'react';
 export declare type TCartSummary = {
-    title?: string;
-    subTitle?: string;
     bags?: TSummaryItem[];
-    groceries?: TSummaryItem[];
-    charges?: TSummaryItem[];
     cateredMeals?: TSummaryItem[];
+    charges?: TSummaryItem[];
     deliveryFee?: {
         amount: number;
         taxAmount: number;
         taxPercentage: number;
         totalDiscountAmount: number;
     };
+    groceries?: TSummaryItem[];
+    itemsLabel?: string;
+    saveLabel?: string;
+    shippingLabel?: string;
+    subtitle?: string;
+    taxLabel?: string;
+    title?: string;
     totalAmount: number;
     totalDiscount: number;
-    totalTaxAmount: number;
     totalLabel?: string;
-    taxLabel?: string;
-    shippingLabel?: string;
-    saveLabel?: string;
+    totalTaxAmount: number;
 };
 export declare type TSummaryItem = {
     amount: number;
     cancelledAmount: number;
-    quantity: number;
     cancelledQuantity: number;
+    info?: React.ReactNode;
     name?: string;
+    quantity: number;
+    tooltipAriaLabel?: string;
 };
-export declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, ...cartSummary }: TCartSummary): JSX.Element;
+export declare function CartSummary({ saveLabel, totalLabel, itemsLabel, ...cartSummary }: TCartSummary): JSX.Element;

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

@@ -6,9 +6,12 @@ declare type TSummaryHeader = {
 };
 export declare const CartSummaryContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const CartPaymentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const CartSummaryHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TSummaryHeader, never>;
-export declare const CartSummaryFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const CartSummaryContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TSummaryHeader, never>;
 export declare const CartLine: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartLine, never>;
 export declare const AmountWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LabelWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ToolTipButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
 export declare const CartSummaryTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const QuantitySpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const TotalLine: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TCartLine, never>;
 export {};

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

@@ -1,2 +1,5 @@
 import React from 'react';
-export declare const CgButton: React.ForwardRefExoticComponent<import("./CgButton.types").TCgButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CgButton: React.ForwardRefExoticComponent<{
+    badge?: string | undefined;
+    loading?: boolean | undefined;
+} & import("./CgButton.types").TCgButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -5,6 +5,7 @@ export declare const ButtonStyle: import("styled-components").StyledComponent<"b
 }, never>;
 export declare const ChildrenContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TChildrenContainer, never>;
 export declare const SpinnerContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, 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;

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

@@ -16,13 +16,15 @@ export declare type TCgButtonRoot = {
     children?: React.ReactNode;
     circle?: boolean;
     fullWidth?: boolean;
-    loading?: boolean;
     rounded?: boolean;
     size?: EButtonSize;
     type?: 'button' | 'submit' | 'reset';
     variant?: EButtonVariant;
 };
-export declare type TCgButton = TCgButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare type TCgButton = {
+    badge?: string;
+    loading?: boolean;
+} & TCgButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement>;
 export declare type TCgButtonStyle = Omit<TCgButtonRoot, 'children' | 'loading' | 'variant'> & {
     sizeAttributes: TButtonSizeAttributes;
     variantAttributes: TButtonVariantAttributes;
@@ -42,4 +44,4 @@ export declare type TButtonVariantAttributes = {
     border?: boolean;
     fontColor?: string;
 };
-export declare type TChildrenContainer = Pick<TCgButtonRoot, 'loading'>;
+export declare type TChildrenContainer = Pick<TCgButton, 'loading'>;

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

@@ -1,17 +1,26 @@
 import React from 'react';
 export declare type TItem = {
-    name?: string;
     image?: string;
-    description?: string;
+    name?: string;
     secondaryDescription?: React.ReactNode;
+    subtitle?: string;
 };
 export declare enum EListItemAlignment {
     CENTER = "center",
     TOP = "flex-start"
 }
+export declare type TCheckboxOption = {
+    checked?: boolean;
+    disabled?: boolean;
+    label: string;
+    name?: string;
+    onChange?: (checked: boolean) => void;
+    value?: string;
+};
 export declare type TListItem = {
     alignment?: EListItemAlignment;
     children?: React.ReactNode;
+    checkboxes?: TCheckboxOption[];
     fallBackImage?: string;
     imageAutoHeight?: boolean;
     item?: TItem;

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

@@ -15,3 +15,4 @@ export declare type TListImage = {
     isSmall?: boolean;
 };
 export declare const ListImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, TListImage, never>;
+export declare const CheckboxContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -6,7 +6,7 @@ export declare type TModal = styles.TModalContainer & {
     hideCancel?: boolean;
     onBackdropClick: () => void;
     querySelector?: string;
-    subTitle?: string;
+    subtitle?: string;
     title?: string;
 };
 export declare const Modal: React.ForwardRefExoticComponent<styles.TModalContainer & {
@@ -15,6 +15,6 @@ export declare const Modal: React.ForwardRefExoticComponent<styles.TModalContain
     hideCancel?: boolean | undefined;
     onBackdropClick: () => void;
     querySelector?: string | undefined;
-    subTitle?: string | undefined;
+    subtitle?: string | undefined;
     title?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,12 +1,11 @@
-import React from 'react';
+/// <reference types="react" />
 export declare type TPagination = {
-    totalItems?: number;
     fetchItems: (page: number) => void;
     currentPage: number;
+    totalItems?: number;
     itemsPerPage?: number;
     setPage?: (page: number) => void;
-    numOfPaginationsToShow?: number;
-    rightIcon?: React.ReactNode;
-    leftIcon?: React.ReactNode;
+    pageLabel?: string;
+    onPageChange?: (page: number) => void;
 };
-export declare function Pagination({ totalItems, currentPage, fetchItems, itemsPerPage, setPage, numOfPaginationsToShow, rightIcon, leftIcon }: TPagination): JSX.Element;
+export declare function Pagination({ totalItems, currentPage, fetchItems, itemsPerPage, setPage, pageLabel, onPageChange }: TPagination): JSX.Element | null;

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

@@ -1,7 +1,5 @@
-declare type TPaginationButtonWrapper = {
-    show?: boolean;
-};
-export declare const PaginationButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TPaginationButtonWrapper, never>;
-export declare const LeftPaginationButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TPaginationButtonWrapper, never>;
-export declare const Flex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export {};
+export declare const PaginationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ArrowButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const PageInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -6,7 +6,7 @@ export declare enum EProductHeader {
 }
 export declare type TProductHeader = {
     location: EProductHeader;
-    subTitle?: string;
+    subtitle?: string;
     title?: string;
 };
 export declare const ProductHeader: React.FunctionComponent<TProductHeader>;

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

@@ -25,7 +25,7 @@ require('@citygross/utils');
 require('react-loading-skeleton');
 require('../CartItemSummary/CartItemSummary.styles.js');
 require('../CartSubTotal/CartSubTotal.js');
-require('../Divider/Divider.styles.js');
+require('../ToolTipDialog/ToolTipDialog.styles.js');
 require('../CartSummary/CartSummary.styles.js');
 require('../../../../design-tokens/build/index.js');
 require('../CgButton/ButtonAsLink/ButtonAsLink.styles.js');
@@ -38,6 +38,7 @@ require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
 require('../DateBox/DateBox.styles.js');
 require('../DeliverySlotItem/DeliverySlotItem.styles.js');
 require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
+require('../Divider/Divider.styles.js');
 require('../DotIndicator/DotIndicator.styles.js');
 require('../Flex/Flex.styles.js');
 require('../Form/Form.styles.js');
@@ -101,7 +102,6 @@ require('../StepperMobile/StepperMobile.styles.js');
 require('../Table/Table.styles.js');
 require('../Tag/Tag.styles.js');
 require('../Timeline/Timeline.styles.js');
-require('../ToolTipDialog/ToolTipDialog.styles.js');
 require('../UnorderedList/UnorderedList.styles.js');
 require('../WarningLabel/WarningLabel.styles.js');
 require('../ZipCodeInput/ZipCodeInput.styles.js');

package/build/cjs/components/src/components/CartCard/assets/fallback_grocery.svg.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\r\n    <title>shopping_cart_loaded</title>\r\n    <desc>Created with Sketch.</desc>\r\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\r\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\r\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\r\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\r\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\r\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\r\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\r\n                </g>\r\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\r\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\r\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\r\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\r\n                </g>\r\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\r\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\r\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\r\n                </g>\r\n            </g>\r\n        </g>\r\n    </g>\r\n</svg>";
+var FallbackIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"128px\" height=\"124px\" viewBox=\"0 0 128 124\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <!-- Generator: Sketch 52.4 (67378) - http://www.bohemiancoding.com/sketch -->\n    <title>shopping_cart_loaded</title>\n    <desc>Created with Sketch.</desc>\n    <g id=\"Page-1\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n        <g id=\"Artboard\" transform=\"translate(-100.000000, -53.000000)\">\n            <g id=\"shopping_cart_loaded\" transform=\"translate(100.000000, 53.000000)\">\n                <polygon id=\"Rectangle\" fill=\"#D8D8D8\" transform=\"translate(89.585472, 37.151291) rotate(45.000000) translate(-89.585472, -37.151291) \" points=\"69.9549199 17.5207389 109.199991 17.536771 109.216023 56.7818423 69.970952 56.7658102\"></polygon>\n                <polygon id=\"Rectangle\" fill=\"#D1D1D1\" transform=\"translate(61.784256, 30.970598) rotate(45.000000) translate(-61.784256, -30.970598) \" points=\"39.9897062 9.17604823 83.5610058 9.19384764 83.5788052 52.7651473 40.0075056 52.7473478\"></polygon>\n                <g id=\"Group\" transform=\"translate(6.000000, 12.000000)\" fill=\"#E8E8E8\">\n                    <path d=\"M40.2213256,80.6 C36.8179827,80.6 34.0334294,77.81 34.0334294,74.4 L34.0334294,43.4 L21.6576369,43.4 L21.6576369,74.4 C21.6576369,84.63 30.0112968,93 40.2213256,93 L99.0063401,93 L99.0063401,80.6 L40.2213256,80.6 Z\" id=\"Path\"></path>\n                    <path d=\"M24.1327954,12.4 L22.8952161,8.37 C21.0388473,3.41 16.3979251,0 11.1382133,0 L0,0 L0,12.4 L11.1382133,12.4 L28.154928,63.86 C29.0831124,66.34 31.2488761,68.2 34.0334294,68.2 L92.8184438,68.2 C95.2936023,68.2 97.459366,66.65 98.3875504,64.48 L121.901556,12.4 L24.1327954,12.4 Z\" id=\"Path\"></path>\n                </g>\n                <ellipse id=\"Oval\" fill=\"#D8D8D8\" cx=\"6\" cy=\"18.5\" rx=\"6\" ry=\"6.5\"></ellipse>\n                <g id=\"Group\" transform=\"translate(40.000000, 105.000000)\" fill=\"#D8D8D8\">\n                    <ellipse id=\"Oval\" cx=\"55.7142857\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"9.28571429\" cy=\"9.5\" rx=\"9.28571429\" ry=\"9.5\"></ellipse>\n                </g>\n                <g id=\"Group\" transform=\"translate(46.000000, 112.000000)\" fill=\"#D1D1D1\">\n                    <ellipse id=\"Oval\" cx=\"49.8823529\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                    <ellipse id=\"Oval\" cx=\"3.11764706\" cy=\"3\" rx=\"3.11764706\" ry=\"3\"></ellipse>\n                </g>\n            </g>\n        </g>\n    </g>\n</svg>";
 
 module.exports = FallbackIcon;
 //# sourceMappingURL=fallback_grocery.svg.js.map

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

@@ -24,7 +24,7 @@ function CartItemSummary(_a) {
             React__default["default"].createElement(CartItemSummary_styles.AmountText, { lineThrough: true, fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.cancelledAmount, withParenthesis)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))))),
         React__default["default"].createElement(CartItemSummary_styles.ItemInformationContainer, null,
             React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL }, (product === null || product === void 0 ? void 0 : product.quantity) || (product === null || product === void 0 ? void 0 : product.quantity) === 0 ? ("".concat(product.quantity, " ").concat(unit)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))),
-            React__default["default"].createElement(CartItemSummary_styles.AmountText, { fontWeight: withParenthesis ? 'regular' : 'semiBold' }, product ? (utils.formatPrice(product.amount, withParenthesis)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))))));
+            React__default["default"].createElement(CartItemSummary_styles.AmountText, { fontWeight: withParenthesis ? 'regular' : 'medium' }, product ? (utils.formatPrice(product.amount, withParenthesis)) : (React__default["default"].createElement(Skeleton__default["default"], { width: 100 }))))));
 }
 
 exports.CartItemSummary = CartItemSummary;

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

@@ -5,7 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.js');
 var utils = require('@citygross/utils');
 var React = require('react');
-var Divider = require('../Divider/Divider.js');
+var icons = require('@citygross/icons');
+var ToolTipDialog = require('../ToolTipDialog/ToolTipDialog.js');
 var CartSummary_styles = require('./CartSummary.styles.js');
 var typography = require('@citygross/typography');
 var index = require('../../../../design-tokens/build/index.js');
@@ -32,8 +33,8 @@ var calculateSummaryLine = function (items) {
     return sumOfItems;
 };
 function CartSummary(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    var _s = _a.saveLabel, saveLabel = _s === void 0 ? 'rabatter' : _s, _t = _a.shippingLabel, shippingLabel = _t === void 0 ? 'frakt' : _t, _u = _a.totalLabel, totalLabel = _u === void 0 ? 'totalt' : _u, _v = _a.taxLabel, taxLabel = _v === void 0 ? 'varav moms' : _v, cartSummary = _tslib.__rest(_a, ["saveLabel", "shippingLabel", "totalLabel", "taxLabel"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _p = _a.saveLabel, saveLabel = _p === void 0 ? 'Varav rabatt' : _p, _q = _a.totalLabel, totalLabel = _q === void 0 ? 'Totalt' : _q, _r = _a.itemsLabel, itemsLabel = _r === void 0 ? 'Varor' : _r, cartSummary = _tslib.__rest(_a, ["saveLabel", "totalLabel", "itemsLabel"]);
     var charges = (_b = cartSummary.charges) !== null && _b !== void 0 ? _b : [];
     var bags = (_c = cartSummary.bags) !== null && _c !== void 0 ? _c : [];
     var groceries = (_d = cartSummary.groceries) !== null && _d !== void 0 ? _d : [];
@@ -41,55 +42,63 @@ function CartSummary(_a) {
     var sumOfBags = calculateSummaryLine(bags);
     var sumOfGroceries = calculateSummaryLine(groceries);
     var sumOfCateredMeals = calculateSummaryLine(cateredMeals);
+    var ChargeLine = function (_a) {
+        var _b, _c;
+        var charge = _a.charge;
+        var _d = React.useState(false), infoOpen = _d[0], setInfoOpen = _d[1];
+        var tooltipId = "tooltip-".concat((_b = charge.name) === null || _b === void 0 ? void 0 : _b.toLowerCase().replace(/ /g, '-'));
+        var toggleInfoOpen = function () {
+            setInfoOpen(!infoOpen);
+        };
+        var chargeName = charge.name
+            ? charge.name.charAt(0).toUpperCase() + charge.name.slice(1).toLowerCase()
+            : '';
+        return (React__default["default"].createElement(React.Fragment, null,
+            React__default["default"].createElement(CartSummary_styles.CartLine, { key: charge.name },
+                React__default["default"].createElement(CartSummary_styles.LabelWrapper, null,
+                    React__default["default"].createElement(typography.BodyText, null, chargeName),
+                    charge.info && (React__default["default"].createElement(CartSummary_styles.ToolTipButton, { "aria-expanded": infoOpen, "aria-label": charge.tooltipAriaLabel || 'Mer information', "aria-describedby": infoOpen ? tooltipId : undefined, onClick: toggleInfoOpen },
+                        React__default["default"].createElement(icons.Icons.Info, { "aria-hidden": "true", height: 16, width: 16 })))),
+                React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
+                    charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_c = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _c === void 0 ? void 0 : _c.dark }, utils.formatPrice(charge.cancelledAmount))),
+                    React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(charge.amount)))),
+            infoOpen && charge.info && (React__default["default"].createElement(ToolTipDialog.ToolTipDialog, { id: tooltipId, info: charge.info, toggle: toggleInfoOpen }))));
+    };
     return (React__default["default"].createElement(CartSummary_styles.CartSummaryContainer, null,
         React__default["default"].createElement(CartSummary_styles.CartPaymentContainer, null,
             cartSummary.title && (React__default["default"].createElement(CartSummary_styles.CartSummaryTitle, null,
                 React__default["default"].createElement(typography.H3, null, cartSummary.title),
-                React__default["default"].createElement(typography.BodyText, null, cartSummary.subTitle))),
-            React__default["default"].createElement(CartSummary_styles.CartSummaryHeader, { title: cartSummary.title },
+                React__default["default"].createElement(typography.BodyText, null, cartSummary.subtitle))),
+            React__default["default"].createElement(CartSummary_styles.CartSummaryContent, { title: cartSummary.title },
                 ((groceries === null || groceries === void 0 ? void 0 : groceries.length) > 0 || (cateredMeals === null || cateredMeals === void 0 ? void 0 : cateredMeals.length) > 0) && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
                     React__default["default"].createElement(typography.BodyText, null,
-                        "varor",
-                        ' ',
-                        ((_f = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _f !== void 0 ? _f : 0) +
-                            ((_g = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _g !== void 0 ? _g : 0),
-                        ' ',
-                        "st"),
+                        itemsLabel,
+                        React__default["default"].createElement(CartSummary_styles.QuantitySpan, null,
+                            "\u00A0(",
+                            ((_f = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.quantity) !== null && _f !== void 0 ? _f : 0) +
+                                ((_g = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.quantity) !== null && _g !== void 0 ? _g : 0),
+                            ")")),
                     React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
                         (sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_h = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _h === void 0 ? void 0 : _h.dark }, utils.formatPrice(((_j = sumOfGroceries === null || sumOfGroceries === void 0 ? void 0 : sumOfGroceries.cancelledAmount) !== null && _j !== void 0 ? _j : 0) +
                             ((_k = sumOfCateredMeals === null || sumOfCateredMeals === void 0 ? void 0 : sumOfCateredMeals.cancelledAmount) !== null && _k !== void 0 ? _k : 0)))),
-                        React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
+                        React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
                 bags.length > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
                     React__default["default"].createElement(typography.BodyText, null,
-                        "matkassar ",
+                        "Matkassar (",
                         sumOfBags.quantity,
-                        " st"),
+                        ")"),
                     React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
                         sumOfBags.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_l = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _l === void 0 ? void 0 : _l.dark }, utils.formatPrice(sumOfBags.cancelledAmount))),
-                        React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfBags.amount))))),
-                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React__default["default"].createElement(Divider.Divider, { xsSpacing: (_m = index.theme.spacings) === null || _m === void 0 ? void 0 : _m.xs, lgSpacing: (_o = index.theme.spacings) === null || _o === void 0 ? void 0 : _o.xs })), charges === null || charges === void 0 ? void 0 :
-                charges.map(function (charge) {
-                    var _a, _b;
-                    return (React__default["default"].createElement(CartSummary_styles.CartLine, { key: charge.name },
-                        React__default["default"].createElement(typography.BodyText, null, (_a = charge === null || charge === void 0 ? void 0 : charge.name) === null || _a === void 0 ? void 0 : _a.toLowerCase()),
-                        React__default["default"].createElement(CartSummary_styles.AmountWrapper, null,
-                            charge.cancelledAmount > 0 && (React__default["default"].createElement(typography.BodyText, { lineThrough: true, color: (_b = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _b === void 0 ? void 0 : _b.dark }, utils.formatPrice(charge.cancelledAmount))),
-                            React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(charge.amount)))));
-                }),
-                cartSummary.totalDiscount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
-                    React__default["default"].createElement(typography.BodyText, { color: (_p = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _p === void 0 ? void 0 : _p.alertRed }, saveLabel),
-                    React__default["default"].createElement(typography.BodyText, { color: (_q = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _q === void 0 ? void 0 : _q.alertRed }, utils.formatPrice(cartSummary.totalDiscount))))),
-            React__default["default"].createElement(CartSummary_styles.CartSummaryFooter, null,
-                ((_r = cartSummary.deliveryFee) === null || _r === void 0 ? void 0 : _r.amount) &&
-                    cartSummary.deliveryFee.amount > 0 && (React__default["default"].createElement(CartSummary_styles.CartLine, null,
-                    React__default["default"].createElement(typography.BodyText, null, shippingLabel),
-                    React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.deliveryFee.amount)))),
-                React__default["default"].createElement(CartSummary_styles.CartLine, null,
-                    React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, totalLabel),
-                    React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(cartSummary.totalAmount))),
+                        React__default["default"].createElement(typography.BodyText, { fontWeight: "semiBold" }, utils.formatPrice(sumOfBags.amount))))), charges === null || charges === void 0 ? void 0 :
+                charges.map(function (charge) { return (React__default["default"].createElement(ChargeLine, { key: charge.name, charge: charge })); }),
+                React__default["default"].createElement(CartSummary_styles.TotalLine, null,
+                    React__default["default"].createElement(typography.H3, { fontWeight: "semiBold" }, totalLabel),
+                    React__default["default"].createElement(typography.H3, { fontWeight: "semiBold" }, utils.formatPrice(cartSummary.totalAmount))),
                 React__default["default"].createElement(CartSummary_styles.CartLine, null,
-                    React__default["default"].createElement(typography.BodyText, null, taxLabel),
-                    React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.totalTaxAmount)))))));
+                    React__default["default"].createElement(typography.BodyText, { color: (_m = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _m === void 0 ? void 0 : _m.alertRed, size: typography.TextTypes.TextSize.SMALL }, saveLabel),
+                    React__default["default"].createElement(typography.BodyText, { color: (_o = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _o === void 0 ? void 0 : _o.alertRed, size: typography.TextTypes.TextSize.SMALL },
+                        "-",
+                        utils.formatPrice(cartSummary.totalDiscount)))))));
 }
 
 exports.CartSummary = CartSummary;

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

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

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

@@ -10,19 +10,25 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 var CartSummaryContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject([""], [""])));
-var CartPaymentContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLighter; });
-var CartSummaryHeader = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  padding: ", "px;\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return props.title && "padding-top: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px"); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var CartSummaryFooter = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  padding: ", "px;\n  background: ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.yellowLight; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var CartLine = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
-var AmountWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var CartSummaryTitle = styled__default["default"].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"], ["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+var CartPaymentContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.white; });
+var CartSummaryContent = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  ", ";\n  display: flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) { var _a; return props.title && "padding-top: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm, "px"); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var CartLine = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"], ["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n"])), function (props) { return props.cancelled && 'line-through'; });
+var AmountWrapper = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n"], ["\n  display: flex;\n  gap: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var LabelWrapper = styled__default["default"].div(templateObject_6 || (templateObject_6 = _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.xs; });
+var ToolTipButton = styled__default["default"].button(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  \n  &:hover {\n    opacity: 0.7;\n  }\n  \n  &:focus {\n    outline-offset: ", "px;\n  }\n"], ["\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  \n  &:hover {\n    opacity: 0.7;\n  }\n  \n  &:focus {\n    outline-offset: ", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; });
+var CartSummaryTitle = styled__default["default"].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"], ["\n  padding: ", "px 0\n    ", "px;\n  margin: 0 ", "px;\n  display: flex;\n  gap: ", "px;\n  border-bottom: 1px solid ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.light; });
+var QuantitySpan = styled__default["default"].span(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  font-size: ", "px;\n"], ["\n  color: ", ";\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.disabledDarkGray; }, function (props) { var _a, _b; return (_b = (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size) === null || _b === void 0 ? void 0 : _b.s1; });
+var TotalLine = styled__default["default"](CartLine)(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n  margin-top: ", "px;\n"], ["\n  margin-top: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
 
 exports.AmountWrapper = AmountWrapper;
 exports.CartLine = CartLine;
 exports.CartPaymentContainer = CartPaymentContainer;
 exports.CartSummaryContainer = CartSummaryContainer;
-exports.CartSummaryFooter = CartSummaryFooter;
-exports.CartSummaryHeader = CartSummaryHeader;
+exports.CartSummaryContent = CartSummaryContent;
 exports.CartSummaryTitle = CartSummaryTitle;
+exports.LabelWrapper = LabelWrapper;
+exports.QuantitySpan = QuantitySpan;
+exports.ToolTipButton = ToolTipButton;
+exports.TotalLine = TotalLine;
 //# sourceMappingURL=CartSummary.styles.js.map

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

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

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

@@ -16,12 +16,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var CgButton = React.forwardRef(function (_a, ref) {
     var _b;
-    var boxShadow = _a.boxShadow, children = _a.children, circle = _a.circle, fullWidth = _a.fullWidth, loading = _a.loading, rounded = _a.rounded, _c = _a.size, size = _c === void 0 ? CgButton_types.EButtonSize.medium : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.variant, variant = _e === void 0 ? CgButton_types.EButtonVariant.primary : _e, props = _tslib.__rest(_a, ["boxShadow", "children", "circle", "fullWidth", "loading", "rounded", "size", "type", "variant"]);
+    var badge = _a.badge, children = _a.children, loading = _a.loading, _c = _a.size, size = _c === void 0 ? CgButton_types.EButtonSize.medium : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, _e = _a.variant, variant = _e === void 0 ? CgButton_types.EButtonVariant.primary : _e, props = _tslib.__rest(_a, ["badge", "children", "loading", "size", "type", "variant"]);
     var _f = button.getButtonAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
-    return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({ boxShadow: boxShadow, circle: circle, disabled: loading, fullWidth: fullWidth, ref: ref, rounded: rounded, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
+    return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({ disabled: loading, ref: ref, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
         React__default["default"].createElement(CgButton_styles.ChildrenContainer, { loading: loading }, children),
         loading && (React__default["default"].createElement(CgButton_styles.SpinnerContainer, null,
-            React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray })))));
+            React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray }))),
+        badge && React__default["default"].createElement(CgButton_styles.BadgeContainer, null, badge)));
 });
 CgButton.displayName = 'CgButton';
 

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

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

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

@@ -11,7 +11,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-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 sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\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  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\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 variantAttributes = _a.variantAttributes;
+    return variantAttributes.backgroundColor;
+}, function (_a) {
     var _b;
     var theme = _a.theme, variantAttributes = _a.variantAttributes;
     return variantAttributes.border
@@ -33,9 +36,6 @@ var sharedButtonStyles = styled.css(templateObject_1 || (templateObject_1 = _tsl
             ? (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.boxShadow.layoutShadowInset
             : (_c = theme.attributes) === null || _c === void 0 ? void 0 : _c.boxShadow.layoutShadowInsetMedium
         : 'none';
-}, function (_a) {
-    var variantAttributes = _a.variantAttributes;
-    return variantAttributes.backgroundColor;
 }, function (_a) {
     var variantAttributes = _a.variantAttributes;
     return variantAttributes.fontColor;
@@ -89,9 +89,47 @@ var ChildrenContainer = styled__default["default"].div(templateObject_3 || (temp
     return (loading ? 0 : 1);
 });
 var SpinnerContainer = styled__default["default"].span(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  position: absolute;\n"], ["\n  position: absolute;\n"])));
-var DivAsButton = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  ", "\n  cursor: pointer;\n"], ["\n  ", "\n  cursor: pointer;\n"])), sharedButtonStyles);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var BadgeContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  font-size: ", "px;\n  line-height: ", "px;\n  min-width: ", "px;\n  padding: ", ";\n  position: absolute;\n  top: -", "px;\n  right: -", "px;\n  width: fit-content;\n"], ["\n  background: ", ";\n  border-radius: ", "px;\n  color: ", ";\n  font-size: ", "px;\n  line-height: ", "px;\n  min-width: ", "px;\n  padding: ", ";\n  position: absolute;\n  top: -", "px;\n  right: -", "px;\n  width: fit-content;\n"])), function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.black;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.rounded;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.size) === null || _c === void 0 ? void 0 : _c.s0;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return (_c = (_b = theme.typography) === null || _b === void 0 ? void 0 : _b.lineHeight) === null || _c === void 0 ? void 0 : _c.xs;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.md;
+}, function (_a) {
+    var _b, _c;
+    var theme = _a.theme;
+    return "".concat((_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxxs, "px ").concat((_c = theme.spacings) === null || _c === void 0 ? void 0 : _c.xxs2, "px");
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
+}, function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs;
+});
+var DivAsButton = styled__default["default"].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  ", "\n  cursor: pointer;\n"], ["\n  ", "\n  cursor: pointer;\n"])), sharedButtonStyles);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
 
+exports.BadgeContainer = BadgeContainer;
 exports.ButtonStyle = ButtonStyle;
 exports.ChildrenContainer = ChildrenContainer;
 exports.DivAsButton = DivAsButton;

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/FormElements/Checkbox/Checkbox.styles.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
+var FormElement_styles = require('../FormElement.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var CheckboxContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n\n  &:hover {\n    background: ", ";\n  }\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n\n  &:hover {\n    background: ", ";\n  }\n"])), function (_a) {
+var CheckboxContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n\n  ", "\n"], ["\n  background: ", ";\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  width: ", "px;\n\n  ", "\n"])), function (_a) {
     var attributes = _a.attributes;
     return attributes.backgroundColor;
 }, function (_a) {
@@ -28,11 +29,12 @@ var CheckboxContainer = styled__default["default"].div(templateObject_1 || (temp
     var theme = _a.theme;
     return (_b = theme.spacings) === null || _b === void 0 ? void 0 : _b.sm1;
 }, function (_a) {
+    var _b;
     var attributes = _a.attributes;
-    return attributes.hoverBackgroundColor;
+    return styled.css(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n    --checkbox-hover-bg: ", ";\n\n    ", ":hover & {\n      background: var(--checkbox-hover-bg);\n    }\n  "], ["\n    --checkbox-hover-bg: ", ";\n\n    ", ":hover & {\n      background: var(--checkbox-hover-bg);\n    }\n  "])), (_b = attributes.hoverBackgroundColor) !== null && _b !== void 0 ? _b : attributes.backgroundColor, FormElement_styles.OptionInputWrapper);
 });
-var IconContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
-var templateObject_1, templateObject_2;
+var IconContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
+var templateObject_1, templateObject_2, templateObject_3;
 
 exports.CheckboxContainer = CheckboxContainer;
 exports.IconContainer = IconContainer;