@citygross/components 0.7.199 → 0.7.201

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

@@ -2,8 +2,8 @@ import React from 'react';
 export declare type TDeliverySlotItem = {
     date: string;
     selected: boolean;
-    disabled: boolean;
     children: React.ReactNode;
     onSelect: () => void;
+    icon?: React.ReactNode;
 };
-export declare function DeliverySlotItem({ date, selected, disabled, children, onSelect }: TDeliverySlotItem): JSX.Element;
+export declare function DeliverySlotItem({ date, selected, children, onSelect, icon }: TDeliverySlotItem): JSX.Element;

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

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

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

@@ -1,23 +1,18 @@
 /// <reference types="react" />
-import { TRadioColor } from '../FormElements/Radio/Radio';
-import { TDot } from '../DotIndicator/DotIndicator';
 import * as styles from './RadioListItem.styles';
 export declare type TRadioListItemProps = styles.TBaseRadioItemInputWrapper & {
     onClick: (value: string | number) => void;
-    radioColor?: keyof TRadioColor;
-    name: string;
     selected?: boolean;
     defaultDisabledString?: string;
-    dotIndicator?: TDot;
     transparent?: boolean;
     noPadding?: boolean;
     label: string;
     secondaryLabel?: string;
     isDisabled?: boolean;
     disabledText?: string;
-    textOnSelected?: string;
     value: string | number;
     wrapMobile?: boolean;
     children?: JSX.Element;
+    additionalInfo?: JSX.Element;
 };
-export declare function RadioListItem({ onClick, selected, name, radioColor, defaultDisabledString, flexGrow, isDisabled, dotIndicator, transparent, noPadding, label, disabledText, secondaryLabel, textOnSelected, value, wrapMobile, children }: TRadioListItemProps): JSX.Element;
+export declare function RadioListItem({ onClick, selected, defaultDisabledString, flexGrow, isDisabled, transparent, noPadding, label, disabledText, value, wrapMobile, additionalInfo, children }: TRadioListItemProps): JSX.Element;

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

@@ -6,8 +6,10 @@ export declare type TBaseRadioItemInputWrapper = {
     center?: boolean;
 };
 export declare type TBaseRadiolistItemcontainer = {
-    background?: string;
     noPadding?: boolean;
+    transparent?: boolean;
+    isDisabled?: boolean;
+    selected?: boolean;
 };
 export declare type TWrapMobile = {
     wrapMobile?: boolean;
@@ -16,15 +18,15 @@ export declare const BaseRadioListItemContainer: import("styled-components").Sty
 export declare const BaseRadioItemLeftWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TBaseRadioItemInputWrapper, never>;
 export declare const StyledH3: import("styled-components").StyledComponent<({ children, lineThrough, color, fontWeight, ...props }: import("@citygross/typography/build/headers/h3/h3").IH3) => JSX.Element, import("styled-components").DefaultTheme, {
     as: string;
-}, "as">;
-export declare const RadioSecondaryWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+} & TBaseRadioItemInputWrapper, "as">;
+export declare const RadioRightWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DisableText: import("styled-components").StyledComponent<({ size, color, children, lineThrough, fontWeight, textAlign, ...props }: {
     children: import("react").ReactNode;
     size?: import("@citygross/typography/build/types/textTypes").TextSize | undefined;
     color?: string | undefined;
     lineThrough?: boolean | undefined;
     fontWeight?: "bold" | "regular" | "medium" | "semiBold" | undefined;
-    textAlign?: "center" | "left" | "right" | undefined;
+    textAlign?: "left" | "center" | "right" | undefined;
 }) => JSX.Element, import("styled-components").DefaultTheme, TWrapMobile, never>;
 export declare const RadioFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TWrapMobile, never>;
 export declare const SecondaryColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { TButtonColor } from '../Button/Button';
+import { Settings } from 'react-slick';
 export declare type TSlider = {
     customSlideAmount: number;
     children: React.ReactNode;
@@ -7,5 +8,6 @@ export declare type TSlider = {
     iconHeight?: number;
     iconWidth?: number;
     iconColor?: TButtonColor;
+    sliderSettings: Settings;
 };
-export declare const Slider: ({ children, customSlideAmount, itemGap, iconHeight, iconWidth, iconColor }: TSlider) => JSX.Element;
+export declare const Slider: ({ children, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;

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

@@ -2,7 +2,7 @@
 import { Story } from '@storybook/react';
 import { TSlider } from './Slider';
 declare const _default: {
-    component: ({ children, customSlideAmount, itemGap, iconHeight, iconWidth, iconColor }: TSlider) => JSX.Element;
+    component: ({ children, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
     title: string;
 };
 export default _default;

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

@@ -30,6 +30,7 @@ require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
 require('../Collapsable/Collapsable.styles.js');
 require('../DeliverySlotItem/DeliverySlotItem.styles.js');
 require('../Slider/Slider.styles.js');
+require('react-slick');
 require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
 require('../Menu/Menu.styles.js');
 require('../DateBox/DateBox.styles.js');

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var designTokens = require('@citygross/design-tokens');
 var utils = require('@citygross/utils');
 var typography = require('@citygross/typography');
 var DeliverySlotItem_styles = require('./DeliverySlotItem.styles.js');
@@ -13,23 +12,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function DeliverySlotItem(_a) {
-    var _b;
-    var date = _a.date, selected = _a.selected, disabled = _a.disabled, children = _a.children, onSelect = _a.onSelect;
+    var date = _a.date, selected = _a.selected, children = _a.children, onSelect = _a.onSelect, icon = _a.icon;
     var momentDate = utils.moment(date);
     var width = utils.useWindowSize().width;
-    var _c = React.useState(momentDate
-        .format(width < (((_b = designTokens.theme.breakpoints) === null || _b === void 0 ? void 0 : _b.md) || 768) ? 'ddd' : 'dddd')
-        .toLocaleLowerCase()), weekDay = _c[0], setWeekDay = _c[1];
+    var _b = React.useState(momentDate.format('dddd').toLocaleLowerCase()), weekDay = _b[0], setWeekDay = _b[1];
     var dayNumber = momentDate.format('D');
-    var month = momentDate.format('MMM').toLocaleLowerCase();
+    var month = momentDate.format('MMMM').toLocaleLowerCase();
     React.useEffect(function () {
-        var _a;
-        setWeekDay(momentDate
-            .format(width < (((_a = designTokens.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md) || 768) ? 'ddd' : 'dddd')
-            .toLocaleLowerCase());
+        setWeekDay(momentDate.format('dddd').toLocaleLowerCase());
     }, [width]);
     var slotRef = React.useRef(null);
-    var _d = React.useState(true), isVisible = _d[0], setIsVisible = _d[1];
+    var _c = React.useState(true), isVisible = _c[0], setIsVisible = _c[1];
     var callbackFn = function (entries) {
         var entry = entries[0];
         // gets zoom level
@@ -79,15 +72,16 @@ function DeliverySlotItem(_a) {
             }
         };
     }, [slotRef, options]);
-    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, 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' }, utils.capitalizeFirstLetter(weekDay)))),
-        React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotContainer, { selected: selected, disabled: disabled },
-            React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotBody, { disabled: disabled },
-                React__default["default"].createElement(typography.H2, { color: 'darkest' }, removeLeadingZero(dayNumber)),
-                React__default["default"].createElement(typography.BodyText, { color: 'darker' }, utils.capitalizeFirstLetter(month))),
+    return (React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotItemContainer, { onClick: onSelect, isVisible: isVisible, ref: slotRef, selected: selected },
+        React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotContainer, { selected: selected },
+            React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotHeaderText, null,
+                React__default["default"].createElement(typography.BodyText, { fontWeight: 'medium' }, utils.capitalizeFirstLetter(weekDay)),
+                icon && icon),
+            React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotBody, null,
+                React__default["default"].createElement(typography.BodyText, { color: 'darkest', size: typography.TextTypes.TextSize.SMALL },
+                    utils.formatLeadingZero(dayNumber),
+                    " ",
+                    utils.capitalizeFirstLetter(month))),
             children)));
 }
 

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,31 +9,29 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-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 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  margin: 0 ", "px;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  width: ", "px;\n  max-width: ", "px;\n  min-height: ", "px;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: pointer;\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  margin: 0 ", "px;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  width: ", "px;\n  max-width: ", "px;\n  min-height: ", "px;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: pointer;\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.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, 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.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.lightest;
-});
-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) {
+}, 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.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, 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.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemHeight; }, 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; });
+styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  width: 100%;\n"], ["\n  display: flex;\n  width: 100%;\n"])));
+var DeliverySlotHeaderText = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var DeliverySlotContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n  &:hover {\n    cursor: pointer;\n    ", ";\n  }\n"], ["\n  padding: ", "px;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n  &:hover {\n    cursor: pointer;\n    ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; }, 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;
+}, function (props) {
+    var _a;
+    return !props.selected &&
+        "\n    background:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter);
 });
-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 DeliverySlotBody = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n"], ["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.DeliverySlotBody = DeliverySlotBody;
 exports.DeliverySlotContainer = DeliverySlotContainer;
-exports.DeliverySlotHeaderContainer = DeliverySlotHeaderContainer;
 exports.DeliverySlotHeaderText = DeliverySlotHeaderText;
 exports.DeliverySlotItemContainer = DeliverySlotItemContainer;
 //# sourceMappingURL=DeliverySlotItem.styles.js.map

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

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

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

@@ -9,11 +9,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseRadioGroup = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var BaseRadioGroup = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  ", "\n  display:flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  ", "\n  display:flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) {
     var _a;
     return props.header &&
         "\n  > :first-child{\n    margin-bottom: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md, "px;\n    text-align: initial;\n  }\n  ");
-});
+}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var StyledDiv = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  background: ", ";\n  border-radius: ", ";\n"], ["\n  background: ", ";\n  border-radius: ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { return (props.rounded ? '5px' : '0'); });
 var templateObject_1, templateObject_2;
 

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

@@ -3,10 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var typography = require('@citygross/typography');
-var Radio = require('../FormElements/Radio/Radio.js');
-var DotIndicator = require('../DotIndicator/DotIndicator.js');
-var designTokens = require('@citygross/design-tokens');
 var RadioListItem_styles = require('./RadioListItem.styles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,24 +10,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function RadioListItem(_a) {
-    var _b, _c, _d, _e;
-    var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, wrapMobile = _a.wrapMobile, children = _a.children;
-    return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { background: transparent
-            ? (_b = designTokens.theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
-            : designTokens.theme && designTokens.theme.palette
-                ? selected
-                    ? (_c = designTokens.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
-                    : (_d = designTokens.theme.palette) === null || _d === void 0 ? void 0 : _d.white
-                : 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
+    var onClick = _a.onClick, selected = _a.selected, defaultDisabledString = _a.defaultDisabledString, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
+    return (React__default["default"].createElement(RadioListItem_styles.BaseRadioListItemContainer, { transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
         React__default["default"].createElement(RadioListItem_styles.RadioFlex, { wrapMobile: wrapMobile },
-            React__default["default"].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow, center: !textOnSelected },
-                React__default["default"].createElement(Radio.Radio, { customColor: radioColor, checked: selected, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
+            React__default["default"].createElement(RadioListItem_styles.BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
                 React__default["default"].createElement("div", null,
-                    React__default["default"].createElement(RadioListItem_styles.StyledH3, { lineThrough: isDisabled }, label),
-                    textOnSelected && selected && (React__default["default"].createElement(typography.BodyText, { size: typography.TextTypes.TextSize.SMALL, color: (_e = designTokens.theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))),
-            React__default["default"].createElement(RadioListItem_styles.RadioSecondaryWrapper, null,
-                React__default["default"].createElement("span", null, dotIndicator && selected && (React__default["default"].createElement(DotIndicator.Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
-                isDisabled ? (React__default["default"].createElement(RadioListItem_styles.DisableText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
+                    React__default["default"].createElement(RadioListItem_styles.StyledH3, { isDisabled: isDisabled }, label),
+                    additionalInfo && additionalInfo)),
+            React__default["default"].createElement(RadioListItem_styles.RadioRightWrapper, null, isDisabled ? (React__default["default"].createElement(RadioListItem_styles.DisableText, null, disabledText || defaultDisabledString)) : (children)))));
 }
 
 exports.RadioListItem = RadioListItem;

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

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

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

@@ -10,11 +10,20 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"], ["\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var BaseRadioItemLeftWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 5;\n  align-items: ", ";\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"], ["\n  display: flex;\n  flex: 5;\n  align-items: ", ";\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"])), function (props) { return (props.center ? 'center' : 'flex-start'); }, function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
-var StyledH3 = styled__default["default"](typography.H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n"], ["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n"])));
-var RadioSecondaryWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
-var DisableText = styled__default["default"](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"], ["\n  font-size: ", "px;\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
+var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  transition: background-color 250ms ease;\n  border: 1px solid ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"], ["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  transition: background-color 250ms ease;\n  border: 1px solid ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2); }, function (props) { return (props.isDisabled ? 'cursor' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) {
+    var _a, _b, _c, _d;
+    return props.isDisabled
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest
+        : props.transparent
+            ? (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
+            : props.selected
+                ? (_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
+                : (_d = props.theme.palette) === null || _d === void 0 ? void 0 : _d.white;
+}, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var BaseRadioItemLeftWrapper = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex: 5;\n  align-items: flex-start;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n"], ["\n  display: flex;\n  flex: 5;\n  align-items: flex-start;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var StyledH3 = styled__default["default"](typography.H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n  ", ";\n"], ["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n  ", ";\n"])), function (props) { var _a; return props.isDisabled && "color:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark); });
+var RadioRightWrapper = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n  > p {\n    line-height: unset;\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n  > p {\n    line-height: unset;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
+var DisableText = styled__default["default"](typography.BodyText)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  font-size: ", "px;\n  color: ", ";\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"], ["\n  font-size: ", "px;\n  color: ", ";\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
     return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
         "\n  text-align: left;\n \n";
 }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; });
@@ -30,6 +39,6 @@ exports.BaseRadioItemLeftWrapper = BaseRadioItemLeftWrapper;
 exports.BaseRadioListItemContainer = BaseRadioListItemContainer;
 exports.DisableText = DisableText;
 exports.RadioFlex = RadioFlex;
-exports.RadioSecondaryWrapper = RadioSecondaryWrapper;
+exports.RadioRightWrapper = RadioRightWrapper;
 exports.StyledH3 = StyledH3;
 //# sourceMappingURL=RadioListItem.styles.js.map

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

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

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

@@ -2,75 +2,44 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _tslib = require('../../../../_virtual/_tslib.js');
 var React = require('react');
 var Slider_styles = require('./Slider.styles.js');
 var IconButton = require('../Button/IconButton.js');
 var Icon = require('@citygross/icons');
-var utils = require('@citygross/utils');
-var designTokens = require('@citygross/design-tokens');
+var SlickSlider = require('react-slick');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
 
 var Slider = function (_a) {
-    var _b, _c, _d;
-    var children = _a.children, customSlideAmount = _a.customSlideAmount, itemGap = _a.itemGap, _e = _a.iconHeight, iconHeight = _e === void 0 ? 32 : _e, _f = _a.iconWidth, iconWidth = _f === void 0 ? 32 : _f, _g = _a.iconColor, iconColor = _g === void 0 ? 'darkest' : _g;
-    var itemsContainer = React.useRef(null);
-    var _h = React.useState(false), isMax = _h[0], setIsMax = _h[1];
-    var _j = React.useState(true), isMin = _j[0], setIsMin = _j[1];
-    var _k = React.useState(0), slideAmount = _k[0], setSlideAmount = _k[1];
-    var isMobile = utils.useDetectDevice().isMobile;
-    var notScrollable = (_d = (itemsContainer.current &&
-        ((_b = itemsContainer.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) +
-            ((_c = itemsContainer.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) >=
-            itemsContainer.current.scrollWidth)) !== null && _d !== void 0 ? _d : undefined;
-    function slideLeft() {
-        var _a;
-        if (((_a = itemsContainer.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== undefined) {
-            itemsContainer.current.scrollLeft += slideAmount;
-        }
-    }
-    function slideRight() {
-        var _a;
-        if (((_a = itemsContainer.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== undefined) {
-            itemsContainer.current.scrollLeft -= slideAmount;
-        }
-    }
-    function onScroll(e) {
-        e.currentTarget.scrollLeft !== 0 ? setIsMin(false) : setIsMin(true);
-        var scrollIsAtEnd = e.currentTarget.scrollLeft +
-            e.currentTarget.getBoundingClientRect().width >=
-            e.currentTarget.scrollWidth;
-        setIsMax(scrollIsAtEnd);
-    }
-    function resizeListener() {
-        var _a, _b;
-        var tmpClientWidth = (_b = (_a = itemsContainer === null || itemsContainer === void 0 ? void 0 : itemsContainer.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
-        var amountOfItemsToSlide = Math.floor(tmpClientWidth /
-            (isMobile
-                ? designTokens.constants.deliverySlotItemWidth
-                : designTokens.constants.deliverySlotItemWidthDesktop));
-        setSlideAmount(customSlideAmount !== null && customSlideAmount !== void 0 ? customSlideAmount : amountOfItemsToSlide *
-            ((isMobile
-                ? designTokens.constants.deliverySlotItemWidth
-                : designTokens.constants.deliverySlotItemWidthDesktop) +
-                (itemGap !== null && itemGap !== void 0 ? itemGap : designTokens.constants.itemGap)));
-    }
-    React.useEffect(function () {
-        resizeListener();
-        window.addEventListener('resize', resizeListener);
-        return function () {
-            document.removeEventListener('resize', resizeListener);
-        };
-    }, []);
-    return (React__default["default"].createElement(Slider_styles.Container, null,
-        React__default["default"].createElement(Slider_styles.SliderContainer, { ref: itemsContainer, onScroll: function (e) { return onScroll(e); } },
-            React__default["default"].createElement(Slider_styles.LeftIconButtonContainer, null,
-                React__default["default"].createElement(IconButton.IconButton, { isDisabled: isMin, color: iconColor, icon: React__default["default"].createElement(Icon.Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, onClick: function () { return slideRight(); }, borderRadius: 100 })),
-            React__default["default"].createElement(Slider_styles.ItemsContainer, { itemGap: itemGap }, children),
-            React__default["default"].createElement(Slider_styles.RightIconButtonContainer, null,
-                React__default["default"].createElement(IconButton.IconButton, { isDisabled: isMax || notScrollable, color: iconColor, icon: React__default["default"].createElement(Icon.Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, onClick: function () { return slideLeft(); }, borderRadius: 100 })))));
+    var _b;
+    var children = _a.children, _c = _a.iconHeight, iconHeight = _c === void 0 ? 32 : _c, _d = _a.iconWidth, iconWidth = _d === void 0 ? 32 : _d, _e = _a.iconColor, iconColor = _e === void 0 ? 'darkest' : _e, sliderSettings = _a.sliderSettings;
+    var _f = React.useState(false), isMax = _f[0], setIsMax = _f[1];
+    var _g = React.useState(true), isMin = _g[0], setIsMin = _g[1];
+    var childs = (_b = React__default["default"].Children) === null || _b === void 0 ? void 0 : _b.map(children, function (child) { return child; });
+    var settings = _tslib.__assign({ speed: 500, slidesToShow: 7, infinite: false, slidesToScroll: 7, variableWidth: true, initialSlide: 0, nextArrow: (React__default["default"].createElement(Slider_styles.RightIconButtonContainer, null,
+            React__default["default"].createElement(IconButton.IconButton, { isDisabled: isMax, color: iconColor, icon: React__default["default"].createElement(Icon.Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100 }))), prevArrow: (React__default["default"].createElement(Slider_styles.LeftIconButtonContainer, null,
+            React__default["default"].createElement(IconButton.IconButton, { isDisabled: isMin, color: iconColor, icon: React__default["default"].createElement(Icon.Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100 }))), beforeChange: function (_, next) {
+            var _a, _b;
+            var totalPages = (_b = Math.ceil((_a = (childs && (childs === null || childs === void 0 ? void 0 : childs.length) / 7)) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
+            var curPage = Math.round(next / totalPages);
+            if (curPage === 0) {
+                setIsMin(true);
+                return;
+            }
+            if (curPage === totalPages) {
+                setIsMax(true);
+                return;
+            }
+            setIsMax(false);
+            setIsMin(false);
+        } }, sliderSettings);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement(Slider_styles.Container, null,
+            React__default["default"].createElement(SlickSlider__default["default"], _tslib.__assign({}, settings), children))));
 };
 
 exports.Slider = Slider;

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

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

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

@@ -9,16 +9,14 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var SliderContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var LeftIconButtonContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  z-index: 1;\n  @media (min-width: ", "px) {\n    left: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  z-index: 1;\n  @media (min-width: ", "px) {\n    left: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var RightIconButtonContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  right: -", "px;\n  @media (min-width: ", "px) {\n    right: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  right: -", "px;\n  @media (min-width: ", "px) {\n    right: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var ItemsContainer = styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, 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.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
+var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  position: relative;\n\n  @media (min-width: ", "px) {\n    padding: 0 32px;\n  }\n"], ["\n  position: relative;\n\n  @media (min-width: ", "px) {\n    padding: 0 32px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
+styled__default["default"].div(templateObject_2 || (templateObject_2 = _tslib.__makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var LeftIconButtonContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  @media (max-width: ", "px) {\n    display: none !important;\n  }\n  @media (min-width: ", "px) {\n    display: block;\n    left: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  @media (max-width: ", "px) {\n    display: none !important;\n  }\n  @media (min-width: ", "px) {\n    display: block;\n    left: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
+var RightIconButtonContainer = styled__default["default"].div(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  display: flex;\n\n  top: 50%;\n  transform: translateY(-50%);\n  position: absolute;\n  right: -", "px;\n\n  @media (max-width: ", "px) {\n    display: none !important;\n  }\n\n  @media (min-width: ", "px) {\n    display: block;\n    right: -", "px;\n  }\n"], ["\n  display: flex;\n\n  top: 50%;\n  transform: translateY(-50%);\n  position: absolute;\n  right: -", "px;\n\n  @media (max-width: ", "px) {\n    display: none !important;\n  }\n\n  @media (min-width: ", "px) {\n    display: block;\n    right: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
+styled__default["default"].div(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, 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.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
 exports.Container = Container;
-exports.ItemsContainer = ItemsContainer;
 exports.LeftIconButtonContainer = LeftIconButtonContainer;
 exports.RightIconButtonContainer = RightIconButtonContainer;
-exports.SliderContainer = SliderContainer;
 //# sourceMappingURL=Slider.styles.js.map

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

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

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

@@ -30,6 +30,7 @@ require('../CustomerInfoBlock/CustomerInfoBlock.styles.js');
 require('../Collapsable/Collapsable.styles.js');
 require('../DeliverySlotItem/DeliverySlotItem.styles.js');
 require('../Slider/Slider.styles.js');
+require('react-slick');
 require('../DeliveryTimeBlock/DeliveryTimeBlock.styles.js');
 require('../Menu/Menu.styles.js');
 require('../DateBox/DateBox.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/es/components/src/components/AddressBlock/AddressBlock.js

@@ -26,6 +26,7 @@ import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
 import '../Collapsable/Collapsable.styles.js';
 import '../DeliverySlotItem/DeliverySlotItem.styles.js';
 import '../Slider/Slider.styles.js';
+import 'react-slick';
 import '../DeliveryTimeBlock/DeliveryTimeBlock.styles.js';
 import '../Menu/Menu.styles.js';
 import '../DateBox/DateBox.styles.js';

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

@@ -1,27 +1,20 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { theme } from '@citygross/design-tokens';
-import { moment, useWindowSize, capitalizeFirstLetter } from '@citygross/utils';
-import { BodyText, H2 } from '@citygross/typography';
-import { DeliverySlotItemContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotContainer, DeliverySlotBody } from './DeliverySlotItem.styles.js';
+import { moment, useWindowSize, capitalizeFirstLetter, formatLeadingZero } from '@citygross/utils';
+import { BodyText, TextTypes } from '@citygross/typography';
+import { DeliverySlotItemContainer, DeliverySlotContainer, DeliverySlotHeaderText, DeliverySlotBody } from './DeliverySlotItem.styles.js';
 
 function DeliverySlotItem(_a) {
-    var _b;
-    var date = _a.date, selected = _a.selected, disabled = _a.disabled, children = _a.children, onSelect = _a.onSelect;
+    var date = _a.date, selected = _a.selected, children = _a.children, onSelect = _a.onSelect, icon = _a.icon;
     var momentDate = moment(date);
     var width = useWindowSize().width;
-    var _c = useState(momentDate
-        .format(width < (((_b = theme.breakpoints) === null || _b === void 0 ? void 0 : _b.md) || 768) ? 'ddd' : 'dddd')
-        .toLocaleLowerCase()), weekDay = _c[0], setWeekDay = _c[1];
+    var _b = useState(momentDate.format('dddd').toLocaleLowerCase()), weekDay = _b[0], setWeekDay = _b[1];
     var dayNumber = momentDate.format('D');
-    var month = momentDate.format('MMM').toLocaleLowerCase();
+    var month = momentDate.format('MMMM').toLocaleLowerCase();
     useEffect(function () {
-        var _a;
-        setWeekDay(momentDate
-            .format(width < (((_a = theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md) || 768) ? 'ddd' : 'dddd')
-            .toLocaleLowerCase());
+        setWeekDay(momentDate.format('dddd').toLocaleLowerCase());
     }, [width]);
     var slotRef = useRef(null);
-    var _d = useState(true), isVisible = _d[0], setIsVisible = _d[1];
+    var _c = useState(true), isVisible = _c[0], setIsVisible = _c[1];
     var callbackFn = function (entries) {
         var entry = entries[0];
         // gets zoom level
@@ -71,15 +64,16 @@ function DeliverySlotItem(_a) {
             }
         };
     }, [slotRef, options]);
-    var removeLeadingZero = function (day) { return day.replace(/^0+/, ''); };
-    return (React.createElement(DeliverySlotItemContainer, { onClick: !disabled ? onSelect : function () { return null; }, disabled: disabled, isVisible: isVisible, ref: slotRef, selected: selected },
-        React.createElement(DeliverySlotHeaderContainer, { disabled: disabled, selected: selected },
-            React.createElement(DeliverySlotHeaderText, { disabled: disabled },
-                React.createElement(BodyText, { color: selected ? 'white' : 'black' }, capitalizeFirstLetter(weekDay)))),
-        React.createElement(DeliverySlotContainer, { selected: selected, disabled: disabled },
-            React.createElement(DeliverySlotBody, { disabled: disabled },
-                React.createElement(H2, { color: 'darkest' }, removeLeadingZero(dayNumber)),
-                React.createElement(BodyText, { color: 'darker' }, capitalizeFirstLetter(month))),
+    return (React.createElement(DeliverySlotItemContainer, { onClick: onSelect, isVisible: isVisible, ref: slotRef, selected: selected },
+        React.createElement(DeliverySlotContainer, { selected: selected },
+            React.createElement(DeliverySlotHeaderText, null,
+                React.createElement(BodyText, { fontWeight: 'medium' }, capitalizeFirstLetter(weekDay)),
+                icon && icon),
+            React.createElement(DeliverySlotBody, null,
+                React.createElement(BodyText, { color: 'darkest', size: TextTypes.TextSize.SMALL },
+                    formatLeadingZero(dayNumber),
+                    " ",
+                    capitalizeFirstLetter(month))),
             children)));
 }
 

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

@@ -1,27 +1,26 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
-var DeliverySlotItemContainer = styled.div(templateObject_1 || (templateObject_1 = __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 DeliverySlotItemContainer = styled.div(templateObject_1 || (templateObject_1 = __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  margin: 0 ", "px;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  width: ", "px;\n  max-width: ", "px;\n  min-height: ", "px;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: pointer;\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  margin: 0 ", "px;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\n  width: ", "px;\n  max-width: ", "px;\n  min-height: ", "px;\n\n  @media (min-width: ", "px) {\n    min-width: ", "px;\n  }\n\n  &:hover {\n    cursor: pointer;\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.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, 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.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.div(templateObject_2 || (templateObject_2 = __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.lightest;
-});
-var DeliverySlotHeaderText = styled.div(templateObject_3 || (templateObject_3 = __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.div(templateObject_4 || (templateObject_4 = __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) {
+}, 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.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, 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.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemHeight; }, 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; });
+styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n"], ["\n  display: flex;\n  width: 100%;\n"])));
+var DeliverySlotHeaderText = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
+var DeliverySlotContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: ", "px;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n  &:hover {\n    cursor: pointer;\n    ", ";\n  }\n"], ["\n  padding: ", "px;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n  &:hover {\n    cursor: pointer;\n    ", ";\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2; }, 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;
+}, function (props) {
+    var _a;
+    return !props.selected &&
+        "\n    background:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter);
 });
-var DeliverySlotBody = styled.div(templateObject_5 || (templateObject_5 = __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 DeliverySlotBody = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n"], ["\n  margin-top: ", "px;\n  margin-bottom: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxxs; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
-export { DeliverySlotBody, DeliverySlotContainer, DeliverySlotHeaderContainer, DeliverySlotHeaderText, DeliverySlotItemContainer };
+export { DeliverySlotBody, DeliverySlotContainer, DeliverySlotHeaderText, DeliverySlotItemContainer };
 //# sourceMappingURL=DeliverySlotItem.styles.js.map

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

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

package/build/es/components/src/components/RadioGroup/RadioGroup.styles.js

@@ -1,11 +1,11 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
-var BaseRadioGroup = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+var BaseRadioGroup = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  display:flex;\n  flex-direction: column;\n  gap: ", "px;\n"], ["\n  ", "\n  display:flex;\n  flex-direction: column;\n  gap: ", "px;\n"])), function (props) {
     var _a;
     return props.header &&
         "\n  > :first-child{\n    margin-bottom: ".concat((_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md, "px;\n    text-align: initial;\n  }\n  ");
-});
+}, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
 var StyledDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: ", ";\n"], ["\n  background: ", ";\n  border-radius: ", ";\n"])), function (props) { var _a, _b; return (_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white; }, function (props) { return (props.rounded ? '5px' : '0'); });
 var templateObject_1, templateObject_2;
 

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

@@ -1,29 +1,15 @@
 import React from 'react';
-import { BodyText, TextTypes } from '@citygross/typography';
-import { Radio } from '../FormElements/Radio/Radio.js';
-import { Dot } from '../DotIndicator/DotIndicator.js';
-import { theme } from '@citygross/design-tokens';
-import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioSecondaryWrapper, DisableText } from './RadioListItem.styles.js';
+import { BaseRadioListItemContainer, RadioFlex, BaseRadioItemLeftWrapper, StyledH3, RadioRightWrapper, DisableText } from './RadioListItem.styles.js';
 
 function RadioListItem(_a) {
-    var _b, _c, _d, _e;
-    var onClick = _a.onClick, selected = _a.selected, name = _a.name, _f = _a.radioColor, radioColor = _f === void 0 ? 'alertBlue' : _f, defaultDisabledString = _a.defaultDisabledString, _g = _a.flexGrow, flexGrow = _g === void 0 ? 1 : _g, isDisabled = _a.isDisabled, dotIndicator = _a.dotIndicator, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, secondaryLabel = _a.secondaryLabel, textOnSelected = _a.textOnSelected, value = _a.value, wrapMobile = _a.wrapMobile, children = _a.children;
-    return (React.createElement(BaseRadioListItemContainer, { background: transparent
-            ? (_b = theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
-            : theme && theme.palette
-                ? selected
-                    ? (_c = theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
-                    : (_d = theme.palette) === null || _d === void 0 ? void 0 : _d.white
-                : 'white', noPadding: noPadding, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
+    var onClick = _a.onClick, selected = _a.selected, defaultDisabledString = _a.defaultDisabledString, _b = _a.flexGrow, flexGrow = _b === void 0 ? 1 : _b, isDisabled = _a.isDisabled, transparent = _a.transparent, noPadding = _a.noPadding, label = _a.label, disabledText = _a.disabledText, value = _a.value, wrapMobile = _a.wrapMobile, additionalInfo = _a.additionalInfo, children = _a.children;
+    return (React.createElement(BaseRadioListItemContainer, { transparent: transparent, isDisabled: isDisabled, noPadding: noPadding, selected: selected, onClick: isDisabled ? function () { } : function () { return onClick(value); } },
         React.createElement(RadioFlex, { wrapMobile: wrapMobile },
-            React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow, center: !textOnSelected },
-                React.createElement(Radio, { customColor: radioColor, checked: selected, disabled: isDisabled, name: name, onChange: function () { return onClick(value); }, value: value }),
+            React.createElement(BaseRadioItemLeftWrapper, { isDisabled: isDisabled, flexGrow: flexGrow },
                 React.createElement("div", null,
-                    React.createElement(StyledH3, { lineThrough: isDisabled }, label),
-                    textOnSelected && selected && (React.createElement(BodyText, { size: TextTypes.TextSize.SMALL, color: (_e = theme.palette) === null || _e === void 0 ? void 0 : _e.dark }, textOnSelected)))),
-            React.createElement(RadioSecondaryWrapper, null,
-                React.createElement("span", null, dotIndicator && selected && (React.createElement(Dot, { color: dotIndicator.color, shadow: dotIndicator.shadow }))),
-                isDisabled ? (React.createElement(DisableText, null, disabledText || defaultDisabledString)) : (children || secondaryLabel)))));
+                    React.createElement(StyledH3, { isDisabled: isDisabled }, label),
+                    additionalInfo && additionalInfo)),
+            React.createElement(RadioRightWrapper, null, isDisabled ? (React.createElement(DisableText, null, disabledText || defaultDisabledString)) : (children)))));
 }
 
 export { RadioListItem };

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

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

package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js

@@ -2,11 +2,20 @@ import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import { H3, BodyText } from '@citygross/typography';
 import styled from 'styled-components';
 
-var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"], ["\n  padding: ", "px;\n  align-items: center;\n  cursor: pointer;\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) { return props.background; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
-var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 5;\n  align-items: ", ";\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"], ["\n  display: flex;\n  flex: 5;\n  align-items: ", ";\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n  ", ";\n"])), function (props) { return (props.center ? 'center' : 'flex-start'); }, function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { return props.isDisabled && 'opacity: 0.4'; });
-var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n"], ["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n"])));
-var RadioSecondaryWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
-var DisableText = styled(BodyText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: ", "px;\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"], ["\n  font-size: ", "px;\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) {
+var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  transition: background-color 250ms ease;\n  border: 1px solid ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"], ["\n  padding: ", "px;\n  align-items: center;\n  cursor: ", ";\n  flex-wrap: wrap;\n  border-radius: ", "px;\n  background: ", ";\n  transition: background-color 250ms ease;\n  border: 1px solid ", ";\n  > p:first-of-type {\n    margin-left: ", "px;\n  }\n"])), function (props) { var _a; return (props.noPadding ? 0 : (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs2); }, function (props) { return (props.isDisabled ? 'cursor' : 'pointer'); }, function (props) { var _a; return (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.borderRadius.small; }, function (props) {
+    var _a, _b, _c, _d;
+    return props.isDisabled
+        ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest
+        : props.transparent
+            ? (_b = props.theme.palette) === null || _b === void 0 ? void 0 : _b.transparent
+            : props.selected
+                ? (_c = props.theme.palette) === null || _c === void 0 ? void 0 : _c.blueLight
+                : (_d = props.theme.palette) === null || _d === void 0 ? void 0 : _d.white;
+}, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.medium; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; });
+var BaseRadioItemLeftWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 5;\n  align-items: flex-start;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n"], ["\n  display: flex;\n  flex: 5;\n  align-items: flex-start;\n  ", ";\n  > * {\n    &:first-child {\n      margin-right: ", "px;\n    }\n  }\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
+var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n  ", ";\n"], ["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n  ", ";\n"])), function (props) { var _a; return props.isDisabled && "color:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.dark); });
+var RadioRightWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n  > p {\n    line-height: unset;\n  }\n"], ["\n  display: flex;\n  gap: ", "px;\n  justify-content: flex-end;\n  text-align: right;\n  font-size: ", "px;\n  > p {\n    line-height: unset;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; });
+var DisableText = styled(BodyText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: ", "px;\n  color: ", ";\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"], ["\n  font-size: ", "px;\n  color: ", ";\n  ", "\n  @media (min-width: ", "px) {\n    font-size: ", "px;\n    text-align: inherit;\n  }\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s2; }, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.darkest; }, function (props) {
     return (props === null || props === void 0 ? void 0 : props.wrapMobile) &&
         "\n  text-align: left;\n \n";
 }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.size.s3; });
@@ -18,5 +27,5 @@ var RadioFlex = styled.div(templateObject_6 || (templateObject_6 = __makeTemplat
 styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
-export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, DisableText, RadioFlex, RadioSecondaryWrapper, StyledH3 };
+export { BaseRadioItemLeftWrapper, BaseRadioListItemContainer, DisableText, RadioFlex, RadioRightWrapper, StyledH3 };
 //# sourceMappingURL=RadioListItem.styles.js.map

package/build/es/components/src/components/RadioListItem/RadioListItem.styles.js.map

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

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

@@ -1,68 +1,36 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { Container, SliderContainer, LeftIconButtonContainer, ItemsContainer, RightIconButtonContainer } from './Slider.styles.js';
+import { __assign } from '../../../../_virtual/_tslib.js';
+import React, { useState } from 'react';
+import { RightIconButtonContainer, LeftIconButtonContainer, Container } from './Slider.styles.js';
 import { IconButton } from '../Button/IconButton.js';
 import { Icons } from '@citygross/icons';
-import { useDetectDevice } from '@citygross/utils';
-import { constants } from '@citygross/design-tokens';
+import SlickSlider from 'react-slick';
 
 var Slider = function (_a) {
-    var _b, _c, _d;
-    var children = _a.children, customSlideAmount = _a.customSlideAmount, itemGap = _a.itemGap, _e = _a.iconHeight, iconHeight = _e === void 0 ? 32 : _e, _f = _a.iconWidth, iconWidth = _f === void 0 ? 32 : _f, _g = _a.iconColor, iconColor = _g === void 0 ? 'darkest' : _g;
-    var itemsContainer = useRef(null);
-    var _h = useState(false), isMax = _h[0], setIsMax = _h[1];
-    var _j = useState(true), isMin = _j[0], setIsMin = _j[1];
-    var _k = useState(0), slideAmount = _k[0], setSlideAmount = _k[1];
-    var isMobile = useDetectDevice().isMobile;
-    var notScrollable = (_d = (itemsContainer.current &&
-        ((_b = itemsContainer.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) +
-            ((_c = itemsContainer.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) >=
-            itemsContainer.current.scrollWidth)) !== null && _d !== void 0 ? _d : undefined;
-    function slideLeft() {
-        var _a;
-        if (((_a = itemsContainer.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== undefined) {
-            itemsContainer.current.scrollLeft += slideAmount;
-        }
-    }
-    function slideRight() {
-        var _a;
-        if (((_a = itemsContainer.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== undefined) {
-            itemsContainer.current.scrollLeft -= slideAmount;
-        }
-    }
-    function onScroll(e) {
-        e.currentTarget.scrollLeft !== 0 ? setIsMin(false) : setIsMin(true);
-        var scrollIsAtEnd = e.currentTarget.scrollLeft +
-            e.currentTarget.getBoundingClientRect().width >=
-            e.currentTarget.scrollWidth;
-        setIsMax(scrollIsAtEnd);
-    }
-    function resizeListener() {
-        var _a, _b;
-        var tmpClientWidth = (_b = (_a = itemsContainer === null || itemsContainer === void 0 ? void 0 : itemsContainer.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
-        var amountOfItemsToSlide = Math.floor(tmpClientWidth /
-            (isMobile
-                ? constants.deliverySlotItemWidth
-                : constants.deliverySlotItemWidthDesktop));
-        setSlideAmount(customSlideAmount !== null && customSlideAmount !== void 0 ? customSlideAmount : amountOfItemsToSlide *
-            ((isMobile
-                ? constants.deliverySlotItemWidth
-                : constants.deliverySlotItemWidthDesktop) +
-                (itemGap !== null && itemGap !== void 0 ? itemGap : constants.itemGap)));
-    }
-    useEffect(function () {
-        resizeListener();
-        window.addEventListener('resize', resizeListener);
-        return function () {
-            document.removeEventListener('resize', resizeListener);
-        };
-    }, []);
-    return (React.createElement(Container, null,
-        React.createElement(SliderContainer, { ref: itemsContainer, onScroll: function (e) { return onScroll(e); } },
-            React.createElement(LeftIconButtonContainer, null,
-                React.createElement(IconButton, { isDisabled: isMin, color: iconColor, icon: React.createElement(Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, onClick: function () { return slideRight(); }, borderRadius: 100 })),
-            React.createElement(ItemsContainer, { itemGap: itemGap }, children),
-            React.createElement(RightIconButtonContainer, null,
-                React.createElement(IconButton, { isDisabled: isMax || notScrollable, color: iconColor, icon: React.createElement(Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, onClick: function () { return slideLeft(); }, borderRadius: 100 })))));
+    var _b;
+    var children = _a.children, _c = _a.iconHeight, iconHeight = _c === void 0 ? 32 : _c, _d = _a.iconWidth, iconWidth = _d === void 0 ? 32 : _d, _e = _a.iconColor, iconColor = _e === void 0 ? 'darkest' : _e, sliderSettings = _a.sliderSettings;
+    var _f = useState(false), isMax = _f[0], setIsMax = _f[1];
+    var _g = useState(true), isMin = _g[0], setIsMin = _g[1];
+    var childs = (_b = React.Children) === null || _b === void 0 ? void 0 : _b.map(children, function (child) { return child; });
+    var settings = __assign({ speed: 500, slidesToShow: 7, infinite: false, slidesToScroll: 7, variableWidth: true, initialSlide: 0, nextArrow: (React.createElement(RightIconButtonContainer, null,
+            React.createElement(IconButton, { isDisabled: isMax, color: iconColor, icon: React.createElement(Icons.ChevronRight, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100 }))), prevArrow: (React.createElement(LeftIconButtonContainer, null,
+            React.createElement(IconButton, { isDisabled: isMin, color: iconColor, icon: React.createElement(Icons.ChevronLeft, { color: 'white' }), height: iconHeight, width: iconWidth, borderRadius: 100 }))), beforeChange: function (_, next) {
+            var _a, _b;
+            var totalPages = (_b = Math.ceil((_a = (childs && (childs === null || childs === void 0 ? void 0 : childs.length) / 7)) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
+            var curPage = Math.round(next / totalPages);
+            if (curPage === 0) {
+                setIsMin(true);
+                return;
+            }
+            if (curPage === totalPages) {
+                setIsMax(true);
+                return;
+            }
+            setIsMax(false);
+            setIsMin(false);
+        } }, sliderSettings);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Container, null,
+            React.createElement(SlickSlider, __assign({}, settings), children))));
 };
 
 export { Slider };

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

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

package/build/es/components/src/components/Slider/Slider.styles.js

@@ -1,12 +1,12 @@
 import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
 import styled from 'styled-components';
 
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var SliderContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
-var LeftIconButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  z-index: 1;\n  @media (min-width: ", "px) {\n    left: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  z-index: 1;\n  @media (min-width: ", "px) {\n    left: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var RightIconButtonContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  right: -", "px;\n  @media (min-width: ", "px) {\n    right: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  right: -", "px;\n  @media (min-width: ", "px) {\n    right: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xs; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; });
-var ItemsContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, 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.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  @media (min-width: ", "px) {\n    padding: 0 32px;\n  }\n"], ["\n  position: relative;\n\n  @media (min-width: ", "px) {\n    padding: 0 32px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
+styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  margin: 0 -", "px;\n  overflow-y: hidden;\n  -ms-overflow-style: none; /* IE and Edge */\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media (pointer: fine) {\n    overflow-x: hidden;\n  }\n  @media (min-width: ", "px) {\n    margin: 0 -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.sm; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; });
+var LeftIconButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  @media (max-width: ", "px) {\n    display: none !important;\n  }\n  @media (min-width: ", "px) {\n    display: block;\n    left: -", "px;\n  }\n"], ["\n  display: flex;\n  position: absolute;\n  left: -", "px;\n  top: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  @media (max-width: ", "px) {\n    display: none !important;\n  }\n  @media (min-width: ", "px) {\n    display: block;\n    left: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
+var RightIconButtonContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n\n  top: 50%;\n  transform: translateY(-50%);\n  position: absolute;\n  right: -", "px;\n\n  @media (max-width: ", "px) {\n    display: none !important;\n  }\n\n  @media (min-width: ", "px) {\n    display: block;\n    right: -", "px;\n  }\n"], ["\n  display: flex;\n\n  top: 50%;\n  transform: translateY(-50%);\n  position: absolute;\n  right: -", "px;\n\n  @media (max-width: ", "px) {\n    display: none !important;\n  }\n\n  @media (min-width: ", "px) {\n    display: block;\n    right: -", "px;\n  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, 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.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
+styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: ", "px;\n  padding: 0 ", "px;\n  @media (min-width: ", "px) {\n    padding: 0 ", "px;\n    gap: ", "px;\n  }\n"])), function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xxs; }, 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.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a, _b; return (_a = props.itemGap) !== null && _a !== void 0 ? _a : (_b = props.theme.spacings) === null || _b === void 0 ? void 0 : _b.xs; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 
-export { Container, ItemsContainer, LeftIconButtonContainer, RightIconButtonContainer, SliderContainer };
+export { Container, LeftIconButtonContainer, RightIconButtonContainer };
 //# sourceMappingURL=Slider.styles.js.map

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

@@ -26,6 +26,7 @@ import '../CustomerInfoBlock/CustomerInfoBlock.styles.js';
 import '../Collapsable/Collapsable.styles.js';
 import '../DeliverySlotItem/DeliverySlotItem.styles.js';
 import '../Slider/Slider.styles.js';
+import 'react-slick';
 import '../DeliveryTimeBlock/DeliveryTimeBlock.styles.js';
 import '../Menu/Menu.styles.js';
 import '../DateBox/DateBox.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.199",
+  "version": "0.7.201",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -44,6 +44,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.7",
+    "@types/react-slick": "^0.23.13",
     "@types/styled-components": "^5.1.5",
     "awesome-typescript-loader": "^5.2.1",
     "copyfiles": "^2.4.1",
@@ -69,7 +70,9 @@
     "@citygross/utils": "^0.0.27",
     "framer-motion": "^4.1.17",
     "moment": "^2.29.1",
-    "react-loading-skeleton": "^2.2.0"
+    "react-loading-skeleton": "^2.2.0",
+    "react-slick": "^0.30.1",
+    "slick-carousel": "^1.8.1"
   },
-  "gitHead": "5ce3b3f0365fab5f2954195932270c26fa07ef20"
+  "gitHead": "f3c9c6b8c964f99e9a8e4c0e1df803dfb14c8bd7"
 }