@citygross/components 0.7.204 → 0.7.206

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,12 +2,12 @@ import React from 'react';
2
2
  import { TButtonColor } from '../Button/Button';
3
3
  import { Settings } from 'react-slick';
4
4
  export declare type TSlider = {
5
- customSlideAmount: number;
6
5
  children: React.ReactNode;
7
6
  itemGap?: number;
8
7
  iconHeight?: number;
9
8
  iconWidth?: number;
10
9
  iconColor?: TButtonColor;
11
10
  sliderSettings: Settings;
11
+ slotsLength: number;
12
12
  };
13
- export declare const Slider: ({ children, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
13
+ export declare const Slider: ({ children, slotsLength, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
@@ -2,7 +2,7 @@
2
2
  import { Story } from '@storybook/react';
3
3
  import { TSlider } from './Slider';
4
4
  declare const _default: {
5
- component: ({ children, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
5
+ component: ({ children, slotsLength, iconHeight, iconWidth, iconColor, sliderSettings }: TSlider) => JSX.Element;
6
6
  title: string;
7
7
  };
8
8
  export default _default;
@@ -43,7 +43,7 @@ function DeliverySlotItem(_a) {
43
43
  3;
44
44
  // if no observer cant find height of element
45
45
  if (entry.intersectionRect.height === 0) {
46
- setIsVisible(true);
46
+ setIsVisible(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
47
47
  return;
48
48
  }
49
49
  // check if intersecting when slot is in 3px of viewHeight
@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- var DeliverySlotItemContainer = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n 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 margin: 0 ", "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 _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
12
+ 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) {
13
13
  var _a, _b;
14
14
  return props.selected
15
15
  ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
@@ -17,12 +17,10 @@ var SlickSlider__default = /*#__PURE__*/_interopDefaultLegacy(SlickSlider);
17
17
 
18
18
  var defaultSlides = 5;
19
19
  var Slider = function (_a) {
20
- var _b;
21
- var children = _a.children, _c = _a.iconHeight, iconHeight = _c === void 0 ? 32 : _c, _d = _a.iconWidth, iconWidth = _d === void 0 ? 32 : _d, _e = _a.iconColor, iconColor = _e === void 0 ? 'darkest' : _e, sliderSettings = _a.sliderSettings;
22
- var _f = React.useState(false), isMax = _f[0], setIsMax = _f[1];
23
- var _g = React.useState(true), isMin = _g[0], setIsMin = _g[1];
24
- var _h = React.useState(0), currentPage = _h[0], setCurrentPage = _h[1];
25
- var childs = (_b = React__default["default"].Children) === null || _b === void 0 ? void 0 : _b.map(children, function (child) { return child; });
20
+ 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, sliderSettings = _a.sliderSettings;
21
+ var _e = React.useState(false), isMax = _e[0], setIsMax = _e[1];
22
+ var _f = React.useState(true), isMin = _f[0], setIsMin = _f[1];
23
+ var _g = React.useState(0), currentPage = _g[0], setCurrentPage = _g[1];
26
24
  var width = utils.useWindowSize().width;
27
25
  var ref = React.useRef(null);
28
26
  var resizeSlides = React.useMemo(function () {
@@ -39,16 +37,16 @@ var Slider = function (_a) {
39
37
  return curBreakpoint ? curBreakpoint === null || curBreakpoint === void 0 ? void 0 : curBreakpoint.slidesToShow : defaultSlides;
40
38
  }, [width, sliderSettings]);
41
39
  var pageSections = React.useMemo(function () {
42
- var sections = Array.from(Array((childs === null || childs === void 0 ? void 0 : childs.length) || 0).keys()).filter(function (_, index) {
40
+ var sections = Array.from(Array(slotsLength || 0).keys()).filter(function (_, index) {
43
41
  return index % resizeSlides === 0;
44
42
  });
45
43
  return sections;
46
- }, [childs, resizeSlides]);
44
+ }, [slotsLength, resizeSlides]);
47
45
  var settings = _tslib.__assign({ speed: 500, slidesToShow: defaultSlides, slidesToScroll: defaultSlides, infinite: false, touchTreshold: 100, initialSlide: 0, touchMove: true, arrows: false, beforeChange: function (_, next) {
48
46
  var _a, _b, _c;
49
- var totalPages = (_b = Math.ceil((_a = (childs && (childs === null || childs === void 0 ? void 0 : childs.length) / resizeSlides)) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
47
+ var totalPages = (_b = Math.ceil((_a = slotsLength / resizeSlides) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
50
48
  var curPage = next / totalPages;
51
- var slides = (childs === null || childs === void 0 ? void 0 : childs.length) || 0;
49
+ var slides = slotsLength || 0;
52
50
  setCurrentPage(next);
53
51
  // @ts-ignore
54
52
  (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.slickGoTo(5, true);
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -9,9 +9,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
9
9
 
10
10
  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
11
 
12
- var Container = styled__default["default"].div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"], ["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\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.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
13
- 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 left: -", "px;\n }\n"], ["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n left: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
14
- var RightIconButtonContainer = styled__default["default"].div(templateObject_3 || (templateObject_3 = _tslib.__makeTemplateObject(["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"], ["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
12
+ 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; });
13
+ 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; });
14
+ 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; });
15
15
  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; });
16
16
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
17
17
 
@@ -35,7 +35,7 @@ function DeliverySlotItem(_a) {
35
35
  3;
36
36
  // if no observer cant find height of element
37
37
  if (entry.intersectionRect.height === 0) {
38
- setIsVisible(true);
38
+ setIsVisible(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
39
39
  return;
40
40
  }
41
41
  // check if intersecting when slot is in 3px of viewHeight
@@ -1,7 +1,7 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
 
4
- var DeliverySlotItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-self: center;\n opacity: ", ";\n transition: opacity ", ";\n min-width: ", "px;\n margin: 0 ", "px;\n 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 margin: 0 ", "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 _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xxs; }, function (props) {
4
+ 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) {
5
5
  var _a, _b;
6
6
  return props.selected
7
7
  ? (_a = props.theme.palette) === null || _a === void 0 ? void 0 : _a.brandBlue
@@ -8,12 +8,10 @@ import { useWindowSize } from '@citygross/utils';
8
8
 
9
9
  var defaultSlides = 5;
10
10
  var Slider = function (_a) {
11
- var _b;
12
- var children = _a.children, _c = _a.iconHeight, iconHeight = _c === void 0 ? 32 : _c, _d = _a.iconWidth, iconWidth = _d === void 0 ? 32 : _d, _e = _a.iconColor, iconColor = _e === void 0 ? 'darkest' : _e, sliderSettings = _a.sliderSettings;
13
- var _f = useState(false), isMax = _f[0], setIsMax = _f[1];
14
- var _g = useState(true), isMin = _g[0], setIsMin = _g[1];
15
- var _h = useState(0), currentPage = _h[0], setCurrentPage = _h[1];
16
- var childs = (_b = React.Children) === null || _b === void 0 ? void 0 : _b.map(children, function (child) { return child; });
11
+ 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, sliderSettings = _a.sliderSettings;
12
+ var _e = useState(false), isMax = _e[0], setIsMax = _e[1];
13
+ var _f = useState(true), isMin = _f[0], setIsMin = _f[1];
14
+ var _g = useState(0), currentPage = _g[0], setCurrentPage = _g[1];
17
15
  var width = useWindowSize().width;
18
16
  var ref = useRef(null);
19
17
  var resizeSlides = useMemo(function () {
@@ -30,16 +28,16 @@ var Slider = function (_a) {
30
28
  return curBreakpoint ? curBreakpoint === null || curBreakpoint === void 0 ? void 0 : curBreakpoint.slidesToShow : defaultSlides;
31
29
  }, [width, sliderSettings]);
32
30
  var pageSections = useMemo(function () {
33
- var sections = Array.from(Array((childs === null || childs === void 0 ? void 0 : childs.length) || 0).keys()).filter(function (_, index) {
31
+ var sections = Array.from(Array(slotsLength || 0).keys()).filter(function (_, index) {
34
32
  return index % resizeSlides === 0;
35
33
  });
36
34
  return sections;
37
- }, [childs, resizeSlides]);
35
+ }, [slotsLength, resizeSlides]);
38
36
  var settings = __assign({ speed: 500, slidesToShow: defaultSlides, slidesToScroll: defaultSlides, infinite: false, touchTreshold: 100, initialSlide: 0, touchMove: true, arrows: false, beforeChange: function (_, next) {
39
37
  var _a, _b, _c;
40
- var totalPages = (_b = Math.ceil((_a = (childs && (childs === null || childs === void 0 ? void 0 : childs.length) / resizeSlides)) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
38
+ var totalPages = (_b = Math.ceil((_a = slotsLength / resizeSlides) !== null && _a !== void 0 ? _a : 0)) !== null && _b !== void 0 ? _b : 0;
41
39
  var curPage = next / totalPages;
42
- var slides = (childs === null || childs === void 0 ? void 0 : childs.length) || 0;
40
+ var slides = slotsLength || 0;
43
41
  setCurrentPage(next);
44
42
  // @ts-ignore
45
43
  (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.slickGoTo(5, true);
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"Slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,9 +1,9 @@
1
1
  import { __makeTemplateObject } from '../../../../_virtual/_tslib.js';
2
2
  import styled from 'styled-components';
3
3
 
4
- var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n .slick-slide {\n height: unset;\n min-height: unset;\n > div {\n height: 100%;\n }\n }\n"], ["\n position: relative;\n\n @media (min-width: ", "px) {\n padding: 0 32px;\n }\n .slick-track {\n display: flex;\n flex-wrap: nowrap;\n align-items: stretch;\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.breakpoints) === null || _a === void 0 ? void 0 : _a.md; });
5
- 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 left: -", "px;\n }\n"], ["\n display: flex;\n position: absolute;\n left: -", "px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1;\n @media (max-width: ", "px) {\n display: none !important;\n }\n @media (min-width: ", "px) {\n display: block;\n left: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
6
- var RightIconButtonContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"], ["\n display: flex;\n\n top: 50%;\n transform: translateY(-50%);\n position: absolute;\n right: -", "px;\n\n @media (max-width: ", "px) {\n display: none !important;\n }\n\n @media (min-width: ", "px) {\n display: block;\n right: -", "px;\n }\n"])), function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.breakpoints) === null || _a === void 0 ? void 0 : _a.md; }, function (props) { var _a; return (_a = props.theme.spacings) === null || _a === void 0 ? void 0 : _a.xl; });
4
+ 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; });
5
+ 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; });
6
+ 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; });
7
7
  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; });
8
8
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@citygross/components",
3
- "version": "0.7.204",
3
+ "version": "0.7.206",
4
4
  "license": "ISC",
5
5
  "sideEffects": false,
6
6
  "main": "./build/cjs/components/src/index.js",
@@ -74,5 +74,5 @@
74
74
  "react-slick": "^0.30.1",
75
75
  "slick-carousel": "^1.8.1"
76
76
  },
77
- "gitHead": "bdb638c770f7e3ebed6b0755346b100b0a0227fd"
77
+ "gitHead": "47fb81d083a0657781d126f5f531fb73e4bdda93"
78
78
  }