@citygross/components 0.7.61 → 0.7.65

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/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

@@ -7,6 +7,7 @@ export * from './components/Badge/Badge';
 export * from './components/Box/Box';
 export * from './components/Button';
 export * from './components/BackButton/BackButton';
+export * from './components/Chips/Chip';
 export * from './components/CartItemSummary/CartItemSummary';
 export * from './components/CartSummary/CartSummary';
 export * from './components/CustomerInfoBlock/CustomerInfoBlock';
@@ -40,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

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+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;
+    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)));
+}
+
+exports.Chip = Chip;
+//# sourceMappingURL=Chip.js.map

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

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

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../../_virtual/_tslib.js');
+var styled = require('styled-components');
+var typography = require('@citygross/typography');
+
+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'].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;
+    return props.checked &&
+        "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  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;
+
+exports.BaseChip = BaseChip;
+exports.ChipCheckbox = ChipCheckbox;
+exports.ChipLabel = ChipLabel;
+//# sourceMappingURL=Chip.styles.js.map

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

@@ -0,0 +1 @@
+{"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/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

@@ -19,6 +19,8 @@ require('../Badge/Badge.styles.js');
 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');
@@ -53,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

@@ -12,6 +12,7 @@ var Box = require('./components/Box/Box.js');
 var IconButton = require('./components/Button/IconButton.js');
 var PaginationButton = require('./components/Button/PaginationButton.js');
 var BackButton = require('./components/BackButton/BackButton.js');
+var Chip = require('./components/Chips/Chip.js');
 var CartItemSummary = require('./components/CartItemSummary/CartItemSummary.js');
 var CartSummary = require('./components/CartSummary/CartSummary.js');
 var CustomerInfoBlock = require('./components/CustomerInfoBlock/CustomerInfoBlock.js');
@@ -44,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');
@@ -86,6 +88,7 @@ exports.Box = Box.Box;
 exports.IconButton = IconButton.IconButton;
 exports.PaginationButton = PaginationButton.PaginationButton;
 exports.BackButton = BackButton.BackButton;
+exports.Chip = Chip.Chip;
 exports.CartItemSummary = CartItemSummary.CartItemSummary;
 exports.CartSummary = CartSummary.CartSummary;
 exports.CustomerInfoBlock = CustomerInfoBlock.CustomerInfoBlock;
@@ -136,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

@@ -0,0 +1,18 @@
+import React from 'react';
+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;
+    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)));
+}
+
+export { Chip };
+//# sourceMappingURL=Chip.js.map

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

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

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

@@ -0,0 +1,19 @@
+import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import { BodyText } from '@citygross/typography';
+
+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;
+    return props.checked &&
+        "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  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;
+
+export { BaseChip, ChipCheckbox, ChipLabel };
+//# sourceMappingURL=Chip.styles.js.map

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

@@ -0,0 +1 @@
+{"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/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

@@ -15,6 +15,8 @@ import '../Badge/Badge.styles.js';
 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';
@@ -49,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

@@ -8,6 +8,7 @@ export { Box } from './components/Box/Box.js';
 export { IconButton } from './components/Button/IconButton.js';
 export { PaginationButton } from './components/Button/PaginationButton.js';
 export { BackButton } from './components/BackButton/BackButton.js';
+export { Chip } from './components/Chips/Chip.js';
 export { CartItemSummary } from './components/CartItemSummary/CartItemSummary.js';
 export { CartSummary } from './components/CartSummary/CartSummary.js';
 export { CustomerInfoBlock } from './components/CustomerInfoBlock/CustomerInfoBlock.js';
@@ -40,6 +41,7 @@ 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.61",
+  "version": "0.7.65",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -71,5 +71,5 @@
     "moment": "^2.29.1",
     "react-loading-skeleton": "^2.2.0"
   },
-  "gitHead": "f5fb6a88d185a6e67ea05065302c8aedb23c4da5"
+  "gitHead": "d789018d7880a9599b6d57bffef9816335961522"
 }