@citygross/components 0.7.212 → 0.7.214

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

@@ -29,6 +29,7 @@ export declare type TBaseSmallButton = Omit<TButton, 'size' | 'flexReverse' | 'f
     width?: number;
     height?: number;
     color?: string;
+    opacity?: string;
     border?: string;
     shadow?: boolean;
 };
@@ -59,6 +60,7 @@ export declare const BaseIconButton: import("styled-components").StyledComponent
     width?: number | undefined;
     height?: number | undefined;
     color?: string | undefined;
+    opacity?: string | undefined;
     border?: string | undefined;
     shadow?: boolean | undefined;
 }, never>;
@@ -66,6 +68,7 @@ export declare const BasePaginationButton: import("styled-components").StyledCom
     width?: number | undefined;
     height?: number | undefined;
     color?: string | undefined;
+    opacity?: string | undefined;
     border?: string | undefined;
     shadow?: boolean | undefined;
 }, never>;
@@ -78,6 +81,7 @@ export declare const NavButton: import("styled-components").StyledComponent<"but
     width?: number | undefined;
     height?: number | undefined;
     color?: string | undefined;
+    opacity?: string | undefined;
     border?: string | undefined;
     shadow?: boolean | undefined;
 } & TNavButton, never>;

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

@@ -7,5 +7,6 @@ export declare type TIconButton = styles.TBaseSmallButton & {
     buttonBadge?: string;
     badgeBackground?: string;
     tabIndex?: number;
+    opacity?: string;
 };
-export declare function IconButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, tabIndex, ...props }: TIconButton): JSX.Element;
+export declare function IconButton({ color, height, icon, isDisabled, loading, noWrap, onClick, border, shadow, width, buttonBadge, badgeBackground, tabIndex, opacity, ...props }: TIconButton): JSX.Element;

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

@@ -144,7 +144,10 @@ var BaseIconButtonCSS = styled.css(templateObject_11 || (templateObject_11 = _ts
                 ? "box-shadow: inset 0px 0px 0px 1px ".concat(props.border)
                 : '';
 }, function (props) { var _a, _b; return !props.noShadow && ((_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.iconButtonHover); });
-var BaseIconButton = styled__default["default"](BaseButton)(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), BaseIconButtonCSS);
+var BaseIconButton = styled__default["default"](BaseButton)(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n  ", "\n  ", ";\n"], ["\n  ", "\n  ", ";\n"])), BaseIconButtonCSS, function (_a) {
+    var opacity = _a.opacity;
+    return opacity && "opacity: ".concat(opacity);
+});
 var BasePaginationButton = styled__default["default"](BaseButton)(templateObject_13 || (templateObject_13 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) { return props.height || 36; }, function (props) { return props.width || 36; }, function (props) { return props.width || 36; }, function (props) {
     var _a, _b, _c;
     return props.color !== ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white)

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

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

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

@@ -12,8 +12,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function IconButton(_a) {
-    var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, tabIndex = _a.tabIndex, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "tabIndex"]);
-    return (React__default["default"].createElement(Button_styles.BaseIconButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow }, props),
+    var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, tabIndex = _a.tabIndex, opacity = _a.opacity, props = _tslib.__rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "tabIndex", "opacity"]);
+    return (React__default["default"].createElement(Button_styles.BaseIconButton, _tslib.__assign({ tabIndex: tabIndex, color: designTokens.theme && designTokens.theme.palette ? designTokens.theme === null || designTokens.theme === void 0 ? void 0 : designTokens.theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, opacity: opacity, border: border, shadow: shadow }, props),
         loading && (React__default["default"].createElement(Button_styles.Loading, null,
             React__default["default"].createElement(Button_styles.LoadingContainer, null,
                 React__default["default"].createElement(Button_styles.LoadingSpinner, null)))),

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/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 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.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.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.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; });
+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/Button/Button.styles.js

@@ -136,7 +136,10 @@ var BaseIconButtonCSS = css(templateObject_11 || (templateObject_11 = __makeTemp
                 ? "box-shadow: inset 0px 0px 0px 1px ".concat(props.border)
                 : '';
 }, function (props) { var _a, _b; return !props.noShadow && ((_b = (_a = props.theme.attributes) === null || _a === void 0 ? void 0 : _a.boxShadow) === null || _b === void 0 ? void 0 : _b.iconButtonHover); });
-var BaseIconButton = styled(BaseButton)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), BaseIconButtonCSS);
+var BaseIconButton = styled(BaseButton)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n  ", ";\n"], ["\n  ", "\n  ", ";\n"])), BaseIconButtonCSS, function (_a) {
+    var opacity = _a.opacity;
+    return opacity && "opacity: ".concat(opacity);
+});
 var BasePaginationButton = styled(BaseButton)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  height: ", "px;\n  width: ", "px;\n  min-width: ", "px;\n  text-align: center;\n  ", ";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n"])), function (props) { return props.height || 36; }, function (props) { return props.width || 36; }, function (props) { return props.width || 36; }, function (props) {
     var _a, _b, _c;
     return props.color !== ((_b = (_a = props === null || props === void 0 ? void 0 : props.theme) === null || _a === void 0 ? void 0 : _a.palette) === null || _b === void 0 ? void 0 : _b.white)

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

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

package/build/es/components/src/components/Button/IconButton.js

@@ -4,8 +4,8 @@ import { theme } from '@citygross/design-tokens';
 import { BaseIconButton, Loading, LoadingContainer, LoadingSpinner, ButtonBadge } from './Button.styles.js';
 
 function IconButton(_a) {
-    var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, tabIndex = _a.tabIndex, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "tabIndex"]);
-    return (React.createElement(BaseIconButton, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, border: border, shadow: shadow }, props),
+    var _b = _a.color, color = _b === void 0 ? 'darkest' : _b, height = _a.height, icon = _a.icon, isDisabled = _a.isDisabled, loading = _a.loading, noWrap = _a.noWrap, onClick = _a.onClick, border = _a.border, shadow = _a.shadow, width = _a.width, buttonBadge = _a.buttonBadge, badgeBackground = _a.badgeBackground, tabIndex = _a.tabIndex, opacity = _a.opacity, props = __rest(_a, ["color", "height", "icon", "isDisabled", "loading", "noWrap", "onClick", "border", "shadow", "width", "buttonBadge", "badgeBackground", "tabIndex", "opacity"]);
+    return (React.createElement(BaseIconButton, __assign({ tabIndex: tabIndex, color: theme && theme.palette ? theme === null || theme === void 0 ? void 0 : theme.palette[color] : '#333333', height: height, icon: icon, isDisabled: loading || isDisabled, loading: loading || null, noWrap: noWrap, onClick: function (e) { return onClick && onClick(e); }, width: width, opacity: opacity, border: border, shadow: shadow }, props),
         loading && (React.createElement(Loading, null,
             React.createElement(LoadingContainer, null,
                 React.createElement(LoadingSpinner, null)))),

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/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 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.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.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.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; });
+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.212",
+  "version": "0.7.214",
   "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": "9a1782f0cd06c87a087e0decced623d2c8ba2341"
+  "gitHead": "70ecdef40e249aabe52c1a7fac276483d9b9d948"
 }