@am92/react-design-system 2.7.7 → 2.7.8

package/dist/Components/DsButton/DsButton.Overrides.js

@@ -52,8 +52,8 @@ export const DsButtonOverrides = {
                     borderColor: 'var(--ds-colour-strokeDefault)',
                     color: 'var(--ds-colour-typoActionPrimary)',
                     '&:disabled': {
-                        backgroundColor: 'var(--ds-colour-stateDisabledSurface)',
-                        color: 'var(--ds-colour-typoDisabled)'
+                        backgroundColor: 'var(--ds-colour-stateUnselectedDefault)',
+                        color: 'var(--ds-colour-typoOnSurface)'
                     },
                     ...STATE_STYLES.SURFACE_SECONDARY_STATE_PRIMARY
                 }

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

@@ -19,6 +19,9 @@ export const DsDividerOverrides = {
                     },
                     '&::after': {
                         borderWidth: '0.5px'
+                    },
+                    '&:not(.MuiDivider-withChildren)': {
+                        borderWidth: '0.5px'
                     }
                 }
             },
@@ -30,6 +33,9 @@ export const DsDividerOverrides = {
                     },
                     '&::after': {
                         borderWidth: '6px'
+                    },
+                    '&:not(.MuiDivider-withChildren)': {
+                        borderWidth: '6px'
                     }
                 }
             }

package/dist/Components/DsRadio/DsRadio.Component.js

@@ -8,6 +8,6 @@ export class DsRadio extends PureComponent {
     static defaultProps = DsRadioDefaultProps;
     render() {
         const { disabled, RadioProps, ...restProps } = this.props;
-        return (_jsx(DsFormControlLabel, { ...restProps, disabled: disabled, control: _jsx(Radio, { icon: _jsx(DsRemixIcon, { className: "ri-checkbox-blank-circle-line", sx: { fontSize: 'var(--ds-typo-fontSizeCool)' } }), checkedIcon: _jsx(DsRemixIcon, { className: "ri-radio-button-line", sx: { fontSize: 'var(--ds-typo-fontSizeCool)' } }), color: "secondary", ...RadioProps, disabled: disabled }) }));
+        return (_jsx(DsFormControlLabel, { ...restProps, disabled: disabled, control: _jsx(Radio, { icon: _jsx(DsRemixIcon, { className: "ri-checkbox-blank-circle-line", sx: { fontSize: 'var(--ds-typo-fontSizeBitterCold)' } }), checkedIcon: _jsx(DsRemixIcon, { className: "ri-radio-button-line", sx: { fontSize: 'var(--ds-typo-fontSizeBitterCold)' } }), color: "secondary", ...RadioProps, disabled: disabled }) }));
     }
 }

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

@@ -1 +1,9 @@
-export declare const DsRadioOverrides: {};
+export declare const DsRadioOverrides: {
+    MuiRadio: {
+        styleOverrides: {
+            root: {
+                padding: string;
+            };
+        };
+    };
+};

package/dist/Components/DsRadio/DsRadio.Overrides.js

@@ -1 +1,9 @@
-export const DsRadioOverrides = {};
+export const DsRadioOverrides = {
+    MuiRadio: {
+        styleOverrides: {
+            root: {
+                padding: 'var(--ds-spacing-quickFreeze)'
+            }
+        }
+    }
+};

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

@@ -1 +1,3 @@
-export { default as DsRadioGroup } from '@mui/material/RadioGroup';
+import { FC } from 'react';
+import { DsRadioGroupProps } from './DsRadioGroup.Types';
+export declare const DsRadioGroup: FC<DsRadioGroupProps>;

package/dist/Components/DsRadioGroup/DsRadioGroup.Component.js

@@ -1 +1,10 @@
-export { default as DsRadioGroup } from '@mui/material/RadioGroup';
+import { jsx as _jsx } from "react/jsx-runtime";
+import RadioGroup from '@mui/material/RadioGroup';
+export const DsRadioGroup = props => {
+    return (_jsx(RadioGroup, { ...props, sx: {
+            '> *:nth-last-child(n+2)': {
+                marginBottom: 'var(--ds-spacing-glacial)'
+            },
+            ...props.sx
+        } }));
+};

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

@@ -4,6 +4,9 @@ export declare const DsSelectOverrides: {
         styleOverrides: {
             icon: {
                 color: string;
+                '.MuiInputBase-root.Mui-readOnly &': {
+                    color: string;
+                };
             };
         };
     };

package/dist/Components/DsSelect/DsSelect.Overrides.js

@@ -4,7 +4,10 @@ export const DsSelectOverrides = {
         defaultProps: DsSelectDefaultProps,
         styleOverrides: {
             icon: {
-                color: 'var(--ds-colour-iconDefault)'
+                color: 'var(--ds-colour-iconDefault)',
+                '.MuiInputBase-root.Mui-readOnly &': {
+                    color: 'var(--ds-colour-iconDisabled)'
+                }
             }
         }
     }

package/dist/Components/DsSelect/DsSelect.Types.js

@@ -1,6 +1,6 @@
 export const DsSelectDefaultProps = {
     options: [],
-    variant: 'filled',
+    variant: 'outlined',
     defaultValue: '',
     MenuProps: {
         anchorOrigin: {

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

@@ -2,8 +2,9 @@ import { CSSInterpolation } from '@mui/system';
 export declare const DsStepConnectorOverrides: {
     MuiStepConnector: {
         styleOverrides: {
+            horizontal: CSSInterpolation;
             lineVertical: CSSInterpolation;
-            vertical: CSSInterpolation;
+            lineHorizontal: CSSInterpolation;
         };
     };
 };

package/dist/Components/DsStepConnector/DsStepConnector.Overrides.js

@@ -1,14 +1,21 @@
 export const DsStepConnectorOverrides = {
     MuiStepConnector: {
         styleOverrides: {
+            horizontal: {
+                left: 'calc(-50% + 13px)',
+                right: 'calc(50% + 11px)'
+            },
             lineVertical: {
                 borderLeftWidth: '2px',
                 borderLeftStyle: 'solid',
                 borderLeftColor: 'var(--ds-colour-strokeDefault)',
                 minHeight: 'var(--ds-rules-stepperConnectorMinHeight)'
             },
-            vertical: {
-                marginLeft: '27px'
+            lineHorizontal: {
+                borderTopWidth: '2px',
+                borderTopStyle: 'solid',
+                borderColor: 'var(--ds-colour-strokeDefault)',
+                minHeight: 'var(--ds-rules-stepperConnectorMinHeight)'
             }
         }
     }

package/dist/Components/DsStepLabel/DsStepLabel.Overrides.js

@@ -8,10 +8,10 @@ export const DsStepLabelOverrides = {
                 paddingBottom: 'var(--ds-spacing-zero)'
             },
             label: {
-                fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
-                fontSize: 'var(--ds-typo-bodyRegularMedium-fontSize)',
-                lineHeight: 'var(--ds-typo-bodyRegularMedium-lineHeight)',
-                letterSpacing: 'var(--ds-typo-bodyRegularMedium-letterSpacing)',
+                fontWeight: 'var(--ds-typo-bodyRegularSmall-fontWeight)',
+                fontSize: 'var(--ds-typo-bodyRegularSmall-fontSize)',
+                lineHeight: 'var(--ds-typo-bodyRegularSmall-lineHeight)',
+                letterSpacing: 'var(--ds-typo-bodyRegularSmall-letterSpacing)',
                 textTransform: 'none',
                 color: 'var(--ds-colour-typoPrimary)',
                 marginLeft: 'var(--ds-spacing-mild)',

package/dist/Theme/componentOverrides.d.ts

@@ -599,8 +599,9 @@ declare const componentOverrides: {
     };
     MuiStepConnector: {
         styleOverrides: {
+            horizontal: import("@mui/system").CSSInterpolation;
             lineVertical: import("@mui/system").CSSInterpolation;
-            vertical: import("@mui/system").CSSInterpolation;
+            lineHorizontal: import("@mui/system").CSSInterpolation;
         };
     };
     MuiSlider: {
@@ -714,6 +715,16 @@ declare const componentOverrides: {
         styleOverrides: {
             icon: {
                 color: string;
+                '.MuiInputBase-root.Mui-readOnly &': {
+                    color: string;
+                };
+            };
+        };
+    };
+    MuiRadio: {
+        styleOverrides: {
+            root: {
+                padding: string;
             };
         };
     };

package/dist/Theme/getColorScheme/dark.js

@@ -18,7 +18,7 @@ export default function getDarkModeColorScheme(colorPalette) {
         typoActionTertiary: tertiary10,
         typoOnSurface: primaryWhite,
         typoDisabled: secondaryGrey60,
-        typoTypical: typical,
+        typoTypical: snackBlueNeutralDark,
         typoOnSurfaceDynamic: primaryBlackLight,
         neutral1: neutral1Dark,
         neutral2: neutral2Dark,
@@ -35,7 +35,7 @@ export default function getDarkModeColorScheme(colorPalette) {
         iconOnSurface: primaryWhite,
         iconDisabled: secondaryGrey60,
         iconDefault: primaryWhite,
-        iconTypical: typical,
+        iconTypical: snackBlueNeutralDark,
         iconOnSurfaceDynamic: primaryBlackLight,
         strokeDefault: secondaryGrey80,
         strokeSelected: secondary60,
@@ -47,7 +47,7 @@ export default function getDarkModeColorScheme(colorPalette) {
         supportPositive: successGreenDark,
         supportWarning: warningOrangeDark,
         supportVariable: snackBlue,
-        supportTypical: typical,
+        supportTypical: snackBlueNeutralDark,
         supportNegativeNeutral: errorRedNeutralDark,
         supportPositiveNeutral: successGreenNeutralDark,
         supportWarningNeutral: warningOrangeNeutralDark,
@@ -61,7 +61,7 @@ export default function getDarkModeColorScheme(colorPalette) {
         stateUnselectedHover: hexToRgbA(secondaryGrey50, 0.2),
         stateUnselectedPressed: hexToRgbA(secondaryGrey50, 0.25),
         stateDisabledSurface: secondaryGrey100,
-        overlay: hexToRgbA(primaryBlack, 0.8),
+        overlay: hexToRgbA(primaryBlack, 0.5),
         overlayLoader: hexToRgbA(primaryBlack, 0.3),
         dotLoader: primaryWhite
     };

package/dist/Theme/getColorScheme/highContrast.js

@@ -61,7 +61,7 @@ export default function getHighContrastModeColorScheme(colorPalette) {
         stateUnselectedHover: hexToRgbA(secondaryGrey50, 0.2),
         stateUnselectedPressed: hexToRgbA(secondaryGrey50, 0.25),
         stateDisabledSurface: secondaryGrey100,
-        overlay: hexToRgbA(primaryBlack, 0.8),
+        overlay: hexToRgbA(primaryBlack, 0.5),
         overlayLoader: hexToRgbA(primaryBlack, 0.3),
         dotLoader: primaryWhite
     };

package/dist/Theme/getColorScheme/light.js

@@ -61,7 +61,7 @@ export default function getLightModeColorScheme(colorPalette) {
         stateUnselectedHover: hexToRgbA(secondaryGrey50, 0.12),
         stateUnselectedPressed: hexToRgbA(secondaryGrey50, 0.16),
         stateDisabledSurface: secondaryGrey20,
-        overlay: hexToRgbA(primaryBlack, 0.8),
+        overlay: hexToRgbA(primaryBlack, 0.5),
         overlayLoader: hexToRgbA(primaryWhite, 0.3),
         dotLoader: secondary100
     };

package/package.json

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