@citygross/components 0.7.16 → 0.7.20

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type TAddressBlock = {
     deliverOption?: string;
     icon?: JSX.Element;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type TAlertBox = {
+    background?: string;
+    borderColor?: string;
+    icon?: JSX.Element;
+    children: React.ReactNode;
+};
+export declare function AlertBox({ background, borderColor, icon, children }: TAlertBox): JSX.Element;

package/build/@types/components/{InfoBlock/InfoBlock.stories.d.ts → AlertBox/AlertBox.stories.d.ts}

@@ -1,7 +1,7 @@
 import { Story } from '@storybook/react';
-import { InfoBlock, TInfoBlock } from './InfoBlock';
+import { AlertBox, TAlertBox } from './AlertBox';
 declare const _default: {
-    component: typeof InfoBlock;
+    component: typeof AlertBox;
     title: string;
     argTypes: {
         background: {
@@ -24,5 +24,5 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: Story<TInfoBlock>;
-export declare const AlertIcon: Story<TInfoBlock>;
+export declare const Default: Story<TAlertBox>;
+export declare const AlertIcon: Story<TAlertBox>;

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

@@ -0,0 +1,6 @@
+declare type TBaseAlertBox = {
+    background?: string;
+    borderColor?: string;
+};
+export declare const AlertBox: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseAlertBox, never>;
+export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as styles from './Button.styles';
 import { TButtonColor } from './Button';
 export declare type TIconButton = styles.TBaseSmallButton & {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TSummaryItem } from '../CartSummary/CartSummary';
 export declare type TCartItemSummary = {
     product: TSummaryItem;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type TCartSummary = {
     title?: string;
     subTitle?: string;
@@ -14,6 +13,10 @@ export declare type TCartSummary = {
     totalAmount: number;
     totalDiscount: number;
     totalTaxAmount: number;
+    totalLabel?: string;
+    taxLabel?: string;
+    shippingLabel?: string;
+    saveLabel?: string;
 };
 export declare type TSummaryItem = {
     amount: number;
@@ -22,4 +25,4 @@ export declare type TSummaryItem = {
     cancelledQuantity: number;
     name?: string;
 };
-export declare function CartSummary(cartSummary: TCartSummary): JSX.Element;
+export declare function CartSummary({ saveLabel, shippingLabel, totalLabel, taxLabel, ...cartSummary }: TCartSummary): JSX.Element;

package/build/@types/components/Chips/Chip.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as styles from './Chip.styles';
 export declare function Chip({ label, checked, onClick, background, activeBackground }: styles.TChip): JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type TDeliverySlotItem = {
     date: string;
     selected: boolean;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type TDot = {
     color?: string;
     shadow?: string;

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

@@ -3,6 +3,7 @@ export declare type TForm = {
     title: React.ReactNode;
     icon?: JSX.Element;
     children: React.ReactNode;
+    background?: string;
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
 };
-export declare function Form({ title, icon, children, onSubmit }: TForm): JSX.Element;
+export declare function Form({ title, icon, children, onSubmit, background }: TForm): JSX.Element;

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

@@ -1,3 +1,5 @@
-export declare const FormWrapper: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {}, never>;
+export declare type TFormWrapper = {
+    background?: string;
+};
+export declare const FormWrapper: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, TFormWrapper, never>;
 export declare const FormHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const HeaderTitle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/FormElements/Input/Input.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as styles from './Input.styles';
 export declare function Input({ flexGrow, isValid, fontSize, ...props }: styles.InputProps): JSX.Element;

package/build/@types/components/FormElements/TextArea/TextArea.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as styles from './TextArea.styles';
 export declare function TextArea({ flexGrow, fontSize, ...props }: styles.TextAreaProps): JSX.Element;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Header } from './Header';
 declare const _default: {
     component: typeof Header;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type THeaderLink = {
     linkHref: string;
     linkLabel: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { HeaderLink } from './HeaderLink';
 declare const _default: {
     component: typeof HeaderLink;

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

@@ -1,7 +1,7 @@
 export declare const ListImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ListImage: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {}, never>;
 export declare const ListItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ListLeft: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ListItemHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ItemContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const RadioWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const RightChildWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type TLogo = {
     logoImage: JSX.Element;
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Logo } from './Logo';
 declare const _default: {
     component: typeof Logo;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type TPagination = {
     totalItems?: number;
     fetchItems: (page: number) => void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type TQuantitySelector = {
     onIncrement: () => void;
     onDecrement: () => void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TRadioColor } from '../FormElements/Radio/Radio';
 import { TRadioListItem } from './RadioListItem';
 import { TDot } from '../DotIndicator/DotIndicator';

package/build/@types/components/RadioGroup/RadioListItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TRadioColor } from '../FormElements/Radio/Radio';
 import { TDot } from '../DotIndicator/DotIndicator';
 import * as styles from './RadioListItem.styles';

package/build/@types/components/RadioGroup/RadioListItem.styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type TBaseRadioItemInputWrapper = {
     isDisabled?: boolean;
     flexGrow?: number;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { TSlider } from './Slider';
 declare const _default: {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type TSpinner = {
     borderColor?: string;
     spinnerColor?: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { TSpinner } from './Spinner';
 declare const _default: {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IStepperItem } from '../Stepper/StepperList';
 export declare type TStepperMobile = {
     steps: IStepperItem[];

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type TTimelineItem = {
     primaryText: string;
     time: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const BaseTimelineItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const BaseTimeline: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const TimeLineH3: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h3/h3").IH3) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;

package/build/@types/components/Typography/h1.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { H1 } from '@citygross/typography';
 declare const _default: {

package/build/@types/components/Typography/h2.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { H2 } from '@citygross/typography';
 declare const _default: {

package/build/@types/components/Typography/h3.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { H3 } from '@citygross/typography';
 declare const _default: {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Story } from '@storybook/react';
 import { TTwoColumnsPageContainer } from './TwoColumnsPageContainer';
 declare const _default: {

package/build/@types/containers/WizardContainer/Steps/Step.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare type TStep = {
+    index: number;
+};
+export declare const Step: React.FC<TStep>;
+export default Step;

package/build/@types/containers/WizardContainer/WizardContainer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const WizardContainer: React.FC;

package/build/@types/containers/WizardContainer/WizardContainer.stories.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+declare const _default: {
+    component: React.FC<{}>;
+    title: string;
+    argTypes: {
+        containerBackground: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
+        background: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: Story;

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

@@ -1,4 +1,5 @@
 export * from './components/AddressBlock/AddressBlock';
+export * from './components/AlertBox/AlertBox';
 export * from './components/Button/Button';
 export * from './components/Header/Header';
 export * from './components/Badge/Badge';

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../../../../design-tokens/build/index.js');
+var AlertBox_styles = require('./AlertBox.styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function AlertBox(_a) {
+    var _b, _c;
+    var _d = _a.background, background = _d === void 0 ? (_b = index.theme.palette) === null || _b === void 0 ? void 0 : _b.blueLight : _d, _e = _a.borderColor, borderColor = _e === void 0 ? (_c = index.theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e, icon = _a.icon, children = _a.children;
+    return (React__default['default'].createElement(AlertBox_styles.AlertBox, { background: background, borderColor: borderColor },
+        icon,
+        children));
+}
+
+exports.AlertBox = AlertBox;
+//# sourceMappingURL=AlertBox.js.map

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

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

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var AlertBox = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"], ["\n  background: ", ";\n  border-left: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  padding: ", "px;\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n"])), function (props) { var _a; return props.background || ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight); }, function (props) { var _a; return ((_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.infoBlockBorderWidth) + "px solid " + props.borderColor; }, function (props) { var _a, _b; return ((_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.extraSmall) + "px 0 0 " + ((_b = props.theme.attributes) === null || _b === void 0 ? void 0 : _b.borderRadius.extraSmall) + "px"; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow.layoutShadow; }, 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.sm; });
+var templateObject_1;
+
+exports.AlertBox = AlertBox;
+//# sourceMappingURL=AlertBox.styles.js.map

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

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

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

@@ -7,6 +7,8 @@ var styled = require('styled-components');
 require('react');
 require('@citygross/typography');
 require('../AddressBlock/AddressBlock.styles.js');
+require('../../../../design-tokens/build/index.js');
+require('../AlertBox/AlertBox.styles.js');
 require('./Button.js');
 require('@citygross/utils');
 require('@citygross/design-tokens');
@@ -20,7 +22,6 @@ 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');

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

@@ -9,9 +9,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var CartItemSummaryWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-var CancelledWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 10px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 10px;\n"])));
-var ItemInformationContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 10px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 10px;\n"])));
+var CartItemSummaryWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: 20px;\n"], ["\n  display: flex;\n  gap: 20px;\n"])));
+var CancelledWrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var ItemInformationContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;
 
 exports.CancelledWrapper = CancelledWrapper;

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../_virtual/_tslib.js');
 var utils = require('@citygross/utils');
 var React = require('react');
 var Divider = require('../Divider/Divider.js');
@@ -30,11 +31,12 @@ var calculateSummaryLine = function (items) {
     });
     return sumOfItems;
 };
-function CartSummary(cartSummary) {
-    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 : [];
+function CartSummary(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _m = _a.saveLabel, saveLabel = _m === void 0 ? 'sparat via erbjudanden' : _m, _o = _a.shippingLabel, shippingLabel = _o === void 0 ? 'frakt' : _o, _p = _a.totalLabel, totalLabel = _p === void 0 ? 'totalt' : _p, _q = _a.taxLabel, taxLabel = _q === void 0 ? 'varav moms' : _q, 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 : [];
     var sumOfBags = calculateSummaryLine(bags);
     var sumOfGroceries = calculateSummaryLine(groceries);
     return (React__default['default'].createElement(CartSummary_styles.CartSummaryContainer, null,
@@ -45,42 +47,42 @@ function CartSummary(cartSummary) {
             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 ",
+                        "matkassar ",
                         sumOfBags.quantity,
                         " st"),
                     React__default['default'].createElement(CartSummary_styles.AmountWrapper, null,
-                        sumOfBags.cancelledAmount > 0 && (React__default['default'].createElement(typography.BodyText, { lineThrough: true, color: (_d = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _d === void 0 ? void 0 : _d.dark }, utils.formatPrice(sumOfBags.cancelledAmount))),
+                        sumOfBags.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(sumOfBags.cancelledAmount))),
                         React__default['default'].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(sumOfBags.amount))))),
                 groceries.length > 0 && (React__default['default'].createElement(CartSummary_styles.CartLine, null,
                     React__default['default'].createElement(typography.BodyText, null,
-                        "Matvaror ",
+                        "matvaror ",
                         sumOfGroceries.quantity,
                         " st"),
                     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))),
+                        sumOfGroceries.cancelledAmount > 0 && (React__default['default'].createElement(typography.BodyText, { lineThrough: true, color: (_f = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _f === void 0 ? void 0 : _f.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, { 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 === null || charges === void 0 ? void 0 : charges.length) > 0 && (React__default['default'].createElement(Divider.Divider, { xsSpacing: (_g = index.theme.spacings) === null || _g === void 0 ? void 0 : _g.xs, lgSpacing: (_h = index.theme.spacings) === null || _h === void 0 ? void 0 : _h.xs })), charges === null || charges === void 0 ? void 0 :
                 charges.map(function (charge) {
-                    var _a;
+                    var _a, _b;
                     return (React__default['default'].createElement(CartSummary_styles.CartLine, { key: charge.name },
-                        React__default['default'].createElement(typography.BodyText, null, 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: (_a = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _a === void 0 ? void 0 : _a.dark }, utils.formatPrice(charge.cancelledAmount))),
+                            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: (_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(typography.BodyText, { color: (_j = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _j === void 0 ? void 0 : _j.alertRed }, saveLabel),
+                    React__default['default'].createElement(typography.BodyText, { color: (_k = index.theme === null || index.theme === void 0 ? void 0 : index.theme.palette) === null || _k === void 0 ? void 0 : _k.alertRed }, utils.formatPrice(cartSummary.totalDiscount))))),
             React__default['default'].createElement(CartSummary_styles.CartSummaryFooter, null,
-                ((_k = cartSummary.deliveryFee) === null || _k === void 0 ? void 0 : _k.amount) &&
+                ((_l = cartSummary.deliveryFee) === null || _l === void 0 ? void 0 : _l.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, 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' }, "Totalt:"),
+                    React__default['default'].createElement(typography.H3, { fontWeight: 'semiBold' }, totalLabel),
                     React__default['default'].createElement(typography.H3, { fontWeight: 'semiBold' }, utils.formatPrice(cartSummary.totalAmount))),
                 React__default['default'].createElement(CartSummary_styles.CartLine, null,
-                    React__default['default'].createElement(typography.BodyText, null, "Varav moms:"),
+                    React__default['default'].createElement(typography.BodyText, null, taxLabel),
                     React__default['default'].createElement(typography.BodyText, null, utils.formatPrice(cartSummary.totalTaxAmount)))))));
 }
 

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/DeliverySlotItem/DeliverySlotItem.js

@@ -31,10 +31,13 @@ function DeliverySlotItem(_a) {
             .toLocaleLowerCase());
     }, [width]);
     var slotRef = React.useRef(null);
-    var _e = React.useState(false), isVisible = _e[0], setIsVisible = _e[1];
+    var _e = React.useState(true), isVisible = _e[0], setIsVisible = _e[1];
     var callbackFn = function (entries) {
         var entry = entries[0];
-        setIsVisible(entry.isIntersecting);
+        if (!entry) {
+            return setIsVisible(true);
+        }
+        setIsVisible(!entry.isIntersecting);
     };
     var options = {
         root: null,
@@ -43,6 +46,8 @@ function DeliverySlotItem(_a) {
     };
     React.useEffect(function () {
         var observer = new IntersectionObserver(callbackFn, options);
+        if (!observer)
+            return;
         if (slotRef.current)
             observer.observe(slotRef === null || slotRef === void 0 ? void 0 : slotRef.current);
         return function () {
@@ -54,7 +59,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, { 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, selected: selected },
         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)))),

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

@@ -9,30 +9,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var styledDiv = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  border: solid 1px\n    ", ";\n"], ["\n  border: solid 1px\n    ", ";\n"])), function (props) {
+var DeliverySlotItemContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _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  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\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  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\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, _b;
     return props.selected
         ? (_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  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) {
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.medium;
+}, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, 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'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"], ["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n"])), function (props) {
     var _a, _b;
     return props.selected
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
-        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter;
+        : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.lightest;
 });
-var DeliverySlotHeaderText = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n"], ["\n  padding: ", "px;\n  ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.disabled && 'opacity: 0.4'; });
-var DeliverySlotContainer = styled__default['default'](styledDiv)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  border-radius: 0 0 5px 5px;\n  background: ", ";\n"], ["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  border-radius: 0 0 5px 5px;\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) {
+var DeliverySlotHeaderText = styled__default['default'].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  ", ";\n"], ["\n  padding: ", "px;\n  ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.disabled && 'opacity: 0.4'; });
+var DeliverySlotContainer = styled__default['default'].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n"], ["\n  padding: ", "px 0;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) {
     var _a, _b;
     return props.selected
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.blueLight
         : (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.white;
 });
-var DeliverySlotBody = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
-var DisabledLabel = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", "px 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
-var DotContainer = styled__default['default'].div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  justify-content: center;\n  display: flex;\n  padding: ", "px 0;\n"], ["\n  justify-content: center;\n  display: flex;\n  padding: ", "px 0;\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, templateObject_7, templateObject_8;
+var DeliverySlotBody = styled__default['default'].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  ", ";\n"])), function (props) { return props.disabled && 'opacity: 0.4'; });
+var DisabledLabel = styled__default['default'].div(templateObject_6 || (templateObject_6 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  padding: ", "px 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  padding: ", "px 0;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
+var DotContainer = styled__default['default'].div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  justify-content: center;\n  display: flex;\n  padding: ", "px 0;\n"], ["\n  justify-content: center;\n  display: flex;\n  padding: ", "px 0;\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, templateObject_7;
 
 exports.DeliverySlotBody = DeliverySlotBody;
 exports.DeliverySlotContainer = DeliverySlotContainer;

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}