@groupeactual/ui-kit 0.4.15 → 0.4.17

package/dist/cjs/components/Accordion/Accordion.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
+import { AccordionProps } from '@mui/material/Accordion';
 interface Props {
     icon: ReactNode;
     title: ReactNode;
     content: ReactNode;
     summaryHeight?: number;
 }
-declare const ActAccordion: ({ icon, title, content, summaryHeight }: Props) => JSX.Element;
-export default ActAccordion;
+declare const Accordion: ({ icon, title, content, summaryHeight, ...props }: Props & AccordionProps) => JSX.Element;
+export default Accordion;

package/dist/cjs/components/Icon/Icon.d.ts

@@ -1,10 +1,20 @@
 /// <reference types="react" />
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { BoxProps } from '@mui/material/Box';
+declare const FontSizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+};
 interface Props {
     variant?: 'square' | 'none';
     icon: IconDefinition;
     color?: string;
-    fontSize?: number;
+    size?: number | keyof typeof FontSizes;
 }
-declare const Icon: ({ variant, icon, color, fontSize }: Props) => JSX.Element;
+declare const Icon: ({ variant, icon, color, size, ...props }: Props & BoxProps) => JSX.Element;
 export default Icon;

package/dist/cjs/index.js

@@ -41442,7 +41442,7 @@ const AccordionRoot = styled$1(Paper$1, {
     margin: '16px 0'
   }
 }));
-const Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(inProps, ref) {
+const Accordion$1 = /*#__PURE__*/React__namespace.forwardRef(function Accordion(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiAccordion'
@@ -41509,7 +41509,7 @@ const Accordion = /*#__PURE__*/React__namespace.forwardRef(function Accordion(in
     }))]
   }));
 });
-process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes */ = {
+process.env.NODE_ENV !== "production" ? Accordion$1.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
@@ -41583,7 +41583,7 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
    */
   TransitionProps: PropTypes.object
 } : void 0;
-var Accordion$1 = Accordion;
+var AccordionMui = Accordion$1;
 
 function getAccordionDetailsUtilityClass(slot) {
   return generateUtilityClass('MuiAccordionDetails', slot);
@@ -50502,17 +50502,29 @@ var Checkbox = function (_a) {
                 } }, { children: error })))] })));
 };
 
-var ActAccordion = function (_a) {
-    var icon = _a.icon, title = _a.title, content = _a.content, summaryHeight = _a.summaryHeight;
-    return (jsxRuntime.jsxs(Accordion$1, __assign$1({ sx: { border: "1px solid", borderColor: 'GreyLightDefaultborder' } }, { children: [jsxRuntime.jsx(AccordionSummary$1, __assign$1({ expandIcon: icon, sx: {
+var Accordion = function (_a) {
+    var icon = _a.icon, title = _a.title, content = _a.content, summaryHeight = _a.summaryHeight, props = __rest(_a, ["icon", "title", "content", "summaryHeight"]);
+    return (jsxRuntime.jsxs(AccordionMui, __assign$1({ sx: { border: "1px solid", borderColor: 'greyLightDefaultBorder' } }, props, { children: [jsxRuntime.jsx(AccordionSummary$1, __assign$1({ expandIcon: icon, sx: {
+                    fontWeight: 500,
+                    fontSize: 18,
+                    lineHeight: 21,
                     height: summaryHeight || 60
                 } }, { children: title })), jsxRuntime.jsx(AccordionDetails$1, __assign$1({ sx: {
-                    backgroundColor: 'GreyXLight',
-                    borderColor: 'GreyLightDefaultborder',
-                    borderTop: '1px solid'
+                    backgroundColor: 'greyXLight',
+                    borderTop: '1px solid',
+                    borderColor: 'greyLightDefaultBorder'
                 } }, { children: content }))] })));
 };
 
+var FontSizes = {
+    xs: 8,
+    sm: 12,
+    md: 16,
+    lg: 24,
+    xl: 32,
+    xxl: 40,
+    xxxl: 72
+};
 // eslint-disable-next-line react/display-name
 var FontAwesomeSvgIcon = React.forwardRef(function (_a, ref) {
     var icon = _a.icon, fontSize = _a.fontSize;
@@ -50530,10 +50542,10 @@ var FontAwesomeSvgIcon = React.forwardRef(function (_a, ref) {
         svgPathData.map(function (d, i) { return (jsxRuntime.jsx("path", { style: { opacity: i === 0 ? 0.4 : 1 }, d: d }, i)); })) })));
 });
 var Icon = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'none' : _b, icon = _a.icon, _c = _a.color, color = _c === void 0 ? '#136cac' : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 16 : _d;
+    var _b = _a.variant, variant = _b === void 0 ? 'none' : _b, icon = _a.icon, _c = _a.color, color = _c === void 0 ? '#136cac' : _c, _d = _a.size, size = _d === void 0 ? 16 : _d, props = __rest(_a, ["variant", "icon", "color", "size"]);
     var getStyles = function () {
         var theme = useTheme$1();
-        var defaultColor = theme.palette[color]
+        var usedColor = theme.palette[color]
             ? theme.palette[color]
             : !color || (color === null || color === void 0 ? void 0 : color.length) === 0
                 ? '#136cac'
@@ -50541,30 +50553,38 @@ var Icon = function (_a) {
         switch (variant) {
             case 'square':
                 return {
-                    color: defaultColor,
-                    backgroundColor: "".concat(defaultColor, "14"),
+                    color: usedColor,
+                    backgroundColor: "".concat(usedColor, "14"),
                     borderRadius: '4px',
-                    borderColor: '1px solid ' + defaultColor,
+                    borderColor: '1px solid ' + usedColor,
                     overflow: 'visible',
-                    padding: '10px',
-                    width: fontSize,
-                    height: fontSize,
+                    padding: usedFontSize + 'px',
+                    width: usedFontSize,
+                    height: usedFontSize,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center'
                 };
             default:
                 return {
-                    color: defaultColor,
-                    width: fontSize,
-                    height: fontSize,
+                    color: usedColor,
+                    width: usedFontSize,
+                    height: size,
                     display: 'inline-flex',
                     alignItems: 'center',
                     justifyContent: 'center'
                 };
         }
     };
-    return (jsxRuntime.jsx(Box$1, __assign$1({ component: "span", sx: getStyles() }, { children: jsxRuntime.jsx(FontAwesomeSvgIcon, { icon: icon, fontSize: fontSize }) })));
+    var isKey = function (key) {
+        return key in FontSizes;
+    };
+    var usedFontSize = isKey(size)
+        ? FontSizes[size]
+        : size >= 0
+            ? size
+            : 16;
+    return (jsxRuntime.jsx(Box$1, __assign$1({ component: "span", sx: getStyles() }, props, { children: jsxRuntime.jsx(FontAwesomeSvgIcon, { icon: icon, fontSize: usedFontSize }) })));
 };
 
 /******************************************************************************
@@ -50934,6 +50954,9 @@ var TextFieldCss = function (muiTokens) {
     return {
         MuiFormHelperText: {
             styleOverrides: {
+                '@font-face': {
+                    fontFamily: 'Roboto'
+                },
                 root: {
                     fontWeight: 400,
                     fontSize: '11px',
@@ -51102,10 +51125,34 @@ var ButtonCss = function (muiTokens) {
     };
 };
 
+var AccordionCss = function () {
+    return {
+        MuiAccordionSummary: {
+            styleOverrides: {
+                '@font-face': {
+                    fontFamily: 'Roboto'
+                },
+                content: {
+                    paddingLeft: '12px',
+                    fontWeight: 500,
+                    fontSize: '18px',
+                    lineHeight: '21px'
+                }
+            }
+        }
+    };
+};
+
 var useMaterialThemeCss = function (muiTokens) {
     var muiCss = React.useMemo(function () {
         return {
-            components: __assign(__assign(__assign({}, TextFieldCss(muiTokens)), ButtonCss(muiTokens)), { MuiSvgIcon: {
+            components: __assign(__assign(__assign(__assign({}, TextFieldCss(muiTokens)), ButtonCss(muiTokens)), AccordionCss()), { MuiCssBaseline: {
+                    styleOverrides: {
+                        '@font-face': {
+                            fontFamily: 'Roboto'
+                        }
+                    }
+                }, MuiSvgIcon: {
                     styleOverrides: {
                         colorSuccess: {
                             color: muiTokens.palette.success.main
@@ -51118,12 +51165,17 @@ var useMaterialThemeCss = function (muiTokens) {
 };
 
 var useMaterialThemeTokens = function (themeName) {
+    var fontWeights = {
+        RobotoBold: 700,
+        RobotoMedium: 500,
+        RobotoRegular: 400
+    };
     var designTokens = tokens;
     var muiTokensObject = {
         typography: {
             fontFamily: getFontFamilies(themeName).join(','),
             bigNumber: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto700")],
+                fontWeight: fontWeights.RobotoBold,
                 lineHeight: designTokens["".concat(themeName, "LineHeights49")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize42")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51132,7 +51184,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             header1: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto700")],
+                fontWeight: fontWeights.RobotoBold,
                 lineHeight: designTokens["".concat(themeName, "LineHeights41")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize35")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51141,7 +51193,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             header2: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto500")],
+                fontWeight: fontWeights.RobotoMedium,
                 lineHeight: designTokens["".concat(themeName, "LineHeights34")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize29")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51150,7 +51202,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             header3: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto400")],
+                fontWeight: fontWeights.RobotoRegular,
                 lineHeight: designTokens["".concat(themeName, "LineHeights28")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize24")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51159,7 +51211,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             header4: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto500")],
+                fontWeight: fontWeights.RobotoMedium,
                 lineHeight: designTokens["".concat(themeName, "LineHeights21")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize18")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51168,7 +51220,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             body1Regular: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto400")],
+                fontWeight: fontWeights.RobotoRegular,
                 lineHeight: designTokens["".concat(themeName, "LineHeights18")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize14")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51177,7 +51229,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             body1Medium: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto500")],
+                fontWeight: fontWeights.RobotoMedium,
                 lineHeight: designTokens["".concat(themeName, "LineHeights18")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize14")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51186,7 +51238,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             body1Bold: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto700")],
+                fontWeight: fontWeights.RobotoBold,
                 lineHeight: designTokens["".concat(themeName, "LineHeights18")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize14")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51195,7 +51247,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             body2Regular: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto400")],
+                fontWeight: fontWeights.RobotoRegular,
                 lineHeight: designTokens["".concat(themeName, "LineHeights16")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize13")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51204,7 +51256,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             body2Medium: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto500")],
+                fontWeight: fontWeights.RobotoMedium,
                 lineHeight: designTokens["".concat(themeName, "LineHeights16")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize13")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51213,7 +51265,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             body2Bold: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto700")],
+                fontWeight: fontWeights.RobotoBold,
                 lineHeight: designTokens["".concat(themeName, "LineHeights16")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize13")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51222,7 +51274,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             caption: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto400")],
+                fontWeight: fontWeights.RobotoRegular,
                 lineHeight: designTokens["".concat(themeName, "LineHeights12")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize11")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51231,7 +51283,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             buttonNotif: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto700")],
+                fontWeight: fontWeights.RobotoBold,
                 lineHeight: designTokens["".concat(themeName, "LineHeights18")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize14")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51240,7 +51292,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationNone")]
             },
             link1: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto700")],
+                fontWeight: fontWeights.RobotoBold,
                 lineHeight: designTokens["".concat(themeName, "LineHeights18")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize14")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51249,7 +51301,7 @@ var useMaterialThemeTokens = function (themeName) {
                 textDecoration: designTokens["".concat(themeName, "TextDecorationUnderline")]
             },
             link2: {
-                fontWeight: designTokens["".concat(themeName, "FontWeightsRoboto700")],
+                fontWeight: fontWeights.RobotoBold,
                 lineHeight: designTokens["".concat(themeName, "LineHeights16")] + 'px',
                 fontSize: designTokens["".concat(themeName, "FontSize13")] + 'px',
                 letterSpacing: designTokens["".concat(themeName, "LetterSpacingNone")],
@@ -51257,9 +51309,9 @@ var useMaterialThemeTokens = function (themeName) {
                 textCase: designTokens["".concat(themeName, "TextCaseNone")],
                 textDecoration: designTokens["".concat(themeName, "TextDecorationUnderline")]
             },
-            fontWeightRegular: designTokens["".concat(themeName, "FontWeightsRoboto400")],
-            fontWeightMedium: designTokens["".concat(themeName, "FontWeightsRoboto500")],
-            fontWeightBold: designTokens["".concat(themeName, "FontWeightsRoboto700")]
+            fontWeightRegular: fontWeights.RobotoBold,
+            fontWeightMedium: fontWeights.RobotoMedium,
+            fontWeightBold: fontWeights.RobotoRegular
         },
         breakpoints: {
             values: {
@@ -51280,7 +51332,7 @@ var useMaterialThemeTokens = function (themeName) {
             snackbar: 1400,
             tooltip: 1500
         },
-        // spacing: Number(designTokens[`${themeName}SpacingXs`]), // spacing minimum
+        spacing: Number(designTokens["".concat(themeName, "SpacingXxs")]),
         palette: getMuiPalette(themeName)
     };
     var muiCss = useMaterialThemeCss(muiTokensObject).muiCss;
@@ -51311,7 +51363,7 @@ var DesignSystemProvider = function (_a) {
     return (jsxRuntime.jsx(DesignSystemContext.Provider, __assign$1({ value: { isDarkTheme: isDarkTheme, themeName: themeName, toggleDarkTheme: toggleDarkTheme } }, { children: jsxRuntime.jsx(MaterialThemeProvider, { children: children }) })));
 };
 
-exports.Accordion = ActAccordion;
+exports.Accordion = Accordion;
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.DesignSystemContext = DesignSystemContext;