@am92/react-design-system 2.5.9 → 2.6.0

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AccordionProps } from '@mui/material';
 import { DsAccordionSummaryProps } from '../DsAccordionSummary';
 import { DsAccordionDetailsProps } from '../DsAccordionDetails';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AppBarProps } from '@mui/material';
 export interface DsAppBarProps extends AppBarProps {
     navigation?: boolean | React.ReactElement;

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

@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
 import { DsBottomSheetProps } from './DsBottomSheet.Types';
 export declare class DsBottomSheet extends PureComponent<DsBottomSheetProps> {
     static defaultProps: DsBottomSheetProps;
-    handleDrawerClose: (event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => void;
+    handleDrawerClose: (event: React.SyntheticEvent, reason: "backdropClick" | "escapeKeyDown") => void;
     handleCloseClick: (event: React.SyntheticEvent) => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -9,10 +9,10 @@ export declare class DsCarousel extends React.PureComponent<DsCarouselProps> {
     _isNavigationEnabled: () => boolean;
     _isPaginationEnabled: () => boolean;
     _isAutoplayEnabled: () => boolean;
-    _getNavigationSettings: () => DsCarouselProps['navigation'] | undefined;
+    _getNavigationSettings: () => DsCarouselProps["navigation"] | undefined;
     _getPaginationSettings: () => DsCaroselPaginationSettings | undefined;
-    _getAutoPlaySettings: () => DsCarouselProps['autoplay'] | undefined;
-    _sanitizeModuleProps: (modules: SwiperProps['modules']) => SwiperProps['modules'];
+    _getAutoPlaySettings: () => DsCarouselProps["autoplay"] | undefined;
+    _sanitizeModuleProps: (modules: SwiperProps["modules"]) => SwiperProps["modules"];
     initialize: () => void;
     setRef: (swiperRef: unknown) => void;
     render(): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DsDialogProps } from './DsDialog.Types';
 export declare class DsDialog extends React.Component<DsDialogProps> {
     static defaultProps: DsDialogProps;
-    handleDialogClose: (event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => void;
+    handleDialogClose: (event: React.SyntheticEvent, reason: "backdropClick" | "escapeKeyDown") => void;
     handleCloseClick: (event: React.SyntheticEvent) => void;
     render(): import("react/jsx-runtime").JSX.Element;
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DsButtonProps } from '../DsButton';
 import { DsInputProps } from '../DsInput';
 import { DsRemixIconProps } from '../DsRemixIcon';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DsBoxProps } from '../DsBox';
 export interface DsHeaderProps extends DsBoxProps {
     logoUrl?: string;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DsFormHelperTextProps } from '../DsFormHelperText';
 export interface DsHelperTextProps extends DsFormHelperTextProps {
     helperText: React.ReactNode;

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { DsBoxProps } from '../DsBox';
 import { DsRemixIconProps } from '../DsRemixIcon';
 import { DsSkeletonProps } from '../DsSkeleton';
-export interface DsImageSrcSetProps extends Omit<React.SourceHTMLAttributes<HTMLSourceElement>, 'srcSet'> {
+export interface DsImageSrcSetProps extends Omit<React.SourceHTMLAttributes<HTMLSourceElement | HTMLImageElement>, 'srcSet' | 'ref'> {
     src: string;
     alt: string;
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputLabelProps } from '@mui/material';
 export interface DsInputLabelProps extends InputLabelProps {
     label?: React.ReactNode;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DsBottomSheetProps } from '../DsBottomSheet';
 import { DsButtonProps } from '../DsButton';
 import { DsDialogProps } from '../DsDialog';

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

@@ -5,13 +5,13 @@ export declare class DsProgressTracker extends PureComponent<DsProgressTrackerPr
     constructor(props: DsProgressTrackerProps);
     getMergedProps: () => {
         StepperProps: {
-            sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
-            orientation?: import("@mui/material").Orientation | undefined;
+            sx?: import("@mui/system").SxProps<import("@mui/material").Theme>;
+            orientation?: import("@mui/material").Orientation;
         };
-        'ds-variant': "header" | "default" | "steps";
+        'ds-variant': "default" | "header" | "steps";
         steps: import("./DsProgressTracker.Types").DsProgressTrackerStepProps[];
         activeStep: number;
-        sx?: import("../DsBox").DsBoxProps | undefined;
+        sx?: import("../DsBox").DsBoxProps;
         nextStepLabelPrefix: React.ReactNode;
     };
     handleToggleCollapse: () => void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DsBoxProps } from '../DsBox';
 import { DsProgressStepperProps } from './DsProgressStepper.Types';
 export interface DsProgressTrackerStepProps {

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

@@ -4,5 +4,6 @@ export interface DsSearchbarProps<T, Multiple extends boolean | undefined, Disab
     name: string;
     onChange: (name: string, value: any) => void;
     startAdornmentProps?: DsInputAdornmentProps;
+    placeholder?: string;
 }
 export declare const DsSearchbarDefaultProps: DsSearchbarProps<any, boolean, boolean, boolean>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectProps } from '@mui/material';
 import { DsFormControlProps } from '../DsFormControl';
 import { DsInputLabelProps } from '../DsInputLabel';

package/dist/Components/DsTextArea/DsTextArea.Component.js

@@ -50,15 +50,18 @@ export class DsTextArea extends PureComponent {
         }
         return (_jsxs(DsFormControl, { fullWidth: fullWidth, children: [_jsx(DsTextField, { maxRows: 3, minRows: 3, ...rest, fullWidth: fullWidth, onChange: this.handleChange, multiline: true, inputProps: {
                         ref: ref || this.areRef,
+                        ...inputProps,
                         sx: {
                             minWidth: '288px',
-                            ...inputProps?.sx,
-                            ...maxLengthHandlingInputStyle
+                            ...maxLengthHandlingInputStyle,
+                            ...inputProps?.sx
                         },
-                        ...inputProps,
                         maxLength: maxLength || ''
                     }, helperText: helperText, 
                     // TODO: To be fixed when we fix the sx passing to inputbase
-                    style: { paddingBottom: 'var(--ds-spacing-mild)' } }), hasMaxLength && !hideCharacterCount && (_jsx(DsTypography, { sx: counterStyle, variant: "supportRegularFootnote", children: `${count}/${maxLength}` }))] }));
+                    style: {
+                        paddingBottom: 'var(--ds-spacing-mild)',
+                        ...rest?.style
+                    } }), hasMaxLength && !hideCharacterCount && (_jsx(DsTypography, { sx: counterStyle, variant: "supportRegularFootnote", children: `${count}/${maxLength}` }))] }));
     }
 }

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DsInputBaseProps } from '../DsInputBase';
 import { DsFormControlProps } from '../DsFormControl';
 import { DsInputLabelProps } from '../DsInputLabel';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DsTextFieldProps } from '../DsTextField';
 export interface DsTextFieldPasswordProps extends Omit<DsTextFieldProps, 'endAdornment'> {
     isVisible: boolean;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AlertProps } from '@mui/material';
 export interface DsToastProps extends AlertProps {
     forwardedRef?: React.ForwardedRef<HTMLDivElement>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TooltipProps } from '@mui/material';
 export interface DsTooltipProps extends Omit<TooltipProps, 'title'> {
     heading?: string;

package/dist/Hocs/withBreakpoints.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Breakpoint } from '@mui/material/styles';
 import { Subtract } from 'utility-types';
 type BreakpointsMap = {

package/dist/Theme/componentOverrides.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 declare const componentOverrides: {
     MuiDatePicker: {
         defaultProps: import("..").DsDatePickerProps<Date>;

package/dist/Theme/getColorScheme/dark.js

@@ -54,8 +54,8 @@ export default function getDarkModeColorScheme(colorPalette) {
         supportTypicalNeutral: snackBlueNeutralDark,
         stateSelectedPrimaryHover: hexToRgbA(secondary40, 0.2),
         stateSelectedPrimaryPressed: secondary40,
-        stateSelectedSecondaryHover: '#081919',
-        stateSelectedSecondaryPressed: '#154B3F',
+        stateSelectedSecondaryHover: '#081919', // TODO
+        stateSelectedSecondaryPressed: '#154B3F', // TODO
         stateSelectedVisitedTextLink: linkPurpleDark,
         stateUnselectedDefault: secondaryGrey60,
         stateUnselectedHover: hexToRgbA(secondaryGrey50, 0.2),

package/dist/Theme/getTypography.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DsTypographyVariants } from '../Types';
 export default function getTypography(fontFamilyName?: string): {
     dsTypo: {

package/dist/Theme/index.d.ts

@@ -1,7 +1,7 @@
 import { CssVarsTheme, PaletteColorOptions, Theme } from '@mui/material/styles';
 import dsSpacing, { SPACE_COEFFICIENT } from './spacing';
 import { DsPalette } from '../Types';
-export declare function getTheme(palette?: DsPalette, fontFamilyName?: string, themeArgs?: object[]): Omit<Theme, 'palette'> & CssVarsTheme;
+export declare function getTheme(palette?: DsPalette, fontFamilyName?: string, themeArgs?: object[]): Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
 export { dsSpacing, SPACE_COEFFICIENT };
 declare module '@mui/material/styles' {
     interface ColorSchemeOverrides {

package/dist/Types/DsTypography.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type DsFontSizeTokens = 'scorched' | 'torrid' | 'blazzing' | 'hot' | 'tropical' | 'warm' | 'mild' | 'cool' | 'cold' | 'bitterCold' | 'frigid' | 'frostbite' | 'blizzard' | 'iceAge';
 export type DsFontSizeClassTokens = 'scorched' | 'torrid' | 'blazzing' | 'hot' | 'tropical' | 'warm' | 'mild' | 'cool' | 'cold' | 'bitterCold' | 'frigid' | 'frostbite' | 'blizzard' | 'iceAge';
 export type DsTypographyTokens = 'displayBoldLarge' | 'displayBoldMedium' | 'displayBoldSmall' | 'displayBoldItalicLarge' | 'displayBoldItalicMedium' | 'displayBoldItalicSmall' | 'headingBoldExtraLarge' | 'headingBoldLarge' | 'headingBoldMedium' | 'headingBoldSmall' | 'headingBoldExtraSmall' | 'subheadingSemiboldLarge' | 'subheadingSemiboldDefault' | 'headingBoldItalicExtraLarge' | 'headingBoldItalicLarge' | 'headingBoldItalicMedium' | 'headingBoldItalicSmall' | 'headingBoldItalicExtraSmall' | 'bodyRegularLarge' | 'bodyRegularMedium' | 'bodyRegularSmall' | 'bodyBoldLarge' | 'bodyBoldMedium' | 'bodyBoldSmall' | 'supportRegularInfo' | 'supportRegularFootnote' | 'supportBoldTextButton' | 'supportRegularMetadata';

package/dist/index.d.ts

@@ -9,3 +9,4 @@ export * from './styles';
 export * from './transitions';
 export * from './utils';
 export * from './x-datepicker';
+export * from './x-charts';

package/dist/index.js

@@ -9,3 +9,4 @@ export * from './styles';
 export * from './transitions';
 export * from './utils';
 export * from './x-datepicker';
+export * from './x-charts';

package/dist/x-charts/Components/index.d.ts

@@ -0,0 +1,47 @@
+export { AnimatedArea as DsAnimatedArea } from '@mui/x-charts';
+export { AnimatedLine as DsAnimatedLine } from '@mui/x-charts';
+export { AreaElement as DsAreaElement } from '@mui/x-charts';
+export { AreaPlot as DsAreaPlot } from '@mui/x-charts';
+export { BarChart as DsBarChart } from '@mui/x-charts';
+export { BarElement as DsBarElement } from '@mui/x-charts';
+export { BarLabel as DsBarLabel } from '@mui/x-charts';
+export { BarPlot as DsBarPlot } from '@mui/x-charts';
+export { ChartContainer as DsChartContainer } from '@mui/x-charts';
+export { ChartsAxis as DsChartsAxis } from '@mui/x-charts';
+export { ChartsAxisHighlight as DsChartsAxisHighlight } from '@mui/x-charts';
+export { ChartsClipPath as DsChartsClipPath } from '@mui/x-charts';
+export { ChartsGrid as DsChartsGrid } from '@mui/x-charts';
+export { ChartsLegend as DsChartsLegend } from '@mui/x-charts';
+export { ChartsOnAxisClickHandler as DsChartsOnAxisClickHandler } from '@mui/x-charts';
+export { ChartsReferenceLine as DsChartsReferenceLine } from '@mui/x-charts';
+export { ChartsSurface as DsChartsSurface } from '@mui/x-charts';
+export { ChartsText as DsChartsText } from '@mui/x-charts';
+export { ChartsTooltip as DsChartsTooltip } from '@mui/x-charts';
+export { ChartsVoronoiHandler as DsChartsVoronoiHandler } from '@mui/x-charts';
+export { ChartsXAxis as DsChartsXAxis } from '@mui/x-charts';
+export { ChartsYAxis as DsChartsYAxis } from '@mui/x-charts';
+export { ContinuousColorLegend as DsContinuousColorLegend } from '@mui/x-charts';
+export { DefaultChartsAxisTooltipContent as DsDefaultChartsAxisTooltipContent } from '@mui/x-charts';
+export { DefaultChartsItemTooltipContent as DsDefaultChartsItemTooltipContent } from '@mui/x-charts';
+export { DefaultChartsLegend as DsDefaultChartsLegend } from '@mui/x-charts';
+export { Gauge as DsGauge } from '@mui/x-charts';
+export { GaugeContainer as DsGaugeContainer } from '@mui/x-charts';
+export { LineChart as DsLineChart } from '@mui/x-charts';
+export { LineElement as DsLineElement } from '@mui/x-charts';
+export { LineHighlightElement as DsLineHighlightElement } from '@mui/x-charts';
+export { LineHighlightPlot as DsLineHighlightPlot } from '@mui/x-charts';
+export { LinePlot as DsLinePlot } from '@mui/x-charts';
+export { MarkElement as DsMarkElement } from '@mui/x-charts';
+export { MarkPlot as DsMarkPlot } from '@mui/x-charts';
+export { PieArc as DsPieArc } from '@mui/x-charts';
+export { PieArcLabel as DsPieArcLabel } from '@mui/x-charts';
+export { PieArcLabelPlot as DsPieArcLabelPlot } from '@mui/x-charts';
+export { PieArcPlot as DsPieArcPlot } from '@mui/x-charts';
+export { PiecewiseColorLegend as DsPiecewiseColorLegend } from '@mui/x-charts';
+export { PieChart as DsPieChart } from '@mui/x-charts';
+export { PiePlot as DsPiePlot } from '@mui/x-charts';
+export { ResponsiveChartContainer as DsResponsiveChartContainer } from '@mui/x-charts';
+export { Scatter as DsScatter } from '@mui/x-charts';
+export { ScatterChart as DsScatterChart } from '@mui/x-charts';
+export { ScatterPlot as DsScatterPlot } from '@mui/x-charts';
+export { SparkLineChart as DsSparkLineChart } from '@mui/x-charts';

package/dist/x-charts/Components/index.js

@@ -0,0 +1,47 @@
+export { AnimatedArea as DsAnimatedArea } from '@mui/x-charts';
+export { AnimatedLine as DsAnimatedLine } from '@mui/x-charts';
+export { AreaElement as DsAreaElement } from '@mui/x-charts';
+export { AreaPlot as DsAreaPlot } from '@mui/x-charts';
+export { BarChart as DsBarChart } from '@mui/x-charts';
+export { BarElement as DsBarElement } from '@mui/x-charts';
+export { BarLabel as DsBarLabel } from '@mui/x-charts';
+export { BarPlot as DsBarPlot } from '@mui/x-charts';
+export { ChartContainer as DsChartContainer } from '@mui/x-charts';
+export { ChartsAxis as DsChartsAxis } from '@mui/x-charts';
+export { ChartsAxisHighlight as DsChartsAxisHighlight } from '@mui/x-charts';
+export { ChartsClipPath as DsChartsClipPath } from '@mui/x-charts';
+export { ChartsGrid as DsChartsGrid } from '@mui/x-charts';
+export { ChartsLegend as DsChartsLegend } from '@mui/x-charts';
+export { ChartsOnAxisClickHandler as DsChartsOnAxisClickHandler } from '@mui/x-charts';
+export { ChartsReferenceLine as DsChartsReferenceLine } from '@mui/x-charts';
+export { ChartsSurface as DsChartsSurface } from '@mui/x-charts';
+export { ChartsText as DsChartsText } from '@mui/x-charts';
+export { ChartsTooltip as DsChartsTooltip } from '@mui/x-charts';
+export { ChartsVoronoiHandler as DsChartsVoronoiHandler } from '@mui/x-charts';
+export { ChartsXAxis as DsChartsXAxis } from '@mui/x-charts';
+export { ChartsYAxis as DsChartsYAxis } from '@mui/x-charts';
+export { ContinuousColorLegend as DsContinuousColorLegend } from '@mui/x-charts';
+export { DefaultChartsAxisTooltipContent as DsDefaultChartsAxisTooltipContent } from '@mui/x-charts';
+export { DefaultChartsItemTooltipContent as DsDefaultChartsItemTooltipContent } from '@mui/x-charts';
+export { DefaultChartsLegend as DsDefaultChartsLegend } from '@mui/x-charts';
+export { Gauge as DsGauge } from '@mui/x-charts';
+export { GaugeContainer as DsGaugeContainer } from '@mui/x-charts';
+export { LineChart as DsLineChart } from '@mui/x-charts';
+export { LineElement as DsLineElement } from '@mui/x-charts';
+export { LineHighlightElement as DsLineHighlightElement } from '@mui/x-charts';
+export { LineHighlightPlot as DsLineHighlightPlot } from '@mui/x-charts';
+export { LinePlot as DsLinePlot } from '@mui/x-charts';
+export { MarkElement as DsMarkElement } from '@mui/x-charts';
+export { MarkPlot as DsMarkPlot } from '@mui/x-charts';
+export { PieArc as DsPieArc } from '@mui/x-charts';
+export { PieArcLabel as DsPieArcLabel } from '@mui/x-charts';
+export { PieArcLabelPlot as DsPieArcLabelPlot } from '@mui/x-charts';
+export { PieArcPlot as DsPieArcPlot } from '@mui/x-charts';
+export { PiecewiseColorLegend as DsPiecewiseColorLegend } from '@mui/x-charts';
+export { PieChart as DsPieChart } from '@mui/x-charts';
+export { PiePlot as DsPiePlot } from '@mui/x-charts';
+export { ResponsiveChartContainer as DsResponsiveChartContainer } from '@mui/x-charts';
+export { Scatter as DsScatter } from '@mui/x-charts';
+export { ScatterChart as DsScatterChart } from '@mui/x-charts';
+export { ScatterPlot as DsScatterPlot } from '@mui/x-charts';
+export { SparkLineChart as DsSparkLineChart } from '@mui/x-charts';

package/dist/x-charts/Constants/DS_DATA_VIS_CAT_COLORS.d.ts

@@ -0,0 +1,4 @@
+import { SupportedColorScheme } from '@mui/material';
+import { TDsDataVisColors } from '../Types/DsDataVisColors.Types';
+export declare const DS_DATA_VIS_CAT_COLORS: TDsDataVisColors;
+export declare const getDataVisCatColors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];

package/dist/x-charts/Constants/DS_DATA_VIS_CAT_COLORS.js

@@ -0,0 +1,30 @@
+export const DS_DATA_VIS_CAT_COLORS = {
+    light: [
+        '#C578D3',
+        '#D84646',
+        '#5273CC',
+        '#D87D23',
+        '#29A597',
+        '#2750C2',
+        '#A03333'
+    ],
+    dark: [
+        '#C578D3',
+        '#D84646',
+        '#5273CC',
+        '#D87D23',
+        '#29A597',
+        '#2750C2',
+        '#A03333'
+    ],
+    highContrast: [
+        '#C578D3',
+        '#D84646',
+        '#5273CC',
+        '#D87D23',
+        '#29A597',
+        '#2750C2',
+        '#A03333'
+    ]
+};
+export const getDataVisCatColors = (mode) => DS_DATA_VIS_CAT_COLORS[mode] || [];

package/dist/x-charts/Constants/DS_DATA_VIS_SEQ_COLORS.d.ts

@@ -0,0 +1,10 @@
+import { SupportedColorScheme } from '@mui/material';
+import { TDsDataVisColors } from '../Types/DsDataVisColors.Types';
+export declare const DS_DATA_VIS_SEQ1_COLORS: TDsDataVisColors;
+export declare const DS_DATA_VIS_SEQ2_COLORS: TDsDataVisColors;
+export declare const DS_DATA_VIS_SEQ3_COLORS: TDsDataVisColors;
+export declare const DS_DATA_VIS_SEQ4_COLORS: TDsDataVisColors;
+export declare const getDataVisSeq1Colors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];
+export declare const getDataVisSeq2Colors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];
+export declare const getDataVisSeq3Colors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];
+export declare const getDataVisSeq4Colors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];

package/dist/x-charts/Constants/DS_DATA_VIS_SEQ_COLORS.js

@@ -0,0 +1,120 @@
+export const DS_DATA_VIS_SEQ1_COLORS = {
+    light: [
+        '#692675',
+        '#9636A7',
+        '#B757C8',
+        '#C578D3',
+        '#CD8AD9',
+        '#D9A5E2',
+        '#E4C0EB'
+    ],
+    dark: [
+        '#692675',
+        '#9636A7',
+        '#B757C8',
+        '#C578D3',
+        '#CD8AD9',
+        '#D9A5E2',
+        '#E4C0EB'
+    ],
+    highContrast: [
+        '#692675',
+        '#9636A7',
+        '#B757C8',
+        '#C578D3',
+        '#CD8AD9',
+        '#D9A5E2',
+        '#E4C0EB'
+    ]
+};
+export const DS_DATA_VIS_SEQ2_COLORS = {
+    light: [
+        '#6E1717',
+        '#9D2121',
+        '#CC2B2B',
+        '#D84646',
+        '#DD5F5F',
+        '#E58484',
+        '#EDA9A9'
+    ],
+    dark: [
+        '#6E1717',
+        '#9D2121',
+        '#CC2B2B',
+        '#D84646',
+        '#DD5F5F',
+        '#E58484',
+        '#EDA9A9'
+    ],
+    highContrast: [
+        '#6E1717',
+        '#9D2121',
+        '#CC2B2B',
+        '#D84646',
+        '#DD5F5F',
+        '#E58484',
+        '#EDA9A9'
+    ]
+};
+export const DS_DATA_VIS_SEQ3_COLORS = {
+    light: [
+        '#134C45',
+        '#1B6D63',
+        '#238D81',
+        '#29A597',
+        '#31C4B3',
+        '#5CD6C8',
+        '#8DE2D8'
+    ],
+    dark: [
+        '#134C45',
+        '#1B6D63',
+        '#238D81',
+        '#29A597',
+        '#31C4B3',
+        '#5CD6C8',
+        '#8DE2D8'
+    ],
+    highContrast: [
+        '#134C45',
+        '#1B6D63',
+        '#238D81',
+        '#29A597',
+        '#31C4B3',
+        '#5CD6C8',
+        '#8DE2D8'
+    ]
+};
+export const DS_DATA_VIS_SEQ4_COLORS = {
+    light: [
+        '#12265B',
+        '#1A3683',
+        '#2246AA',
+        '#2750C2',
+        '#3862D8',
+        '#6686E1',
+        '#94ABEA'
+    ],
+    dark: [
+        '#12265B',
+        '#1A3683',
+        '#2246AA',
+        '#2750C2',
+        '#3862D8',
+        '#6686E1',
+        '#94ABEA'
+    ],
+    highContrast: [
+        '#12265B',
+        '#1A3683',
+        '#2246AA',
+        '#2750C2',
+        '#3862D8',
+        '#6686E1',
+        '#94ABEA'
+    ]
+};
+export const getDataVisSeq1Colors = (mode) => DS_DATA_VIS_SEQ1_COLORS[mode] || [];
+export const getDataVisSeq2Colors = (mode) => DS_DATA_VIS_SEQ2_COLORS[mode] || [];
+export const getDataVisSeq3Colors = (mode) => DS_DATA_VIS_SEQ3_COLORS[mode] || [];
+export const getDataVisSeq4Colors = (mode) => DS_DATA_VIS_SEQ4_COLORS[mode] || [];

package/dist/x-charts/Constants/DS_DATA_VIS_TREND_COLORS.d.ts

@@ -0,0 +1,14 @@
+import { SupportedColorScheme } from '@mui/material';
+import { TDsDataVisColors } from '../Types/DsDataVisColors.Types';
+export declare const DS_DATA_VIS_POSITIVE_COLORS: TDsDataVisColors;
+export declare const DS_DATA_VIS_WARNING_COLORS: TDsDataVisColors;
+export declare const DS_DATA_VIS_ERROR_COLORS: TDsDataVisColors;
+export declare const DS_DATA_VIS_POSITIVE_NEUTRAL_COLORS: TDsDataVisColors;
+export declare const DS_DATA_VIS_WARNING_NEUTRAL_COLORS: TDsDataVisColors;
+export declare const DS_DATA_VIS_ERROR_NEUTRAL_COLORS: TDsDataVisColors;
+export declare const getDataVisTrendPositiveColors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];
+export declare const getDataVisTrendWarningColors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];
+export declare const getDataVisTrendErrorColors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];
+export declare const getDataVisTrendPositiveNeutralColors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];
+export declare const getDataVisTrendWarningNeutralColors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];
+export declare const getDataVisTrendErrorNeutralColors: (mode: SupportedColorScheme) => TDsDataVisColors[SupportedColorScheme];

package/dist/x-charts/Constants/DS_DATA_VIS_TREND_COLORS.js

@@ -0,0 +1,36 @@
+export const DS_DATA_VIS_POSITIVE_COLORS = {
+    light: ['#278829'],
+    dark: ['#62D264'],
+    highContrast: ['#62D264']
+};
+export const DS_DATA_VIS_WARNING_COLORS = {
+    light: ['#D84008'],
+    dark: ['#F87647'],
+    highContrast: ['#F87647']
+};
+export const DS_DATA_VIS_ERROR_COLORS = {
+    light: ['#EB0000'],
+    dark: ['#FF6C6C'],
+    highContrast: ['#FF6C6C']
+};
+export const DS_DATA_VIS_POSITIVE_NEUTRAL_COLORS = {
+    light: ['#EFF9EB'],
+    dark: ['#0C1907'],
+    highContrast: ['#0C1907']
+};
+export const DS_DATA_VIS_WARNING_NEUTRAL_COLORS = {
+    light: ['#F9F1EB'],
+    dark: ['#322A0F'],
+    highContrast: ['#322A0F']
+};
+export const DS_DATA_VIS_ERROR_NEUTRAL_COLORS = {
+    light: ['#F9EBEF'],
+    dark: ['#320F19'],
+    highContrast: ['#320F19']
+};
+export const getDataVisTrendPositiveColors = (mode) => DS_DATA_VIS_POSITIVE_COLORS[mode] || [];
+export const getDataVisTrendWarningColors = (mode) => DS_DATA_VIS_WARNING_COLORS[mode] || [];
+export const getDataVisTrendErrorColors = (mode) => DS_DATA_VIS_ERROR_COLORS[mode] || [];
+export const getDataVisTrendPositiveNeutralColors = (mode) => DS_DATA_VIS_POSITIVE_NEUTRAL_COLORS[mode] || [];
+export const getDataVisTrendWarningNeutralColors = (mode) => DS_DATA_VIS_WARNING_NEUTRAL_COLORS[mode] || [];
+export const getDataVisTrendErrorNeutralColors = (mode) => DS_DATA_VIS_ERROR_NEUTRAL_COLORS[mode] || [];

package/dist/x-charts/Constants/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DS_DATA_VIS_CAT_COLORS';
+export * from './DS_DATA_VIS_SEQ_COLORS';
+export * from './DS_DATA_VIS_TREND_COLORS';

package/dist/x-charts/Constants/index.js

@@ -0,0 +1,3 @@
+export * from './DS_DATA_VIS_CAT_COLORS';
+export * from './DS_DATA_VIS_SEQ_COLORS';
+export * from './DS_DATA_VIS_TREND_COLORS';

package/dist/x-charts/Types/DsDataVisColors.Types.d.ts

@@ -0,0 +1,2 @@
+import { SupportedColorScheme } from '@mui/material';
+export type TDsDataVisColors = Record<SupportedColorScheme, string[]>;

package/dist/x-charts/Types/DsDataVisColors.Types.js

@@ -0,0 +1 @@
+export {};

package/dist/x-charts/Types/index.d.ts

@@ -0,0 +1 @@
+export * from './DsDataVisColors.Types';

package/dist/x-charts/Types/index.js

@@ -0,0 +1 @@
+export * from './DsDataVisColors.Types';

package/dist/x-charts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Components';
+export * from './Constants';
+export * from './Types';

package/dist/x-charts/index.js

@@ -0,0 +1,3 @@
+export * from './Components';
+export * from './Constants';
+export * from './Types';

package/dist/x-datepicker/Components/DsDatePicker/DatePickerTextField.d.ts

@@ -1,11 +1,12 @@
-import React from 'react';
 import { DateFieldProps } from '@mui/x-date-pickers';
+import { FunctionComponent } from 'react';
 import { DsTextFieldProps } from '../../../Components';
-export interface DatePickerTextFieldProps extends Omit<DsTextFieldProps, 'margin' | 'onInvalid' | 'onKeyDown' | 'onBlur' | 'onKeyUp' | 'ref'> {
+export interface IDatePickerTextFieldProps extends Omit<DsTextFieldProps, 'margin' | 'onInvalid' | 'onKeyDown' | 'onBlur' | 'onKeyUp' | 'ref'> {
     setOpen?: (open: boolean) => void;
     InputProps?: DateFieldProps<Date>['InputProps'];
     ref?: DateFieldProps<Date>['ref'];
     focused?: boolean;
     ownerState?: any;
 }
-export declare const DatePickerTextField: React.ForwardRefExoticComponent<Omit<DatePickerTextFieldProps, "ref"> & React.RefAttributes<any>>;
+declare const DatePickerTextField: FunctionComponent<IDatePickerTextFieldProps>;
+export default DatePickerTextField;

package/dist/x-datepicker/Components/DsDatePicker/DatePickerTextField.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { useThemeProps } from '@mui/material';
+import { useThemeProps } from '@mui/system';
 import { DsTextField } from '../../../Components';
-export const DatePickerTextField = React.forwardRef((inProps, inputRef) => {
-    const props = useThemeProps({
-        props: inProps,
+const DatePickerTextField = (props) => {
+    const mergedProps = useThemeProps({
+        props: props,
         name: 'MuiPickersInput'
     });
-    const { setOpen, ref, InputProps, focused, ownerState, ...other } = props;
+    const { setOpen, ref, InputProps, focused, ownerState, ...other } = mergedProps;
     const { readOnly } = InputProps || {};
     return _jsx(DsTextField, { readOnly: readOnly, ...other });
-});
+};
+export default DatePickerTextField;

package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Component.js

@@ -6,10 +6,10 @@ import { DefaultActionBar } from './DefaultActionBar';
 import { DefaultToolbar } from './DefaultToolbar';
 import { DsDatePickerDefaultProps } from './DsDatePicker.Types';
 import { DateCalenderHeader } from './DateCalenderHeader';
-import { DatePickerTextField } from './DatePickerTextField';
 import { getDateFromValue, getErrorFromErrorMap, getValueTypeFromValue } from './utils';
 import { DsInputAdornment, DsIconButton, DsRemixIcon } from '../../../Components';
 import { useThemeProps } from '@mui/system';
+import DatePickerTextField from './DatePickerTextField';
 export const DsDatePicker = inProps => {
     const props = useThemeProps({
         props: inProps,

package/dist/x-datepicker/Components/DsDatePicker/DsDatePicker.Overrides.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerOverrides: {
     MuiDatePicker: {
         defaultProps: import("./DsDatePicker.Types").DsDatePickerProps<Date>;

package/dist/x-datepicker/Components/DsDatePicker/utils.d.ts

@@ -1,5 +1,5 @@
 import { DsDatePickerProps, TValue, TValueType } from './DsDatePicker.Types';
 import { DateValidationError } from '@mui/x-date-pickers';
-export declare const getDateFromValue: (value: TValue, valueType: TValueType, format?: DsDatePickerProps<Date>['format']) => Date | undefined | null;
-export declare const getValueTypeFromValue: (value: Date | null, valueType: TValueType, format?: DsDatePickerProps<Date>['format']) => TValue;
-export declare const getErrorFromErrorMap: (errorMap: DsDatePickerProps<Date>['errorMap'], error: DateValidationError, value: TValue | null) => string;
+export declare const getDateFromValue: (value: TValue, valueType: TValueType, format?: DsDatePickerProps<Date>["format"]) => Date | undefined | null;
+export declare const getValueTypeFromValue: (value: Date | null, valueType: TValueType, format?: DsDatePickerProps<Date>["format"]) => TValue;
+export declare const getErrorFromErrorMap: (errorMap: DsDatePickerProps<Date>["errorMap"], error: DateValidationError, value: TValue | null) => string;

package/dist/x-datepicker/Locale/DsDatePickerLocaleBeBY.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleBeBY: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleCaES.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleCaES: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleCsCZ.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleCsCZ: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleDaDK.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleDaDK: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleDeDE.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleDeDE: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleElGR.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleElGR: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleEnUS.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleEnUS: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleEsES.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleEsES: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleEu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleEu: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleFaIR.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleFaIR: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleFiFI.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleFiFI: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleFrFR.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleFrFR: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleHeIL.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleHeIL: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleHuHU.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleHuHU: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleIsIS.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleIsIS: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleItIT.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleItIT: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleJaJP.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleJaJP: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleKoKR.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleKoKR: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleKzKZ.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleKzKZ: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleMk.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleMk: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleNbNO.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleNbNO: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleNlNL.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleNlNL: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocalePlPL.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocalePlPL: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocalePtBR.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocalePtBR: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleRoRO.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleRoRO: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleRuRU.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleRuRU: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleSkSK.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleSkSK: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleSvSE.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleSvSE: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleTrTR.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleTrTR: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleUkUA.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleUkUA: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleViVN.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleViVN: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleZhCN.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleZhCN: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/Locale/DsDatePickerLocaleZhHK.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 export declare const DsDatePickerLocaleZhHK: {
     components: {
         MuiLocalizationProvider: {

package/dist/x-datepicker/componentOverrides.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="date-fns" />
 declare const XDatePickerComponentOverrides: {
     MuiDatePicker: {
         defaultProps: import("./Components").DsDatePickerProps<Date>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "2.5.9",
+  "version": "2.6.0",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",
@@ -17,8 +17,9 @@
     "@emotion/styled": "~11.11.0",
     "@mui/base": "~5.0.0-beta.26",
     "@mui/lab": "5.0.0-alpha.155",
-    "@mui/material": "~5.14.20",
-    "@mui/system": "~5.14.20",
+    "@mui/material": "~5.16.7",
+    "@mui/system": "~5.16.7",
+    "@mui/x-charts": "^7.17.0",
     "@mui/x-date-pickers": "~6.19.5",
     "date-fns": "~2.30.0",
     "lottie-react": "~2.4.0",