@citygross/components 0.7.6 → 0.7.10

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

@@ -14,7 +14,8 @@ export declare enum ButtonColor {
 export declare type TButtonColor = keyof typeof ButtonColor;
 export declare type TBaseButton = styles.TButton & {
     size?: keyof typeof ButtonSize;
+    xsSize?: keyof typeof ButtonSize;
     children: React.ReactNode;
     color?: TButtonColor;
 };
-export declare function Button({ center, color, fullWidth, flexReverse, icon, isActive, isDisabled, loading, loadingImage, noWrap, onClick, size, children }: TBaseButton): JSX.Element;
+export declare function Button({ center, color, fullWidth, flexReverse, icon, isActive, isDisabled, loading, noWrap, onClick, size, xsSize, children }: TBaseButton): JSX.Element;

package/build/@types/components/Button/Button.stories.d.ts

@@ -35,6 +35,9 @@ declare const _default: {
                 options: boolean[];
             };
         };
+        loading: {
+            type: string;
+        };
     };
 };
 export default _default;

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

@@ -8,7 +8,6 @@ export declare type TButton = {
     isActive?: boolean;
     isDisabled?: boolean;
     loading?: boolean | null;
-    loadingImage?: JSX.Element;
     noWrap?: boolean;
     onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
@@ -20,12 +19,19 @@ export declare type TBaseSmallButton = Omit<TButton, 'size' | 'flexReverse' | 'f
     border?: string;
     shadow?: boolean;
 };
+export declare type TButtonLoadingSpinner = {
+    size?: TButtonSize;
+    xsSize?: TButtonSize;
+};
 export declare const BaseButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TButton, never>;
 export declare const BasePrimaryButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TButton & {
     color: string;
     size: TButtonSize;
+    xsSize?: "small" | "medium" | "large" | undefined;
 }, never>;
 export declare const Loading: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LoadingContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TButtonLoadingSpinner, never>;
+export declare const LoadingSpinner: import("styled-components").StyledComponent<({ spinnerColor, borderColor, animationSpeedMs, size, ...props }: import("../..").TSpinner) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const BaseIconButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, TButton & Omit<TButton, "size" | "flexReverse" | "fullWidth" | "center"> & {
     width?: string | undefined;
     height?: string | undefined;

package/build/@types/components/Button/IconButton.d.ts

@@ -5,4 +5,4 @@ export declare type TIconButton = styles.TBaseSmallButton & {
     color?: TButtonColor;
     icon: JSX.Element;
 };
-export declare function IconButton({ color, height, icon, isActive, isDisabled, loading, loadingImage, noWrap, onClick, border, shadow, width }: TIconButton): JSX.Element;
+export declare function IconButton({ color, height, icon, isActive, isDisabled, loading, noWrap, onClick, border, shadow, width }: TIconButton): JSX.Element;

package/build/@types/components/Button/PaginationButton.d.ts

@@ -6,4 +6,4 @@ export declare type TPaginationButton = styles.TBaseSmallButton & {
     color?: TButtonColor;
     icon?: JSX.Element;
 };
-export declare function PaginationButton({ color, height, icon, isActive, isDisabled, loading, loadingImage, noWrap, onClick, width, children }: TPaginationButton): JSX.Element;
+export declare function PaginationButton({ color, height, icon, isActive, isDisabled, loading, noWrap, onClick, width, children }: TPaginationButton): JSX.Element;

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 export declare type TCartSummary = {
+    title?: string;
+    subTitle?: string;
     bags?: TSummaryItem[];
     groceries?: TSummaryItem[];
     charges?: TSummaryItem[];

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

@@ -6,4 +6,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: Story<TCartSummary>;
+export declare const WithTitle: Story<TCartSummary>;
 export declare const UpdatedSalesOrder: Story<TCartSummary>;

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

@@ -1,10 +1,14 @@
 declare type TCartLine = {
     cancelled?: boolean;
 };
+declare type TSummaryHeader = {
+    title?: string;
+};
 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, {}, 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 CartSummaryTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -1,7 +1,6 @@
 declare type TDeliverySlotItem = {
     selected?: boolean;
     disabled?: boolean;
-    isMobile?: boolean;
     isVisible?: boolean;
 };
 export declare const DeliverySlotItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TDeliverySlotItem, never>;

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

@@ -1,4 +1,8 @@
-export declare const InfoBlock: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare type TBaseInfoBlock = {
+    hasImage?: boolean;
+    background?: string;
+};
+export declare const InfoBlock: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseInfoBlock, never>;
 export declare const ImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Image: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
 export declare const InfoTextWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -5,4 +5,4 @@ export declare type TSpinner = {
     animationSpeedMs?: number;
     size?: number;
 };
-export declare const Spinner: ({ spinnerColor, borderColor, animationSpeedMs, size }: TSpinner) => JSX.Element;
+export declare const Spinner: ({ spinnerColor, borderColor, animationSpeedMs, size, ...props }: TSpinner) => JSX.Element;

package/build/@types/components/Spinner/Spinner.stories.d.ts

@@ -2,7 +2,7 @@
 import { Story } from '@storybook/react';
 import { TSpinner } from './Spinner';
 declare const _default: {
-    component: ({ spinnerColor, borderColor, animationSpeedMs, size }: TSpinner) => JSX.Element;
+    component: ({ spinnerColor, borderColor, animationSpeedMs, size, ...props }: TSpinner) => JSX.Element;
     title: string;
     argTypes: {
         spinnerColor: {

package/build/@types/containers/TwoColumnsContainer/TwoColumnsPageContainer.d.ts

@@ -5,5 +5,6 @@ export declare type TTwoColumnsPageContainer = {
     rightColumnCollapsebleHeader: string;
     rightColumnWidth?: number;
     containerBackground?: string;
+    breakpoint?: number;
 };
-export declare const TwoColumnsPageContainer: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, ...props }: TTwoColumnsPageContainer) => JSX.Element;
+export declare const TwoColumnsPageContainer: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, breakpoint, ...props }: TTwoColumnsPageContainer) => JSX.Element;

package/build/@types/containers/TwoColumnsContainer/TwoColumnsPageContainer.stories.d.ts

@@ -2,7 +2,7 @@
 import { Story } from '@storybook/react';
 import { TTwoColumnsPageContainer } from './TwoColumnsPageContainer';
 declare const _default: {
-    component: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, ...props }: TTwoColumnsPageContainer) => JSX.Element;
+    component: ({ rightColumnWidth, leftColumn, rightColumn, containerBackground, rightColumnCollapsebleHeader, breakpoint, ...props }: TTwoColumnsPageContainer) => JSX.Element;
     title: string;
     argTypes: {
         leftColumn: {

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

@@ -24,14 +24,14 @@ exports.ButtonColor = void 0;
     ButtonColor[ButtonColor["darkest"] = 3] = "darkest";
 })(exports.ButtonColor || (exports.ButtonColor = {}));
 function Button(_a) {
-    var _b = _a.center, center = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, isActive = _a.isActive, isDisabled = _a.isDisabled, loading = _a.loading, loadingImage = _a.loadingImage, noWrap = _a.noWrap, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 'large' : _d, children = _a.children;
-    return (React__default['default'].createElement(Button_styles.BasePrimaryButton, { center: center, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, isActive: isActive, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, onClick: function (e) { return onClick && onClick(e); } },
-        loading && React__default['default'].createElement(Button_styles.Loading, null, loadingImage),
-        icon
-            ? (React__default['default'].createElement("div", null,
-                icon,
-                children))
-            : (children),
+    var _b = _a.center, center = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, fullWidth = _a.fullWidth, flexReverse = _a.flexReverse, icon = _a.icon, isActive = _a.isActive, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 'large' : _d, xsSize = _a.xsSize, children = _a.children;
+    return (React__default['default'].createElement(Button_styles.BasePrimaryButton, { center: center, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'white', fullWidth: fullWidth, flexReverse: flexReverse, icon: icon, isActive: isActive, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, size: size, xsSize: xsSize, onClick: function (e) { return onClick && onClick(e); } },
+        loading && (React__default['default'].createElement(Button_styles.Loading, null,
+            React__default['default'].createElement(Button_styles.LoadingContainer, { xsSize: xsSize, size: size },
+                React__default['default'].createElement(Button_styles.LoadingSpinner, null)))),
+        icon ? (React__default['default'].createElement("div", null,
+            icon,
+            children)) : (children),
         React__default['default'].createElement("span", { className: "ripple" })));
 }
 

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

@@ -4,6 +4,58 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
+require('react');
+require('@citygross/typography');
+require('../AddressBlock/AddressBlock.styles.js');
+require('./Button.js');
+require('@citygross/utils');
+require('@citygross/design-tokens');
+require('@citygross/icons');
+require('../Logo/Logo.styles.js');
+require('../Header/Header.styles.js');
+require('../HeaderLink/HeaderLink.styles.js');
+require('../Badge/Badge.styles.js');
+require('../Box/Box.styles.js');
+require('react-loading-skeleton');
+require('../CartItemSummary/CartItemSummary.styles.js');
+require('../Divider/Divider.styles.js');
+require('../CartSummary/CartSummary.styles.js');
+require('../../../../design-tokens/build/index.js');
+require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
+require('../Collapsable/Collapsable.styles.js');
+require('../DeliverySlotItem/DeliverySlotItem.styles.js');
+require('../DotIndicator/DotIndicator.styles.js');
+require('../Slider/Slider.styles.js');
+require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
+require('../Form/Form.styles.js');
+require('../FormControl/FormControl.js');
+require('../FormElements/Checkbox/Checkbox.styles.js');
+require('../FormElements/Input/Input.styles.js');
+require('../FormElements/Radio/Radio.styles.js');
+require('../FormElements/Switch/Switch.styles.js');
+require('../FormGroup/FormGroup.styles.js');
+require('../InfoTextBlock/InfoTextBlock.styles.js');
+require('../LayoutBox/LayoutBox.styles.js');
+require('../ListItem/ListItem.styles.js');
+require('../Links/Link.js');
+require('react-dom');
+require('../Modal/Modal.styles.js');
+require('../Spacer/Spacer.styles.js');
+require('../RadioBox/RadioBoxItem.styles.js');
+require('../RadioBox/RadioBoxList.styles.js');
+require('../RadioGroup/RadioListItem.styles.js');
+require('../RadioGroup/RadioGroup.styles.js');
+require('../RippleContainer/RippleContainer.styles.js');
+var Spinner = require('../Spinner/Spinner.js');
+require('../Stepper/Stepper.styles.js');
+require('../ToolTip/ToolTip.styles.js');
+require('../StepperMobile/StepperMobile.styles.js');
+require('../FormElements/TextArea/TextArea.styles.js');
+require('../Timeline/Timeline.styles.js');
+require('../QuantitySelector/QuantitySelector.styles.js');
+require('../../containers/PageContainer/PageContainer.styles.js');
+require('../../../../utils/build/index.js');
+require('../../containers/TwoColumnsContainer/TwoColumnsPageContainer.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -49,6 +101,18 @@ var ButtonPadding = function (theme, icon, flexReverse) {
             return '4px';
     }
 };
+var SpinnerSize = function (size) {
+    switch (size) {
+        case 'small':
+            return '20px';
+        case 'medium':
+            return '26px';
+        case 'large':
+            return '32px';
+        default:
+            return '26px';
+    }
+};
 var BaseButton = styled__default['default'].button(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  all: unset;\n  backface-visibility: hidden;\n  cursor: pointer;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  -webkit-font-smoothing: antialiased;\n  user-select: ", ";\n\n  position: relative;\n\n  /* typography */\n\n  font-family: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  white-space: ", ";\n\n  /* colors */\n\n  background: ", ";\n  color: ", ";\n\n  /* Width & Height */\n\n  width: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: 2px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: 2px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  /* Hover Effect */\n\n  &:hover {\n    ::after {\n      opacity: 1;\n    }\n  }\n  &:active {\n    ::before {\n      opacity: 1;\n    }\n    ::after {\n      opacity: 0;\n    }\n  }\n  /* Media Queries */\n\n  @media (max-width: ", "px) {\n    align-self: ", ";\n  }\n"], ["\n  all: unset;\n  backface-visibility: hidden;\n  cursor: pointer;\n  /* overflow: hidden; */\n  pointer-events: ", ";\n  -webkit-font-smoothing: antialiased;\n  user-select: ", ";\n\n  position: relative;\n\n  /* typography */\n\n  font-family: ", ";\n  font-weight: ", ";\n  text-align: ", ";\n  white-space: ", ";\n\n  /* colors */\n\n  background: ", ";\n  color: ", ";\n\n  /* Width & Height */\n\n  width: ", ";\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: 2px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: 2px;\n    top: 0;\n    left: 0;\n    box-shadow: ", ";\n    opacity: 0;\n    -webkit-transition: ", ";\n    transition: ", ";\n  }\n\n  /* Hover Effect */\n\n  &:hover {\n    ::after {\n      opacity: 1;\n    }\n  }\n  &:active {\n    ::before {\n      opacity: 1;\n    }\n    ::after {\n      opacity: 0;\n    }\n  }\n  /* Media Queries */\n\n  @media (max-width: ", "px) {\n    align-self: ", ";\n  }\n"])), function (props) { return (props.isDisabled ? 'none' : 'all'); }, function (props) { return props.isDisabled && 'none'; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.type.primary; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.typography) === null || _b === void 0 ? void 0 : _b.weight.medium; }, function (props) { return (props.center ? 'center' : 'initial'); }, function (props) { return (props.noWrap ? 'nowrap' : 'normal'); }, function (props) { var _a, _b; return props.isDisabled ? (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.medium : props.color; }, function (props) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     return props.color === ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.secondary) ||
@@ -57,7 +121,21 @@ var BaseButton = styled__default['default'].button(templateObject_1 || (template
         ? (_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.white
         : (_h = (_g = props === null || props === void 0 ? void 0 : props.theme) === null || _g === void 0 ? void 0 : _g.palette) === null || _h === void 0 ? void 0 : _h.darkest;
 }, function (props) { return (props.fullWidth ? '100%' : 'auto'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonHover; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.buttonActive; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a; return (_a = props.theme.animations) === null || _a === void 0 ? void 0 : _a.buttonTransition; }, function (props) { var _a, _b; return (_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.breakpoints) === null || _b === void 0 ? void 0 : _b.xs; }, function (props) { return (props.center ? 'center' : 'initial'); });
-var BasePrimaryButton = styled__default['default'](BaseButton)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  /* children */\n\n  div {\n    display: flex;\n    flex-direction: ", ";\n    width: 100%;\n    gap: ", ";\n    align-items: center;\n    justify-content: center;\n    flex-wrap: ", ";\n  }\n"], ["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  /* children */\n\n  div {\n    display: flex;\n    flex-direction: ", ";\n    width: 100%;\n    gap: ", ";\n    align-items: center;\n    justify-content: center;\n    flex-wrap: ", ";\n  }\n"])), function (props) { return ButtonFontSize(props.size); }, function (props) { return (props.size === 'small' ? '19px' : '22px'); }, function (props) {
+var BasePrimaryButton = styled__default['default'](BaseButton)(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n\n  /* children */\n\n  > div {\n    display: flex;\n    flex-direction: ", ";\n    width: 100%;\n    gap: ", ";\n    align-items: center;\n    justify-content: center;\n    flex-wrap: ", ";\n  }\n"], ["\n  /* TypoGraphy */\n\n  font-size: ", ";\n  line-height: ", ";\n\n  /* shadow */\n\n  box-shadow: ", ";\n\n  /* Padding */\n\n  padding: ", ";\n\n  @media (min-width: ", "px) {\n    font-size: ", ";\n\n    padding: ", ";\n\n    box-shadow: ", ";\n  }\n\n  /* children */\n\n  > div {\n    display: flex;\n    flex-direction: ", ";\n    width: 100%;\n    gap: ", ";\n    align-items: center;\n    justify-content: center;\n    flex-wrap: ", ";\n  }\n"])), function (props) { return ButtonFontSize(props.xsSize || props.size); }, function (props) { return (props.size === 'small' ? '19px' : '22px'); }, function (props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return props.xsSize ||
+        (props.size &&
+            (props.color === ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.primary) ||
+                props.color === ((_d = (_c = props === null || props === void 0 ? void 0 : props.theme) === null || _c === void 0 ? void 0 : _c.palette) === null || _d === void 0 ? void 0 : _d.secondary)))
+        ? ButtonShadow(props.xsSize || props.size)
+        : props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.white)
+            ? "inset 0px 0px 0px 1px " + ((_g = props.theme.palette) === null || _g === void 0 ? void 0 : _g.medium)
+            : 'none';
+}, function (props) {
+    return ButtonPadding(props.xsSize || props.size, props.icon, props.flexReverse);
+}, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return ButtonFontSize(props.size); }, function (props) {
+    return ButtonPadding(props.size, props.icon, props.flexReverse);
+}, function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
     return props.size &&
         (props.color === ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.primary) ||
@@ -66,11 +144,11 @@ var BasePrimaryButton = styled__default['default'](BaseButton)(templateObject_2
         : props.color === ((_f = (_e = props === null || props === void 0 ? void 0 : props.theme) === null || _e === void 0 ? void 0 : _e.palette) === null || _f === void 0 ? void 0 : _f.white)
             ? "inset 0px 0px 0px 1px " + ((_g = props.theme.palette) === null || _g === void 0 ? void 0 : _g.medium)
             : 'none';
-}, function (props) {
-    return ButtonPadding(props.size, props.icon, props.flexReverse);
 }, function (props) { return (props.flexReverse ? 'row-reverse' : 'row'); }, function (props) { return (props.size === 'small' ? '8px' : '12px'); }, function (props) { return (props.noWrap ? 'nowrap' : 'wrap'); });
 var Loading = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  z-index: 3;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var BaseIconButton = styled__default['default'](BaseButton)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: 4px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"], ["\n  padding: 4px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"])), function (props) { return props.height || '32px'; }, function (props) { return props.width || '32px'; }, function (props) { return props.width || '32px'; }, function (props) {
+var LoadingContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  width: ", ";\n  height: ", ";\n\n  @media (min-width: ", "px) {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { return SpinnerSize(props.xsSize || props.size); }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return SpinnerSize(props.size); }, function (props) { return SpinnerSize(props.size); });
+var LoadingSpinner = styled__default['default'](Spinner.Spinner)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n"], ["\n  width: 100%;\n  height: 100%;\n"])));
+var BaseIconButton = styled__default['default'](BaseButton)(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  padding: 4px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"], ["\n  padding: 4px;\n  border-radius: 50%;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0;\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  ", ";\n\n  &::after {\n    border-radius: 50%;\n    box-shadow: ", ";\n  }\n  &::before {\n    border-radius: 50%;\n  }\n"])), function (props) { return props.height || '32px'; }, function (props) { return props.width || '32px'; }, function (props) { return props.width || '32px'; }, function (props) {
     var _a;
     return props.shadow && props.border
         ? "box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.15), inset 0px 0px 0px 1px " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium)
@@ -80,17 +158,19 @@ var BaseIconButton = styled__default['default'](BaseButton)(templateObject_4 ||
                 ? "box-shadow: inset 0px 0px 0px 1px " + props.border
                 : 'none';
 }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.iconButtonHover; });
-var BasePaginationButton = styled__default['default'](BaseButton)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) { return props.height || '36px'; }, function (props) { return props.width || '36px'; }, function (props) { return props.width || '36px'; }, function (props) {
+var BasePaginationButton = styled__default['default'](BaseButton)(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: ", ";\n  width: ", ";\n  min-width: ", ";\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) { return props.height || '36px'; }, function (props) { return props.width || '36px'; }, function (props) { return props.width || '36px'; }, function (props) {
     var _a, _b, _c;
     return props.color !== ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white)
         ? 'box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.15)'
         : "box-shadow: inset 0px 0px 0px 1px " + ((_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.medium);
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
 exports.BaseButton = BaseButton;
 exports.BaseIconButton = BaseIconButton;
 exports.BasePaginationButton = BasePaginationButton;
 exports.BasePrimaryButton = BasePrimaryButton;
 exports.Loading = Loading;
+exports.LoadingContainer = LoadingContainer;
+exports.LoadingSpinner = LoadingSpinner;
 //# sourceMappingURL=Button.styles.js.map

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

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

package/build/cjs/components/src/components/Button/IconButton.js

@@ -11,9 +11,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function IconButton(_a) {
-    var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isActive = _a.isActive, isDisabled = _a.isDisabled, loading = _a.loading, loadingImage = _a.loadingImage, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width;
+    var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isActive = _a.isActive, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width;
     return (React__default['default'].createElement(Button_styles.BaseIconButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isActive: isActive, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow },
-        loading && React__default['default'].createElement(Button_styles.Loading, null, loadingImage),
+        loading && (React__default['default'].createElement(Button_styles.Loading, null,
+            React__default['default'].createElement(Button_styles.LoadingContainer, null,
+                React__default['default'].createElement(Button_styles.LoadingSpinner, null)))),
         icon,
         React__default['default'].createElement("span", { className: "ripple" })));
 }

package/build/cjs/components/src/components/Button/IconButton.js.map

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

package/build/cjs/components/src/components/Button/PaginationButton.js

@@ -11,9 +11,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function PaginationButton(_a) {
-    var _b = _a.color, color = _b === void 0 ? 'primary' : _b, height = _a.height, icon = _a.icon, isActive = _a.isActive, isDisabled = _a.isDisabled, loading = _a.loading, loadingImage = _a.loadingImage, noWrap = _a.noWrap, onClick = _a.onClick, width = _a.width, children = _a.children;
+    var _b = _a.color, color = _b === void 0 ? 'primary' : _b, height = _a.height, icon = _a.icon, isActive = _a.isActive, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, width = _a.width, children = _a.children;
     return (React__default['default'].createElement(Button_styles.BasePaginationButton, { color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'white', height: height, icon: icon, isActive: isActive, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width },
-        loading && React__default['default'].createElement(Button_styles.Loading, null, loadingImage),
+        loading && (React__default['default'].createElement(Button_styles.Loading, null,
+            React__default['default'].createElement(Button_styles.LoadingContainer, null,
+                React__default['default'].createElement(Button_styles.LoadingSpinner, null)))),
         icon || children,
         React__default['default'].createElement("span", { className: "ripple" })));
 }

package/build/cjs/components/src/components/Button/PaginationButton.js.map

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

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

@@ -31,7 +31,7 @@ var calculateSummaryLine = function (items) {
     return sumOfItems;
 };
 function CartSummary(cartSummary) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var charges = (_a = cartSummary.charges) !== null && _a !== void 0 ? _a : [];
     var bags = (_b = cartSummary.bags) !== null && _b !== void 0 ? _b : [];
     var groceries = (_c = cartSummary.groceries) !== null && _c !== void 0 ? _c : [];
@@ -39,7 +39,10 @@ function CartSummary(cartSummary) {
     var sumOfGroceries = calculateSummaryLine(groceries);
     return (React__default['default'].createElement(CartSummary_styles.CartSummaryContainer, null,
         React__default['default'].createElement(CartSummary_styles.CartPaymentContainer, null,
-            React__default['default'].createElement(CartSummary_styles.CartSummaryHeader, 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 },
                 bags.length > 0 && (React__default['default'].createElement(CartSummary_styles.CartLine, null,
                     React__default['default'].createElement(typography.BodyText, null,
                         "Matkassar ",
@@ -56,7 +59,7 @@ function CartSummary(cartSummary) {
                     React__default['default'].createElement(CartSummary_styles.AmountWrapper, null,
                         sumOfGroceries.cancelledAmount > 0 && (React__default['default'].createElement(typography.BodyText, { lineThrough: true, color: (_e = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, utils.formatPrice(sumOfGroceries.cancelledAmount))),
                         React__default['default'].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfGroceries.amount))))),
-                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && React__default['default'].createElement(Divider.Divider, null), charges === null || charges === void 0 ? void 0 :
+                (charges === null || charges === void 0 ? void 0 : charges.length) > 0 && (React__default['default'].createElement(Divider.Divider, { xsSpacing: (_f = index.theme.spacings) === null || _f === void 0 ? void 0 : _f.xs, lgSpacing: (_g = index.theme.spacings) === null || _g === void 0 ? void 0 : _g.xs })), charges === null || charges === void 0 ? void 0 :
                 charges.map(function (charge) {
                     var _a;
                     return (React__default['default'].createElement(CartSummary_styles.CartLine, { key: charge.name },
@@ -66,10 +69,10 @@ function CartSummary(cartSummary) {
                             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: (_f = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _f === void 0 ? void 0 : _f.alertRed }, "Sparat via erbjudanden"),
-                    React__default['default'].createElement(typography.BodyText, { color: (_g = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _g === void 0 ? void 0 : _g.alertRed }, utils.formatPrice(cartSummary.totalDiscount))))),
+                    React__default['default'].createElement(typography.BodyText, { color: (_h = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _h === void 0 ? void 0 : _h.alertRed }, "Sparat via erbjudanden"),
+                    React__default['default'].createElement(typography.BodyText, { color: (_j = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _j === void 0 ? void 0 : _j.alertRed }, utils.formatPrice(cartSummary.totalDiscount))))),
             React__default['default'].createElement(CartSummary_styles.CartSummaryFooter, null,
-                ((_h = cartSummary.deliveryFee) === null || _h === void 0 ? void 0 : _h.amount) &&
+                ((_k = cartSummary.deliveryFee) === null || _k === void 0 ? void 0 : _k.amount) &&
                     cartSummary.deliveryFee.amount > 0 && (React__default['default'].createElement(CartSummary_styles.CartLine, null,
                     React__default['default'].createElement(typography.BodyText, null, "Frakt:"),
                     React__default['default'].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.deliveryFee.amount)))),

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

@@ -11,11 +11,12 @@ 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  padding: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var CartSummaryFooter = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  background: ", ";\n"], ["\n  padding: ", "px;\n  background: ", ";\n"])), 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.palette) === null || _a === void 0 ? void 0 : _a.yellowLight; });
-var CartLine = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n  padding: ", "px 0;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  text-decoration: ", ";\n  padding: ", "px 0;\n"])), function (props) { return props.cancelled && 'line-through'; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+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: " + ((_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 templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+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;
@@ -23,4 +24,5 @@ exports.CartPaymentContainer = CartPaymentContainer;
 exports.CartSummaryContainer = CartSummaryContainer;
 exports.CartSummaryFooter = CartSummaryFooter;
 exports.CartSummaryHeader = CartSummaryHeader;
+exports.CartSummaryTitle = CartSummaryTitle;
 //# 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/DeliverySlotItem/DeliverySlotItem.js

@@ -14,16 +14,24 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function DeliverySlotItem(_a) {
-    var _b;
+    var _b, _c;
     var date = _a.date, disabledLabel = _a.disabledLabel, showWarningIndicator = _a.showWarningIndicator, selected = _a.selected, onSelect = _a.onSelect;
     var momentDate = utils.moment(date);
-    var isMobile = utils.useDetectDevice().isMobile;
-    var weekDay = momentDate.format(isMobile ? 'ddd' : 'dddd').toLocaleLowerCase();
+    var width = utils.useWindowSize().width;
+    var _d = React.useState(momentDate
+        .format(width < (((_b = designTokens.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.md) || 768) ? 'ddd' : 'dddd')
+        .toLocaleLowerCase()), weekDay = _d[0], setWeekDay = _d[1];
     var dayNumber = momentDate.format('D');
-    var month = momentDate.format(isMobile ? 'MMM' : 'MMMM').toLocaleLowerCase();
+    var month = momentDate.format('MMM').toLocaleLowerCase();
     var disabled = disabledLabel !== undefined;
+    React.useEffect(function () {
+        var _a;
+        setWeekDay(momentDate
+            .format(width < (((_a = designTokens.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md) || 768) ? 'ddd' : 'dddd')
+            .toLocaleLowerCase());
+    }, [width]);
     var slotRef = React.useRef(null);
-    var _c = React.useState(false), isVisible = _c[0], setIsVisible = _c[1];
+    var _e = React.useState(false), isVisible = _e[0], setIsVisible = _e[1];
     var callbackFn = function (entries) {
         var entry = entries[0];
         setIsVisible(entry.isIntersecting);
@@ -46,7 +54,7 @@ function DeliverySlotItem(_a) {
         return string.charAt(0).toUpperCase() + string.slice(1);
     }
     var removeLeadingZero = function (day) { return day.replace(/^0+/, ''); };
-    return (React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotItemContainer, { isMobile: isMobile, onClick: !disabled ? onSelect : function () { return null; }, disabled: disabled, isVisible: isVisible, ref: slotRef },
+    return (React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotItemContainer, { onClick: !disabled ? onSelect : function () { return null; }, disabled: disabled, isVisible: isVisible, ref: slotRef },
         React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotHeaderContainer, { disabled: disabled, selected: selected },
             React__default['default'].createElement(DeliverySlotItem_styles.DeliverySlotHeaderText, { disabled: disabled },
                 React__default['default'].createElement(typography.BodyText, { color: selected ? 'white' : 'black' }, capitalizeFirstLetter(weekDay)))),
@@ -57,7 +65,7 @@ function DeliverySlotItem(_a) {
             disabledLabel && (React__default['default'].createElement(DeliverySlotItem_styles.DisabledLabel, null,
                 React__default['default'].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.EXTRASMALL }, disabledLabel))),
             !disabledLabel && showWarningIndicator && (React__default['default'].createElement(DeliverySlotItem_styles.DotContainer, null,
-                React__default['default'].createElement(DotIndicator.Dot, { color: (_b = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.alertRed }))))));
+                React__default['default'].createElement(DotIndicator.Dot, { color: (_c = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertRed }))))));
 }
 
 exports.DeliverySlotItem = DeliverySlotItem;

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

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

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

@@ -15,12 +15,7 @@ var styledDiv = styled__default['default'].div(templateObject_1 || (templateObje
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
         : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter;
 });
-var DeliverySlotItemContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  min-width: ", "px;\n  opacity: ", ";\n  transition: opacity ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  min-width: ", "px;\n  opacity: ", ";\n  transition: opacity ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) {
-    var _a, _b;
-    return props.isMobile
-        ? (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth
-        : (_b = props.theme.constants) === null || _b === void 0 ? void 0 : _b.deliverySlotItemWidthDesktop;
-}, function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { return (props.disabled ? 'default' : 'pointer'); });
+var DeliverySlotItemContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  opacity: ", ";\n  transition: opacity ", ";\n  min-width: ", "px;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  opacity: ", ";\n  transition: opacity ", ";\n  min-width: ", "px;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) { return (props.isVisible ? 1 : 0.4); }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidthDesktop; }, function (props) { return (props.disabled ? 'default' : 'pointer'); });
 var DeliverySlotHeaderContainer = styled__default['default'](styledDiv)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: stretch;\n  border-radius: 5px 5px 0 0;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"], ["\n  display: flex;\n  width: stretch;\n  border-radius: 5px 5px 0 0;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"])), function (props) {
     var _a, _b;
     return props.selected

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

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

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

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var FormWrapper = styled__default['default'].form(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\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.lighter; });
-var FormHeader = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding-bottom: ", "px;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding-bottom: ", "px;\n  align-items: center;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var FormWrapper = styled__default['default'].form(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n  gap: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: ", "px;\n  background-color: ", ";\n  gap: ", "px;\n  border-radius: ", "px;\n  @media (min-width: ", "px) {\n    padding: ", "px;\n  }\n"])), 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.palette) === null || _a === void 0 ? void 0 : _a.lighter; }, 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.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; });
+var FormHeader = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
 var HeaderTitle = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: 0 ", "px;\n"], ["\n  padding: 0 ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var templateObject_1, templateObject_2, templateObject_3;
 

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

@@ -9,8 +9,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var FormControlWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: 8px 0px;\n  flex: 1;\n  max-width: 100%;\n"], ["\n  padding: 8px 0px;\n  flex: 1;\n  max-width: 100%;\n"])));
-var FormControlElementWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: relative;\n  padding: 8px 0px;\n  display: flex;\n\n  @media (min-width: ", "px) {\n    ", ";\n  }\n"], ["\n  position: relative;\n  padding: 8px 0px;\n  display: flex;\n\n  @media (min-width: ", "px) {\n    ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.screenWidth && "max-width: " + props.screenWidth; });
+var FormControlWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  flex: 1;\n  max-width: 100%;\n"], ["\n  flex: 1;\n  max-width: 100%;\n"])));
+var FormControlElementWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  position: relative;\n  padding-bottom: 8px;\n  display: flex;\n\n  @media (min-width: ", "px) {\n    ", ";\n  }\n"], ["\n  position: relative;\n  padding-bottom: 8px;\n  display: flex;\n\n  @media (min-width: ", "px) {\n    ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { return props.screenWidth && "max-width: " + props.screenWidth; });
 var templateObject_1, templateObject_2;
 
 exports.FormControlElementWrapper = FormControlElementWrapper;