@automattic/jetpack-components 0.71.0 → 0.72.1

package/CHANGELOG.md

@@ -2,9 +2,23 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.72.1] - 2025-04-01
+### Changed
+- Update package dependencies. [#42762]
+
+## [0.72.0] - 2025-03-31
+### Added
+- Add dot-page component. [#42625]
+
+### Changed
+- Implement a continuous loop in testimonial slider. [#42781]
+
+### Fixed
+- Components: Prevent deprecation notices by adding `__next40pxDefaultSize` to controls. [#42677]
+
 ## [0.71.0] - 2025-03-26
 ### Removed
-- Removed threat components [#41654]
+- Remove threat components. [#41654]
 
 ### Fixed
 - Split Button: Increase compatibility of components, preventing console warnings. [#42627]
@@ -1333,6 +1347,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.72.1]: https://github.com/Automattic/jetpack-components/compare/0.72.0...0.72.1
+[0.72.0]: https://github.com/Automattic/jetpack-components/compare/0.71.0...0.72.0
 [0.71.0]: https://github.com/Automattic/jetpack-components/compare/0.70.1...0.71.0
 [0.70.1]: https://github.com/Automattic/jetpack-components/compare/0.70.0...0.70.1
 [0.70.0]: https://github.com/Automattic/jetpack-components/compare/0.69.1...0.70.0

package/build/components/action-button/index.d.ts

@@ -7,19 +7,19 @@ export default ActionButton;
  * It is useful to async actions when the user has to wait the result of a request or process.
  *
  * @param {object} props - The properties.
- * @return {React.Component} The `ActionButton` component.
+ * @return {React.ReactNode} The `ActionButton` component.
  */
-declare function ActionButton(props: object): React.Component;
+declare function ActionButton(props: object): React.ReactNode;
 declare namespace ActionButton {
     namespace propTypes {
-        const label: any;
-        const onClick: any;
-        const isLoading: any;
-        const isDisabled: any;
-        const displayError: any;
-        const errorMessage: any;
-        const variant: any;
-        const isExternalLink: any;
+        let label: any;
+        let onClick: any;
+        let isLoading: any;
+        let isDisabled: any;
+        let displayError: any;
+        let errorMessage: any;
+        let variant: any;
+        let isExternalLink: any;
     }
 }
 import React from 'react';

package/build/components/action-button/index.js

@@ -20,7 +20,7 @@ import styles from './style.module.scss';
  * It is useful to async actions when the user has to wait the result of a request or process.
  *
  * @param {object} props - The properties.
- * @return {React.Component} The `ActionButton` component.
+ * @return {React.ReactNode} The `ActionButton` component.
  */
 const ActionButton = props => {
     const { label, onClick, isLoading = false, loadingText, isDisabled, displayError = false, errorMessage = __('An error occurred. Please try again.', 'jetpack-components'), variant = 'primary', isExternalLink = false, customClass, } = props;

package/build/components/action-popover/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 /**
  * Types
  */

package/build/components/admin-page/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import type { JetpackFooterMenuItem } from '../jetpack-footer/types.js';
 export type AdminPageProps = {
     /**

package/build/components/admin-section/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 export type AdminSectionBaseProps = {
     /**
      * The section content

package/build/components/boost-score-graph/uplot-line-chart.js

@@ -33,7 +33,7 @@ function createSerieInfo(label, score) {
             gradient.addColorStop(0, getColor(score, '44'));
             gradient.addColorStop(1, getColor(score, '11'));
             return gradient;
-        },
+        }, // use the gradient as fill for the series
         width: 2,
         paths: (u, seriesIdx, idx0, idx1) => {
             return spline?.()(u, seriesIdx, idx0, idx1) || null;
@@ -115,7 +115,7 @@ export default function UplotLineChart({ range, periods, annotations = [] }) {
                     space: 100,
                     size: 30,
                     grid: {
-                        stroke: 'rgba(220, 220, 222, 0.5)',
+                        stroke: 'rgba(220, 220, 222, 0.5)', // #DCDCDE with 0.5 opacity
                         width: 1,
                     },
                     ticks: {

package/build/components/dot-pager/index.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import './style.scss';
+type DotPagerProps = {
+    hasDynamicHeight?: boolean;
+    children: ReactNode;
+    className?: string;
+    onPageSelected?: (index: number) => void;
+    isClickEnabled?: boolean;
+    rotateTime?: number;
+    tracksPrefix?: string;
+    tracksFn?: (eventName: string, data?: Record<string, unknown>) => void;
+};
+declare const DotPager: ({ hasDynamicHeight, children, className, onPageSelected, isClickEnabled, rotateTime, tracksPrefix, tracksFn, ...props }: DotPagerProps) => import("react/jsx-runtime").JSX.Element;
+export default DotPager;

package/build/components/dot-pager/index.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import clsx from 'clsx';
+import { Children, useState, useEffect, useCallback, useMemo } from 'react';
+import { Swipeable } from '../swipeable/index.js';
+import './style.scss';
+const Controls = ({ currentPage, numberOfPages, setCurrentPage, tracksPrefix, tracksFn, }) => {
+    // Create a map of memoized handlers for each page
+    const pageHandlers = useMemo(() => Array.from({ length: numberOfPages }, (_, page) => () => {
+        tracksFn(tracksPrefix + '_dot_click', {
+            current_page: currentPage,
+            destination_page: page,
+        });
+        setCurrentPage(page);
+    }), [numberOfPages, currentPage, tracksFn, tracksPrefix, setCurrentPage]);
+    if (numberOfPages < 2) {
+        return null;
+    }
+    return (_jsx("ul", { className: "dot-pager__controls", "aria-label": __('Pager controls', 'jetpack-components'), children: Array.from({ length: numberOfPages }, (_, page) => (_jsx("li", { "aria-current": page === currentPage ? 'page' : undefined, children: _jsx(Button, { className: clsx('dot-pager__control-choose-page', {
+                    'dot-pager__control-current': page === currentPage,
+                }), disabled: page === currentPage, "aria-label": sprintf(
+                /* translators: %1$d: current page number, %2$d: total number of pages */
+                __('Page %1$d of %2$d', 'jetpack-components'), page + 1, numberOfPages), onClick: pageHandlers[page] }, page.toString()) }, `page-${page}`))) }));
+};
+const DotPager = ({ hasDynamicHeight = false, children, className = '', onPageSelected, isClickEnabled = false, rotateTime = 0, tracksPrefix = '', tracksFn = () => { }, ...props }) => {
+    const normalizedChildren = Children.toArray(children).filter(Boolean);
+    const [currentPage, setCurrentPage] = useState(0);
+    const [isPaused, setIsPaused] = useState(false);
+    const numPages = Children.count(normalizedChildren);
+    useEffect(() => {
+        if (rotateTime > 0 && numPages > 1 && !isPaused) {
+            const timerId = setTimeout(() => {
+                // Add 1 to numPages to account for the clones
+                setCurrentPage((currentPage + 1) % (numPages + 1));
+            }, rotateTime * 1000);
+            return () => clearTimeout(timerId);
+        }
+    }, [currentPage, numPages, rotateTime, isPaused]);
+    const handleSelectPage = useCallback((index) => {
+        setCurrentPage(index);
+        onPageSelected?.(index);
+    }, [onPageSelected]);
+    const handleMouseEnter = useCallback(() => {
+        setIsPaused(true);
+    }, []);
+    const handleMouseLeave = useCallback(() => {
+        setIsPaused(false);
+    }, []);
+    return (_jsxs("div", { className: clsx('dot-pager', className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: [_jsx(Controls, { currentPage: currentPage, numberOfPages: numPages, setCurrentPage: handleSelectPage, tracksPrefix: tracksPrefix, tracksFn: tracksFn }), _jsx(Swipeable, { hasDynamicHeight: hasDynamicHeight, onPageSelect: handleSelectPage, currentPage: currentPage, pageClassName: "dot-pager__page", containerClassName: "dot-pager__pages", isClickEnabled: isClickEnabled, children: normalizedChildren })] }));
+};
+export default DotPager;

package/build/components/icon-tooltip/index.js

@@ -39,7 +39,7 @@ const IconTooltip = ({ className = '', iconClassName = '', placement = 'bottom-e
         noArrow: false,
         resize: false,
         flip: false,
-        offset,
+        offset, // The distance (in px) between the anchor and the popover.
         focusOnMount: 'container',
         onClose: hideTooltip,
         className: 'icon-tooltip-container',

package/build/components/icon-tooltip/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 export type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 export type Position = 'top left' | 'top center' | 'top right' | 'bottom left' | 'bottom center' | 'bottom right';
 export type IconTooltipProps = {

package/build/components/layout/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 type ColSpan = number | {
     start: number;
     end: number;

package/build/components/number-control/index.js

@@ -11,6 +11,6 @@ TextControl, } from '@wordpress/components';
  */
 const NumberControl = ExperimentalNumberControl ||
     function CustomNumberControl(props) {
-        return _jsx(TextControl, { type: "number", inputMode: "numeric", ...props });
+        return (_jsx(TextControl, { type: "number", inputMode: "numeric", ...props, __next40pxDefaultSize: true }));
     };
 export default NumberControl;

package/build/components/popover/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import './style.scss';
 type PopoverProps = {
     action: React.ReactNode;

package/build/components/pricing-table/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import type { Placement } from '../icon-tooltip/types.js';
 export type PricingTableProps = {
     /**

package/build/components/product-offer/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import { ProductPriceProps } from '../product-price/types.js';
 import type { JetpackIconSlug } from '../icons/index.js';
 export type ProductOfferProps = {

package/build/components/product-price/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 export type ProductPriceProps = {
     /**
      * Product price.

package/build/components/radio-control/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 interface RadioControlProps {
     /** The current value. */
     selected: string;

package/build/components/spinner/index.d.ts

@@ -6,8 +6,8 @@ declare function Spinner({ color, className, size }: {
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace Spinner {
     namespace propTypes {
-        const color: any;
-        const className: any;
-        const size: any;
+        let color: any;
+        let className: any;
+        let size: any;
     }
 }

package/build/components/spinner/index.js

@@ -7,7 +7,7 @@ const Spinner = ({ color = '#FFFFFF', className = '', size = 20 }) => {
     const styleOuter = {
         width: size,
         height: size,
-        fontSize: size,
+        fontSize: size, // allows border-width to be specified in em units
         borderTopColor: color,
     };
     const styleInner = {

package/build/components/split-button/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 /**
  * External dependencies
  */

package/build/components/stat-card/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 export type StatCardProps = {
     /**
      * Custom className to be inserted.

package/build/components/status/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 interface StatusProps {
     status?: 'active' | 'error' | 'inactive' | 'action' | 'initializing';
     label?: string;

package/build/components/swipeable/index.d.ts

@@ -0,0 +1,12 @@
+import './style.scss';
+export declare const Swipeable: ({ hasDynamicHeight, children, currentPage, onPageSelect, pageClassName, containerClassName, isClickEnabled, ...otherProps }: {
+    [x: string]: any;
+    hasDynamicHeight?: boolean;
+    children: any;
+    currentPage?: number;
+    onPageSelect: any;
+    pageClassName: any;
+    containerClassName: any;
+    isClickEnabled: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Swipeable;

package/build/components/swipeable/index.js

@@ -0,0 +1,293 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Children, useState, useLayoutEffect, useRef, useCallback, useEffect } from 'react';
+import './style.scss';
+const OFFSET_THRESHOLD_PERCENTAGE = 0.35; // Percentage of width to travel before we trigger the slider to move to the desired slide.
+const VELOCITY_THRESHOLD = 0.2; // Speed of drag above, before we trigger the slider to move to the desired slide.
+const VERTICAL_THRESHOLD_ANGLE = 55;
+const TRANSITION_DURATION = '300ms';
+/**
+ * Custom hook to observe and handle resize events on a DOM element.
+ *
+ * @return {[React.Dispatch<React.SetStateAction<HTMLElement | null>>, ResizeObserverEntry | null]} Tuple containing setter and entry
+ */
+function useResizeObserver() {
+    const [observerEntry, setObserverEntry] = useState(null);
+    const [node, setNode] = useState(null);
+    const observer = useRef(null);
+    const disconnect = useCallback(() => observer.current?.disconnect(), []);
+    const observe = useCallback(() => {
+        observer.current = new ResizeObserver(([entry]) => setObserverEntry(entry));
+        if (node) {
+            observer.current.observe(node);
+        }
+    }, [node]);
+    useLayoutEffect(() => {
+        observe();
+        return () => disconnect();
+    }, [disconnect, observe]);
+    return [setNode, observerEntry];
+}
+/**
+ * Gets the drag position and timestamp from a mouse, touch, or pointer event.
+ *
+ * @param {Event} event - The event object from the drag/touch/pointer interaction
+ * @return {object} Object containing x, y coordinates and timestamp of the event
+ */
+function getDragPositionAndTime(event) {
+    const { timeStamp } = event;
+    if (Object.prototype.hasOwnProperty.call(event, 'clientX')) {
+        return { x: event.clientX, y: event.clientY, timeStamp };
+    }
+    if (event.targetTouches[0]) {
+        return {
+            x: event.targetTouches[0].clientX,
+            y: event.targetTouches[0].clientY,
+            timeStamp,
+        };
+    }
+    const touch = event.changedTouches[0];
+    return { x: touch.clientX, y: touch.clientY, timeStamp };
+}
+/**
+ * Calculates the total width needed for all pages in the swipeable component.
+ *
+ * @param {number} pageWidth - The width of a single page
+ * @param {number} numPages  - The total number of pages
+ * @return {number|null} The total width of all pages or null if pageWidth is not available
+ */
+function getPagesWidth(pageWidth, numPages) {
+    if (!pageWidth) {
+        return null;
+    }
+    return pageWidth * numPages;
+}
+export const Swipeable = ({ hasDynamicHeight = false, children, currentPage = 0, onPageSelect, pageClassName, containerClassName, isClickEnabled, ...otherProps }) => {
+    const prevPageRef = useRef(currentPage);
+    const [swipeableArea, setSwipeableArea] = useState(null);
+    // TODO: Needs to be added RTL support
+    const isRtl = false;
+    const [resizeObserverRef, entry] = useResizeObserver();
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [pagesStyle, setPagesStyle] = useState({
+        transitionDuration: TRANSITION_DURATION,
+    });
+    const [dragData, setDragData] = useState(null);
+    const pagesRef = useRef(null);
+    const numPages = Children.count(children);
+    const containerWidth = entry?.contentRect?.width;
+    useEffect(() => {
+        let timeoutId;
+        if ((currentPage === 0 && prevPageRef.current === numPages) ||
+            (currentPage === numPages - 1 && prevPageRef.current === -1)) {
+            // We are in a real slide after being transitioned from a clone
+            // we need to set again the transitionDuration to TRANSITION_DURATION
+            // But we need to wait a little bit to avoid enabling it before
+            // we moved to the real slide
+            timeoutId = setTimeout(() => {
+                setPagesStyle(prev => ({ ...prev, transitionDuration: TRANSITION_DURATION }));
+            }, 500);
+        }
+        else if (currentPage === numPages || currentPage < 0) {
+            // In a clone slide. Start the transition to the real slide
+            setIsTransitioning(true);
+        }
+        prevPageRef.current = currentPage;
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [currentPage, numPages]);
+    const getOffset = useCallback(index => {
+        // Adjust offset to account for the cloned element at the beginning
+        const adjustedIndex = index + 1;
+        const offset = containerWidth * adjustedIndex;
+        return isRtl ? offset : -offset;
+    }, [isRtl, containerWidth]);
+    const updateEnabled = hasDynamicHeight && numPages > 1;
+    // Generate a property that denotes the order of the cards, in order to recalculate height whenever the card order changes.
+    const childrenOrder = children.reduce((acc, child) => acc + child.key, '');
+    useLayoutEffect(() => {
+        if (!updateEnabled) {
+            // This is a fix for a bug when you have >1 pages and it update the component to just one but the height is still
+            // Related to https://github.com/Automattic/dotcom-forge/issues/2033
+            if (pagesStyle?.height) {
+                setPagesStyle({ ...pagesStyle, height: undefined });
+            }
+            return;
+        }
+        const targetHeight = pagesRef.current?.querySelector('.is-current')
+            ?.offsetHeight;
+        if (targetHeight && pagesStyle?.height !== targetHeight) {
+            setPagesStyle({ ...pagesStyle, height: targetHeight });
+        }
+    }, [pagesRef, currentPage, pagesStyle, updateEnabled, containerWidth, childrenOrder]);
+    const resetDragData = useCallback(() => {
+        setPagesStyle(prev => ({
+            ...prev,
+            transitionDuration: TRANSITION_DURATION,
+        }));
+        setDragData(null);
+    }, [setPagesStyle, setDragData]);
+    const handleDragStart = useCallback(event => {
+        const position = getDragPositionAndTime(event);
+        setSwipeableArea(pagesRef.current?.getBoundingClientRect());
+        setDragData({ start: position });
+        setPagesStyle(prev => ({ ...prev, transitionDuration: `0ms` })); // Set transition Duration to 0 for smooth dragging.
+    }, [setPagesStyle, setDragData]);
+    const hasSwipedToNextPage = useCallback(delta => (isRtl ? delta > 0 : delta < 0), [isRtl]);
+    const hasSwipedToPreviousPage = useCallback(delta => (isRtl ? delta < 0 : delta > 0), [isRtl]);
+    const handleTransitionEnd = useCallback(() => {
+        if (!isTransitioning) {
+            return;
+        }
+        setIsTransitioning(false);
+        // If we're on the clone slides, jump to the corresponding real slide
+        // We set the transitionDuration to 0ms to make invisible the
+        // change from the clone to the real slide
+        if (currentPage >= numPages) {
+            setPagesStyle(prev => ({ ...prev, transitionDuration: '0ms' }));
+            onPageSelect(0);
+        }
+        else if (currentPage < 0) {
+            setPagesStyle(prev => ({ ...prev, transitionDuration: '0ms' }));
+            onPageSelect(numPages - 1);
+        }
+    }, [currentPage, numPages, onPageSelect, isTransitioning]);
+    const handleDragEnd = useCallback(event => {
+        if (!dragData) {
+            return; // End early if we are not dragging any more.
+        }
+        let dragPosition = getDragPositionAndTime(event);
+        if (dragPosition.x === 0) {
+            dragPosition = dragData.last;
+        }
+        const delta = dragPosition.x - dragData.start.x;
+        const absoluteDelta = Math.abs(delta);
+        const velocity = absoluteDelta / (dragPosition.timeStamp - dragData.start.timeStamp);
+        const verticalAbsoluteDelta = Math.abs(dragPosition.y - dragData.start.y);
+        const angle = (Math.atan2(verticalAbsoluteDelta, absoluteDelta) * 180) / Math.PI;
+        // Is click or tap?
+        if (velocity === 0 && isClickEnabled) {
+            onPageSelect((currentPage + 1) % numPages);
+            resetDragData();
+            return;
+        }
+        // Is vertical scroll detected?
+        if (angle > VERTICAL_THRESHOLD_ANGLE) {
+            resetDragData();
+            return;
+        }
+        const hasMetThreshold = absoluteDelta > OFFSET_THRESHOLD_PERCENTAGE * containerWidth ||
+            velocity > VELOCITY_THRESHOLD;
+        let newIndex = currentPage;
+        if (hasMetThreshold) {
+            if (hasSwipedToNextPage(delta)) {
+                newIndex = currentPage + 1;
+                if (newIndex >= numPages) {
+                    setIsTransitioning(true);
+                }
+            }
+            else if (hasSwipedToPreviousPage(delta)) {
+                newIndex = currentPage - 1;
+                if (newIndex < 0) {
+                    setIsTransitioning(true);
+                }
+            }
+        }
+        setPagesStyle(prev => ({
+            ...prev,
+            transform: `translate3d(${getOffset(newIndex)}px, 0px, 0px)`,
+            transitionDuration: TRANSITION_DURATION,
+        }));
+        onPageSelect(newIndex);
+        setDragData(null);
+    }, [
+        currentPage,
+        dragData,
+        hasSwipedToNextPage,
+        hasSwipedToPreviousPage,
+        numPages,
+        onPageSelect,
+        setPagesStyle,
+        containerWidth,
+        isClickEnabled,
+        resetDragData,
+        getOffset,
+    ]);
+    const handleDrag = useCallback(event => {
+        if (!dragData) {
+            return;
+        }
+        const dragPosition = getDragPositionAndTime(event);
+        const delta = dragPosition.x - dragData.start.x;
+        const absoluteDelta = Math.abs(delta);
+        const offset = getOffset(currentPage) + delta;
+        setDragData({ ...dragData, last: dragPosition });
+        // The user needs to swipe horizontally more then 2 px in order for the canvase to be dragging.
+        // We do this so that the user can scroll vertically smother.
+        if (absoluteDelta < 3) {
+            return;
+        }
+        setPagesStyle(prev => ({
+            ...prev,
+            transform: `translate3d(${offset}px, 0px, 0px)`,
+            transitionDuration: '0ms',
+        }));
+        if (!swipeableArea) {
+            return;
+        }
+        // Did the user swipe out of the swipeable area?
+        if (dragPosition.x < swipeableArea.left ||
+            dragPosition.x > swipeableArea.right ||
+            dragPosition.y > swipeableArea.bottom ||
+            dragPosition.y < swipeableArea.top) {
+            handleDragEnd(event);
+        }
+    }, [dragData, getOffset, currentPage, swipeableArea, handleDragEnd]);
+    const getTouchEvents = useCallback(() => {
+        if ('onpointerup' in document) {
+            return {
+                onPointerDown: handleDragStart,
+                onPointerMove: handleDrag,
+                onPointerUp: handleDragEnd,
+                onPointerLeave: handleDragEnd,
+            };
+        }
+        if ('ondragend' in document) {
+            return {
+                onDragStart: handleDragStart,
+                onDrag: handleDrag,
+                onDragEnd: handleDragEnd,
+                onDragExit: handleDragEnd,
+            };
+        }
+        if ('ontouchend' in document) {
+            return {
+                onTouchStart: handleDragStart,
+                onTouchMove: handleDrag,
+                onTouchEnd: handleDragEnd,
+                onTouchCancel: handleDragEnd,
+            };
+        }
+        return null;
+    }, [handleDragStart, handleDrag, handleDragEnd]);
+    const offset = getOffset(currentPage);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ...getTouchEvents(), className: "swipeable__container", ref: pagesRef, ...otherProps, children: _jsxs("div", { className: clsx('swipeable__pages', containerClassName), style: {
+                        ...pagesStyle,
+                        width: getPagesWidth(containerWidth, numPages + 2),
+                        transform: `translate3d(${offset}px, 0px, 0px)`,
+                    }, onTransitionEnd: handleTransitionEnd, children: [_jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
+                                'is-clone': true,
+                                'is-prev': currentPage === 0,
+                            }), children: Children.toArray(children)[numPages - 1] }, `clone-prev-${numPages - 1}`), Children.map(children, (child, index) => (_jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
+                                'is-current': index === currentPage,
+                                'is-prev': index < currentPage,
+                                'is-next': index > currentPage,
+                            }), "data-testid": `swipeable-page-${index + 1}`, children: child }, `page-${index}`))), _jsx("div", { style: { width: `${containerWidth}px` }, className: clsx('swipeable__page', pageClassName, {
+                                'is-clone': true,
+                                'is-next': currentPage === numPages - 1,
+                            }), children: Children.toArray(children)[0] }, `clone-next-0`)] }) }), _jsx("div", { ref: resizeObserverRef, className: "swipeable__resize-observer" })] }));
+};
+export default Swipeable;

package/build/components/terms-of-service/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import type { TermsOfServiceProps } from './types.js';
 import './styles.scss';
 declare const TermsOfService: React.FC<TermsOfServiceProps>;

package/build/components/theme-provider/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 export type ThemeProviderProps = {
     /**
      * An optional id to register and identify the provider instance.

package/build/components/toggle-control/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 interface ToggleControlProps {
     /** Whether or not the toggle is currently enabled. */
     checked?: boolean;

package/build/index.d.ts

@@ -45,6 +45,7 @@ export { default as BoostScoreGraph } from './components/boost-score-graph/index
 export { default as ProductPrice } from './components/product-price/index.js';
 export { default as ProductOffer, IconsCard } from './components/product-offer/index.js';
 export { default as Dialog } from './components/dialog/index.js';
+export { default as DotPager } from './components/dot-pager/index.js';
 export { default as DonutMeter } from './components/donut-meter/index.js';
 export { default as RecordMeterBar } from './components/record-meter-bar/index.js';
 export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.js';

package/build/index.js

@@ -59,6 +59,7 @@ export { default as BoostScoreGraph } from './components/boost-score-graph/index
 export { default as ProductPrice } from './components/product-price/index.js';
 export { default as ProductOffer, IconsCard } from './components/product-offer/index.js';
 export { default as Dialog } from './components/dialog/index.js';
+export { default as DotPager } from './components/dot-pager/index.js';
 export { default as DonutMeter } from './components/donut-meter/index.js';
 export { default as RecordMeterBar } from './components/record-meter-bar/index.js';
 export { default as ContextualUpgradeTrigger } from './components/contextual-upgrade-trigger/index.js';

package/components/action-button/index.jsx

@@ -20,7 +20,7 @@ import styles from './style.module.scss';
  * It is useful to async actions when the user has to wait the result of a request or process.
  *
  * @param {object} props - The properties.
- * @return {React.Component} The `ActionButton` component.
+ * @return {React.ReactNode} The `ActionButton` component.
  */
 const ActionButton = props => {
 	const {