@am92/react-design-system 2.8.3 → 2.9.1

package/dist/Components/DsCarousel/DsCarousel.Component/DsCarouselNavigation.js

@@ -1,46 +1,39 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DsIconButton } from '../../DsIconButton';
 import { DsRemixIcon } from '../../DsRemixIcon';
-const DsCarouselNavigation = (props) => {
-    const { uid, isEnabled, NavigationProps = {} } = props;
+import { DsBox } from '../../DsBox';
+const DsCarouselNavigation = props => {
+    const { isEnabled, NavigationProps = {} } = props;
     if (!isEnabled) {
         return false;
     }
-    const { PrevButtonProps = {}, NextButtonProps = {} } = NavigationProps;
+    const { PrevButtonProps = {}, NextButtonProps = {}, NavigationWrapperProps } = NavigationProps;
     const { IconProps: PrevIconProps, ...PrevIconButtonProps } = PrevButtonProps;
     const { IconProps: NextIconProps, ...NextIconButtonProps } = NextButtonProps;
-    return (_jsxs(_Fragment, { children: [_jsx(DsIconButton, { className: `swiper-button-prev-${uid}`, ...PrevIconButtonProps, sx: {
-                    position: 'absolute',
-                    top: '50%',
-                    transform: 'translateY(-50%)',
-                    left: 'var(--ds-spacing-mild)',
-                    p: 'var(--ds-spacing-quickFreeze)',
-                    borderRadius: 'var(--ds-radius-bitterCold)',
-                    backgroundColor: 'var(--ds-colour-surfaceSecondary)',
-                    zIndex: 1,
-                    '&:hover': {
-                        backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
-                    },
-                    '&.Mui-disabled': {
-                        pointerEvents: 'unset'
-                    },
-                    ...PrevIconButtonProps?.sx
-                }, children: _jsx(DsRemixIcon, { className: "ri-arrow-left-s-line", ...PrevIconProps }) }), _jsx(DsIconButton, { className: `swiper-button-next-${uid}`, ...NextIconButtonProps, sx: {
-                    position: 'absolute',
-                    top: '50%',
-                    transform: 'translateY(-50%)',
-                    right: 'var(--ds-spacing-mild)',
-                    p: 'var(--ds-spacing-quickFreeze)',
-                    borderRadius: 'var(--ds-radius-bitterCold)',
-                    backgroundColor: 'var(--ds-colour-surfaceSecondary)',
-                    zIndex: 1,
-                    '&:hover': {
-                        backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
-                    },
-                    '&.Mui-disabled': {
-                        pointerEvents: 'unset'
-                    },
-                    ...NextIconButtonProps?.sx
-                }, children: _jsx(DsRemixIcon, { className: "ri-arrow-right-s-line", ...NextIconProps }) })] }));
+    return (_jsxs(DsBox, { sx: {
+            height: '100%',
+            width: '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingBottom: 'inherit',
+            px: 'var(--ds-spacing-mild)',
+            '> .MuiIconButton-root': {
+                p: 'var(--ds-spacing-quickFreeze)',
+                borderRadius: 'var(--ds-radius-bitterCold)',
+                backgroundColor: 'var(--ds-colour-surfaceSecondary)',
+                zIndex: 1,
+                '&:hover': {
+                    backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
+                },
+                '&.Mui-disabled': {
+                    pointerEvents: 'unset'
+                }
+            },
+            ...NavigationWrapperProps?.sx
+        }, ...NavigationWrapperProps, children: [_jsx(DsIconButton, { className: `swiper-button-prev-custom`, ...PrevIconButtonProps, children: _jsx(DsRemixIcon, { className: 'ri-arrow-left-s-line', ...PrevIconProps }) }), _jsx(DsIconButton, { className: `swiper-button-next-custom`, ...NextIconButtonProps, children: _jsx(DsRemixIcon, { className: 'ri-arrow-right-s-line', ...NextIconProps }) })] }));
 };
 export default DsCarouselNavigation;

package/dist/Components/DsCarousel/DsCarousel.Component/DsCarouselStyledWrapper.d.ts

@@ -0,0 +1,4 @@
+import { SwiperContainerWrapperProps } from '../DsCarousel.Types';
+export declare const DsCarouselStyledWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & SwiperContainerWrapperProps, {}, {}>;

package/dist/Components/DsCarousel/DsCarousel.Component/DsCarouselStyledWrapper.js

@@ -0,0 +1,90 @@
+import { styled } from '@mui/material';
+import { DsBox } from '../../DsBox';
+export const DsCarouselStyledWrapper = styled(DsBox, {
+    shouldForwardProp: prop => !['isAutoplayEnabled', 'transitionSpeed', 'isExternalPagination'].includes(prop)
+})(({ isAutoplayEnabled, transitionSpeed, isExternalPagination, sx }) => ({
+    '.swiper-pagination': {
+        position: 'absolute',
+        textAlign: 'center',
+        transition: '300ms opacity',
+        transform: 'translate3d(0, 0, 0)',
+        zIndex: 1,
+        '>.swiper-pagination-hidden': {
+            opacity: 0
+        },
+        '&.swiper-pagination-disabled': {
+            display: 'none !important'
+        },
+        '> .swiper-pagination-bullet': {
+            width: '6px',
+            height: '6px',
+            display: 'inline-block',
+            borderRadius: 'var(--ds-radius-bitterCold)',
+            opacity: 1,
+            margin: 'var(--ds-spacing-deepFreeze)',
+            background: 'linear-gradient(to right, var(--ds-colour-actionSecondary), var(--ds-colour-actionSecondary)) no-repeat, linear-gradient(to right, var(--ds-colour-stateUnselectedDefault), var(--ds-colour-stateUnselectedDefault)) no-repeat',
+            backgroundSize: '0% 100%, 100% 100%',
+            backgroundPosition: '0 0, 0 0',
+            '&:only-child': {
+                display: 'none !important'
+            },
+            '&.swiper-pagination-bullet-active': {
+                width: isAutoplayEnabled ? '20px' : '16px',
+                background: isAutoplayEnabled
+                    ? 'linear-gradient(to right, var(--ds-colour-actionSecondary), var(--ds-colour-actionSecondary)) no-repeat, linear-gradient(to right, var(--ds-colour-stateUnselectedDefault), var(--ds-colour-stateUnselectedDefault)) no-repeat'
+                    : 'var(--ds-colour-actionSecondary)',
+                opacity: 1,
+                borderRadius: 'var(--ds-radius-bitterCold)',
+                backgroundSize: '100% 100%, 100% 100%',
+                backgroundPosition: '0 0 , 100% 0',
+                transition: `width 0.5s, background-size ${transitionSpeed / 1000}s`
+            }
+        },
+        '&.swiper-pagination-clickable > .swiper-pagination-bullet': {
+            cursor: 'pointer'
+        },
+        '&.swiper-pagination-bullets-dynamic': {
+            overflow: 'hidden',
+            fontSize: 0,
+            '> .swiper-pagination-bullet': {
+                transform: 'scale(0.33)',
+                position: 'relative',
+                '&.swiper-pagination-bullet-active': {
+                    transform: 'scale(1)'
+                },
+                '&.swiper-pagination-bullet-active-prev': {
+                    transform: 'scale(0.66)'
+                },
+                '&.swiper-pagination-bullet-active-prev-prev': {
+                    transform: 'scale(0.33)'
+                },
+                '&.swiper-pagination-bullet-active-next': {
+                    transform: 'scale(0.66)'
+                },
+                '&.swiper-pagination-bullet-active-next-next': {
+                    transform: 'scale(0.33)'
+                }
+            }
+        },
+        '&.swiper-pagination-horizontal.swiper-pagination-bullets': {
+            bottom: !isExternalPagination
+                ? 'var(--ds-spacing-frostbite)'
+                : 'var(--ds-spacing-zero)',
+            top: 'auto',
+            left: 0,
+            width: '100%',
+            '&.swiper-pagination-bullets-dynamic': {
+                left: '50%',
+                transform: 'translateX(-50%)',
+                whiteSpace: 'nowrap',
+                '> .swiper-pagination-bullet': {
+                    transition: '200ms transform, 200ms left',
+                    '&.swiper-pagination-bullet-active': {
+                        transition: `width 0.5s, background-size ${transitionSpeed / 1000}s, 200ms transform, 200ms left`
+                    }
+                }
+            }
+        },
+        ...sx
+    }
+}));

package/dist/Components/DsCarousel/DsCarousel.Component/index.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
+import 'swiper/swiper-bundle.css';
 import { DsCarouselProps } from '../DsCarousel.Types';
-export declare const DsCarousel: FC<DsCarouselProps>;
+export declare const DsCarousel: (props: DsCarouselProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsCarousel/DsCarousel.Component/index.js

@@ -1,31 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
-import { Autoplay, Navigation, Pagination } from 'swiper/modules';
-import { register } from 'swiper/element';
-import { CAROUSEL_DEFAULT_SETTINGS, SWIPER_AUTOPLAY_SETTINGS, SWIPER_NAVIGATION_SETTINGS, SWIPER_PAGINATION_SETTINGS } from '../DsCarousel.Types';
+import React, { useMemo } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination, Autoplay } from 'swiper/modules';
+import 'swiper/swiper-bundle.css';
+import { SWIPER_AUTOPLAY_SETTINGS, SWIPER_NAVIGATION_SETTINGS, SWIPER_PAGINATION_SETTINGS } from '../DsCarousel.Types';
 import DsCarouselNavigation from './DsCarouselNavigation';
-import DsCarouselPagination from './DsCarouselPagination';
-import { DsBox } from '../../DsBox';
-if (register && typeof register === 'function') {
-    register();
-}
-const generateUid = () => {
-    const random = Math.trunc((Math.random() + 1) * 1000000);
-    return `${random.toString(36)}`;
-};
+import { DsCarouselStyledWrapper } from './DsCarouselStyledWrapper';
 export const DsCarousel = (props) => {
-    let SwiperContainer = null;
-    const uid = generateUid();
-    useEffect(() => {
-        initialize();
-    }, []);
-    const _isNavigationEnabled = () => {
-        const { navigation } = props;
-        return !(navigation === false ||
-            (navigation &&
-                typeof navigation !== 'boolean' &&
-                navigation.enabled === false));
-    };
     const _isPaginationEnabled = () => {
         const { pagination } = props;
         return !(pagination === false ||
@@ -33,35 +14,28 @@ export const DsCarousel = (props) => {
                 typeof pagination !== 'boolean' &&
                 pagination.enabled === false));
     };
-    const _isAutoplayEnabled = () => {
-        const { autoplay } = props;
-        return !(autoplay === false);
-    };
-    const _getNavigationSettings = () => {
-        const { navigation } = props;
-        const isEnabled = _isNavigationEnabled();
-        const defaultSettings = {
-            ...SWIPER_NAVIGATION_SETTINGS,
-            nextEl: `${SWIPER_NAVIGATION_SETTINGS.nextEl}-${uid}`,
-            prevEl: `${SWIPER_NAVIGATION_SETTINGS.prevEl}-${uid}`
-        };
-        if (typeof navigation !== 'boolean') {
-            return isEnabled ? { ...defaultSettings, ...navigation } : undefined;
-        }
-        return (isEnabled && { ...defaultSettings }) || undefined;
-    };
     const _getPaginationSettings = () => {
         const { pagination } = props;
         const isEnabled = _isPaginationEnabled();
         const defaultSettings = {
-            ...SWIPER_PAGINATION_SETTINGS,
-            el: `${SWIPER_PAGINATION_SETTINGS.el}-${uid}`
+            ...SWIPER_PAGINATION_SETTINGS
         };
         if (typeof pagination !== 'boolean') {
             return isEnabled ? { ...defaultSettings, ...pagination } : undefined;
         }
         return (isEnabled && { ...defaultSettings }) || undefined;
     };
+    const _isAutoplayEnabled = () => {
+        const { autoplay } = props;
+        return autoplay ? !(autoplay === false) : false;
+    };
+    const _isNavigationEnabled = () => {
+        const { navigation } = props;
+        return !(navigation === false ||
+            (navigation &&
+                typeof navigation !== 'boolean' &&
+                navigation.enabled === false));
+    };
     const _getAutoPlaySettings = () => {
         const { autoplay } = props;
         const isEnabled = _isAutoplayEnabled();
@@ -88,43 +62,33 @@ export const DsCarousel = (props) => {
         }
         return sanitizedModule;
     };
-    const initialize = () => {
-        const { children, PaginationProps, NavigationProps, PaginationWrapperProps, SwiperConatinerStyles, SwiperConatinerWrapperProps, modules, ...swiperProps } = props;
-        const sanitizedModule = _sanitizeModuleProps(modules);
-        // swiper parameters
-        const swiperParams = {
-            ...CAROUSEL_DEFAULT_SETTINGS,
-            ...swiperProps,
-            // Vertical mode not supported
-            direction: 'horizontal',
-            modules: sanitizedModule,
-            navigation: _getNavigationSettings() || false,
-            pagination: _getPaginationSettings() || false,
-            autoplay: _getAutoPlaySettings() || false
+    const _getNavigationSettings = () => {
+        const { navigation } = props;
+        const isEnabled = _isNavigationEnabled();
+        const defaultSettings = {
+            ...SWIPER_NAVIGATION_SETTINGS
         };
-        // swiperParams = handleNavigationModule(swiperParams)
-        // now we need to assign all parameters to Swiper element
-        Object.assign(SwiperContainer || {}, swiperParams);
-        // and now initialize it
-        SwiperContainer?.initialize();
-        // set the default theme
-        document.documentElement.style.setProperty('--swiper-theme-color', 'var(--ds-colour-actionSecondary)');
-    };
-    const setRef = (swiperRef) => {
-        SwiperContainer = swiperRef;
+        if (typeof navigation !== 'boolean') {
+            return isEnabled ? { ...defaultSettings, ...navigation } : undefined;
+        }
+        return (isEnabled && { ...defaultSettings }) || undefined;
     };
-    const { PaginationWrapperProps, SwiperConatinerWrapperProps, SwiperConatinerStyles, children, NavigationProps, PaginationProps } = props;
-    const paginationSettings = _getPaginationSettings();
-    return (_jsxs(DsBox, { ...PaginationWrapperProps, sx: {
-            position: 'relative',
-            pb: paginationSettings?.mode === 'external' ? '44px' : undefined,
-            ...PaginationWrapperProps?.sx
-        }, children: [_jsxs(DsBox, { ...SwiperConatinerWrapperProps, sx: {
-                    position: 'relative',
-                    ...SwiperConatinerWrapperProps?.sx
-                }, children: [_jsx("swiper-container", { ref: setRef, init: false, style: {
-                            ...SwiperConatinerStyles
-                        }, children: React.Children.map(children, (child, index) => {
-                            return (_jsx("swiper-slide", { children: child }, `${name}-${index}`));
-                        }) }), _jsx(DsCarouselNavigation, { uid: uid, isEnabled: _isNavigationEnabled(), NavigationProps: NavigationProps })] }), _jsx(DsCarouselPagination, { uid: uid, isEnabled: _isPaginationEnabled(), isAutoplayEnabled: _isAutoplayEnabled(), AutoplaySettings: _getAutoPlaySettings(), PaginationSettings: paginationSettings, PaginationProps: PaginationProps })] }));
+    const { SwiperContainerWrapperProps, SwiperContainerStyles, children, NavigationProps, pagination, navigation, autoplay, modules, ...swiperProps } = props;
+    const paginationSettings = useMemo(() => _getPaginationSettings(), [pagination]);
+    const navigationSettings = useMemo(() => _getNavigationSettings(), [navigation]);
+    const autoPlaySettings = useMemo(() => _getAutoPlaySettings(), [autoplay]);
+    const moduleSettings = useMemo(() => _sanitizeModuleProps(modules), [modules]);
+    let transitionSpeed = 0;
+    const isAutoplayEnabled = _isAutoplayEnabled();
+    if (isAutoplayEnabled) {
+        transitionSpeed =
+            (typeof autoPlaySettings !== 'boolean' && autoPlaySettings?.delay) || 3000;
+    }
+    const isExternalPagination = paginationSettings?.mode === 'external';
+    return (_jsx(DsCarouselStyledWrapper, { isAutoplayEnabled: isAutoplayEnabled, transitionSpeed: transitionSpeed, isExternalPagination: isExternalPagination, ...SwiperContainerWrapperProps, children: _jsxs(Swiper, { pagination: paginationSettings, navigation: navigationSettings, modules: moduleSettings, autoplay: autoPlaySettings, style: {
+                paddingBottom: isExternalPagination ? '44px' : undefined,
+                ...SwiperContainerStyles
+            }, ...swiperProps, 
+            // Vertical mode not supported
+            direction: 'horizontal', children: [React.Children.map(children, (child, index) => (_jsx(SwiperSlide, { children: child }, `${name}-${index}`))), _jsx(DsCarouselNavigation, { isEnabled: _isNavigationEnabled(), NavigationProps: NavigationProps })] }) }));
 };

package/dist/Components/DsCarousel/DsCarousel.Types.d.ts

@@ -4,35 +4,49 @@ import { DsBoxProps } from '../DsBox';
 import { DsIconButtonProps } from '../DsIconButton';
 import { DsRemixIconProps } from '../DsRemixIcon';
 export interface DsCarouselNavigationButtonProps extends DsIconButtonProps {
+    /** This Propperty can be used to pass icon props to the navigation buttons. */
     IconProps?: Omit<DsRemixIconProps, 'ref'>;
 }
 export interface DsCarouselNavigationProps {
-    uid: string;
     isEnabled: boolean;
+    /** This Property can be used to pass Navigation props
+     * @enum  PrevButtonProps, NextButtonProps, NavigationWrapperProps
+    */
     NavigationProps?: {
+        /** This property can be used to provide props to Icon navigation buttons
+         * @default DsIconButtonProps
+         */
         PrevButtonProps?: DsCarouselNavigationButtonProps;
+        /** This property can be used to provide props to Icon navigation buttons
+        * @default DsIconButtonProps
+        */
         NextButtonProps?: DsCarouselNavigationButtonProps;
+        /** This property can be used to provide navigation wrapper props as DsBoxProps */
+        NavigationWrapperProps?: DsBoxProps;
     };
 }
-export interface DsCarouselPaginationProps {
-    uid: string;
-    isEnabled: boolean;
-    isAutoplayEnabled: boolean;
-    AutoplaySettings: DsCarouselProps['autoplay'];
-    PaginationSettings?: DsCarouselProps['pagination'];
-    PaginationProps?: DsBoxProps;
-}
 type DsCarouselPaginationMode = 'internal' | 'external';
 export type DsCaroselPaginationSettings = SwiperProps['pagination'] & {
+    /** This property can be used to prove the position mode for pagination */
     mode?: DsCarouselPaginationMode;
 };
-export interface DsCarouselProps extends Omit<SwiperProps, 'direction' | 'pagination'>, Omit<DsCarouselNavigationProps, 'uid' | 'isEnabled'>, Omit<DsCarouselPaginationProps, 'uid' | 'isEnabled' | 'isAutoplayEnabled' | 'AutoplaySettings'> {
-    PaginationWrapperProps?: DsBoxProps;
-    SwiperConatinerWrapperProps?: DsBoxProps;
-    SwiperConatinerStyles?: React.CSSProperties;
+export interface DsCarouselProps extends Omit<SwiperProps, 'direction' | 'pagination'>, Omit<DsCarouselNavigationProps, 'isEnabled'> {
+    /** This property can be used to pass Swiper Wrapper props which is BoxProps  */
+    SwiperContainerWrapperProps?: Omit<SwiperContainerWrapperProps, 'transitionSpeed' | 'isAutoplayEnabled' | 'isExternalPagination'>;
+    /** This property can be used to add container styled to Swiper element  */
+    SwiperContainerStyles?: React.CSSProperties;
+    /** This property can be used to provide swiper direction  */
     direction?: 'horizontal';
+    /** This property can be used to provide pagination props
+     * @enum mode
+    */
     pagination?: DsCaroselPaginationSettings;
 }
+export interface SwiperContainerWrapperProps extends DsBoxProps {
+    transitionSpeed: number;
+    isAutoplayEnabled: boolean;
+    isExternalPagination: boolean;
+}
 export declare const CAROUSEL_DEFAULT_SETTINGS: DsCarouselProps;
 export declare const DsCarouselDefaultProps: DsCarouselProps;
 export declare const SWIPER_NAVIGATION_SETTINGS: {
@@ -44,7 +58,6 @@ export declare const SWIPER_NAVIGATION_SETTINGS: {
 };
 export declare const SWIPER_PAGINATION_SETTINGS: {
     enabled: boolean;
-    el: string;
     mode: DsCarouselPaginationMode;
 };
 export declare const SWIPER_AUTOPLAY_SETTINGS: {

package/dist/Components/DsCarousel/DsCarousel.Types.js

@@ -7,14 +7,13 @@ export const CAROUSEL_DEFAULT_SETTINGS = {
 export const DsCarouselDefaultProps = CAROUSEL_DEFAULT_SETTINGS;
 export const SWIPER_NAVIGATION_SETTINGS = {
     enabled: true,
-    nextEl: '.swiper-button-next',
-    prevEl: '.swiper-button-prev',
+    nextEl: '.swiper-button-next-custom',
+    prevEl: '.swiper-button-prev-custom',
     disabledClass: 'Mui-disabled',
     navigationDisabledClass: 'Mui-disabled'
 };
 export const SWIPER_PAGINATION_SETTINGS = {
     enabled: true,
-    el: '.swiper-pagination',
     mode: 'internal'
 };
 export const SWIPER_AUTOPLAY_SETTINGS = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "2.8.3",
+  "version": "2.9.1",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",

package/dist/Components/DsCarousel/DsCarousel.Component/DsCarouselPagination.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { DsCarouselPaginationProps } from '../DsCarousel.Types';
-declare const DsCarouselPagination: React.FC<DsCarouselPaginationProps>;
-export default DsCarouselPagination;

package/dist/Components/DsCarousel/DsCarousel.Component/DsCarouselPagination.js

@@ -1,130 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { DsBox } from '../../DsBox';
-const DsCarouselPagination = (props) => {
-    const paginationRef = React.useRef();
-    React.useEffect(() => {
-        handleFirstTransition();
-    }, []);
-    const handleFirstTransition = () => {
-        const firstActiveBullet = paginationRef.current?.getElementsByClassName('swiper-pagination-bullet-active')[0];
-        if (firstActiveBullet) {
-            firstActiveBullet.classList.remove('swiper-pagination-bullet-active');
-            setTimeout(() => {
-                firstActiveBullet.classList.add('swiper-pagination-bullet-active');
-            }, 0);
-        }
-    };
-    const { uid, isEnabled, isAutoplayEnabled, PaginationSettings, AutoplaySettings, PaginationProps } = props;
-    if (!isEnabled) {
-        return false;
-    }
-    let className = `swiper-pagination-${uid}`;
-    let transitionSpeed = 0;
-    if (isAutoplayEnabled) {
-        className = `swiper-pagination-${uid} rds-pilled`;
-        transitionSpeed =
-            (typeof AutoplaySettings !== 'boolean' && AutoplaySettings?.delay) ||
-                3000;
-    }
-    return (_jsx(DsBox, { ref: paginationRef, className: className, ...PaginationProps, sx: {
-            position: 'absolute',
-            textAlign: 'center',
-            transition: '300ms opacity',
-            transform: 'translate3d(0, 0, 0)',
-            zIndex: 1,
-            '&.swiper-pagination-hidden': {
-                opacity: 0
-            },
-            '&.swiper-pagination-disabled': {
-                '&.swiper-pagination-disabled': {
-                    display: 'none !important'
-                }
-            },
-            '&.swiper-pagination-bullets': {
-                '> .swiper-pagination-bullet': {
-                    width: '6px',
-                    height: '6px',
-                    display: 'inline-block',
-                    borderRadius: 'var(--ds-radius-bitterCold)',
-                    opacity: 1,
-                    mx: 'var(--ds-spacing-deepFreeze)',
-                    background: 'linear-gradient(to right, var(--ds-colour-actionSecondary), var(--ds-colour-actionSecondary)) no-repeat, linear-gradient(to right, var(--ds-colour-stateUnselectedDefault), var(--ds-colour-stateUnselectedDefault)) no-repeat',
-                    backgroundSize: '0% 100%, 100% 100%',
-                    backgroundPosition: '0 0, 0 0',
-                    '&:only-child': {
-                        display: 'none !important'
-                    },
-                    '&.swiper-pagination-bullet-active': {
-                        width: '16px',
-                        background: 'var(--ds-colour-actionSecondary)',
-                        opacity: 1
-                    }
-                }
-            },
-            '&.swiper-pagination-bullets.rds-pilled': {
-                '> .swiper-pagination-bullet': {
-                    '&.swiper-pagination-bullet-active': {
-                        width: '20px',
-                        background: 'linear-gradient(to right, var(--ds-colour-actionSecondary), var(--ds-colour-actionSecondary)) no-repeat, linear-gradient(to right, var(--ds-colour-stateUnselectedDefault), var(--ds-colour-stateUnselectedDefault)) no-repeat',
-                        borderRadius: 'var(--ds-radius-bitterCold)',
-                        backgroundSize: '100% 100%, 100% 100%',
-                        backgroundPosition: '0 0 , 100% 0',
-                        transition: `width 0.5s, background-size ${transitionSpeed / 1000}s`
-                    }
-                }
-            },
-            '&.swiper-pagination-clickable': {
-                '> .swiper-pagination-bullet': {
-                    cursor: 'pointer'
-                }
-            },
-            '&.swiper-pagination-bullets-dynamic': {
-                overflow: 'hidden',
-                fontSize: 0,
-                '> .swiper-pagination-bullet': {
-                    transform: 'scale(0.33)',
-                    position: 'relative',
-                    '&.swiper-pagination-bullet-active': {
-                        transform: 'scale(1)'
-                    },
-                    '&.swiper-pagination-bullet-active-main': {
-                        transform: 'scale(1)'
-                    },
-                    '&.swiper-pagination-bullet-active-prev': {
-                        transform: 'scale(0.66)'
-                    },
-                    '&.swiper-pagination-bullet-active-prev-prev': {
-                        transform: 'scale(0.33)'
-                    },
-                    '&.swiper-pagination-bullet-active-next': {
-                        transform: 'scale(0.66)'
-                    },
-                    '&.swiper-pagination-bullet-active-next-next': {
-                        transform: 'scale(0.33)'
-                    }
-                }
-            },
-            '&.swiper-pagination-horizontal.swiper-pagination-bullets': {
-                bottom: PaginationSettings?.mode === 'internal'
-                    ? 'var(--ds-spacing-frostbite)'
-                    : 'var(--ds-spacing-zero)',
-                top: 'auto',
-                left: 0,
-                width: '100%',
-                '&.swiper-pagination-bullets-dynamic': {
-                    left: '50%',
-                    transform: 'translateX(-50%)',
-                    whiteSpace: 'nowrap',
-                    '> .swiper-pagination-bullet': {
-                        transition: `200ms transform, 200ms left`,
-                        '&.swiper-pagination-bullet-active': {
-                            transition: `width 0.5s, background-size ${transitionSpeed / 1000}s, 200ms transform, 200ms left`
-                        }
-                    }
-                }
-            },
-            ...PaginationProps?.sx
-        } }));
-};
-export default DsCarouselPagination;