@groupeactual/ui-kit 0.2.1 → 0.2.3

package/dist/cjs/DesignSystemProvider.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 export interface DesignSystemContextValues {
     isDarkTheme: boolean;
-    themeName: 'default' | 'lucie';
+    themeName: string;
     toggleDarkTheme: () => void;
 }
 export declare const DesignSystemContext: import("react").Context<DesignSystemContextValues>;

package/dist/cjs/index.js

@@ -43,15 +43,15 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
 
-var __assign$1 = function() {
-    __assign$1 = Object.assign || function __assign(t) {
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
             s = arguments[i];
             for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
         }
         return t;
     };
-    return __assign$1.apply(this, arguments);
+    return __assign.apply(this, arguments);
 };
 
 function __rest(s, e) {
@@ -5652,8 +5652,8 @@ const backgroundColor = style$1({
   prop: 'backgroundColor',
   themeKey: 'palette'
 });
-const palette = compose(color, bgcolor, backgroundColor);
-var palette$1 = palette;
+const palette$1 = compose(color, bgcolor, backgroundColor);
+var palette$2 = palette$1;
 
 const position = style$1({
   prop: 'position'
@@ -5781,7 +5781,7 @@ const filterPropsMapping = {
   flexbox: flexbox$1.filterProps,
   grid: grid$1.filterProps,
   positions: positions.filterProps,
-  palette: palette$1.filterProps,
+  palette: palette$2.filterProps,
   shadows: shadows$2.filterProps,
   sizing: sizing$1.filterProps,
   spacing: spacing.filterProps,
@@ -5793,7 +5793,7 @@ const styleFunctionMapping = {
   flexbox: flexbox$1,
   grid: grid$1,
   positions,
-  palette: palette$1,
+  palette: palette$2,
   shadows: shadows$2,
   sizing: sizing$1,
   spacing,
@@ -51375,9 +51375,9 @@ process.env.NODE_ENV !== "production" ? TextField$1.propTypes
 } : void 0;
 var MuiTextField = TextField$1;
 
-var ActText = function (props) { return jsxRuntime.jsx(Typography$1, __assign$1({}, props)); };
+var ActText = function (props) { return jsxRuntime.jsx(Typography$1, __assign({}, props)); };
 
-var ActHeading = function (props) { return jsxRuntime.jsx(Typography$1, __assign$1({}, props)); };
+var ActHeading = function (props) { return jsxRuntime.jsx(Typography$1, __assign({}, props)); };
 
 var ActButton = styled$1(Button$1)(function (_a) {
     var theme = _a.theme;
@@ -51401,7 +51401,7 @@ var TextField = function (_a) {
             setInternalValue(value);
         }
     }, [value]);
-    return (jsxRuntime.jsx(MuiTextField, __assign$1({ variant: "outlined", name: name, label: label, value: internalValue, onClick: function (e) { return e.stopPropagation(); }, InputProps: {
+    return (jsxRuntime.jsx(MuiTextField, __assign({ variant: "outlined", name: name, label: label, value: internalValue, onClick: function (e) { return e.stopPropagation(); }, InputProps: {
             endAdornment: endAdornment
         }, onChange: function (e) {
             setInternalValue(e.currentTarget.value);
@@ -51419,10 +51419,10 @@ var Checkbox = function (_a) {
             setInternalValue(value);
         }
     }, [value]);
-    return (jsxRuntime.jsxs(FormControl$1, __assign$1({ fullWidth: true }, { children: [jsxRuntime.jsx(FormControlLabel$1, { sx: { display: 'table' }, control: jsxRuntime.jsx(Box$3, __assign$1({ sx: { display: 'table-cell' } }, { children: jsxRuntime.jsx(CheckboxMUI, { name: name, sx: { marginTop: -0.5 }, checked: internalValue, color: "primary", onChange: function (e) {
+    return (jsxRuntime.jsxs(FormControl$1, __assign({ fullWidth: true }, { children: [jsxRuntime.jsx(FormControlLabel$1, { sx: { display: 'table' }, control: jsxRuntime.jsx(Box$3, __assign({ sx: { display: 'table-cell' } }, { children: jsxRuntime.jsx(CheckboxMUI, { name: name, sx: { marginTop: -0.5 }, checked: internalValue, color: "primary", onChange: function (e) {
                             setInternalValue(e.target.checked);
                             onChange(name, e.target.checked, true);
-                        } }) })), label: jsxRuntime.jsx(Typography$1, __assign$1({ sx: sx }, { children: label })) }), error && (jsxRuntime.jsx(Typography$1, __assign$1({ sx: {
+                        } }) })), label: jsxRuntime.jsx(Typography$1, __assign({ sx: sx }, { children: label })) }), error && (jsxRuntime.jsx(Typography$1, __assign({ sx: {
                     marginTop: -1,
                     color: '#B80025',
                     fontWeight: 400,
@@ -51430,158 +51430,274 @@ var Checkbox = function (_a) {
                 } }, { children: error })))] })));
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-var fontSizes$1 = {
-	caption: "11px",
-	body2: "13px",
-	body1: "14px",
-	subtitle2: "18px",
-	subtitle1: "24px",
-	h2: "29px",
-	h1: "35px",
-	bigNumber: "42px",
-	title2: "55px"
-};
-var fontWeights = {
-	light: "300",
-	regular: "400",
-	medium: "500",
-	bold: "700",
-	caption: "400",
-	body2: "400",
-	body1: "400",
-	subtitle2: "500",
-	subtitle1: "400",
-	h2: "500",
-	h1: "700"
-};
-var lineHeights = {
-	caption: "12px",
-	body2: "16px",
-	body1: "18px",
-	subtitle2: "21px",
-	subtitle1: "28px",
-	h2: "34px",
-	h1: "41px"
-};
-var colors$1 = {
-	text: {
-		primary: "#272727",
-		secondary: "#545352"
-	},
-	black: "#000000",
-	white: "#FFFFFF",
-	red: "red",
-	green: "green",
-	blueClickable: "#136CAC",
-	greyDark: "#545352",
-	greyXDark: "#272727",
-	defaultBorder: "#CBCBCB",
-	greyLightBorder: "#F0F0F0",
-	redLight: "rgba(255, 0, 0, 0.04)"
-};
-var defaultTokens = {
-	fontSizes: fontSizes$1,
-	fontWeights: fontWeights,
-	lineHeights: lineHeights,
-	colors: colors$1
+/**
+ * Do not edit directly
+ * Generated on Fri, 18 Nov 2022 15:06:19 GMT
+ */
+var DefaultWebShadowAllContent = {
+    color: '#2727271f',
+    type: 'dropShadow',
+    x: '0',
+    y: '2',
+    blur: '10',
+    spread: '0'
 };
+var DefaultFontFamiliesRoboto = 'Roboto';
+var DefaultLineHeights12 = '12';
+var DefaultLineHeights16 = '16';
+var DefaultLineHeights18 = '18';
+var DefaultLineHeights21 = '21';
+var DefaultLineHeights28 = '28';
+var DefaultLineHeights34 = '34';
+var DefaultLineHeights41 = '41';
+var DefaultLineHeights49 = '49';
+var DefaultFontWeightsRoboto700 = 'Bold';
+var DefaultFontWeightsRoboto500 = 'Medium';
+var DefaultFontWeightsRoboto400 = 'Regular';
+var DefaultFontSize10 = '10';
+var DefaultFontSize12 = '12';
+var DefaultFontSize14 = '14';
+var DefaultFontSize16 = '16';
+var DefaultFontSize18 = '18';
+var DefaultFontSize24 = '24';
+var DefaultFontSize29 = '29';
+var DefaultFontSize35 = '35';
+var DefaultFontSize42 = '42';
+var DefaultLetterSpacing0 = '0%';
+var DefaultParagraphSpacing0 = '0';
+var DefaultParagraphSpacing8 = '8';
+var DefaultTextCaseNone = 'none';
+var DefaultTextDecorationNone = 'none';
+var DefaultTextDecorationUnderline = 'underline';
+var DefaultSpacingXxs = '4';
+var DefaultSpacingXs = '8';
+var DefaultSpacingSm = '16';
+var DefaultSpacingMd = '24';
+var DefaultSpacingLg = '32';
+var DefaultSpacingXl = '40';
+var DefaultSpacingXxl = '72';
+var DefaultBorderRadius4 = '4';
+var DefaultBorderRadius8 = '8';
+var DefaultBorderRadius16 = '16';
+var DefaultBorderRadius24 = '24';
+var DefaultSizingXs = '8';
+var DefaultSizingSm = '12';
+var DefaultSizingMd = '16';
+var DefaultSizingLg = '24';
+var DefaultSizingXl = '32';
+var DefaultSizingXxl = '40';
+var DefaultSizingXxxl = '72';
+var DefaultDefaultColorsRedActual = '#e40521';
+var DefaultDefaultColorsBlueClickable = '#136cac';
+var DefaultDefaultColorsBlueHoverClickable = '#004f88';
+var DefaultDefaultColorsGreyMediumInactive = '#808080';
+var DefaultDefaultColorsGreyXDark = '#272727';
+var DefaultDefaultColorsGreyDark = '#545352';
+var DefaultDefaultColorsWhite = '#ffffff';
+var DefaultDefaultColorsGreyXLight = '#f0f0f0';
+var DefaultDefaultColorsGreyXDarkBgModal = '#27272780';
+var DefaultDefaultColorsBlueHoverEquivalence12 = '#e8f1f7';
+var DefaultDefaultColorsBlueHoverOpacity12 = '#136cac1f';
+var DefaultDefaultColorsGreyLightDefaultborder = '#cbcbcb';
+var DefaultDefaultColorsBlueInfo = '#1d91c3';
+var DefaultDefaultColorsGreenSuccess = '#23956d';
+var DefaultDefaultColorsOrangeWarning = '#e46221';
+var DefaultDefaultColorsRedError = '#b80025';
+var DefaultDefaultColorsBlueDark = '#0d2c54';
+var DefaultDefaultColorsBlueMedium = '#3d5a80';
+var DefaultDefaultColorsBlueLight = '#7fdcea';
+var DefaultDefaultColorsGreenDark = '#125e42';
+var DefaultDefaultColorsGreenMedium = '#1f8461';
+var DefaultDefaultColorsGreen = '#5dca8b';
+var DefaultDefaultColorsGreenLight = '#bad07a';
+var DefaultDefaultColorsBrown = '#6f2902';
+var DefaultDefaultColorsBrownLight = '#b65700';
+var DefaultDefaultColorsOrangeLight = '#f59b00';
+var DefaultDefaultColorsYellow = '#f9d25e';
+var DefaultDefaultColorsPurpleDark = '#530d48';
+var DefaultDefaultColorsPurple = '#831443';
+var DefaultDefaultColorsPink = '#ca1e5c';
+var DefaultDefaultColorsPinkLight = '#fd6972';
+
+var tokens = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DefaultWebShadowAllContent: DefaultWebShadowAllContent,
+    DefaultFontFamiliesRoboto: DefaultFontFamiliesRoboto,
+    DefaultLineHeights12: DefaultLineHeights12,
+    DefaultLineHeights16: DefaultLineHeights16,
+    DefaultLineHeights18: DefaultLineHeights18,
+    DefaultLineHeights21: DefaultLineHeights21,
+    DefaultLineHeights28: DefaultLineHeights28,
+    DefaultLineHeights34: DefaultLineHeights34,
+    DefaultLineHeights41: DefaultLineHeights41,
+    DefaultLineHeights49: DefaultLineHeights49,
+    DefaultFontWeightsRoboto700: DefaultFontWeightsRoboto700,
+    DefaultFontWeightsRoboto500: DefaultFontWeightsRoboto500,
+    DefaultFontWeightsRoboto400: DefaultFontWeightsRoboto400,
+    DefaultFontSize10: DefaultFontSize10,
+    DefaultFontSize12: DefaultFontSize12,
+    DefaultFontSize14: DefaultFontSize14,
+    DefaultFontSize16: DefaultFontSize16,
+    DefaultFontSize18: DefaultFontSize18,
+    DefaultFontSize24: DefaultFontSize24,
+    DefaultFontSize29: DefaultFontSize29,
+    DefaultFontSize35: DefaultFontSize35,
+    DefaultFontSize42: DefaultFontSize42,
+    DefaultLetterSpacing0: DefaultLetterSpacing0,
+    DefaultParagraphSpacing0: DefaultParagraphSpacing0,
+    DefaultParagraphSpacing8: DefaultParagraphSpacing8,
+    DefaultTextCaseNone: DefaultTextCaseNone,
+    DefaultTextDecorationNone: DefaultTextDecorationNone,
+    DefaultTextDecorationUnderline: DefaultTextDecorationUnderline,
+    DefaultSpacingXxs: DefaultSpacingXxs,
+    DefaultSpacingXs: DefaultSpacingXs,
+    DefaultSpacingSm: DefaultSpacingSm,
+    DefaultSpacingMd: DefaultSpacingMd,
+    DefaultSpacingLg: DefaultSpacingLg,
+    DefaultSpacingXl: DefaultSpacingXl,
+    DefaultSpacingXxl: DefaultSpacingXxl,
+    DefaultBorderRadius4: DefaultBorderRadius4,
+    DefaultBorderRadius8: DefaultBorderRadius8,
+    DefaultBorderRadius16: DefaultBorderRadius16,
+    DefaultBorderRadius24: DefaultBorderRadius24,
+    DefaultSizingXs: DefaultSizingXs,
+    DefaultSizingSm: DefaultSizingSm,
+    DefaultSizingMd: DefaultSizingMd,
+    DefaultSizingLg: DefaultSizingLg,
+    DefaultSizingXl: DefaultSizingXl,
+    DefaultSizingXxl: DefaultSizingXxl,
+    DefaultSizingXxxl: DefaultSizingXxxl,
+    DefaultDefaultColorsRedActual: DefaultDefaultColorsRedActual,
+    DefaultDefaultColorsBlueClickable: DefaultDefaultColorsBlueClickable,
+    DefaultDefaultColorsBlueHoverClickable: DefaultDefaultColorsBlueHoverClickable,
+    DefaultDefaultColorsGreyMediumInactive: DefaultDefaultColorsGreyMediumInactive,
+    DefaultDefaultColorsGreyXDark: DefaultDefaultColorsGreyXDark,
+    DefaultDefaultColorsGreyDark: DefaultDefaultColorsGreyDark,
+    DefaultDefaultColorsWhite: DefaultDefaultColorsWhite,
+    DefaultDefaultColorsGreyXLight: DefaultDefaultColorsGreyXLight,
+    DefaultDefaultColorsGreyXDarkBgModal: DefaultDefaultColorsGreyXDarkBgModal,
+    DefaultDefaultColorsBlueHoverEquivalence12: DefaultDefaultColorsBlueHoverEquivalence12,
+    DefaultDefaultColorsBlueHoverOpacity12: DefaultDefaultColorsBlueHoverOpacity12,
+    DefaultDefaultColorsGreyLightDefaultborder: DefaultDefaultColorsGreyLightDefaultborder,
+    DefaultDefaultColorsBlueInfo: DefaultDefaultColorsBlueInfo,
+    DefaultDefaultColorsGreenSuccess: DefaultDefaultColorsGreenSuccess,
+    DefaultDefaultColorsOrangeWarning: DefaultDefaultColorsOrangeWarning,
+    DefaultDefaultColorsRedError: DefaultDefaultColorsRedError,
+    DefaultDefaultColorsBlueDark: DefaultDefaultColorsBlueDark,
+    DefaultDefaultColorsBlueMedium: DefaultDefaultColorsBlueMedium,
+    DefaultDefaultColorsBlueLight: DefaultDefaultColorsBlueLight,
+    DefaultDefaultColorsGreenDark: DefaultDefaultColorsGreenDark,
+    DefaultDefaultColorsGreenMedium: DefaultDefaultColorsGreenMedium,
+    DefaultDefaultColorsGreen: DefaultDefaultColorsGreen,
+    DefaultDefaultColorsGreenLight: DefaultDefaultColorsGreenLight,
+    DefaultDefaultColorsBrown: DefaultDefaultColorsBrown,
+    DefaultDefaultColorsBrownLight: DefaultDefaultColorsBrownLight,
+    DefaultDefaultColorsOrangeLight: DefaultDefaultColorsOrangeLight,
+    DefaultDefaultColorsYellow: DefaultDefaultColorsYellow,
+    DefaultDefaultColorsPurpleDark: DefaultDefaultColorsPurpleDark,
+    DefaultDefaultColorsPurple: DefaultDefaultColorsPurple,
+    DefaultDefaultColorsPink: DefaultDefaultColorsPink,
+    DefaultDefaultColorsPinkLight: DefaultDefaultColorsPinkLight
+});
 
-var fontSizes = {
-	h3: "1.3rem"
-};
-var colors = {
-	red: "#E11C31",
-	redDark: "#B80025",
-	greyLight: "#F0F0F0",
-	greyDark: "#808080",
-	greySemiDark: "#545352",
-	grey: "#CBCBCB",
-	blue: "#136CAC",
-	orange: "#E46221"
-};
-var lucieTokens = {
-	fontSizes: fontSizes,
-	colors: colors
+var getTokensByType = function (type) {
+    var defaultTokens = {};
+    Object.keys(tokens).forEach(function (colorName) {
+        if (colorName.startsWith("Default".concat(type))) {
+            var colorKey = colorName.replace("Default".concat(type), '');
+            colorKey = colorKey.charAt(0).toLowerCase() + colorKey.slice(1);
+            defaultTokens[colorKey] = tokens[colorName];
+        }
+    });
+    return defaultTokens;
 };
-
 var useThemeTokens = function (themeName) {
     if (themeName === void 0) { themeName = 'default'; }
-    var themeTokens = React.useMemo(function () {
-        switch (themeName) {
-            case 'lucie':
-                return lucieTokens;
-            default:
-                return {};
-        }
-    }, [themeName]);
     var tokens = React.useMemo(function () {
-        var baseTokens = defaultTokens;
         return {
-            fontSizes: __assign(__assign({}, baseTokens.fontSizes), themeTokens.fontSizes),
-            fontWeights: __assign(__assign({}, baseTokens.fontWeights), themeTokens.fontWeights),
-            lineHeights: __assign(__assign({}, baseTokens.lineHeights), themeTokens.lineHeights),
-            colors: __assign(__assign({}, baseTokens.colors), themeTokens.colors)
+            fontSizes: getTokensByType('FontSize'),
+            fontWeights: getTokensByType('FontWeights'),
+            lineHeights: getTokensByType('LineHeights'),
+            colors: getTokensByType('DefaultColors'),
+            spacing: getTokensByType('Spacing'),
+            sizing: getTokensByType('Sizing')
         };
-    }, [themeName, themeTokens]);
-    var materialUIThemeTokens = React.useMemo(function () {
-        var typographies = [
-            'h1',
-            'h2',
-            'h3',
-            'subtitle1',
-            'subtitle2',
-            'body1',
-            'body2',
-            'caption'
-        ];
-        var typography = {};
-        typographies.forEach(function (typo) {
-            typography[typo] = {
-                fontSize: tokens.fontSizes[typo],
-                lineHeight: tokens.lineHeights[typo],
-                fontWeight: tokens.fontWeights[typo]
-            };
-        });
+    }, [themeName]);
+    return { themeName: themeName, tokens: tokens };
+};
+
+var palette = {};
+Object.keys(tokens).forEach(function (colorName) {
+    if (colorName.startsWith('DefaultDefaultColors')) {
+        var colorKey = colorName.replace('DefaultDefaultColors', '');
+        colorKey = colorKey.charAt(0).toLowerCase() + colorKey.slice(1);
+        palette[colorKey] = tokens[colorName];
+    }
+});
+// TODO ne gère pour le moment que le theme default, possibilité de rendre la fonction
+//  générique en gérant le theme 'Default'FontSize35
+var useMaterialThemeTokens = function (themeName) {
+    if (themeName === void 0) { themeName = 'default'; }
+    var muiTokens = React.useMemo(function () {
         return {
-            typography: __assign(__assign({}, typography), { fontWeightLight: tokens.fontWeights.light, fontWeightRegular: tokens.fontWeights.regular, fontWeightMedium: tokens.fontWeights.medium, fontWeightBold: tokens.fontWeights.bold }),
-            palette: tokens.colors
+            typography: {
+                h1: {
+                    fontSize: DefaultFontSize35,
+                    lineHeight: DefaultLineHeights41,
+                    fontWeight: DefaultFontWeightsRoboto700
+                },
+                h2: {
+                    fontSize: DefaultFontSize29,
+                    lineHeight: DefaultLineHeights34,
+                    fontWeight: DefaultFontWeightsRoboto500
+                },
+                h3: {
+                    fontSize: DefaultFontSize24,
+                    lineHeight: DefaultLineHeights28,
+                    fontWeight: DefaultFontWeightsRoboto400
+                },
+                subtitle1: {
+                    fontSize: DefaultFontSize24,
+                    lineHeight: DefaultLineHeights28,
+                    fontWeight: DefaultFontWeightsRoboto400
+                },
+                subtitle2: {
+                    fontSize: DefaultFontSize18,
+                    lineHeight: DefaultLineHeights21,
+                    fontWeight: DefaultFontWeightsRoboto500
+                },
+                body1: {
+                    fontSize: DefaultFontSize14,
+                    lineHeight: DefaultLineHeights18,
+                    fontWeight: DefaultFontWeightsRoboto400
+                },
+                body2: {
+                    fontSize: DefaultFontSize12,
+                    lineHeight: DefaultLineHeights16,
+                    fontWeight: DefaultFontWeightsRoboto400
+                },
+                caption: {
+                    fontSize: DefaultFontSize10,
+                    lineHeight: DefaultLineHeights12,
+                    fontWeight: DefaultFontWeightsRoboto400
+                },
+                fontWeightLight: DefaultFontWeightsRoboto400,
+                fontWeightRegular: DefaultFontWeightsRoboto500,
+                fontWeightMedium: DefaultFontWeightsRoboto500,
+                fontWeightBold: DefaultFontWeightsRoboto700
+            },
+            palette: palette
         };
     }, [tokens, themeName]);
-    return { themeName: themeName, tokens: tokens, materialUIThemeTokens: materialUIThemeTokens };
+    return { muiTokens: muiTokens };
 };
 
 var ActAccordion = function (_a) {
     var icon = _a.icon, title = _a.title, content = _a.content, summaryHeight = _a.summaryHeight;
     var tokens = useThemeTokens('lucie').tokens;
-    return (jsxRuntime.jsxs(Accordion$1, __assign$1({ sx: { border: "1px solid ".concat(tokens.colors.defaultBorder) } }, { children: [jsxRuntime.jsx(AccordionSummary$1, __assign$1({ expandIcon: icon, sx: {
+    return (jsxRuntime.jsxs(Accordion$1, __assign({ sx: { border: "1px solid ".concat(tokens.colors.defaultBorder) } }, { children: [jsxRuntime.jsx(AccordionSummary$1, __assign({ expandIcon: icon, sx: {
                     height: summaryHeight || 60
-                } }, { children: title })), jsxRuntime.jsx(AccordionDetails$1, __assign$1({ sx: {
+                } }, { children: title })), jsxRuntime.jsx(AccordionDetails$1, __assign({ sx: {
                     bgcolor: tokens.colors.greyLightBorder,
                     borderTop: '1px solid #CBCBCB'
                 } }, { children: content }))] })));
@@ -51591,7 +51707,7 @@ var ActAccordion = function (_a) {
 var FontAwesomeSvgIcon = React.forwardRef(function (_a, ref) {
     var icon = _a.icon, fontSize = _a.fontSize;
     var _b = icon.icon, width = _b[0], height = _b[1], svgPathData = _b[4];
-    return (jsxRuntime.jsx(SvgIcon$1, __assign$1({ ref: ref, viewBox: "0 0 ".concat(width, " ").concat(height), sx: {
+    return (jsxRuntime.jsx(SvgIcon$1, __assign({ ref: ref, viewBox: "0 0 ".concat(width, " ").concat(height), sx: {
             fontSize: fontSize
         } }, { children: typeof svgPathData === 'string' ? (jsxRuntime.jsx("path", { d: svgPathData })) : (
         /**
@@ -51667,7 +51783,7 @@ var IconProvider = function (_a) {
                 };
         }
     };
-    return (jsxRuntime.jsx(Box$1, __assign$1({ component: "span", sx: getStyles() }, { children: jsxRuntime.jsx(FontAwesomeSvgIcon, { icon: icon, fontSize: getFontSize() }) })));
+    return (jsxRuntime.jsx(Box$1, __assign({ component: "span", sx: getStyles() }, { children: jsxRuntime.jsx(FontAwesomeSvgIcon, { icon: icon, fontSize: getFontSize() }) })));
 };
 
 var DesignSystemContext = React.createContext({
@@ -51678,9 +51794,10 @@ var DesignSystemContext = React.createContext({
 var MaterialThemeProvider = function (_a) {
     var children = _a.children;
     var themeName = React.useContext(DesignSystemContext).themeName;
-    var materialUIThemeTokens = useThemeTokens(themeName).materialUIThemeTokens;
-    var theme = React.useMemo(function () { return createTheme(materialUIThemeTokens); }, [materialUIThemeTokens]);
-    return jsxRuntime.jsx(ThemeProvider, __assign$1({ theme: theme }, { children: children }));
+    var muiTokens = useMaterialThemeTokens(themeName).muiTokens;
+    console.log('muiTokens', muiTokens);
+    var theme = createTheme(muiTokens);
+    return jsxRuntime.jsx(ThemeProvider, __assign({ theme: theme }, { children: children }));
 };
 var DesignSystemProvider = function (_a) {
     var children = _a.children, _b = _a.name, themeName = _b === void 0 ? 'default' : _b;
@@ -51688,7 +51805,7 @@ var DesignSystemProvider = function (_a) {
     var toggleDarkTheme = function () {
         setIsDarkTheme(!isDarkTheme);
     };
-    return (jsxRuntime.jsx(DesignSystemContext.Provider, __assign$1({ value: { isDarkTheme: isDarkTheme, themeName: themeName, toggleDarkTheme: toggleDarkTheme } }, { children: jsxRuntime.jsx(MaterialThemeProvider, { children: children }) })));
+    return (jsxRuntime.jsx(DesignSystemContext.Provider, __assign({ value: { isDarkTheme: isDarkTheme, themeName: themeName, toggleDarkTheme: toggleDarkTheme } }, { children: jsxRuntime.jsx(MaterialThemeProvider, { children: children }) })));
 };
 
 exports.ActAccordion = ActAccordion;