@citygross/components 0.7.213 → 0.7.215

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

@@ -17,6 +17,6 @@ export declare type TSlider = {
     iconColor?: TButtonColor;
     responsiveSettings: TSliderResponsive[];
     slotsLength: number;
-    initialSlot?: number;
+    selected?: number;
 };
-export declare const Slider: ({ children, slotsLength, iconHeight, iconWidth, iconColor, initialSlot, responsiveSettings }: TSlider) => JSX.Element;
+export declare const Slider: ({ children, slotsLength, iconHeight, iconWidth, iconColor, responsiveSettings, selected }: 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, slotsLength, iconHeight, iconWidth, iconColor, initialSlot, responsiveSettings }: TSlider) => JSX.Element;
+    component: ({ children, slotsLength, iconHeight, iconWidth, iconColor, responsiveSettings, selected }: TSlider) => JSX.Element;
     title: string;
 };
 export default _default;

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

@@ -22,57 +22,7 @@ function DeliverySlotItem(_a) {
         setWeekDay(momentDate.format('dddd').toLocaleLowerCase());
     }, [width]);
     var slotRef = React.useRef(null);
-    var _c = React.useState(true), isVisible = _c[0], setIsVisible = _c[1];
-    var callbackFn = function (entries) {
-        var entry = entries[0];
-        // gets zoom level
-        var zoomLevel = window.devicePixelRatio ||
-            window.screen.availWidth / document.documentElement.clientWidth;
-        // if zoom is over 200% or less than 50%
-        // observer gets buggy when zoom level is too high
-        if (zoomLevel > 2 || zoomLevel < 0.5) {
-            setIsVisible(true);
-            return;
-        }
-        if (!entry) {
-            return setIsVisible(true);
-        }
-        // check if the slot is within 3px of in view(Height)
-        var isInHeight = Math.floor(entry.boundingClientRect.height) -
-            Math.floor(entry.intersectionRect.height) <
-            3;
-        // if no observer cant find height of element
-        if (entry.intersectionRect.height === 0) {
-            setIsVisible(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
-            return;
-        }
-        // check if intersecting when slot is in 3px of viewHeight
-        if (isInHeight)
-            setIsVisible(entry.isIntersecting);
-    };
-    var options = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.9
-    };
-    React.useEffect(function () {
-        if (!('IntersectionObserver' in window) ||
-            !('IntersectionObserverEntry' in window) ||
-            !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
-            return;
-        }
-        var observer = new IntersectionObserver(callbackFn, options);
-        if (!observer)
-            return;
-        if (slotRef.current)
-            observer.observe(slotRef === null || slotRef === void 0 ? void 0 : slotRef.current);
-        return function () {
-            if (observer) {
-                observer.disconnect();
-            }
-        };
-    }, [slotRef, options]);
-    return (React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotItemContainer, { onClick: onSelect, isVisible: isVisible, ref: slotRef, selected: selected },
+    return (React__default["default"].createElement(DeliverySlotItem_styles.DeliverySlotItemContainer, { onClick: onSelect, 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)),

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,7 +9,7 @@ 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  height: 100%;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\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  height: 100%;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\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 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  transition: opacity ", ";\n  min-width: ", "px;\n  height: 100%;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\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  transition: opacity ", ";\n  min-width: ", "px;\n  height: 100%;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\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) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) {
     var _a, _b;
     return props.selected
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
@@ -17,7 +17,7 @@ var DeliverySlotItemContainer = styled__default["default"].div(templateObject_1
 }, 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.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 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  &:active {\n    background: ", "};\n  }\n\n  user-select: none;\n"], ["\n  padding: ", "px;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n  &:hover {\n    cursor: pointer;\n    ", ";\n  }\n  &:active {\n    background: ", "};\n  }\n\n  user-select: none;\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
@@ -25,8 +25,8 @@ var DeliverySlotContainer = styled__default["default"].div(templateObject_4 || (
 }, function (props) {
     var _a;
     return !props.selected &&
-        "\n    background:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter);
-});
+        "\n    background:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest);
+}, function (props) { var _a; return (_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  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;
 

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

@@ -10,7 +10,7 @@ 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: ", ";\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 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    ", ";\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    ", ";\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
@@ -19,7 +19,12 @@ var BaseRadioListItemContainer = styled__default["default"].div(templateObject_1
             : 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; });
+}, 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.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  display: flex;\n  flex: 5;\n  align-items: flex-start;\n  ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
 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  line-height: ", "px;\n  ", ";\n"], ["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n  line-height: ", "px;\n  ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, 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"], ["\n  display: flex;\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; });

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

@@ -17,8 +17,8 @@ var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
 
 var defaultSlides = 5;
 var Slider = function (_a) {
-    var children = _a.children, slotsLength = _a.slotsLength, _b = _a.iconHeight, iconHeight = _b === void 0 ? 32 : _b, _c = _a.iconWidth, iconWidth = _c === void 0 ? 32 : _c, _d = _a.iconColor, iconColor = _d === void 0 ? 'darkest' : _d, _e = _a.initialSlot, initialSlot = _e === void 0 ? 0 : _e, responsiveSettings = _a.responsiveSettings;
-    var _f = React.useState(initialSlot), currentPage = _f[0], setCurrentPage = _f[1];
+    var children = _a.children, slotsLength = _a.slotsLength, _b = _a.iconHeight, iconHeight = _b === void 0 ? 32 : _b, _c = _a.iconWidth, iconWidth = _c === void 0 ? 32 : _c, _d = _a.iconColor, iconColor = _d === void 0 ? 'darkest' : _d, responsiveSettings = _a.responsiveSettings, _e = _a.selected, selected = _e === void 0 ? 0 : _e;
+    var _f = React.useState(selected), currentPage = _f[0], setCurrentPage = _f[1];
     var width = utils.useWindowSize().width;
     var ref = React.useRef(null);
     var resizeSlides = React.useMemo(function () {
@@ -40,16 +40,15 @@ var Slider = function (_a) {
     }, [slotsLength, resizeSlides]);
     React.useEffect(function () {
         var _a;
-        if (initialSlot && (ref === null || ref === void 0 ? void 0 : ref.current))
-            (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(initialSlot);
-    }, [initialSlot, ref === null || ref === void 0 ? void 0 : ref.current]);
+        (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selected || 0);
+    }, [selected]);
     var settings = {
         speed: 500,
         slidesToShow: defaultSlides,
         slidesToScroll: defaultSlides,
         infinite: false,
         touchTreshold: 100,
-        initialSlide: initialSlot,
+        initialSlide: 0,
         touchMove: true,
         arrows: false,
         beforeChange: function (_, next) {

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,10 +9,10 @@ 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  .slick-track {\n    display: flex;\n    overflow: hidden;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    gap: ", "px;\n  }\n  .slick-list {\n    @media (min-width: ", "px) {\n      overflow: hidden;\n    }\n  }\n  .slick-slide {\n    height: unset;\n    min-height: unset;\n    > div {\n      height: 100%;\n    }\n  }\n"], ["\n  position: relative;\n\n  .slick-track {\n    display: flex;\n    overflow: hidden;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    gap: ", "px;\n  }\n  .slick-list {\n    @media (min-width: ", "px) {\n      overflow: hidden;\n    }\n  }\n  .slick-slide {\n    height: unset;\n    min-height: unset;\n    > div {\n      height: 100%;\n    }\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; });
-var LeftIconButtonContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _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  }\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  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotArrowOffset; }, 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; });
-var RightIconButtonContainer = styled__default["default"](LeftIconButtonContainer)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  left: unset;\n  right: -", "px;\n"], ["\n  left: unset;\n  right: -", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotArrowOffset; });
-styled__default["default"].div(templateObject_4 || (templateObject_4 = _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  .slick-track {\n    display: flex;\n    overflow: hidden;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    gap: ", "px;\n  }\n  .slick-list {\n    @media (min-width: ", "px) {\n      overflow: hidden;\n    }\n  }\n  .slick-slide {\n    height: unset;\n    min-height: unset;\n    > div {\n      height: 100%;\n    }\n  }\n"], ["\n  position: relative;\n\n  .slick-track {\n    display: flex;\n    overflow: hidden;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    gap: ", "px;\n  }\n  .slick-list {\n    @media (min-width: ", "px) {\n      overflow: hidden;\n    }\n  }\n  .slick-slide {\n    height: unset;\n    min-height: unset;\n    > div {\n      height: 100%;\n    }\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.lg; });
+var LeftIconButtonContainer = styled__default["default"].div(templateObject_2 || (templateObject_2 = _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  }\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  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; });
+var RightIconButtonContainer = styled__default["default"](LeftIconButtonContainer)(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n  left: unset;\n  right: -", "px;\n"], ["\n  left: unset;\n  right: -", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
+styled__default["default"].div(templateObject_4 || (templateObject_4 = _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.lg; }, 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;
 
 exports.Container = Container;

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

@@ -14,57 +14,7 @@ function DeliverySlotItem(_a) {
         setWeekDay(momentDate.format('dddd').toLocaleLowerCase());
     }, [width]);
     var slotRef = useRef(null);
-    var _c = useState(true), isVisible = _c[0], setIsVisible = _c[1];
-    var callbackFn = function (entries) {
-        var entry = entries[0];
-        // gets zoom level
-        var zoomLevel = window.devicePixelRatio ||
-            window.screen.availWidth / document.documentElement.clientWidth;
-        // if zoom is over 200% or less than 50%
-        // observer gets buggy when zoom level is too high
-        if (zoomLevel > 2 || zoomLevel < 0.5) {
-            setIsVisible(true);
-            return;
-        }
-        if (!entry) {
-            return setIsVisible(true);
-        }
-        // check if the slot is within 3px of in view(Height)
-        var isInHeight = Math.floor(entry.boundingClientRect.height) -
-            Math.floor(entry.intersectionRect.height) <
-            3;
-        // if no observer cant find height of element
-        if (entry.intersectionRect.height === 0) {
-            setIsVisible(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
-            return;
-        }
-        // check if intersecting when slot is in 3px of viewHeight
-        if (isInHeight)
-            setIsVisible(entry.isIntersecting);
-    };
-    var options = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.9
-    };
-    useEffect(function () {
-        if (!('IntersectionObserver' in window) ||
-            !('IntersectionObserverEntry' in window) ||
-            !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
-            return;
-        }
-        var observer = new IntersectionObserver(callbackFn, options);
-        if (!observer)
-            return;
-        if (slotRef.current)
-            observer.observe(slotRef === null || slotRef === void 0 ? void 0 : slotRef.current);
-        return function () {
-            if (observer) {
-                observer.disconnect();
-            }
-        };
-    }, [slotRef, options]);
-    return (React.createElement(DeliverySlotItemContainer, { onClick: onSelect, isVisible: isVisible, ref: slotRef, selected: selected },
+    return (React.createElement(DeliverySlotItemContainer, { onClick: onSelect, ref: slotRef, selected: selected },
         React.createElement(DeliverySlotContainer, { selected: selected },
             React.createElement(DeliverySlotHeaderText, null,
                 React.createElement(BodyText, { fontWeight: 'medium' }, capitalizeFirstLetter(weekDay)),

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,7 +1,7 @@
 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  height: 100%;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\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  height: 100%;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\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 DeliverySlotItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-self: center;\n  transition: opacity ", ";\n  min-width: ", "px;\n  height: 100%;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\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  transition: opacity ", ";\n  min-width: ", "px;\n  height: 100%;\n  border: solid 1px\n    ", ";\n  border-radius: ", "px;\n  overflow: hidden;\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) { var _a, _b; return (_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.transition) === null || _b === void 0 ? void 0 : _b.t1; }, function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotItemWidth; }, function (props) {
     var _a, _b;
     return props.selected
         ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
@@ -9,7 +9,7 @@ var DeliverySlotItemContainer = styled.div(templateObject_1 || (templateObject_1
 }, 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.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 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  &:active {\n    background: ", "};\n  }\n\n  user-select: none;\n"], ["\n  padding: ", "px;\n  flex: 1;\n  width: stretch;\n  background: ", ";\n  &:hover {\n    cursor: pointer;\n    ", ";\n  }\n  &:active {\n    background: ", "};\n  }\n\n  user-select: none;\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
@@ -17,8 +17,8 @@ var DeliverySlotContainer = styled.div(templateObject_4 || (templateObject_4 = _
 }, function (props) {
     var _a;
     return !props.selected &&
-        "\n    background:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter);
-});
+        "\n    background:".concat((_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lightest);
+}, function (props) { var _a; return (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.lighter; });
 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;
 

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

@@ -2,7 +2,7 @@ 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: ", ";\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 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    ", ";\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    ", ";\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
@@ -11,7 +11,12 @@ var BaseRadioListItemContainer = styled.div(templateObject_1 || (templateObject_
             : 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; });
+}, 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.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  display: flex;\n  flex: 5;\n  align-items: flex-start;\n  ", ";\n"])), function (props) { return props.flexGrow && "flex-grow: ".concat(props.flexGrow); });
 var StyledH3 = styled(H3).attrs({ as: 'label' })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n  line-height: ", "px;\n  ", ";\n"], ["\n  cursor: pointer;\n  white-space: nowrap;\n  display: block;\n  line-height: ", "px;\n  ", ";\n"])), function (props) { var _a; return (_a = props.theme.typography) === null || _a === void 0 ? void 0 : _a.lineHeight.m1; }, 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"], ["\n  display: flex;\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; });

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

@@ -8,8 +8,8 @@ import { useWindowSize } from '@citygross/utils';
 
 var defaultSlides = 5;
 var Slider = function (_a) {
-    var children = _a.children, slotsLength = _a.slotsLength, _b = _a.iconHeight, iconHeight = _b === void 0 ? 32 : _b, _c = _a.iconWidth, iconWidth = _c === void 0 ? 32 : _c, _d = _a.iconColor, iconColor = _d === void 0 ? 'darkest' : _d, _e = _a.initialSlot, initialSlot = _e === void 0 ? 0 : _e, responsiveSettings = _a.responsiveSettings;
-    var _f = useState(initialSlot), currentPage = _f[0], setCurrentPage = _f[1];
+    var children = _a.children, slotsLength = _a.slotsLength, _b = _a.iconHeight, iconHeight = _b === void 0 ? 32 : _b, _c = _a.iconWidth, iconWidth = _c === void 0 ? 32 : _c, _d = _a.iconColor, iconColor = _d === void 0 ? 'darkest' : _d, responsiveSettings = _a.responsiveSettings, _e = _a.selected, selected = _e === void 0 ? 0 : _e;
+    var _f = useState(selected), currentPage = _f[0], setCurrentPage = _f[1];
     var width = useWindowSize().width;
     var ref = useRef(null);
     var resizeSlides = useMemo(function () {
@@ -31,16 +31,15 @@ var Slider = function (_a) {
     }, [slotsLength, resizeSlides]);
     useEffect(function () {
         var _a;
-        if (initialSlot && (ref === null || ref === void 0 ? void 0 : ref.current))
-            (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(initialSlot);
-    }, [initialSlot, ref === null || ref === void 0 ? void 0 : ref.current]);
+        (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(selected || 0);
+    }, [selected]);
     var settings = {
         speed: 500,
         slidesToShow: defaultSlides,
         slidesToScroll: defaultSlides,
         infinite: false,
         touchTreshold: 100,
-        initialSlide: initialSlot,
+        initialSlide: 0,
         touchMove: true,
         arrows: false,
         beforeChange: function (_, next) {

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,10 +1,10 @@
 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  .slick-track {\n    display: flex;\n    overflow: hidden;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    gap: ", "px;\n  }\n  .slick-list {\n    @media (min-width: ", "px) {\n      overflow: hidden;\n    }\n  }\n  .slick-slide {\n    height: unset;\n    min-height: unset;\n    > div {\n      height: 100%;\n    }\n  }\n"], ["\n  position: relative;\n\n  .slick-track {\n    display: flex;\n    overflow: hidden;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    gap: ", "px;\n  }\n  .slick-list {\n    @media (min-width: ", "px) {\n      overflow: hidden;\n    }\n  }\n  .slick-slide {\n    height: unset;\n    min-height: unset;\n    > div {\n      height: 100%;\n    }\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; });
-var LeftIconButtonContainer = styled.div(templateObject_2 || (templateObject_2 = __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  }\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  }\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotArrowOffset; }, 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; });
-var RightIconButtonContainer = styled(LeftIconButtonContainer)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  left: unset;\n  right: -", "px;\n"], ["\n  left: unset;\n  right: -", "px;\n"])), function (props) { var _a; return (_a = props.theme.constants) === null || _a === void 0 ? void 0 : _a.deliverySlotArrowOffset; });
-styled.div(templateObject_4 || (templateObject_4 = __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  .slick-track {\n    display: flex;\n    overflow: hidden;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    gap: ", "px;\n  }\n  .slick-list {\n    @media (min-width: ", "px) {\n      overflow: hidden;\n    }\n  }\n  .slick-slide {\n    height: unset;\n    min-height: unset;\n    > div {\n      height: 100%;\n    }\n  }\n"], ["\n  position: relative;\n\n  .slick-track {\n    display: flex;\n    overflow: hidden;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    gap: ", "px;\n  }\n  .slick-list {\n    @media (min-width: ", "px) {\n      overflow: hidden;\n    }\n  }\n  .slick-slide {\n    height: unset;\n    min-height: unset;\n    > div {\n      height: 100%;\n    }\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.lg; });
+var LeftIconButtonContainer = styled.div(templateObject_2 || (templateObject_2 = __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  }\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  }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.lg; });
+var RightIconButtonContainer = styled(LeftIconButtonContainer)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  left: unset;\n  right: -", "px;\n"], ["\n  left: unset;\n  right: -", "px;\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
+styled.div(templateObject_4 || (templateObject_4 = __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.lg; }, 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;
 
 export { Container, LeftIconButtonContainer, RightIconButtonContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components",
-  "version": "0.7.213",
+  "version": "0.7.215",
   "license": "ISC",
   "sideEffects": false,
   "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "fe2fd4bcbe7ca8626e551868f9d22f80be052ba8"
+  "gitHead": "8e1b03c5118e2fdf53ac504cd2763c8a685f379a"
 }