@am92/react-design-system 2.7.2 → 2.7.4

package/dist/Components/DsBackdrop/DsBackdrop.Overrides.d.ts

@@ -1 +1,9 @@
-export declare const DsBackdropOverrides: {};
+export declare const DsBackdropOverrides: {
+    MuiBackdrop: {
+        styleOverrides: {
+            root: {
+                backgroundColor: string;
+            };
+        };
+    };
+};

package/dist/Components/DsBackdrop/DsBackdrop.Overrides.js

@@ -1 +1,9 @@
-export const DsBackdropOverrides = {};
+export const DsBackdropOverrides = {
+    MuiBackdrop: {
+        styleOverrides: {
+            root: {
+                backgroundColor: 'var(--ds-colour-overlay)'
+            }
+        }
+    }
+};

package/dist/Components/DsCheckbox/DsCheckbox.Overrides.d.ts

@@ -4,17 +4,10 @@ export declare const DsCheckboxOverrides: {
         styleOverrides: {
             root: {
                 color: string;
-                '&:hover:not(.Mui-checked)': {
-                    backgroundColor: string;
-                };
-                '&:focus:not(.Mui-checked)': {
-                    backgroundColor: string;
-                };
-                '&.MuiCheckbox-colorPrimary.Mui-checked': {
+                '&.Mui-disabled': {
                     color: string;
                 };
-                '&.MuiCheckbox-colorSecondary.Mui-checked': {
-                    color: string;
+                '&:not(.Mui-checked)': {
                     '&:hover': {
                         backgroundColor: string;
                     };
@@ -22,25 +15,47 @@ export declare const DsCheckboxOverrides: {
                         backgroundColor: string;
                     };
                 };
-                '&.MuiCheckbox-colorError.Mui-checked': {
-                    color: string;
-                };
-                '&.MuiCheckbox-colorSuccess.Mui-checked': {
+            };
+            colorPrimary: {
+                '&.Mui-checked&:not(.Mui-checked)': {
                     color: string;
                 };
-                '&.MuiCheckbox-colorWarning.Mui-checked': {
+            };
+            colorSecondary: {
+                '&.Mui-checked&:not(.Mui-checked)': {
                     color: string;
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                    '&:focus': {
+                        backgroundColor: string;
+                    };
                 };
-                '&.Mui-disabled': {
+            };
+            colorError: {
+                '&.Mui-checked&:not(.Mui-checked)': {
                     color: string;
                 };
-                colorPrimary: {
+            };
+            colorSuccess: {
+                '&.Mui-checked&:not(.Mui-checked)': {
                     color: string;
                 };
-                colorSecondary: {
+            };
+            colorWarning: {
+                '&.Mui-checked&:not(.Mui-checked)': {
                     color: string;
                 };
             };
+            sizeSmall: {
+                fontSize: string;
+            };
+            sizeMedium: {
+                fontSize: string;
+            };
+            sizeLarge: {
+                fontSize: string;
+            };
         };
     };
 };

package/dist/Components/DsCheckbox/DsCheckbox.Overrides.js

@@ -5,16 +5,25 @@ export const DsCheckboxOverrides = {
         styleOverrides: {
             root: {
                 color: 'var(--ds-colour-iconDefault)',
-                '&:hover:not(.Mui-checked)': {
-                    backgroundColor: 'var(--ds-colour-stateUnselectedHover)'
-                },
-                '&:focus:not(.Mui-checked)': {
-                    backgroundColor: 'var(--ds-colour-stateUnselectedHover)'
+                '&.Mui-disabled': {
+                    color: 'var(--ds-colour-iconDisabled)'
                 },
-                '&.MuiCheckbox-colorPrimary.Mui-checked': {
+                '&:not(.Mui-checked)': {
+                    '&:hover': {
+                        backgroundColor: 'var(--ds-colour-stateUnselectedHover)'
+                    },
+                    '&:focus': {
+                        backgroundColor: 'var(--ds-colour-stateUnselectedHover)'
+                    }
+                }
+            },
+            colorPrimary: {
+                '&.Mui-checked&:not(.Mui-checked)': {
                     color: 'var(--ds-colour-iconActionPrimary)'
-                },
-                '&.MuiCheckbox-colorSecondary.Mui-checked': {
+                }
+            },
+            colorSecondary: {
+                '&.Mui-checked&:not(.Mui-checked)': {
                     color: 'var(--ds-colour-iconActionSecondary)',
                     '&:hover': {
                         backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
@@ -22,25 +31,31 @@ export const DsCheckboxOverrides = {
                     '&:focus': {
                         backgroundColor: 'var(--ds-colour-stateSelectedPrimaryHover)'
                     }
-                },
-                '&.MuiCheckbox-colorError.Mui-checked': {
+                }
+            },
+            colorError: {
+                '&.Mui-checked&:not(.Mui-checked)': {
                     color: 'var(--ds-colour-iconNegative)'
-                },
-                '&.MuiCheckbox-colorSuccess.Mui-checked': {
+                }
+            },
+            colorSuccess: {
+                '&.Mui-checked&:not(.Mui-checked)': {
                     color: 'var(--ds-colour-iconPositive)'
-                },
-                '&.MuiCheckbox-colorWarning.Mui-checked': {
+                }
+            },
+            colorWarning: {
+                '&.Mui-checked&:not(.Mui-checked)': {
                     color: 'var(--ds-colour-iconWarning)'
-                },
-                '&.Mui-disabled': {
-                    color: 'var(--ds-colour-iconDisabled)'
-                },
-                colorPrimary: {
-                    color: 'var(--ds-colour-iconActionPrimary)'
-                },
-                colorSecondary: {
-                    color: 'var(--ds-colour-iconActionSecondary)'
                 }
+            },
+            sizeSmall: {
+                fontSize: 'var(--ds-typo-fontSizeCold)'
+            },
+            sizeMedium: {
+                fontSize: 'var(--ds-typo-fontSizeMild)'
+            },
+            sizeLarge: {
+                fontSize: 'var(--ds-typo-fontSizeWarm)'
             }
         }
     }

package/dist/Components/DsCheckbox/DsCheckbox.Types.js

@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DsRemixIcon } from '../DsRemixIcon';
 export const DsCheckboxDefaultProps = {
     color: 'secondary',
-    icon: _jsx(DsRemixIcon, { className: "ri-checkbox-blank-line", color: "inherit" }),
-    checkedIcon: _jsx(DsRemixIcon, { className: "ri-checkbox-fill", color: "inherit" }),
-    indeterminateIcon: (_jsx(DsRemixIcon, { className: "ri-checkbox-indeterminate-fill", color: "inherit" }))
+    icon: (_jsx(DsRemixIcon, { className: "ri-checkbox-blank-line", color: "inherit", fontSize: "inherit" })),
+    checkedIcon: (_jsx(DsRemixIcon, { className: "ri-checkbox-fill", color: "inherit", fontSize: "inherit" })),
+    indeterminateIcon: (_jsx(DsRemixIcon, { className: "ri-checkbox-indeterminate-fill", color: "inherit", fontSize: "inherit" })),
+    size: 'small'
 };

package/dist/Components/DsDialog/DsDialog.Component.js

@@ -93,6 +93,6 @@ export class DsDialog extends React.Component {
                                 md: 'var(--ds-spacing-warm)'
                             },
                         ...ActionsProps?.sx
-                    }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "medium", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "medium", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
+                    }, children: [(secondaryButtonText || secondaryButtonProps?.children) && (_jsx(DsButton, { color: "secondary", size: "large", fullWidth: true, ...secondaryButtonProps, children: secondaryButtonText || secondaryButtonProps?.children })), (primaryButtonText || primaryButtonProps?.children) && (_jsx(DsButton, { size: "large", fullWidth: true, ...primaryButtonProps, children: primaryButtonText || primaryButtonProps?.children }))] }))] }));
     }
 }

package/dist/Components/DsDialog/DsDialog.Overrides.js

@@ -2,7 +2,7 @@ export const DsDialogOverrides = {
     MuiDialog: {
         styleOverrides: {
             paper: {
-                backgroundColor: 'var(--ds-colour-surfacePrimary)',
+                backgroundColor: 'var(--ds-colour-surfaceBackground)',
                 borderRadius: 'var(--ds-radius-bitterCold)',
                 boxShadow: 'var(--ds-elevation-24)',
                 margin: 'var(--ds-spacing-glacial)',

package/dist/Components/DsDrawer/DsDrawer.Overrides.js

@@ -2,7 +2,7 @@ export const DsDrawerOverrides = {
     MuiDrawer: {
         styleOverrides: {
             paper: {
-                background: 'var(--ds-colour-surfacePrimary)',
+                background: 'var(--ds-colour-surfaceBackground)',
                 boxShadow: 'var(--ds-elevation--1)',
                 backgroundImage: 'none'
             }

package/dist/Components/DsFab/DsFab.Overrides.d.ts

@@ -5,10 +5,18 @@ export declare const DsFabOverrides: {
         defaultProps: DsFabProps;
         styleOverrides: {
             root: CSSInterpolation;
+            sizeLarge: CSSInterpolation;
+            sizeMedium: CSSInterpolation;
+            sizeSmall: CSSInterpolation;
+            secondary: CSSInterpolation;
+            default: CSSInterpolation;
+            extended: {
+                borderRadius: string;
+                '.MuiTypography-root': {
+                    marginLeft: string;
+                    marginRight: string;
+                };
+            };
         };
-        variants: {
-            props: Partial<DsFabProps>;
-            style: CSSInterpolation;
-        }[];
     };
 };

package/dist/Components/DsFab/DsFab.Overrides.js

@@ -1,5 +1,5 @@
-import { DsFabDefaultProps } from './DsFab.Types';
 import STATE_STYLES from '../../Theme/STATE_STYLES';
+import { DsFabDefaultProps } from './DsFab.Types';
 export const DsFabOverrides = {
     MuiFab: {
         defaultProps: DsFabDefaultProps,
@@ -7,50 +7,54 @@ export const DsFabOverrides = {
             root: {
                 boxShadow: 'var(--ds-elevation-8)',
                 textTransform: 'none',
+                minHeight: 'auto',
                 height: 'auto',
                 width: 'auto',
-                borderRadius: 'var(--ds-radius-pleasant)',
-                '&.MuiFab-default': {
-                    backgroundColor: 'var(--ds-colour-surfacePrimary)'
-                },
-                '&.MuiFab-extended .MuiTypography-root': {
+                borderRadius: '50%',
+                '.MuiTypography-root': {
                     fontWeight: 'var(--ds-typo-bodyBoldMedium-fontWeight)',
                     fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
                     lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
-                    letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)',
-                    marginLeft: 'var(--ds-spacing-glacial)'
+                    letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)'
                 }
-            }
-        },
-        variants: [
-            {
-                props: { size: 'medium' },
-                style: {
-                    padding: 'var(--ds-spacing-bitterCold)',
-                    '&.MuiFab-extended': {
-                        paddingRight: 'var(--ds-spacing-mild)'
-                    }
+            },
+            sizeLarge: {
+                padding: 'var(--ds-spacing-cool)',
+                '> .MuiSvgIcon-root': {
+                    fontSize: 'var(--ds-typo-fontSizePleasant)'
                 }
             },
-            {
-                props: { size: 'small' },
-                style: {
-                    padding: 'var(--ds-spacing-frostbite)',
-                    fontSize: 'var(--ds-typo-fontSizeCool)',
-                    '&.MuiFab-extended': {
-                        paddingRight: 'var(--ds-spacing-bitterCold)'
-                    },
-                    '> .MuiIcon-root': {
-                        fontSize: 'inherit'
-                    }
+            sizeMedium: {
+                padding: 'var(--ds-spacing-bitterCold)',
+                '> .MuiSvgIcon-root': {
+                    fontSize: 'var(--ds-typo-fontSizeMild)'
                 }
             },
-            {
-                props: { color: 'secondary' },
-                style: {
-                    ...STATE_STYLES.ACTION_SECONDARY_STATE_SECONDARY
+            sizeSmall: {
+                padding: 'var(--ds-spacing-frostbite)',
+                '> .MuiSvgIcon-root': {
+                    fontSize: 'var(--ds-typo-fontSizeCool)'
+                }
+            },
+            secondary: {
+                ...STATE_STYLES.ACTION_SECONDARY_STATE_SECONDARY
+            },
+            default: {
+                backgroundColor: 'var(--ds-colour-surfacePrimary)',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: 'var(--ds-colour-strokeDefault)',
+                '&:hover': {
+                    backgroundColor: 'var(--ds-colour-stateUnselectedHover)'
+                }
+            },
+            extended: {
+                borderRadius: 'var(--ds-radius-pleasant)',
+                '.MuiTypography-root': {
+                    marginLeft: 'var(--ds-spacing-glacial)',
+                    marginRight: 'var(--ds-spacing-glacial)'
                 }
             }
-        ]
+        }
     }
 };

package/dist/Components/DsLoader/DsLoader.Component.d.ts

@@ -1,6 +1,3 @@
-import { PureComponent } from 'react';
+import { FC } from 'react';
 import { DsLoaderProps } from './DsLoader.Types';
-export declare class DsLoader extends PureComponent<DsLoaderProps> {
-    static defaultProps: DsLoaderProps;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const DsLoader: FC<DsLoaderProps>;

package/dist/Components/DsLoader/DsLoader.Component.js

@@ -1,33 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PureComponent } from 'react';
-import Lottie from 'lottie-react';
-import { DATA_MAP, DS_LOADER_DEFAULT_PROPS } from './DsLoader.Types';
+import { DS_LOADER_DEFAULT_PROPS, LOADER_MAP } from './DsLoader.Types';
 import { DsBackdrop } from '../DsBackdrop';
-export class DsLoader extends PureComponent {
-    static defaultProps = DS_LOADER_DEFAULT_PROPS;
-    render() {
-        const mergedProps = { ...DS_LOADER_DEFAULT_PROPS, ...this.props };
-        const { 'ds-variant': loaderVariant, color, position, backdrop, BackdropProps, ...lottieProps } = mergedProps;
-        return (_jsx(DsBackdrop, { ...BackdropProps, open: true, invisible: !backdrop, sx: [
+import { DsBox } from '../DsBox';
+export const DsLoader = inProps => {
+    const props = { ...DS_LOADER_DEFAULT_PROPS, ...inProps };
+    const { 'ds-variant': loaderVariant = 'threeDot', color, position, backdrop, BackdropProps, ...boxProps } = props;
+    const LoaderElement = LOADER_MAP[loaderVariant];
+    const { sx: wrapperStyleProps, ...restBoxProps } = boxProps;
+    return (_jsx(DsBackdrop, { ...BackdropProps, open: true, invisible: !backdrop, children: _jsx(DsBox, { sx: [
                 {
-                    '.dot-class': {
-                        fill: `var(--ds-colour-${color}, var(--ds-colour-dotLoader))`
-                    },
                     position,
-                    color: ''
+                    color: `var(--ds-colour-${color}, var(--ds-colour-dotLoader))`
                 },
                 backdrop
                     ? {
-                        '.dot-class': {
-                            fill: `var(--ds-colour-${color}, var(--palette-common-white))`
-                        }
+                        color: `var(--ds-colour-${color}, var(--palette-common-white))`
                     }
                     : {},
                 {
-                    '.dot-class': {
-                        fill: color
-                    }
-                }
-            ], children: _jsx(Lottie, { ...lottieProps, animationData: DATA_MAP[loaderVariant] }) }));
-    }
-}
+                    color: color
+                },
+                wrapperStyleProps || {}
+            ], ...restBoxProps, children: _jsx(LoaderElement, {}) }) }));
+};

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

@@ -1,10 +1,10 @@
-import { CSSProperties } from 'react';
-import { LottieComponentProps } from 'lottie-react';
-import { DsColorTokens } from '../../Types';
-import { DsBackdropProps } from '../DsBackdrop';
+import type { CSSProperties } from 'react';
+import type { DsColorTokens } from '../../Types';
+import type { DsBackdropProps } from '../DsBackdrop';
+import type { DsBoxProps } from '../DsBox';
 type TVariant = 'threeDot' | 'singleDot';
 type TPosition = 'absolute' | 'fixed';
-export interface DsLoaderProps extends Omit<LottieComponentProps, 'animationData'> {
+export interface DsLoaderProps extends DsBoxProps {
     'ds-variant'?: TVariant;
     position?: TPosition;
     backdrop?: boolean;
@@ -12,5 +12,5 @@ export interface DsLoaderProps extends Omit<LottieComponentProps, 'animationData
     color?: DsColorTokens | CSSProperties['color'];
 }
 export declare const DS_LOADER_DEFAULT_PROPS: DsLoaderProps;
-export declare const DATA_MAP: Record<TVariant, object>;
+export declare const LOADER_MAP: Record<TVariant, React.ElementType>;
 export {};

package/dist/Components/DsLoader/DsLoader.Types.js

@@ -1,17 +1,12 @@
-import SingleDotLoader from './assets/singleDotLoader.json';
-import ThreeDotLoader from './assets/threeDotLoader.json';
+import { ThreeDotLoader } from './ThreeDotLoader';
+import { SingleDotLoader } from './SingleDotLoader';
 export const DS_LOADER_DEFAULT_PROPS = {
     'ds-variant': 'threeDot',
     position: 'fixed',
     backdrop: true,
-    loop: true,
-    rendererSettings: {
-        preserveAspectRatio: 'xMidYMid slice',
-        progressiveLoad: true
-    },
-    style: { height: '100px', width: '100px' }
+    sx: { maxheight: '100px', maxWidth: '100px' }
 };
-export const DATA_MAP = {
+export const LOADER_MAP = {
     singleDot: SingleDotLoader,
     threeDot: ThreeDotLoader
 };

package/dist/Components/DsLoader/SingleDotLoader.d.ts

@@ -0,0 +1 @@
+export declare function SingleDotLoader(): import("react/jsx-runtime").JSX.Element;

package/dist/Components/DsLoader/SingleDotLoader.js

@@ -0,0 +1,179 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SingleDotLoader() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1000 1000", preserveAspectRatio: "xMidYMid slice", style: {
+            width: '100%',
+            height: '100%',
+            transform: 'translate3d(0px, 0px, 0px)',
+            contentVisibility: 'visible'
+        }, children: [_jsxs("defs", { children: [_jsx("clipPath", { id: "__loader_element_11", children: _jsx("rect", { width: "1000", height: "1000", x: "0", y: "0" }) }), _jsx("style", { children: `@keyframes ball {
+  0%{
+    transform: matrix(2.428800106048584,0,0,2.428800106048584,491.30035400390625,444.7691650390625)
+  }
+  4%{
+    transform: matrix(2.4268264770507812,0,0,2.428800106048584,491.308349609375,446.03826904296875)
+  }
+  8%{
+    transform: matrix(2.420640230178833,0,0,2.428800106048584,491.3333435058594,450.0011901855469)
+  }
+  12%{
+    transform: matrix(2.4097819328308105,0,0,2.428800106048584,491.37725830078125,456.9241638183594)
+  }
+  16%{
+    transform: matrix(2.3936853408813477,0,0,2.428800106048584,491.44232177734375,467.1278991699219)
+  }
+  20%{
+    transform: matrix(2.371640682220459,0,0,2.428800106048584,491.5314636230469,481.006103515625)
+  }
+  24%{
+    transform: matrix(2.3427276611328125,0,0,2.428800106048584,491.6483459472656,499.0533142089844)
+  }
+  28%{
+    transform: matrix(2.305706262588501,0,0,2.428800106048584,491.79803466796875,521.9090576171875)
+  }
+  32%{
+    transform: matrix(2.2588188648223877,0,0,2.428800106048584,491.9875793457031,550.4329833984375)
+  }
+  36%{
+    transform: matrix(2.199368715286255,0,0,2.428800106048584,492.2279357910156,585.8424682617188)
+  }
+  40%{
+    transform: matrix(2.1226511001586914,0,0,2.428800106048584,492.5381164550781,630.0007934570312)
+  }
+  44%{
+    transform: matrix(2.0179288387298584,0,0,2.428800106048584,492.9615173339844,686.14697265625)
+  }
+  48%{
+    transform: matrix(2.185920238494873,0,0,2.185920238494873,492.2823181152344,762.3750610351562)
+  }
+  52%{
+    transform: matrix(2.185920238494873,0,0,2.185920238494873,492.2823181152344,762.3750610351562)
+  }
+  56%{
+    transform: matrix(2.0179288387298584,0,0,2.428800106048584,492.9615173339844,686.14697265625)
+  }
+  60%{
+    transform: matrix(2.1226511001586914,0,0,2.428800106048584,492.5381164550781,630.0007934570312)
+  }
+  64%{
+    transform: matrix(2.199368715286255,0,0,2.428800106048584,492.2279357910156,585.8424682617188)
+  }
+  68%{
+    transform: matrix(2.2588188648223877,0,0,2.428800106048584,491.9875793457031,550.4329833984375)
+  }
+  72%{
+    transform: matrix(2.305706262588501,0,0,2.428800106048584,491.79803466796875,521.9090576171875)
+  }
+  76%{
+    transform: matrix(2.3427276611328125,0,0,2.428800106048584,491.6483459472656,499.0533142089844)
+  }
+  80%{
+    transform: matrix(2.371640682220459,0,0,2.428800106048584,491.5314636230469,481.006103515625)
+  }
+  84%{
+    transform: matrix(2.3936853408813477,0,0,2.428800106048584,491.44232177734375,467.1278991699219)
+  }
+  88%{
+    transform: matrix(2.4097819328308105,0,0,2.428800106048584,491.37725830078125,456.9241638183594)
+  }
+  92%{
+    transform: matrix(2.420640230178833,0,0,2.428800106048584,491.3333435058594,450.0011901855469)
+  }
+  96%{
+    transform: matrix(2.4268264770507812,0,0,2.428800106048584,491.308349609375,446.03826904296875)
+  }
+  100%{
+    transform: matrix(2.428800106048584,0,0,2.428800106048584,491.30035400390625,444.7691650390625)
+  }
+}
+@keyframes shadow {
+  0%{
+    transform: matrix(2.3200900554656982,0,0,1.152750015258789,491.7398681640625,911.4684448242188)
+  }
+  4%{
+    transform: matrix(2.312131881713867,0,0,1.1487959623336792,491.77203369140625,911.1839599609375)
+  }
+  8%{
+    transform: matrix(2.2872824668884277,0,0,1.1364493370056152,491.87249755859375,910.2955322265625)
+  }
+  12%{
+    transform: matrix(2.2438719272613525,0,0,1.1148805618286133,492.04803466796875,908.7434692382812)
+  }
+  16%{
+    transform: matrix(2.17988920211792,0,0,1.0830904245376587,492.30670166015625,906.4559326171875)
+  }
+  20%{
+    transform: matrix(2.0928657054901123,0,0,1.039852261543274,492.6585388183594,903.3446655273438)
+  }
+  24%{
+    transform: matrix(1.9797005653381348,0,0,0.983625590801239,493.1160583496094,899.2987670898438)
+  }
+  28%{
+    transform: matrix(1.8363832235336304,0,0,0.9124175310134888,493.69549560546875,894.1748657226562)
+  }
+  32%{
+    transform: matrix(1.65752375125885,0,0,0.8235501646995544,494.41864013671875,887.7802124023438)
+  }
+  36%{
+    transform: matrix(1.4354881048202515,0,0,0.7132304906845093,495.3163146972656,879.8419189453125)
+  }
+  40%{
+    transform: matrix(1.158592939376831,0,0,0.5756535530090332,496.435791015625,869.9423217773438)
+  }
+  44%{
+    transform: matrix(0.8065273761749268,0,0,0.400727778673172,497.85919189453125,857.3551635742188)
+  }
+  48%{
+    transform: matrix(0.33317291736602783,0,0,0.16553886234760284,499.7729797363281,840.4317016601562)
+  }
+  52%{
+    transform: matrix(0.33317291736602783,0,0,0.16553886234760284,499.7729797363281,840.4317016601562)
+  }
+  56%{
+    transform: matrix(0.8065273761749268,0,0,0.400727778673172,497.85919189453125,857.3551635742188)
+  }
+  60%{
+    transform: matrix(1.158592939376831,0,0,0.5756535530090332,496.435791015625,869.9423217773438)
+  }
+  64%{
+    transform: matrix(1.4354881048202515,0,0,0.7132304906845093,495.3163146972656,879.8419189453125)
+  }
+  68%{
+    transform: matrix(1.65752375125885,0,0,0.8235501646995544,494.41864013671875,887.7802124023438)
+  }
+  72%{
+    transform: matrix(1.8363832235336304,0,0,0.9124175310134888,493.69549560546875,894.1748657226562)
+  }
+  76%{
+    transform: matrix(1.9797005653381348,0,0,0.983625590801239,493.1160583496094,899.2987670898438)
+  }
+  80%{
+    transform: matrix(2.0928657054901123,0,0,1.039852261543274,492.6585388183594,903.3446655273438)
+  }
+  84%{
+    transform: matrix(2.17988920211792,0,0,1.0830904245376587,492.30670166015625,906.4559326171875)
+  }
+  88%{
+    transform: matrix(2.2438719272613525,0,0,1.1148805618286133,492.04803466796875,908.7434692382812)
+  }
+  92%{
+    transform: matrix(2.2872824668884277,0,0,1.1364493370056152,491.87249755859375,910.2955322265625)
+  }
+  96%{
+    transform: matrix(2.312131881713867,0,0,1.1487959623336792,491.77203369140625,911.1839599609375)
+  }
+  100%{
+    transform: matrix(
+      2.3200900554656982,
+      0,
+      0,
+      1.152750015258789,
+      491.7398681640625,
+      911.4684448242188
+    );
+  }
+}` })] }), _jsxs("g", { "clip-path": "url(#__loader_element_11)", children: [_jsx("g", { transform: "matrix(2.3200900554656982,0,0,1.152750015258789,491.7398681640625,911.4684448242188)", opacity: "0.2", style: {
+                            animation: 'shadow 834ms cubic-bezier(0.0, 0.0, 0.2, 1.0) infinite'
+                        }, children: _jsx("g", { opacity: "1", transform: "matrix(1,0,0,1,4.043000221252441,-71.95700073242188)", children: _jsx("path", { fill: "currentColor", "fill-opacity": "1", d: " M75,0 C75,0 75,0 75,0 C75,41.39250183105469 41.39250183105469,75 0,75 C0,75 0,75 0,75 C-41.39250183105469,75 -75,41.39250183105469 -75,0 C-75,0 -75,0 -75,0 C-75,-41.39250183105469 -41.39250183105469,-75 0,-75 C0,-75 0,-75 0,-75 C41.39250183105469,-75 75,-41.39250183105469 75,0z" }) }) }), _jsx("g", { transform: "matrix(2.428800106048584,0,0,2.428800106048584,491.30035400390625,444.7691650390625)", opacity: "1", style: {
+                            animation: 'ball 834ms cubic-bezier(0.0, 0.0, 0.2, 1.0) infinite'
+                        }, children: _jsx("g", { opacity: "1", transform: "matrix(1,0,0,1,4.043000221252441,-71.95700073242188)", children: _jsx("path", { fill: "currentColor", "fill-opacity": "1", d: " M75,0 C75,0 75,0 75,0 C75,41.39250183105469 41.39250183105469,75 0,75 C0,75 0,75 0,75 C-41.39250183105469,75 -75,41.39250183105469 -75,0 C-75,0 -75,0 -75,0 C-75,-41.39250183105469 -41.39250183105469,-75 0,-75 C0,-75 0,-75 0,-75 C41.39250183105469,-75 75,-41.39250183105469 75,0z" }) }) })] })] }));
+}

package/dist/Components/DsLoader/ThreeDotLoader.d.ts

@@ -0,0 +1 @@
+export declare function ThreeDotLoader(): import("react/jsx-runtime").JSX.Element;