@am92/react-design-system 2.7.0 → 2.7.2

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

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

package/dist/Components/DsAccordion/DsAccordion.Component.js

@@ -1,17 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PureComponent } from 'react';
 import Accordion from '@mui/material/Accordion';
-import { DsAccordionSummary } from '../DsAccordionSummary';
+import { useThemeProps } from '@mui/system';
 import { DsAccordionDetails } from '../DsAccordionDetails';
-import { DsAccordionDefaultProps } from './DsAccordion.Types';
-export class DsAccordion extends PureComponent {
-    // Since we have custome props defined merging of default props is necessary
-    getMergedProps = () => {
-        return { ...DsAccordionDefaultProps, ...this.props };
-    };
-    render() {
-        const mergedProps = this.getMergedProps();
-        const { header, HeaderProps, summary, SummaryProps, expandIcon, ...AccordionProps } = mergedProps;
-        return (_jsxs(Accordion, { ...AccordionProps, children: [_jsx(DsAccordionSummary, { expandIcon: expandIcon, ...HeaderProps, children: header }), summary && (_jsx(DsAccordionDetails, { ...SummaryProps, children: summary }))] }));
-    }
-}
+import { DsAccordionSummary } from '../DsAccordionSummary';
+import { DsRemixIcon } from '../DsRemixIcon';
+export const DsAccordion = inProps => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'MuiAccordion'
+    });
+    const { header, HeaderProps, summary, SummaryProps, expandIcon = (_jsx(DsRemixIcon, { className: "ri-arrow-drop-down-line", fontSize: "bitterCold" })), ...AccordionProps } = props;
+    return (_jsxs(Accordion, { ...AccordionProps, children: [_jsx(DsAccordionSummary, { expandIcon: expandIcon, ...HeaderProps, children: header }), summary && (_jsx(DsAccordionDetails, { ...SummaryProps, children: summary }))] }));
+};

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

@@ -4,7 +4,7 @@ export declare const DsAccordionOverrides: {
         styleOverrides: {
             root: {
                 backgroundColor: string;
-                boxShadow: string;
+                backgroundImage: string;
                 overflow: string;
                 '&:not(:first-of-type):not(.Mui-expanded)': {
                     marginTop: string;

package/dist/Components/DsAccordion/DsAccordion.Overrides.js

@@ -5,7 +5,7 @@ export const DsAccordionOverrides = {
         styleOverrides: {
             root: {
                 backgroundColor: 'var(--ds-colour-surfacePrimary)',
-                boxShadow: 'var(--ds-elevation--1)',
+                backgroundImage: 'none',
                 overflow: 'hidden',
                 '&:not(:first-of-type):not(.Mui-expanded)': {
                     marginTop: '-1px'

package/dist/Components/DsAccordion/DsAccordion.Types.js

@@ -1,7 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DsRemixIcon } from '../DsRemixIcon';
 export const DsAccordionDefaultProps = {
+    elevation: -1,
     header: '',
-    summary: '',
-    expandIcon: (_jsx(DsRemixIcon, { className: "ri-arrow-drop-down-line", fontSize: "bitterCold" }))
+    summary: ''
 };

package/dist/Components/DsDivider/DsDivider.Overrides.js

@@ -14,13 +14,23 @@ export const DsDividerOverrides = {
             {
                 props: { 'ds-size': 'M' },
                 style: {
-                    borderWidth: '0.5px'
+                    '&::before': {
+                        borderWidth: '0.5px'
+                    },
+                    '&::after': {
+                        borderWidth: '0.5px'
+                    }
                 }
             },
             {
                 props: { 'ds-size': 'L' },
                 style: {
-                    borderWidth: '6px'
+                    '&::before': {
+                        borderWidth: '6px'
+                    },
+                    '&::after': {
+                        borderWidth: '6px'
+                    }
                 }
             }
         ]

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

@@ -1,10 +1,6 @@
 export declare const DsPaperOverrides: {
     MuiPaper: {
         defaultProps: import("./DsPaper.Types").DsPaperProps;
-    };
-    styleOverrides: {
-        root: {
-            boxShadow: string;
-        };
+        styleOverrides: {};
     };
 };

package/dist/Components/DsPaper/DsPaper.Overrides.js

@@ -1,11 +1,7 @@
 import { DsPaperDefaultProps } from './DsPaper.Types';
 export const DsPaperOverrides = {
     MuiPaper: {
-        defaultProps: DsPaperDefaultProps
-    },
-    styleOverrides: {
-        root: {
-            boxShadow: 'var(--ds-elevation-0)'
-        }
+        defaultProps: DsPaperDefaultProps,
+        styleOverrides: {}
     }
 };

package/dist/Components/DsPaper/DsPaper.Types.js

@@ -1 +1,3 @@
-export const DsPaperDefaultProps = {};
+export const DsPaperDefaultProps = {
+    elevation: 0
+};

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

@@ -9,7 +9,7 @@ export declare class DsProgressTracker extends PureComponent<DsProgressTrackerPr
             orientation?: import("@mui/material").Orientation;
         };
         'ds-variant': "default" | "header" | "steps";
-        steps: import("./DsProgressTracker.Types").DsProgressTrackerStepProps[];
+        steps: import("./DsProgressStepper.Types").DsProgressStepperStepProps[];
         activeStep: number;
         sx?: import("../DsBox").DsBoxProps;
         nextStepLabelPrefix: React.ReactNode;

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

@@ -1,12 +1,9 @@
 import { DsBoxProps } from '../DsBox';
-import { DsProgressStepperProps } from './DsProgressStepper.Types';
-export interface DsProgressTrackerStepProps {
-    stepName: string;
-}
+import { DsProgressStepperProps, DsProgressStepperStepProps } from './DsProgressStepper.Types';
 export interface DsProgressTrackerProps {
     /** This property can be used to switch between different variants of Progress Indicator where Default will provide a view with expand functionality on click, setsp only provide setp names without header and header provides a header with steps indicator without expandable stepper. */
     'ds-variant': 'default' | 'header' | 'steps';
-    steps: DsProgressTrackerStepProps[];
+    steps: DsProgressStepperStepProps[];
     activeStep: number;
     StepperProps?: Omit<DsProgressStepperProps, 'activeStep' | 'steps' | 'ref'>;
     sx?: DsBoxProps;

package/dist/Theme/componentOverrides.d.ts

@@ -719,11 +719,7 @@ declare const componentOverrides: {
     };
     MuiPaper: {
         defaultProps: import("../Components").DsPaperProps;
-    };
-    styleOverrides: {
-        root: {
-            boxShadow: string;
-        };
+        styleOverrides: {};
     };
     MuiMenuItem: {
         styleOverrides: {
@@ -1372,7 +1368,7 @@ declare const componentOverrides: {
         styleOverrides: {
             root: {
                 backgroundColor: string;
-                boxShadow: string;
+                backgroundImage: string;
                 overflow: string;
                 '&:not(:first-of-type):not(.Mui-expanded)': {
                     marginTop: string;

package/dist/Theme/elevation.d.ts

@@ -1,3 +1,4 @@
-import { DsElevation } from '../Types';
+import { DsElevation, DsShadows } from '../Types';
 declare const dsElevation: DsElevation;
+export declare const dsShadows: DsShadows;
 export default dsElevation;

package/dist/Theme/elevation.js

@@ -12,4 +12,32 @@ const dsElevation = {
     16: '0px 16px 24px rgba(0, 0, 0, 0.08)',
     24: '0px 24px 40px rgba(0, 0, 0, 0.08)'
 };
+export const dsShadows = [
+    '0px 0px 10px rgba(0, 0, 0, 0.1)',
+    '0px 0px 2px rgba(0, 0, 0, 0.1)',
+    '0px 2px 4px rgba(0, 0, 0, 0.08)',
+    '0px 3px 4px rgba(0, 0, 0, 0.08)',
+    '0px 4px 6px rgba(0, 0, 0, 0.08)',
+    'none',
+    '0px 6px 10px rgba(0, 0, 0, 0.08)',
+    'none',
+    '0px 8px 12px rgba(0, 0, 0, 0.08)',
+    '0px 9px 14px rgba(0, 0, 0, 0.08)',
+    'none',
+    'none',
+    '0px 12px 20px rgba(0, 0, 0, 0.08)',
+    'none',
+    'none',
+    'none',
+    '0px 16px 24px rgba(0, 0, 0, 0.08)',
+    'none',
+    'none',
+    'none',
+    'none',
+    'none',
+    'none',
+    'none',
+    '0px 24px 40px rgba(0, 0, 0, 0.08)'
+];
+dsShadows[-1] = 'none';
 export default dsElevation;

package/dist/Theme/index.d.ts

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

package/dist/Theme/index.js

@@ -5,7 +5,7 @@ import breakpoints from './breakpoints';
 import componentOverrides from './componentOverrides';
 import dsRules from './rules';
 import dsSpacing, { dsSpacingCssVars, SPACE_COEFFICIENT } from './spacing';
-import dsElevation from './elevation';
+import dsElevation, { dsShadows } from './elevation';
 import { PALETTE, FONT_FAMILY_NAME } from '../Constants';
 import { DSTYPOGRAPHY_TOKENS } from '../Constants';
 import dsRadius from './radius';
@@ -30,7 +30,8 @@ export function getTheme(palette = PALETTE, fontFamilyName = FONT_FAMILY_NAME, t
         shape: { borderRadius: 2 },
         breakpoints,
         typography,
-        spacing: (input) => input * SPACE_COEFFICIENT
+        spacing: (input) => input * SPACE_COEFFICIENT,
+        shadows: dsShadows
     };
     let theme = extendTheme(cssVarsThemeOptions, ...(themeArgs || []));
     theme = responsiveFontSizes(theme, {

package/dist/Types/DsElevation.d.ts

@@ -1,4 +1,5 @@
-export type DsElevationKeys = '-1' | 0 | 1 | 2 | 3 | 4 | 6 | 8 | 9 | 12 | 16 | 24;
+export type DsElevationKeys = -1 | 0 | 1 | 2 | 3 | 4 | 6 | 8 | 9 | 12 | 16 | 24;
 export type DsElevation = {
     [key in DsElevationKeys]: string;
 };
+export type DsShadows = string[];

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

@@ -1 +1,45 @@
+export { AnimatedAreaProps as DsAnimatedAreaProps } from '@mui/x-charts';
+export { AnimatedLineProps as DsAnimatedLineProps } from '@mui/x-charts';
+export { AreaElementProps as DsAreaElementProps } from '@mui/x-charts';
+export { AreaPlotProps as DsAreaPlotProps } from '@mui/x-charts';
+export { BarChartProps as DsBarChartProps } from '@mui/x-charts';
+export { BarElementProps as DsBarElementProps } from '@mui/x-charts';
+export { BarLabelProps as DsBarLabelProps } from '@mui/x-charts';
+export { BarPlotProps as DsBarPlotProps } from '@mui/x-charts';
+export { ChartContainerProps as DsChartContainerProps } from '@mui/x-charts';
+export { ChartsAxisProps as DsChartsAxisProps } from '@mui/x-charts';
+export { ChartsAxisHighlightProps as DsChartsAxisHighlightProps } from '@mui/x-charts';
+export { ChartsClipPathProps as DsChartsClipPathProps } from '@mui/x-charts';
+export { ChartsGridProps as DsChartsGridProps } from '@mui/x-charts';
+export { ChartsLegendProps as DsChartsLegendProps } from '@mui/x-charts';
+export { ChartsOnAxisClickHandlerProps as DsChartsOnAxisClickHandlerProps } from '@mui/x-charts';
+export { ChartsSurfaceProps as DsChartsSurfaceProps } from '@mui/x-charts';
+export { ChartsTextProps as DsChartsTextProps } from '@mui/x-charts';
+export { ChartsTooltipProps as DsChartsTooltipProps } from '@mui/x-charts';
+export { ChartsVoronoiHandlerProps as DsChartsVoronoiHandlerProps } from '@mui/x-charts';
+export { ChartsXAxisProps as DsChartsXAxisProps } from '@mui/x-charts';
+export { ChartsYAxisProps as DsChartsYAxisProps } from '@mui/x-charts';
+export { ChartsAxisContentProps as DsChartsAxisContentProps } from '@mui/x-charts';
+export { ChartsItemContentProps as DsChartsItemContentProps } from '@mui/x-charts';
+export { LegendRendererProps as DsLegendRendererProps } from '@mui/x-charts';
+export { GaugeProps as DsGaugeProps } from '@mui/x-charts';
+export { GaugeContainerProps as DsGaugeContainerProps } from '@mui/x-charts';
+export { LineChartProps as DsLineChartProps } from '@mui/x-charts';
+export { LineElementProps as DsLineElementProps } from '@mui/x-charts';
+export { LineHighlightElementProps as DsLineHighlightElementProps } from '@mui/x-charts';
+export { LineHighlightPlotProps as DsLineHighlightPlotProps } from '@mui/x-charts';
+export { LinePlotProps as DsLinePlotProps } from '@mui/x-charts';
+export { MarkElementProps as DsMarkElementProps } from '@mui/x-charts';
+export { MarkPlotProps as DsMarkPlotProps } from '@mui/x-charts';
+export { PieArcProps as DsPieArcProps } from '@mui/x-charts';
+export { PieArcLabelProps as DsPieArcLabelProps } from '@mui/x-charts';
+export { PieArcLabelPlotProps as DsPieArcLabelPlotProps } from '@mui/x-charts';
+export { PieArcPlotProps as DsPieArcPlotProps } from '@mui/x-charts';
+export { PieChartProps as DsPieChartProps } from '@mui/x-charts';
+export { PiePlotProps as DsPiePlotProps } from '@mui/x-charts';
+export { ResponsiveChartContainerProps as DsResponsiveChartContainerProps } from '@mui/x-charts';
+export { ScatterProps as DsScatterProps } from '@mui/x-charts';
+export { ScatterChartProps as DsScatterChartProps } from '@mui/x-charts';
+export { ScatterPlotProps as DsScatterPlotProps } from '@mui/x-charts';
+export { SparkLineChartProps as DsSparkLineChartProps } from '@mui/x-charts';
 export * from './DsDataVisColors.Types';

package/package.json

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