@dnanpm/styleguide 4.0.9 → 4.0.10

package/build/cjs/components/Carousel/Carousel.js

@@ -16,371 +16,340 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const CarouselWrapper = styledComponents.styled.div ``;
-const Header = styledComponents.styled.div `
-    display: flex;
-    justify-content: space-between;
-    gap: 1.25rem;
-    margin-bottom: 1.25rem;
-`;
-const Title = styledComponents.styled.h2 `
-    margin: 0;
-`;
-const Navigation = styledComponents.styled.div `
-    display: inline-flex;
-    margin-left: auto;
-    gap: 0.625rem;
-`;
-const Content = styledComponents.styled.div `
-    position: relative;
-    overflow: hidden;
-    touch-action: pan-y;
-`;
-const SlidesWrapper = styledComponents.styled.div `
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    transition-property: transform;
-    transform: translate3d(0px, 0, 0);
-    transition-duration: 0ms;
-    transition-delay: 0ms;
-    user-select: none;
-`;
-const SlideItem = styledComponents.styled.div `
-    display: block;
-    position: relative;
-    flex-shrink: 0;
-    padding-right: ${({ $gap }) => $gap}rem;
-
-    ${({ $responsive, $visibleItems }) => !$responsive && $visibleItems
-    ? `flex-basis: calc(100% / ${$visibleItems});`
-    : `
+const CarouselWrapper = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__CarouselWrapper",
+  componentId: "sc-ekmiuj-0"
+})([""]);
+const Header = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__Header",
+  componentId: "sc-ekmiuj-1"
+})(["display:flex;justify-content:space-between;gap:1.25rem;margin-bottom:1.25rem;"]);
+const Title = styledComponents.styled.h2.withConfig({
+  displayName: "Carousel__Title",
+  componentId: "sc-ekmiuj-2"
+})(["margin:0;"]);
+const Navigation = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__Navigation",
+  componentId: "sc-ekmiuj-3"
+})(["display:inline-flex;margin-left:auto;gap:0.625rem;"]);
+const Content = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__Content",
+  componentId: "sc-ekmiuj-4"
+})(["position:relative;overflow:hidden;touch-action:pan-y;"]);
+const SlidesWrapper = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__SlidesWrapper",
+  componentId: "sc-ekmiuj-5"
+})(["position:relative;display:flex;width:100%;height:100%;transition-property:transform;transform:translate3d(0px,0,0);transition-duration:0ms;transition-delay:0ms;user-select:none;"]);
+const SlideItem = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__SlideItem",
+  componentId: "sc-ekmiuj-6"
+})(["display:block;position:relative;flex-shrink:0;padding-right:", "rem;", " a{pointer-events:", ";}"], ({
+  $gap
+}) => $gap, ({
+  $responsive,
+  $visibleItems
+}) => !$responsive && $visibleItems ? `flex-basis: calc(100% / ${$visibleItems});` : `
         flex-basis: auto;
         width: max-content;
-    `}
-
-    a {
-        pointer-events: ${({ $isSwiping }) => ($isSwiping ? 'none' : 'auto')};
-    }
-`;
-const Footer = styledComponents.styled.div `
-    ${styledUtils.media.md `
+    `, ({
+  $isSwiping
+}) => $isSwiping ? 'none' : 'auto');
+const Footer = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__Footer",
+  componentId: "sc-ekmiuj-7"
+})(["", ";"], styledUtils.media.md`
         display: grid;
         grid-template-columns: [whitespace] 1fr [pagination] auto [footerButton] 1fr;
         gap: 2rem;
         margin: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)} 0;
         align-items: center;
-    `};
-`;
-const Pagination = styledComponents.styled.div `
-    display: none;
-
-    ${styledUtils.media.md `
+    `);
+const Pagination = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__Pagination",
+  componentId: "sc-ekmiuj-8"
+})(["display:none;", ";"], styledUtils.media.md`
         display: flex;
         grid-column: pagination;
         flex-wrap: wrap;
         justify-content: center;
         gap: 0.5rem 1rem;
         width: 100%;
-    `};
-`;
-const PaginationItem = styledComponents.styled.button `
-    display: inline-block;
-    cursor: pointer;
-    width: 2rem;
-    height: 1rem;
-    border-radius: ${theme.default.radius.pill};
-    border: 2px solid ${theme.default.color.line.L01};
-    background-color: ${theme.default.color.background.white.default};
-    transition: all 0.2s ease-in-out;
-
-    ${({ $isActive }) => $isActive &&
-    `
+    `);
+const PaginationItem = styledComponents.styled.button.withConfig({
+  displayName: "Carousel__PaginationItem",
+  componentId: "sc-ekmiuj-9"
+})(["display:inline-block;cursor:pointer;width:2rem;height:1rem;border-radius:", ";border:2px solid ", ";background-color:", ";transition:all 0.2s ease-in-out;", " &:focus{border:2px solid ", ";box-shadow:0px 0px 0px 2px ", ";outline:none;}&:hover{border-color:", ";}"], theme.default.radius.pill, theme.default.color.line.L01, theme.default.color.background.white.default, ({
+  $isActive
+}) => $isActive && `
         width: 3rem;
         border-color: ${theme.default.color.default.pink};
         background-color: ${theme.default.color.background.pink.default};
-    `}
-
-    &:focus {
-        border: 2px solid ${theme.default.color.focus.light};
-        box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
-        outline: none;
-    }
-
-    &:hover {
-        border-color: ${theme.default.color.default.pink};
-    }
-`;
-const Scrollbar = styledComponents.styled.div `
-    width: 100%;
-    height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.6)};
-    margin: 1rem 0;
-    border-radius: ${theme.default.radius.pill};
-    background-color: ${theme.default.color.background.sand.E02};
-    user-select: none;
-    touch-action: pan-y;
-
-    ${styledUtils.media.md `
+    `, theme.default.color.focus.light, theme.default.color.focus.dark, theme.default.color.default.pink);
+const Scrollbar = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__Scrollbar",
+  componentId: "sc-ekmiuj-10"
+})(["width:100%;height:", ";margin:1rem 0;border-radius:", ";background-color:", ";user-select:none;touch-action:pan-y;", ";"], styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.6), theme.default.radius.pill, theme.default.color.background.sand.E02, styledUtils.media.md`
         display: none;
-    `};
-`;
-const Knob = styledComponents.styled.div `
-    position: relative;
-    top: 0;
-    left: 0;
-    width: calc(100% / ${({ $knobSize }) => $knobSize});
-    height: 100%;
-    border-radius: ${theme.default.radius.pill};
-    background-color: ${theme.default.color.background.pink.default};
-    transform: translate3d(0px, 0, 0);
-    transition-duration: 0ms;
-    transition-delay: 0ms;
-    user-select: none;
-`;
-const FooterButton = styledComponents.styled.div `
-    grid-column: footerButton;
-    text-align: right;
-`;
-const Counter = styledComponents.styled.span `
-    margin-top: 0.5rem;
-    font-size: ${theme.default.fontSize.s};
-    font-weight: ${theme.default.fontWeight.medium};
-    margin-right: 1rem;
-`;
+    `);
+const Knob = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__Knob",
+  componentId: "sc-ekmiuj-11"
+})(["position:relative;top:0;left:0;width:calc(100% / ", ");height:100%;border-radius:", ";background-color:", ";transform:translate3d(0px,0,0);transition-duration:0ms;transition-delay:0ms;user-select:none;"], ({
+  $knobSize
+}) => $knobSize, theme.default.radius.pill, theme.default.color.background.pink.default);
+const FooterButton = styledComponents.styled.div.withConfig({
+  displayName: "Carousel__FooterButton",
+  componentId: "sc-ekmiuj-12"
+})(["grid-column:footerButton;text-align:right;"]);
+const Counter = styledComponents.styled.span.withConfig({
+  displayName: "Carousel__Counter",
+  componentId: "sc-ekmiuj-13"
+})(["margin-top:0.5rem;font-size:", ";font-weight:", ";margin-right:1rem;"], theme.default.fontSize.s, theme.default.fontWeight.medium);
 /** @visibleName Carousel */
-const Carousel = (_a) => {
-    var _b, _c;
-    var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    const slidesWrapperRef = React.useRef(null);
-    const scrollbarRef = React.useRef(null);
-    const knobRef = React.useRef(null);
-    const firstItemRef = React.useRef(null);
-    const { isMobile, width: windowWidth } = useWindowSize.default(theme.default.breakpoints.md);
-    const [currentIndex, setCurrentIndex] = React.useState(0);
-    const [isSwiping, setIsSwiping] = React.useState(false);
-    const [autoVisibleItems, setAutoVisibleItems] = React.useState(null);
-    React.useEffect(() => {
-        if (props.responsive) {
-            const container = slidesWrapperRef.current;
-            const firstItem = firstItemRef.current;
-            if (container && firstItem) {
-                Array.from(container.children).forEach(itemElement => {
-                    const item = itemElement;
-                    item.style.flexBasis = '';
-                    item.style.width = '';
-                });
-                const containerWidth = container.offsetWidth;
-                const itemWidth = firstItem.offsetWidth;
-                if (itemWidth > 0) {
-                    const realVisibleItems = containerWidth / itemWidth;
-                    setAutoVisibleItems(Math.max(1, realVisibleItems));
-                }
-            }
-        }
-        else {
-            setAutoVisibleItems(null);
-        }
-    }, [props.responsive, windowWidth, props.children]);
-    const getStep = (step, visibleItems) => {
-        if (step > visibleItems) {
-            return Math.floor(visibleItems);
-        }
-        return Math.floor(step);
-    };
-    const visibleItems = (_b = autoVisibleItems !== null && autoVisibleItems !== void 0 ? autoVisibleItems : props.visibleItems) !== null && _b !== void 0 ? _b : (isMobile ? 1.2 : 1);
-    const slidesWrapperGapSizePx = 20;
-    const slidesCount = React.Children.count(props.children);
-    const slideScreensCount = Math.max(1, slidesCount - Math.floor(visibleItems) + 1);
-    const step = getStep((_c = props.swipeStep) !== null && _c !== void 0 ? _c : 1, visibleItems);
-    const currentStepIndex = Math.ceil(currentIndex / step);
-    const totalSwipeSteps = Math.ceil(slideScreensCount / step + ((slideScreensCount - 1) % step !== 0 ? 1 : 0));
-    const data = React.useMemo(() => ({
-        startX: 0,
-        startTime: 0,
-        startTransform: 0,
-        currentTransform: 0,
-        knobStartTransform: 0,
-        knobCurrentTransform: 0,
-        direction: 0,
-        itemWidth: 0,
-        lastItemX: 0,
-        scrollWidth: 0,
-        scrollbarNavigation: false,
-        scrollbarToSlidesRatio: 1,
-    }), []);
-    const getElementTransform = (element) => {
-        const matrix = new DOMMatrix(window.getComputedStyle(element).transform);
-        return matrix.m41 || 0;
-    };
-    const setElementTransform = (element, transform, delay) => {
-        if (element.current) {
-            element.current.style.setProperty('transition-duration', `${delay !== null && delay !== void 0 ? delay : 300}ms`);
-            element.current.style.setProperty('transform', `translate3d(${Number.isNaN(transform) ? 0 : transform}px, 0px, 0px)`);
-        }
-    };
-    const handleSetCurrentIndex = (index) => {
-        if (index === currentIndex) {
-            setElementTransform(slidesWrapperRef, data.startTransform);
-            setElementTransform(knobRef, data.knobStartTransform);
-        }
-        else if (index < 0) {
-            setCurrentIndex(0);
-            setElementTransform(slidesWrapperRef, 0);
-        }
-        else if (index > slideScreensCount - 1) {
-            setCurrentIndex(slideScreensCount - 1);
-            setElementTransform(slidesWrapperRef, data.startTransform);
-        }
-        else {
-            setCurrentIndex(index);
-        }
-    };
-    const handleNavigationButtonPreviousClick = () => {
-        handleSetCurrentIndex(currentIndex - step);
-    };
-    const handleNavigationButtonNextClick = () => {
-        handleSetCurrentIndex(currentIndex + step);
-    };
-    const handlePaginationItemClick = (e) => {
-        if (e.currentTarget.parentElement) {
-            const index = [...e.currentTarget.parentElement.children].indexOf(e.currentTarget);
-            handleSetCurrentIndex(index * step);
-        }
-    };
-    const handlePointerMove = (e) => {
-        const diff = e.pageX - data.startX;
-        if (Math.abs(diff) < 5) {
-            return;
-        }
-        data.currentTransform =
-            diff * (data.scrollbarNavigation ? data.scrollbarToSlidesRatio * -1 : 1) +
-                data.startTransform;
-        data.knobCurrentTransform =
-            diff / (data.scrollbarNavigation ? 1 : data.scrollbarToSlidesRatio * -1) +
-                data.knobStartTransform;
-        data.direction = Math.sign(diff) * (data.scrollbarNavigation ? 1 : -1);
-        if (currentIndex <= 0) {
-            if (data.currentTransform > 0) {
-                data.currentTransform = -1 + Math.pow((data.startTransform + diff), 0.85);
-            }
-        }
-        else if (currentIndex + Math.ceil(visibleItems) >= React.Children.count(props.children)) {
-            if (data.currentTransform < -data.lastItemX) {
-                data.currentTransform =
-                    -data.lastItemX + 1 - Math.pow((-data.lastItemX - data.startTransform - diff), 0.85);
-            }
+const Carousel = _a => {
+  var _b, _c;
+  var {
+      'data-testid': dataTestId
+    } = _a,
+    props = tslib.__rest(_a, ['data-testid']);
+  const slidesWrapperRef = React.useRef(null);
+  const scrollbarRef = React.useRef(null);
+  const knobRef = React.useRef(null);
+  const firstItemRef = React.useRef(null);
+  const {
+    isMobile,
+    width: windowWidth
+  } = useWindowSize.default(theme.default.breakpoints.md);
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const [isSwiping, setIsSwiping] = React.useState(false);
+  const [autoVisibleItems, setAutoVisibleItems] = React.useState(null);
+  React.useEffect(() => {
+    if (props.responsive) {
+      const container = slidesWrapperRef.current;
+      const firstItem = firstItemRef.current;
+      if (container && firstItem) {
+        Array.from(container.children).forEach(itemElement => {
+          const item = itemElement;
+          item.style.flexBasis = '';
+          item.style.width = '';
+        });
+        const containerWidth = container.offsetWidth;
+        const itemWidth = firstItem.offsetWidth;
+        if (itemWidth > 0) {
+          const realVisibleItems = containerWidth / itemWidth;
+          setAutoVisibleItems(Math.max(1, realVisibleItems));
         }
-        if (data.knobCurrentTransform < 0) {
-            data.knobCurrentTransform = 0;
-        }
-        if (data.knobCurrentTransform > data.lastItemX / data.scrollbarToSlidesRatio) {
-            data.knobCurrentTransform = data.lastItemX / data.scrollbarToSlidesRatio;
-        }
-        setElementTransform(slidesWrapperRef, data.currentTransform, 0);
-        setElementTransform(knobRef, data.knobCurrentTransform, 0);
-        setIsSwiping(true);
-    };
-    const handlePointerUp = (e) => {
-        const endTime = Date.now();
-        if (endTime - data.startTime > 300) {
-            const swipeRatio = Math.abs(data.currentTransform - data.startTransform) / data.itemWidth;
-            if (swipeRatio >= 0.5) {
-                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio) * step);
-            }
-            else {
-                handleSetCurrentIndex(currentIndex);
-            }
-        }
-        else {
-            handleSetCurrentIndex(currentIndex + data.direction * step);
-        }
-        if (data.scrollbarNavigation && data.direction === 0) {
-            if (knobRef.current) {
-                handleSetCurrentIndex(currentIndex +
-                    Math.round((e.pageX -
-                        knobRef.current.getBoundingClientRect().x -
-                        knobRef.current.offsetWidth / 2) /
-                        knobRef.current.offsetWidth));
-            }
-        }
-        document.removeEventListener('pointermove', handlePointerMove);
-        document.removeEventListener('pointerup', handlePointerUp);
-        setIsSwiping(false);
-    };
-    const handleSlidesPointerDown = (e) => {
-        if (e.button !== 0)
-            return;
-        if (slidesWrapperRef.current && scrollbarRef.current && knobRef.current) {
-            data.startX = e.pageX;
-            data.startTime = Date.now();
-            data.startTransform = getElementTransform(slidesWrapperRef.current);
-            data.scrollbarNavigation = Boolean(e.currentTarget === scrollbarRef.current);
-            data.knobStartTransform = getElementTransform(knobRef.current);
-            document.addEventListener('pointermove', handlePointerMove);
-            document.addEventListener('pointerup', handlePointerUp);
-        }
-    };
-    const handleScrollbarPointerDown = (e) => {
-        handleSlidesPointerDown(e);
-    };
-    const handlePointerDown = (e) => {
-        e.preventDefault();
-    };
-    React.useEffect(() => {
-        if (slidesWrapperRef.current && scrollbarRef.current) {
-            const isRest = React.Children.count(props.children) - (currentIndex + visibleItems) < 0;
-            data.itemWidth = slidesWrapperRef.current.offsetWidth / visibleItems;
-            data.scrollWidth = slidesWrapperRef.current.scrollWidth;
-            data.lastItemX =
-                data.itemWidth * (React.Children.count(props.children) - visibleItems) -
-                    (isRest ? slidesWrapperGapSizePx * (Math.ceil(visibleItems) - visibleItems) : 0);
-            data.scrollbarToSlidesRatio =
-                data.lastItemX /
-                    (scrollbarRef.current.offsetWidth -
-                        scrollbarRef.current.offsetWidth / slideScreensCount);
-            let slidesTransform = 0;
-            if (React.Children.count(props.children) >= visibleItems) {
-                slidesTransform =
-                    data.itemWidth * currentIndex -
-                        (isRest ? data.itemWidth * (visibleItems % 1) + slidesWrapperGapSizePx : 0);
-            }
-            setElementTransform(slidesWrapperRef, -slidesTransform);
-            setElementTransform(knobRef, slidesTransform / data.scrollbarToSlidesRatio);
-        }
-    }, [currentIndex, data, props.children, slideScreensCount, visibleItems]);
-    React.useEffect(() => {
-        var _a;
-        if (props.responsive && autoVisibleItems) {
-            const items = (_a = slidesWrapperRef.current) === null || _a === void 0 ? void 0 : _a.children;
-            if (items) {
-                Array.from(items).forEach(itemElement => {
-                    const item = itemElement;
-                    item.style.flexBasis = `calc(100% / ${autoVisibleItems})`;
-                    item.style.width = '';
-                });
-            }
-        }
-    }, [autoVisibleItems, props.responsive]);
-    return (React__default.default.createElement(CarouselWrapper, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.default.createElement(Header, { "data-testid": dataTestId && `${dataTestId}-header` },
-            props.title && React__default.default.createElement(Title, null, props.title),
-            React__default.default.createElement(Navigation, null,
-                props.hasCounter && (React__default.default.createElement(Counter, null,
-                    slideScreensCount === 0 ? 0 : currentStepIndex + 1,
-                    "/",
-                    totalSwipeSteps)),
-                React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": props.previousAriaLabel, onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0, type: "button" }),
-                React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": props.nextAriaLabel, onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children), type: "button" }))),
-        React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
-            React__default.default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown }, React.Children.map(props.children, (child, index) => (React__default.default.createElement(SlideItem, { ref: index === 0 ? firstItemRef : undefined, "$visibleItems": visibleItems, "$isSwiping": isSwiping, onPointerDown: handlePointerDown, "$responsive": Boolean(props.responsive), "$gap": slidesWrapperGapSizePx / 16 }, child))))),
-        React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
-            React__default.default.createElement(Pagination, null, [...Array(totalSwipeSteps).keys()].map((value, index) => (React__default.default.createElement(PaginationItem, { key: value, "aria-label": props.paginationAriaLabel &&
-                    `${props.paginationAriaLabel} ${index + 1}`, "aria-current": Math.ceil(currentIndex / step) === index, "$isActive": Math.ceil(currentIndex / step) === index, onClick: handlePaginationItemClick, type: "button" })))),
-            React__default.default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
-                React__default.default.createElement(Knob, { ref: knobRef, "$knobSize": slideScreensCount })),
-            props.footerButton && (React__default.default.createElement(FooterButton, null,
-                React__default.default.createElement(ButtonIcon.default, { icon: icons.ArrowRight, onClick: props.onFooterButtonClick }, props.footerButton))))));
+      }
+    } else {
+      setAutoVisibleItems(null);
+    }
+  }, [props.responsive, windowWidth, props.children]);
+  const getStep = (step, visibleItems) => {
+    if (step > visibleItems) {
+      return Math.floor(visibleItems);
+    }
+    return Math.floor(step);
+  };
+  const visibleItems = (_b = autoVisibleItems !== null && autoVisibleItems !== void 0 ? autoVisibleItems : props.visibleItems) !== null && _b !== void 0 ? _b : isMobile ? 1.2 : 1;
+  const slidesWrapperGapSizePx = 20;
+  const slidesCount = React.Children.count(props.children);
+  const slideScreensCount = Math.max(1, slidesCount - Math.floor(visibleItems) + 1);
+  const step = getStep((_c = props.swipeStep) !== null && _c !== void 0 ? _c : 1, visibleItems);
+  const currentStepIndex = Math.ceil(currentIndex / step);
+  const totalSwipeSteps = Math.ceil(slideScreensCount / step + ((slideScreensCount - 1) % step !== 0 ? 1 : 0));
+  const data = React.useMemo(() => ({
+    startX: 0,
+    startTime: 0,
+    startTransform: 0,
+    currentTransform: 0,
+    knobStartTransform: 0,
+    knobCurrentTransform: 0,
+    direction: 0,
+    itemWidth: 0,
+    lastItemX: 0,
+    scrollWidth: 0,
+    scrollbarNavigation: false,
+    scrollbarToSlidesRatio: 1
+  }), []);
+  const getElementTransform = element => {
+    const matrix = new DOMMatrix(window.getComputedStyle(element).transform);
+    return matrix.m41 || 0;
+  };
+  const setElementTransform = (element, transform, delay) => {
+    if (element.current) {
+      element.current.style.setProperty('transition-duration', `${delay !== null && delay !== void 0 ? delay : 300}ms`);
+      element.current.style.setProperty('transform', `translate3d(${Number.isNaN(transform) ? 0 : transform}px, 0px, 0px)`);
+    }
+  };
+  const handleSetCurrentIndex = index => {
+    if (index === currentIndex) {
+      setElementTransform(slidesWrapperRef, data.startTransform);
+      setElementTransform(knobRef, data.knobStartTransform);
+    } else if (index < 0) {
+      setCurrentIndex(0);
+      setElementTransform(slidesWrapperRef, 0);
+    } else if (index > slideScreensCount - 1) {
+      setCurrentIndex(slideScreensCount - 1);
+      setElementTransform(slidesWrapperRef, data.startTransform);
+    } else {
+      setCurrentIndex(index);
+    }
+  };
+  const handleNavigationButtonPreviousClick = () => {
+    handleSetCurrentIndex(currentIndex - step);
+  };
+  const handleNavigationButtonNextClick = () => {
+    handleSetCurrentIndex(currentIndex + step);
+  };
+  const handlePaginationItemClick = e => {
+    if (e.currentTarget.parentElement) {
+      const index = [...e.currentTarget.parentElement.children].indexOf(e.currentTarget);
+      handleSetCurrentIndex(index * step);
+    }
+  };
+  const handlePointerMove = e => {
+    const diff = e.pageX - data.startX;
+    if (Math.abs(diff) < 5) {
+      return;
+    }
+    data.currentTransform = diff * (data.scrollbarNavigation ? data.scrollbarToSlidesRatio * -1 : 1) + data.startTransform;
+    data.knobCurrentTransform = diff / (data.scrollbarNavigation ? 1 : data.scrollbarToSlidesRatio * -1) + data.knobStartTransform;
+    data.direction = Math.sign(diff) * (data.scrollbarNavigation ? 1 : -1);
+    if (currentIndex <= 0) {
+      if (data.currentTransform > 0) {
+        data.currentTransform = -1 + Math.pow(data.startTransform + diff, 0.85);
+      }
+    } else if (currentIndex + Math.ceil(visibleItems) >= React.Children.count(props.children)) {
+      if (data.currentTransform < -data.lastItemX) {
+        data.currentTransform = -data.lastItemX + 1 - Math.pow(-data.lastItemX - data.startTransform - diff, 0.85);
+      }
+    }
+    if (data.knobCurrentTransform < 0) {
+      data.knobCurrentTransform = 0;
+    }
+    if (data.knobCurrentTransform > data.lastItemX / data.scrollbarToSlidesRatio) {
+      data.knobCurrentTransform = data.lastItemX / data.scrollbarToSlidesRatio;
+    }
+    setElementTransform(slidesWrapperRef, data.currentTransform, 0);
+    setElementTransform(knobRef, data.knobCurrentTransform, 0);
+    setIsSwiping(true);
+  };
+  const handlePointerUp = e => {
+    const endTime = Date.now();
+    if (endTime - data.startTime > 300) {
+      const swipeRatio = Math.abs(data.currentTransform - data.startTransform) / data.itemWidth;
+      if (swipeRatio >= 0.5) {
+        handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio) * step);
+      } else {
+        handleSetCurrentIndex(currentIndex);
+      }
+    } else {
+      handleSetCurrentIndex(currentIndex + data.direction * step);
+    }
+    if (data.scrollbarNavigation && data.direction === 0) {
+      if (knobRef.current) {
+        handleSetCurrentIndex(currentIndex + Math.round((e.pageX - knobRef.current.getBoundingClientRect().x - knobRef.current.offsetWidth / 2) / knobRef.current.offsetWidth));
+      }
+    }
+    document.removeEventListener('pointermove', handlePointerMove);
+    document.removeEventListener('pointerup', handlePointerUp);
+    setIsSwiping(false);
+  };
+  const handleSlidesPointerDown = e => {
+    if (e.button !== 0) return;
+    if (slidesWrapperRef.current && scrollbarRef.current && knobRef.current) {
+      data.startX = e.pageX;
+      data.startTime = Date.now();
+      data.startTransform = getElementTransform(slidesWrapperRef.current);
+      data.scrollbarNavigation = Boolean(e.currentTarget === scrollbarRef.current);
+      data.knobStartTransform = getElementTransform(knobRef.current);
+      document.addEventListener('pointermove', handlePointerMove);
+      document.addEventListener('pointerup', handlePointerUp);
+    }
+  };
+  const handleScrollbarPointerDown = e => {
+    handleSlidesPointerDown(e);
+  };
+  const handlePointerDown = e => {
+    e.preventDefault();
+  };
+  React.useEffect(() => {
+    if (slidesWrapperRef.current && scrollbarRef.current) {
+      const isRest = React.Children.count(props.children) - (currentIndex + visibleItems) < 0;
+      data.itemWidth = slidesWrapperRef.current.offsetWidth / visibleItems;
+      data.scrollWidth = slidesWrapperRef.current.scrollWidth;
+      data.lastItemX = data.itemWidth * (React.Children.count(props.children) - visibleItems) - (isRest ? slidesWrapperGapSizePx * (Math.ceil(visibleItems) - visibleItems) : 0);
+      data.scrollbarToSlidesRatio = data.lastItemX / (scrollbarRef.current.offsetWidth - scrollbarRef.current.offsetWidth / slideScreensCount);
+      let slidesTransform = 0;
+      if (React.Children.count(props.children) >= visibleItems) {
+        slidesTransform = data.itemWidth * currentIndex - (isRest ? data.itemWidth * (visibleItems % 1) + slidesWrapperGapSizePx : 0);
+      }
+      setElementTransform(slidesWrapperRef, -slidesTransform);
+      setElementTransform(knobRef, slidesTransform / data.scrollbarToSlidesRatio);
+    }
+  }, [currentIndex, data, props.children, slideScreensCount, visibleItems]);
+  React.useEffect(() => {
+    var _a;
+    if (props.responsive && autoVisibleItems) {
+      const items = (_a = slidesWrapperRef.current) === null || _a === void 0 ? void 0 : _a.children;
+      if (items) {
+        Array.from(items).forEach(itemElement => {
+          const item = itemElement;
+          item.style.flexBasis = `calc(100% / ${autoVisibleItems})`;
+          item.style.width = '';
+        });
+      }
+    }
+  }, [autoVisibleItems, props.responsive]);
+  return /*#__PURE__*/React__default.default.createElement(CarouselWrapper, {
+    id: props.id,
+    className: props.className,
+    "data-testid": dataTestId
+  }, /*#__PURE__*/React__default.default.createElement(Header, {
+    "data-testid": dataTestId && `${dataTestId}-header`
+  }, props.title && /*#__PURE__*/React__default.default.createElement(Title, null, props.title), /*#__PURE__*/React__default.default.createElement(Navigation, null, props.hasCounter && (/*#__PURE__*/React__default.default.createElement(Counter, null, slideScreensCount === 0 ? 0 : currentStepIndex + 1, "/", totalSwipeSteps)), /*#__PURE__*/React__default.default.createElement(ButtonArrow.default, {
+    direction: "left",
+    "aria-label": props.previousAriaLabel,
+    onClick: handleNavigationButtonPreviousClick,
+    disabled: currentIndex <= 0,
+    type: "button"
+  }), /*#__PURE__*/React__default.default.createElement(ButtonArrow.default, {
+    direction: "right",
+    "aria-label": props.nextAriaLabel,
+    onClick: handleNavigationButtonNextClick,
+    disabled: currentIndex + visibleItems >= React.Children.count(props.children),
+    type: "button"
+  }))), /*#__PURE__*/React__default.default.createElement(Content, {
+    "data-testid": dataTestId && `${dataTestId}-content`
+  }, /*#__PURE__*/React__default.default.createElement(SlidesWrapper, {
+    ref: slidesWrapperRef,
+    onPointerDown: handleSlidesPointerDown
+  }, React.Children.map(props.children, (child, index) => (/*#__PURE__*/React__default.default.createElement(SlideItem, {
+    ref: index === 0 ? firstItemRef : undefined,
+    "$visibleItems": visibleItems,
+    "$isSwiping": isSwiping,
+    onPointerDown: handlePointerDown,
+    "$responsive": Boolean(props.responsive),
+    "$gap": slidesWrapperGapSizePx / 16
+  }, child))))), /*#__PURE__*/React__default.default.createElement(Footer, {
+    "data-testid": dataTestId && `${dataTestId}-footer`
+  }, /*#__PURE__*/React__default.default.createElement(Pagination, null, [...Array(totalSwipeSteps).keys()].map((value, index) => (/*#__PURE__*/React__default.default.createElement(PaginationItem, {
+    key: value,
+    "aria-label": props.paginationAriaLabel && `${props.paginationAriaLabel} ${index + 1}`,
+    "aria-current": Math.ceil(currentIndex / step) === index,
+    "$isActive": Math.ceil(currentIndex / step) === index,
+    onClick: handlePaginationItemClick,
+    type: "button"
+  })))), /*#__PURE__*/React__default.default.createElement(Scrollbar, {
+    ref: scrollbarRef,
+    onPointerDown: handleScrollbarPointerDown
+  }, /*#__PURE__*/React__default.default.createElement(Knob, {
+    ref: knobRef,
+    "$knobSize": slideScreensCount
+  })), props.footerButton && (/*#__PURE__*/React__default.default.createElement(FooterButton, null, /*#__PURE__*/React__default.default.createElement(ButtonIcon.default, {
+    icon: icons.ArrowRight,
+    onClick: props.onFooterButtonClick
+  }, props.footerButton)))));
 };
 
 exports.SlideItem = SlideItem;