@am92/react-design-system 3.0.1-beta.1 → 3.0.1-beta.2

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

@@ -11,6 +11,9 @@ export const DsButtonOverrides = {
                     cursor: 'not-allowed',
                     pointerEvents: 'all'
                 },
+                '.MuiIcon-root': {
+                    fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
+                },
                 variants: [
                     {
                         props: { variant: 'flushed' },

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

@@ -16,23 +16,26 @@ export const DsFabOverrides = {
                     fontSize: 'var(--ds-typo-bodyBoldMedium-fontSize)',
                     lineHeight: 'var(--ds-typo-bodyBoldMedium-lineHeight)',
                     letterSpacing: 'var(--ds-typo-bodyBoldMedium-letterSpacing)'
+                },
+                '.MuiIcon-root': {
+                    fontWeight: 'var(--ds-typo-bodyRegularMedium-fontWeight)',
                 }
             },
             sizeLarge: {
                 padding: 'var(--ds-spacing-cool)',
-                '> .MuiSvgIcon-root': {
+                '> .MuiIcon-root': {
                     fontSize: 'var(--ds-typo-fontSizePleasant)'
                 }
             },
             sizeMedium: {
                 padding: 'var(--ds-spacing-bitterCold)',
-                '> .MuiSvgIcon-root': {
+                '> .MuiIcon-root': {
                     fontSize: 'var(--ds-typo-fontSizeMild)'
                 }
             },
             sizeSmall: {
                 padding: 'var(--ds-spacing-frostbite)',
-                '> .MuiSvgIcon-root': {
+                '> .MuiIcon-root': {
                     fontSize: 'var(--ds-typo-fontSizeCool)'
                 }
             },

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

@@ -3,7 +3,7 @@ export declare const DsInputAdornmentOverrides: {
         styleOverrides: {
             root: {
                 color: string;
-                '& .MuiSvgIcon-root': {
+                '& .MuiIcon-root': {
                     cursor: string;
                 };
             };

package/dist/Components/DsInputAdornment/DsInputAdornment.Overrides.js

@@ -3,7 +3,7 @@ export const DsInputAdornmentOverrides = {
         styleOverrides: {
             root: {
                 color: 'var(--ds-colour-iconDefault)',
-                '& .MuiSvgIcon-root': {
+                '& .MuiIcon-root': {
                     cursor: 'pointer'
                 }
             },

package/dist/Components/DsLoader/SingleDotLoader.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEmotionNonce } from "../../Hooks/nonce";
 export function SingleDotLoader() {
+    const nonce = useEmotionNonce();
     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 {
+        }, children: [_jsxs("defs", { children: [_jsx("clipPath", { id: "__loader_element_11", children: _jsx("rect", { width: "1000", height: "1000", x: "0", y: "0" }) }), _jsx("style", { nonce: nonce, children: `@keyframes ball {
   0%{
     transform: matrix(2.428800106048584,0,0,2.428800106048584,491.30035400390625,444.7691650390625)
   }

package/dist/Components/DsLoader/ThreeDotLoader.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEmotionNonce } from "../../Hooks/nonce";
 export function ThreeDotLoader() {
+    const nonce = useEmotionNonce();
     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_524`, children: _jsx("rect", { width: "1000", height: "1000", x: "0", y: "0" }) }), _jsx("style", { children: `@keyframes ball1 {
+        }, children: [_jsxs("defs", { children: [_jsx("clipPath", { id: `__loader_element_524`, children: _jsx("rect", { width: "1000", height: "1000", x: "0", y: "0" }) }), _jsx("style", { nonce: nonce, children: `@keyframes ball1 {
   0%{
     transform: matrix(1.3200000524520874,0,0,1.3200000524520874,178.98719787597656,413.82720947265625)
   }

package/dist/Components/DsProgressTracker/Components/DsProgressTrackerHeader.Component.js

@@ -20,10 +20,10 @@ export const DsProgressTrackerHeader = (props) => {
                 ? lastStepLabelText
                 : `${nextStepLabelPrefix} ${nextStep.stepName}` }));
     };
-    return (_jsx(_Fragment, { children: dense ? (_jsxs(DsStack, { sx: {
+    return (_jsx(_Fragment, { children: dense ? (_jsxs(DsStack, { ...wrapperProps, sx: {
                 backgroundColor: 'var(--ds-colour-surfaceSecondary)',
                 ...wrapperProps?.sx
-            }, ...wrapperProps, children: [_jsxs(DsStack, { direction: 'row', onClick: onClick, sx: {
+            }, children: [_jsxs(DsStack, { direction: 'row', onClick: onClick, sx: {
                         justifyContent: 'space-between',
                         px: 'var(--ds-spacing-bitterCold)',
                         pt: 'var(--ds-spacing-frostbite)',
@@ -34,14 +34,14 @@ export const DsProgressTrackerHeader = (props) => {
                         '.MuiLinearProgress-bar1Determinate	': {
                             borderRadius: '1px'
                         }
-                    } })] })) : (_jsxs(DsStack, { sx: {
+                    } })] })) : (_jsxs(DsStack, { ...wrapperProps, sx: {
                 p: 'var(--ds-spacing-bitterCold)',
                 alignItems: 'center',
                 borderBottom: '1px solid var(--ds-colour-strokeDefault)',
                 backgroundColor: 'var(--ds-colour-surfaceBackground)',
                 cursor: props['ds-variant'] === 'default' ? 'pointer' : 'unset',
                 ...wrapperProps?.sx
-            }, spacing: 'var(--ds-spacing-bitterCold)', direction: 'row', onClick: onClick, ...wrapperProps, children: [_jsx(DsProgressIndicator, { activeStep: activeStep + 1, steps: steps.length }), _jsxs(DsStack, { spacing: 'var(--ds-spacing-quickFreeze)', sx: {
+            }, spacing: 'var(--ds-spacing-bitterCold)', direction: 'row', onClick: onClick, children: [_jsx(DsProgressIndicator, { activeStep: activeStep + 1, steps: steps.length }), _jsxs(DsStack, { spacing: 'var(--ds-spacing-quickFreeze)', sx: {
                         flexGrow: 1
                     }, children: [_jsx(DsTypography, { component: 'div', variant: 'headingBoldExtraSmall', sx: {
                                 textAlign: 'right',

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

@@ -30,7 +30,7 @@ export declare const DsToastOverrides: {
                 '.MuiIconButton-root': {
                     fontSize: string;
                 };
-                '.MuiSvgIcon-root': {
+                '.MuiIcon-root': {
                     fontSize: string;
                 };
             };

package/dist/Components/DsToast/DsToast.Overrides.js

@@ -31,7 +31,7 @@ export const DsToastOverrides = {
                 '.MuiIconButton-root': {
                     fontSize: 'var(--ds-typo-fontSizeMild)'
                 },
-                '.MuiSvgIcon-root': {
+                '.MuiIcon-root': {
                     fontSize: 'inherit'
                 }
             },

package/dist/Constants/PALETTE.js

@@ -18,7 +18,7 @@ export const PALETTE = {
     secondaryGrey30: '#E2E2E2',
     secondaryGrey20: '#F1F1F1',
     secondaryGrey10: '#F9F9F9',
-    tertiary100: '#12877F',
+    tertiary100: '#0C746C',
     tertiary80: '#49A49E',
     tertiary60: '#81C1BD',
     tertiary40: '#B8DDDB',

package/dist/Hooks/nonce.d.ts

@@ -0,0 +1 @@
+export declare const useEmotionNonce: () => string | undefined;

package/dist/Hooks/nonce.js

@@ -0,0 +1,5 @@
+import { __unsafe_useEmotionCache } from '@emotion/react';
+export const useEmotionNonce = () => {
+    const cache = __unsafe_useEmotionCache();
+    return cache?.nonce;
+};

package/dist/Theme/componentOverrides.d.ts

@@ -438,7 +438,7 @@ declare const componentOverrides: {
                 '.MuiIconButton-root': {
                     fontSize: string;
                 };
-                '.MuiSvgIcon-root': {
+                '.MuiIcon-root': {
                     fontSize: string;
                 };
             };
@@ -819,7 +819,7 @@ declare const componentOverrides: {
         styleOverrides: {
             root: {
                 color: string;
-                '& .MuiSvgIcon-root': {
+                '& .MuiIcon-root': {
                     cursor: string;
                 };
             };

package/dist/Theme/getColorScheme/highContrast.js

@@ -32,7 +32,7 @@ export default function getHighContrastModeColorScheme(colorPalette) {
         iconActionPrimary: highContrast1,
         iconActionSecondary: highContrast1,
         iconActionTertiary: highContrast1,
-        iconOnSurface: primaryWhite,
+        iconOnSurface: primaryBlackLight,
         iconDisabled: secondaryGrey60,
         iconDefault: primaryWhite,
         iconTypical: highContrast2,

package/dist/Theme/getColorScheme/light.js

@@ -11,8 +11,8 @@ export default function getLightModeColorScheme(colorPalette) {
         surfaceSecondary: secondaryGrey10,
         surfaceTertiary: secondaryGrey100,
         typoPrimary: primaryBlackLight,
-        typoSecondary: secondaryGrey80,
-        typoTertiary: secondaryGrey60,
+        typoSecondary: secondaryGrey90,
+        typoTertiary: secondaryGrey80,
         typoActionPrimary: primary,
         typoActionSecondary: secondary100,
         typoActionTertiary: tertiary100,

package/dist/emotionReact.d.ts

@@ -0,0 +1 @@
+export { CacheProvider as DsCacheProvider } from '@emotion/react';

package/dist/emotionReact.js

@@ -0,0 +1 @@
+export { CacheProvider as DsCacheProvider } from '@emotion/react';

package/dist/index.d.ts

@@ -11,3 +11,4 @@ export * from './utils';
 export * from './x-datepicker';
 export * from './x-charts';
 export * from './Hooks';
+export * from './emotionReact';

package/dist/index.js

@@ -11,3 +11,4 @@ export * from './utils';
 export * from './x-datepicker';
 export * from './x-charts';
 export * from './Hooks';
+export * from './emotionReact';

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

@@ -21,6 +21,8 @@ export { ChartsYAxis as DsChartsYAxis } from '@mui/x-charts';
 export { ContinuousColorLegend as DsContinuousColorLegend } from '@mui/x-charts';
 export { ChartsAxisTooltipContent as DsChartsAxisTooltipContent } from '@mui/x-charts';
 export { ChartsItemTooltipContent as DsChartsItemTooltipContent } from '@mui/x-charts';
+export { ChartsTooltipContainer as DsChartsTooltipContainer } from '@mui/x-charts';
+export { ChartDataProvider as DsChartDataProvider } 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';

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

@@ -21,6 +21,8 @@ export { ChartsYAxis as DsChartsYAxis } from '@mui/x-charts';
 export { ContinuousColorLegend as DsContinuousColorLegend } from '@mui/x-charts';
 export { ChartsAxisTooltipContent as DsChartsAxisTooltipContent } from '@mui/x-charts';
 export { ChartsItemTooltipContent as DsChartsItemTooltipContent } from '@mui/x-charts';
+export { ChartsTooltipContainer as DsChartsTooltipContainer } from '@mui/x-charts';
+export { ChartDataProvider as DsChartDataProvider } 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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@am92/react-design-system",
-  "version": "3.0.1-beta.1",
+  "version": "3.0.1-beta.2",
   "description": "ReactJS Design System using Material UI",
   "sideEffects": false,
   "types": "dist/index.d.ts",
@@ -13,8 +13,8 @@
     "dist/**/*.json"
   ],
   "dependencies": {
-    "@emotion/react": "~11.11.4",
-    "@emotion/styled": "~11.11.0",
+    "@emotion/react": "~11.14.0",
+    "@emotion/styled": "~11.14.0",
     "@mui/material": "^7.0.0",
     "@mui/system": "^7.0.0",
     "@mui/x-charts": "~8.0.0",