@citygross/components 0.7.62 → 0.7.66

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

@@ -1,2 +1,2 @@
 import * as styles from './Chip.styles';
-export declare function Chip({ label, checked, onClick, background, activeBackground }: styles.TChip): JSX.Element;
+export declare function Chip({ label, checked, onClick, background, activeBackground, loading }: styles.TChip): JSX.Element;

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

@@ -5,8 +5,9 @@ export declare type TChip = {
     onClick: () => void;
     background?: string;
     activeBackground?: string;
+    loading?: boolean;
 };
-export declare const BaseChip: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, import("styled-components").DefaultTheme, TChip, never>;
+export declare const BaseChip: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TChip, never>;
 export declare const ChipCheckbox: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
 export declare const ChipLabel: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, ...props }: {
     children: import("react").ReactNode;

package/build/@types/components/Links/Link.d.ts

@@ -8,7 +8,7 @@ export declare enum LinkColors {
     'link' = 0,
     'black' = 1
 }
-export declare type TLinkButton = {
+export declare type TLink = {
     size?: TextTypes.TextSize;
     center?: boolean;
     color?: keyof typeof LinkColors;
@@ -20,4 +20,4 @@ export declare type TLinkButton = {
     icon?: JSX.Element;
     textDecoration?: 'none' | 'underline';
 };
-export declare function LinkButton({ center, color, isDisabled, noWrap, onClick, hrefPath, icon, textDecoration, size, children }: TLinkButton): JSX.Element;
+export declare function Link({ center, color, isDisabled, noWrap, onClick, hrefPath, icon, textDecoration, size, children }: TLink): JSX.Element;

package/build/@types/components/Links/Link.stories.d.ts

@@ -1,8 +1,8 @@
 import { Story } from '@storybook/react';
-import { LinkButton, TLinkButton } from './Link';
+import { Link, TLink } from './Link';
 import { TextTypes } from '@citygross/typography';
 declare const _default: {
-    component: typeof LinkButton;
+    component: typeof Link;
     title: string;
     argsTypes: {
         size: {
@@ -14,6 +14,6 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const Default: Story<TLinkButton>;
-export declare const SecondaryLink: Story<TLinkButton>;
-export declare const WithIcon: Story<TLinkButton>;
+export declare const Default: Story<TLink>;
+export declare const SecondaryLink: Story<TLink>;
+export declare const WithIcon: Story<TLink>;

package/build/@types/components/Links/Link.styles.d.ts

@@ -1,5 +1,5 @@
-import { TLinkButton } from './Link';
-export declare const BaseLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Omit<TLinkButton, "color"> & {
+import { TLink } from './Link';
+export declare const BaseLink: import("styled-components").StyledComponent<"a", import("styled-components").DefaultTheme, Omit<TLink, "color"> & {
     color: string;
 }, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

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

@@ -0,0 +1,7 @@
+export declare type TProgressBar = {
+    maxValue: number;
+    currentValue: number;
+    background?: string;
+    color?: string;
+};
+export declare function ProgressBar({ maxValue, currentValue, background, color }: TProgressBar): JSX.Element;

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

@@ -0,0 +1,28 @@
+import { Story } from '@storybook/react';
+import { ProgressBar, TProgressBar } from './ProgressBar';
+declare const _default: {
+    component: typeof ProgressBar;
+    title: string;
+    argTypes: {
+        background: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
+        color: {
+            options: string[];
+            mapping: import("@citygross/design-tokens").Palette | never[];
+            control: {
+                type: string;
+            };
+        };
+    };
+    args: {
+        maxValue: number;
+        currentValue: number;
+    };
+};
+export default _default;
+export declare const Default: Story<TProgressBar>;

package/build/@types/components/ProgressBar/ProgressBar.styled.d.ts

@@ -0,0 +1,10 @@
+export declare type TProgressContainer = {
+    color?: string;
+};
+export declare type TProgress = TProgressContainer & {
+    width: number;
+};
+export declare const BarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TProgressContainer, never>;
+export declare const Progress: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TProgressContainer & {
+    width: number;
+}, never>;

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

@@ -41,6 +41,7 @@ export * from './components/Modal/Modal';
 export * from './components/RadioBox';
 export * from './components/RadioGroup';
 export * from './components/RadioListItem/RadioListItem';
+export * from './components/ProgressBar/ProgressBar';
 export * from './components/RippleContainer/RippleContainer';
 export * from './components/Select/Select';
 export * from './components/Spacer/Spacer';

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

@@ -25,7 +25,8 @@ function AddressBlock(_a) {
             " ",
             city),
         (doorCode || floor) && (React__default['default'].createElement(typography.BodyText, null,
-            doorCode && doorCode + ',',
+            doorCode && doorCode,
+            doorCode && floor && ',',
             " ",
             floor))));
 }

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

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

package/build/cjs/components/src/components/Chips/Chip.js

@@ -7,18 +7,18 @@ var Icon = require('@citygross/icons');
 var typography = require('@citygross/typography');
 var Chip_styles = require('./Chip.styles.js');
 var designTokens = require('@citygross/design-tokens');
+var Spinner = require('../Spinner/Spinner.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function Chip(_a) {
-    var _b, _c, _d, _e, _f;
-    var label = _a.label, checked = _a.checked, onClick = _a.onClick, _g = _a.background, background = _g === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter : _g, _h = _a.activeBackground, activeBackground = _h === void 0 ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white : _h;
-    return (React__default['default'].createElement(Chip_styles.BaseChip, { checked: checked, onClick: onClick, background: background, activeBackground: activeBackground, whileHover: { scale: (_d = designTokens.theme.animations) === null || _d === void 0 ? void 0 : _d.hoverScale }, whileTap: { scale: (_e = designTokens.theme.animations) === null || _e === void 0 ? void 0 : _e.tapScale } },
-        checked
-            ? (React__default['default'].createElement(Icon.Icons.CheckMark, { color: (_f = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _f === void 0 ? void 0 : _f.alertGreen, width: 12, height: 12, viewBox: '0 0 25 25' }))
-            : (React__default['default'].createElement(Chip_styles.ChipCheckbox, null)),
+    var _b, _c, _d;
+    var label = _a.label, checked = _a.checked, onClick = _a.onClick, _e = _a.background, background = _e === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.lighter : _e, _f = _a.activeBackground, activeBackground = _f === void 0 ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.white : _f, loading = _a.loading;
+    return (React__default['default'].createElement(Chip_styles.BaseChip, { checked: checked, onClick: onClick, background: background, activeBackground: activeBackground, loading: loading },
+        loading ? (React__default['default'].createElement(Spinner.Spinner, { size: 12 })) : (React__default['default'].createElement(React__default['default'].Fragment, null, checked ? (React__default['default'].createElement(Chip_styles.ChipCheckbox, null,
+            React__default['default'].createElement(Icon.Icons.CheckMark, { color: (_d = designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.alertGreen, width: 12, height: 12, viewBox: '0 0 25 25' }))) : (React__default['default'].createElement(Chip_styles.ChipCheckbox, null)))),
         React__default['default'].createElement(Chip_styles.ChipLabel, { forwardedAs: 'label', size: typography.TextTypes.TextSize.SMALL }, label)));
 }
 

package/build/cjs/components/src/components/Chips/Chip.styles.js

@@ -5,22 +5,21 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _tslib = require('../../../../_virtual/_tslib.js');
 var styled = require('styled-components');
 var typography = require('@citygross/typography');
-var framerMotion = require('framer-motion');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseChip = styled__default['default'](framerMotion.motion.div)(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) {
+var BaseChip = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) {
     return props.checked
         ? props.activeBackground && props.activeBackground
         : props.background && props.background;
 }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
-    var _a, _b;
+    var _a;
     return props.checked &&
-        "box-shadow: 0 0 0 1px inset " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen) + ", 0px 2px 5px " + ((_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.boxShadowActive);
+        "box-shadow: 0 0 0 1px inset " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen);
 });
-var ChipCheckbox = styled__default['default'].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall; });
+var ChipCheckbox = styled__default['default'].span(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"], ["\n  display: flex;\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall; });
 var ChipLabel = styled__default['default'](typography.BodyText)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;
 

package/build/cjs/components/src/components/Chips/Chip.styles.js.map

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

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

@@ -60,16 +60,23 @@ function DeliverySlotItem(_a) {
     var options = {
         root: null,
         rootMargin: '0px',
-        threshold: 0.99
+        threshold: 0.9
     };
     React.useEffect(function () {
+        if (!('IntersectionObserver' in window) ||
+            !('IntersectionObserverEntry' in window) ||
+            !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
+            return;
+        }
         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 () {
-            observer.disconnect();
+            if (observer) {
+                observer.disconnect();
+            }
         };
     }, [slotRef, options]);
     var removeLeadingZero = function (day) { return day.replace(/^0+/, ''); };

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/Links/Link.js

@@ -21,12 +21,12 @@ exports.LinkColors = void 0;
     LinkColors[LinkColors["link"] = 0] = "link";
     LinkColors[LinkColors["black"] = 1] = "black";
 })(exports.LinkColors || (exports.LinkColors = {}));
-function LinkButton(_a) {
+function Link(_a) {
     var _b = _a.center, center = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'link' : _c, isDisabled = _a.isDisabled, noWrap = _a.noWrap, onClick = _a.onClick, hrefPath = _a.hrefPath, icon = _a.icon, _d = _a.textDecoration, textDecoration = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? typography.TextTypes.TextSize.REGULAR : _e, children = _a.children;
     return (React__default['default'].createElement(Link_styles.BaseLink, { center: center, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : 'black', href: hrefPath, isDisabled: isDisabled, textDecoration: textDecoration, noWrap: noWrap, onClick: onClick, size: size, icon: icon },
         React__default['default'].createElement(typography.LinkText, { size: size }, children),
         icon && React__default['default'].createElement(Link_styles.IconWrapper, null, icon)));
 }
 
-exports.LinkButton = LinkButton;
+exports.Link = Link;
 //# sourceMappingURL=Link.js.map

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@citygross/design-tokens');
+var React = require('react');
+var ProgressBar_styled = require('./ProgressBar.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ProgressBar(_a) {
+    var _b, _c;
+    var maxValue = _a.maxValue, currentValue = _a.currentValue, _d = _a.background, background = _d === void 0 ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.white : _d, _e = _a.color, color = _e === void 0 ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e;
+    var progress = (currentValue / maxValue) * 100;
+    return (React__default['default'].createElement(ProgressBar_styled.BarContainer, { color: background },
+        React__default['default'].createElement(ProgressBar_styled.Progress, { width: progress, color: color })));
+}
+
+exports.ProgressBar = ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

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

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

package/build/cjs/components/src/components/ProgressBar/ProgressBar.styled.js

@@ -0,0 +1,18 @@
+'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 BarContainer = styled__default['default'].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  overflow: hidden;\n"], ["\n  background: ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  overflow: hidden;\n"])), function (props) { return props.color; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var Progress = styled__default['default'].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  width: ", "%;\n  background: ", ";\n  height: 100%;\n"], ["\n  width: ", "%;\n  background: ", ";\n  height: 100%;\n"])), function (props) { return props.width || 0; }, function (props) { return props.color; });
+var templateObject_1, templateObject_2;
+
+exports.BarContainer = BarContainer;
+exports.Progress = Progress;
+//# sourceMappingURL=ProgressBar.styled.js.map

package/build/cjs/components/src/components/ProgressBar/ProgressBar.styled.js.map

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

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

@@ -20,6 +20,7 @@ require('../Box/Box.styles.js');
 require('../Button/Button.styles.js');
 require('../BackButton/BackButton.styles.js');
 require('../Chips/Chip.styles.js');
+require('../Spinner/Spinner.styles.js');
 require('react-loading-skeleton');
 require('../CartItemSummary/CartItemSummary.styles.js');
 require('../Divider/Divider.styles.js');
@@ -54,9 +55,9 @@ require('../RadioBox/RadioBoxItem.styles.js');
 require('../RadioBox/RadioBoxList.styles.js');
 require('../RadioGroup/RadioGroup.styles.js');
 require('../RadioListItem/RadioListItem.styles.js');
+require('../ProgressBar/ProgressBar.styled.js');
 require('../RippleContainer/RippleContainer.styles.js');
 require('../Select/Select.styles.js');
-require('../Spinner/Spinner.styles.js');
 require('../Stepper/Stepper.styles.js');
 var ToolTip = require('../ToolTip/ToolTip.js');
 require('../StepperMobile/StepperMobile.styles.js');

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

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

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

@@ -45,6 +45,7 @@ var RadioBoxItem = require('./components/RadioBox/RadioBoxItem.js');
 var RadioBoxList = require('./components/RadioBox/RadioBoxList.js');
 var RadioGroup = require('./components/RadioGroup/RadioGroup.js');
 var RadioListItem = require('./components/RadioListItem/RadioListItem.js');
+var ProgressBar = require('./components/ProgressBar/ProgressBar.js');
 var RippleContainer = require('./components/RippleContainer/RippleContainer.js');
 var Select = require('./components/Select/Select.js');
 var Spacer = require('./components/Spacer/Spacer.js');
@@ -120,7 +121,7 @@ exports.InfoWithButtonBlock = InfoTextBlock.InfoWithButtonBlock;
 exports.LayoutBox = LayoutBox.LayoutBox;
 exports.ListItem = ListItem.ListItem;
 exports.ListItemWithRadio = ListItemWithRadio.ListItemWithRadio;
-exports.LinkButton = Link.LinkButton;
+exports.Link = Link.Link;
 Object.defineProperty(exports, 'LinkColors', {
 	enumerable: true,
 	get: function () {
@@ -138,6 +139,7 @@ exports.RadioBoxItem = RadioBoxItem.RadioBoxItem;
 exports.RadioBoxList = RadioBoxList.RadioBoxList;
 exports.RadioGroup = RadioGroup.RadioGroup;
 exports.RadioListItem = RadioListItem.RadioListItem;
+exports.ProgressBar = ProgressBar.ProgressBar;
 exports.RippleContainer = RippleContainer.RippleContainer;
 exports.Select = Select.Select;
 exports.Spacer = Spacer.Spacer;

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

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

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

@@ -17,7 +17,8 @@ function AddressBlock(_a) {
             " ",
             city),
         (doorCode || floor) && (React.createElement(BodyText, null,
-            doorCode && doorCode + ',',
+            doorCode && doorCode,
+            doorCode && floor && ',',
             " ",
             floor))));
 }

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

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

package/build/es/components/src/components/Chips/Chip.js

@@ -3,14 +3,14 @@ import { Icons } from '@citygross/icons';
 import { TextTypes } from '@citygross/typography';
 import { BaseChip, ChipCheckbox, ChipLabel } from './Chip.styles.js';
 import { theme } from '@citygross/design-tokens';
+import { Spinner } from '../Spinner/Spinner.js';
 
 function Chip(_a) {
-    var _b, _c, _d, _e, _f;
-    var label = _a.label, checked = _a.checked, onClick = _a.onClick, _g = _a.background, background = _g === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lighter : _g, _h = _a.activeBackground, activeBackground = _h === void 0 ? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.white : _h;
-    return (React.createElement(BaseChip, { checked: checked, onClick: onClick, background: background, activeBackground: activeBackground, whileHover: { scale: (_d = theme.animations) === null || _d === void 0 ? void 0 : _d.hoverScale }, whileTap: { scale: (_e = theme.animations) === null || _e === void 0 ? void 0 : _e.tapScale } },
-        checked
-            ? (React.createElement(Icons.CheckMark, { color: (_f = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _f === void 0 ? void 0 : _f.alertGreen, width: 12, height: 12, viewBox: '0 0 25 25' }))
-            : (React.createElement(ChipCheckbox, null)),
+    var _b, _c, _d;
+    var label = _a.label, checked = _a.checked, onClick = _a.onClick, _e = _a.background, background = _e === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.lighter : _e, _f = _a.activeBackground, activeBackground = _f === void 0 ? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.white : _f, loading = _a.loading;
+    return (React.createElement(BaseChip, { checked: checked, onClick: onClick, background: background, activeBackground: activeBackground, loading: loading },
+        loading ? (React.createElement(Spinner, { size: 12 })) : (React.createElement(React.Fragment, null, checked ? (React.createElement(ChipCheckbox, null,
+            React.createElement(Icons.CheckMark, { color: (_d = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _d === void 0 ? void 0 : _d.alertGreen, width: 12, height: 12, viewBox: '0 0 25 25' }))) : (React.createElement(ChipCheckbox, null)))),
         React.createElement(ChipLabel, { forwardedAs: 'label', size: TextTypes.TextSize.SMALL }, label)));
 }
 

package/build/es/components/src/components/Chips/Chip.styles.js

@@ -1,18 +1,17 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 import { BodyText } from '@citygross/typography';
-import { motion } from 'framer-motion';
 
-var BaseChip = styled(motion.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) {
+var BaseChip = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"], ["\n  display: inline-flex;\n  align-items: center;\n  gap: ", "px;\n  border-radius: ", "px;\n  background: ", ";\n  /* static for height of chip */\n  padding: ", "px\n    ", "px;\n  ", ";\n  cursor: pointer;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.small; }, function (props) {
     return props.checked
         ? props.activeBackground && props.activeBackground
         : props.background && props.background;
 }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) {
-    var _a, _b;
+    var _a;
     return props.checked &&
-        "box-shadow: 0 0 0 1px inset " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen) + ", 0px 2px 5px " + ((_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.boxShadowActive);
+        "box-shadow: 0 0 0 1px inset " + ((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.alertGreen);
 });
-var ChipCheckbox = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall; });
+var ChipCheckbox = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"], ["\n  display: flex;\n  height: ", "px;\n  width: ", "px;\n  background: white;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.chipCheckBox; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius) === null || _b === void 0 ? void 0 : _b.extraSmall; });
 var ChipLabel = styled(BodyText)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  pointer-events: none;\n"], ["\n  pointer-events: none;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;
 

package/build/es/components/src/components/Chips/Chip.styles.js.map

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

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

@@ -52,16 +52,23 @@ function DeliverySlotItem(_a) {
     var options = {
         root: null,
         rootMargin: '0px',
-        threshold: 0.99
+        threshold: 0.9
     };
     useEffect(function () {
+        if (!('IntersectionObserver' in window) ||
+            !('IntersectionObserverEntry' in window) ||
+            !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
+            return;
+        }
         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 () {
-            observer.disconnect();
+            if (observer) {
+                observer.disconnect();
+            }
         };
     }, [slotRef, options]);
     var removeLeadingZero = function (day) { return day.replace(/^0+/, ''); };

package/build/es/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/es/components/src/components/Links/Link.js

@@ -13,12 +13,12 @@ var LinkColors;
     LinkColors[LinkColors["link"] = 0] = "link";
     LinkColors[LinkColors["black"] = 1] = "black";
 })(LinkColors || (LinkColors = {}));
-function LinkButton(_a) {
+function Link(_a) {
     var _b = _a.center, center = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? 'link' : _c, isDisabled = _a.isDisabled, noWrap = _a.noWrap, onClick = _a.onClick, hrefPath = _a.hrefPath, icon = _a.icon, _d = _a.textDecoration, textDecoration = _d === void 0 ? 'none' : _d, _e = _a.size, size = _e === void 0 ? TextTypes.TextSize.REGULAR : _e, children = _a.children;
     return (React.createElement(BaseLink, { center: center, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : 'black', href: hrefPath, isDisabled: isDisabled, textDecoration: textDecoration, noWrap: noWrap, onClick: onClick, size: size, icon: icon },
         React.createElement(LinkText, { size: size }, children),
         icon && React.createElement(IconWrapper, null, icon)));
 }
 
-export { LinkButton, LinkColors, LinkSize };
+export { Link, LinkColors, LinkSize };
 //# sourceMappingURL=Link.js.map

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

@@ -0,0 +1,14 @@
+import { theme } from '@citygross/design-tokens';
+import React from 'react';
+import { BarContainer, Progress } from './ProgressBar.styled.js';
+
+function ProgressBar(_a) {
+    var _b, _c;
+    var maxValue = _a.maxValue, currentValue = _a.currentValue, _d = _a.background, background = _d === void 0 ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.white : _d, _e = _a.color, color = _e === void 0 ? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.alertBlue : _e;
+    var progress = (currentValue / maxValue) * 100;
+    return (React.createElement(BarContainer, { color: background },
+        React.createElement(Progress, { width: progress, color: color })));
+}
+
+export { ProgressBar };
+//# sourceMappingURL=ProgressBar.js.map

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

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

package/build/es/components/src/components/ProgressBar/ProgressBar.styled.js

@@ -0,0 +1,9 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+
+var BarContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  overflow: hidden;\n"], ["\n  background: ", ";\n  border-radius: ", "px;\n  height: ", "px;\n  overflow: hidden;\n"])), function (props) { return props.color; }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.default; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var Progress = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: ", "%;\n  background: ", ";\n  height: 100%;\n"], ["\n  width: ", "%;\n  background: ", ";\n  height: 100%;\n"])), function (props) { return props.width || 0; }, function (props) { return props.color; });
+var templateObject_1, templateObject_2;
+
+export { BarContainer, Progress };
+//# sourceMappingURL=ProgressBar.styled.js.map

package/build/es/components/src/components/ProgressBar/ProgressBar.styled.js.map

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

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

@@ -16,6 +16,7 @@ import '../Box/Box.styles.js';
 import '../Button/Button.styles.js';
 import '../BackButton/BackButton.styles.js';
 import '../Chips/Chip.styles.js';
+import '../Spinner/Spinner.styles.js';
 import 'react-loading-skeleton';
 import '../CartItemSummary/CartItemSummary.styles.js';
 import '../Divider/Divider.styles.js';
@@ -50,9 +51,9 @@ import '../RadioBox/RadioBoxItem.styles.js';
 import '../RadioBox/RadioBoxList.styles.js';
 import '../RadioGroup/RadioGroup.styles.js';
 import '../RadioListItem/RadioListItem.styles.js';
+import '../ProgressBar/ProgressBar.styled.js';
 import '../RippleContainer/RippleContainer.styles.js';
 import '../Select/Select.styles.js';
-import '../Spinner/Spinner.styles.js';
 import '../Stepper/Stepper.styles.js';
 import { ToolTip } from '../ToolTip/ToolTip.js';
 import '../StepperMobile/StepperMobile.styles.js';

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

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

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

@@ -35,12 +35,13 @@ export { InfoWithButtonBlock } from './components/InfoTextBlock/InfoTextBlock.js
 export { LayoutBox } from './components/LayoutBox/LayoutBox.js';
 export { ListItem } from './components/ListItem/ListItem.js';
 export { ListItemWithRadio } from './components/ListItemWithRadio/ListItemWithRadio.js';
-export { LinkButton, LinkColors, LinkSize } from './components/Links/Link.js';
+export { Link, LinkColors, LinkSize } from './components/Links/Link.js';
 export { Modal } from './components/Modal/Modal.js';
 export { RadioBoxItem } from './components/RadioBox/RadioBoxItem.js';
 export { RadioBoxList } from './components/RadioBox/RadioBoxList.js';
 export { RadioGroup } from './components/RadioGroup/RadioGroup.js';
 export { RadioListItem } from './components/RadioListItem/RadioListItem.js';
+export { ProgressBar } from './components/ProgressBar/ProgressBar.js';
 export { RippleContainer } from './components/RippleContainer/RippleContainer.js';
 export { Select } from './components/Select/Select.js';
 export { Spacer } from './components/Spacer/Spacer.js';

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.62",
+  "version": "0.7.66",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -65,11 +65,11 @@
     "@citygross/design-tokens": "^0.2.22",
     "@citygross/icons": "^0.1.3",
     "@citygross/react-use-bg-wizard": "^0.0.8",
-    "@citygross/typography": "^0.0.50",
+    "@citygross/typography": "^0.0.51",
     "@citygross/utils": "^0.0.21",
     "framer-motion": "^4.1.17",
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "d5f7d33f07882c0a32394b9aa98edbde5af3cff6"
+  "gitHead": "00f870b53f1e87fb3cf1e82862cfcc7dc358781a"
 }