@citygross/components 0.12.0 → 0.12.3

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export declare type TCartSummary = {
     title?: string;
     subTitle?: string;
@@ -19,7 +19,6 @@ export declare type TCartSummary = {
     taxLabel?: string;
     shippingLabel?: string;
     saveLabel?: string;
-    itemsLabel?: string;
 };
 export declare type TSummaryItem = {
     amount: number;
@@ -27,7 +26,5 @@ export declare type TSummaryItem = {
     quantity: number;
     cancelledQuantity: number;
     name?: string;
-    info?: React.ReactNode;
-    tooltipAriaLabel?: string;
 };
-export declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, itemsLabel, ...cartSummary }: TCartSummary): JSX.Element;
+export declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, ...cartSummary }: TCartSummary): JSX.Element;

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

@@ -6,12 +6,9 @@ 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 CartSummaryContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TSummaryHeader, 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 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,5 +1,2 @@
 import React from 'react';
-export declare const CgButton: React.ForwardRefExoticComponent<{
-    badge?: string | undefined;
-    loading?: boolean | undefined;
-} & import("./CgButton.types").TCgButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CgButton: React.ForwardRefExoticComponent<import("./CgButton.types").TCgButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -5,7 +5,6 @@ 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,15 +16,13 @@ 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 = {
-    badge?: string;
-    loading?: boolean;
-} & TCgButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare type TCgButton = TCgButtonRoot & React.ButtonHTMLAttributes<HTMLButtonElement>;
 export declare type TCgButtonStyle = Omit<TCgButtonRoot, 'children' | 'loading' | 'variant'> & {
     sizeAttributes: TButtonSizeAttributes;
     variantAttributes: TButtonVariantAttributes;
@@ -44,4 +42,4 @@ export declare type TButtonVariantAttributes = {
     border?: boolean;
     fontColor?: string;
 };
-export declare type TChildrenContainer = Pick<TCgButton, 'loading'>;
+export declare type TChildrenContainer = Pick<TCgButtonRoot, 'loading'>;

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

@@ -9,18 +9,9 @@ export declare enum EListItemAlignment {
     CENTER = "center",
     TOP = "flex-start"
 }
-export declare type TCheckboxOption = {
-    label: string;
-    checked?: boolean;
-    disabled?: boolean;
-    onChange?: (checked: boolean) => void;
-    name?: string;
-    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,4 +15,3 @@ 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/Pagination/Pagination.d.ts

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

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

@@ -1,5 +1,7 @@
-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>;
+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 {};

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

@@ -5,8 +5,8 @@ export declare enum EProductHeader {
     LIST_ITEM = "listItem"
 }
 export declare type TProductHeader = {
-    description?: string;
     location: EProductHeader;
+    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('../ToolTipDialog/ToolTipDialog.styles.js');
+require('../Divider/Divider.styles.js');
 require('../CartSummary/CartSummary.styles.js');
 require('../../../../design-tokens/build/index.js');
 require('../CgButton/ButtonAsLink/ButtonAsLink.styles.js');
@@ -38,7 +38,6 @@ 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');
@@ -102,6 +101,7 @@ 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\"?>\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>";
+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>";
 
 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' : 'medium' }, 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' : 'semiBold' }, 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,8 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.js');
 var utils = require('@citygross/utils');
 var React = require('react');
-var icons = require('@citygross/icons');
-var ToolTipDialog = require('../ToolTipDialog/ToolTipDialog.js');
+var Divider = require('../Divider/Divider.js');
 var CartSummary_styles = require('./CartSummary.styles.js');
 var typography = require('@citygross/typography');
 var index = require('../../../../design-tokens/build/index.js');
@@ -33,8 +32,8 @@ var calculateSummaryLine = function (items) {
     return sumOfItems;
 };
 function CartSummary(_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    var _p = _a.saveLabel, saveLabel = _p === void 0 ? 'Varav rabatt' : _p; _a.shippingLabel; var _r = _a.totalLabel, totalLabel = _r === void 0 ? 'Totalt' : _r; _a.taxLabel; var _t = _a.itemsLabel, itemsLabel = _t === void 0 ? 'Varor' : _t, cartSummary = _tslib.__rest(_a, ["saveLabel", "shippingLabel", "totalLabel", "taxLabel", "itemsLabel"]);
+    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 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 : [];
@@ -42,63 +41,55 @@ 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.CartSummaryContent, { title: cartSummary.title },
+            React__default["default"].createElement(CartSummary_styles.CartSummaryHeader, { 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,
-                        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),
-                            ")")),
+                        "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"),
                     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.BodyText, null, utils.formatPrice(sumOfGroceries.amount + sumOfCateredMeals.amount))))),
+                        React__default["default"].createElement(typography.H3, { fontWeight: 'semiBold' }, 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.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' }, 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(CartSummary_styles.CartLine, null,
-                    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)))))));
+                    React__default["default"].createElement(typography.BodyText, null, taxLabel),
+                    React__default["default"].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.totalTaxAmount)))))));
 }
 
 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,25 +10,19 @@ 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.white; });
-var CartSummaryContent = 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.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;
+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;
 
 exports.AmountWrapper = AmountWrapper;
 exports.CartLine = CartLine;
 exports.CartPaymentContainer = CartPaymentContainer;
 exports.CartSummaryContainer = CartSummaryContainer;
-exports.CartSummaryContent = CartSummaryContent;
+exports.CartSummaryFooter = CartSummaryFooter;
+exports.CartSummaryHeader = CartSummaryHeader;
 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,13 +16,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var CgButton = React.forwardRef(function (_a, ref) {
     var _b;
-    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 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 _f = button.getButtonAttributes(size, variant), sizeAttributes = _f.sizeAttributes, variantAttributes = _f.variantAttributes;
-    return (React__default["default"].createElement(CgButton_styles.ButtonStyle, _tslib.__assign({ disabled: loading, ref: ref, size: size, sizeAttributes: sizeAttributes, type: type, variantAttributes: variantAttributes }, props),
+    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),
         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 }))),
-        badge && React__default["default"].createElement(CgButton_styles.BadgeContainer, null, badge)));
+            React__default["default"].createElement(Spinner.Spinner, { animationSpeedMs: 1000, size: sizeAttributes.loadingSpinner, spinnerColor: (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.disabledDarkGray })))));
 });
 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,10 +11,7 @@ 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  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 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 theme = _a.theme, variantAttributes = _a.variantAttributes;
     return variantAttributes.border
@@ -36,6 +33,9 @@ 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,47 +89,9 @@ 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 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;
+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;
 
-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,13 +4,12 @@ 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_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 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 attributes = _a.attributes;
     return attributes.backgroundColor;
 }, function (_a) {
@@ -29,12 +28,11 @@ var CheckboxContainer = styled__default["default"].div(templateObject_2 || (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 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);
+    return attributes.hoverBackgroundColor;
 });
-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;
+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;
 
 exports.CheckboxContainer = CheckboxContainer;
 exports.IconContainer = IconContainer;

package/build/cjs/components/src/components/FormElements/Checkbox/Checkbox.styles.js.map

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

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

@@ -8,7 +8,6 @@ var ListItem_styles = require('./ListItem.styles.js');
 var ProductHeader = require('../ProductHeader/ProductHeader.js');
 var PriceTag_types = require('../PriceTag/PriceTag.types.js');
 var PriceStripe = require('../PriceStripe/PriceStripe.js');
-var Checkbox = require('../FormElements/Checkbox/Checkbox.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -21,7 +20,7 @@ exports.EListItemAlignment = void 0;
     EListItemAlignment["TOP"] = "flex-start";
 })(exports.EListItemAlignment || (exports.EListItemAlignment = {}));
 var ListItem = function (_a) {
-    var _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, children = _a.children, checkboxes = _a.checkboxes, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
+    var _b = _a.alignment, alignment = _b === void 0 ? exports.EListItemAlignment.CENTER : _b, children = _a.children, fallBackImage = _a.fallBackImage, imageAutoHeight = _a.imageAutoHeight, item = _a.item, isSmall = _a.isSmall, _c = _a.loading, loading = _c === void 0 ? false : _c, _d = _a.showPriceStripe, showPriceStripe = _d === void 0 ? false : _d, smallSkeleton = _a.smallSkeleton;
     return (React__default["default"].createElement(ListItem_styles.ListItemContainer, null,
         React__default["default"].createElement(ListItem_styles.ListLeft, { alignment: alignment },
             React__default["default"].createElement(ListItem_styles.ListImageContainer, { isSmall: isSmall },
@@ -36,17 +35,11 @@ var ListItem = function (_a) {
                         }
                     } })),
             React__default["default"].createElement(ListItem_styles.ItemInformationContainer, { alignment: alignment },
-                loading ? (React__default["default"].createElement(React.Fragment, null,
+                loading ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement(Skeleton__default["default"], { height: 15, width: smallSkeleton ? 150 : 250 }),
-                    React__default["default"].createElement(Skeleton__default["default"], { height: 12, width: smallSkeleton ? 100 : 200 }),
-                    checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(Skeleton__default["default"], { height: 20, width: smallSkeleton ? 150 : 200, count: checkboxes.length, style: { marginTop: '8px' } })))) : (React__default["default"].createElement(React.Fragment, null,
+                    React__default["default"].createElement(Skeleton__default["default"], { height: 12, width: smallSkeleton ? 100 : 200 }))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
                     showPriceStripe && (React__default["default"].createElement(PriceStripe.PriceStripe, { size: PriceTag_types.EPriceSize.SMALL, variant: PriceTag_types.EPriceVariant.PRIO })),
-                    React__default["default"].createElement(ProductHeader.ProductHeader, { description: item === null || item === void 0 ? void 0 : item.description, location: ProductHeader.EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name }),
-                    checkboxes && checkboxes.length > 0 && (React__default["default"].createElement(ListItem_styles.CheckboxContainer, null, checkboxes.map(function (checkbox, index) { return (React__default["default"].createElement(Checkbox.Checkbox, { key: index, label: checkbox.label, showLabel: true, checked: checkbox.checked, disabled: checkbox.disabled, name: checkbox.name, value: checkbox.value, onChange: function (e) {
-                            if (checkbox.onChange) {
-                                checkbox.onChange(e.target.checked);
-                            }
-                        } })); }))))),
+                    React__default["default"].createElement(ProductHeader.ProductHeader, { location: ProductHeader.EProductHeader.LIST_ITEM, title: item === null || item === void 0 ? void 0 : item.name, subTitle: item === null || item === void 0 ? void 0 : item.description }))),
                 (item === null || item === void 0 ? void 0 : item.secondaryDescription) && item.secondaryDescription)),
         children && (React__default["default"].createElement(ListItem_styles.ListRight, { alignment: alignment }, children))));
 };