@groupeactual/ui-kit 0.4.16 → 0.4.18

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

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

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

@@ -1,11 +1,20 @@
 /// <reference types="react" />
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-declare const Sizes: Record<string, number>;
+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 | keyof typeof Sizes;
+    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/esm/index.js

@@ -41416,7 +41416,7 @@ const AccordionRoot = styled$1(Paper$1, {
     margin: '16px 0'
   }
 }));
-const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
+const Accordion$1 = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiAccordion'
@@ -41483,7 +41483,7 @@ const Accordion = /*#__PURE__*/React.forwardRef(function Accordion(inProps, ref)
     }))]
   }));
 });
-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"     |
@@ -41557,7 +41557,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);
@@ -50476,18 +50476,21 @@ var Checkbox = function (_a) {
                 } }, { children: error })))] })));
 };
 
-var ActAccordion = function (_a) {
-    var icon = _a.icon, title = _a.title, content = _a.content, summaryHeight = _a.summaryHeight;
-    return (jsxs(Accordion$1, __assign$1({ sx: { border: "1px solid", borderColor: 'GreyLightDefaultborder' } }, { children: [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 (jsxs(AccordionMui, __assign$1({ sx: { border: "1px solid", borderColor: 'greyLightDefaultBorder' } }, props, { children: [jsx(AccordionSummary$1, __assign$1({ expandIcon: icon, sx: {
+                    fontWeight: 500,
+                    fontSize: 18,
+                    lineHeight: 21,
                     height: summaryHeight || 60
                 } }, { children: title })), jsx(AccordionDetails$1, __assign$1({ sx: {
-                    backgroundColor: 'GreyXLight',
-                    borderColor: 'GreyLightDefaultborder',
-                    borderTop: '1px solid'
+                    backgroundColor: 'greyXLight',
+                    borderTop: '1px solid',
+                    borderColor: 'greyLightDefaultBorder'
                 } }, { children: content }))] })));
 };
 
-var Sizes = {
+var FontSizes = {
     xs: 8,
     sm: 12,
     md: 16,
@@ -50513,7 +50516,7 @@ var FontAwesomeSvgIcon = forwardRef(function (_a, ref) {
         svgPathData.map(function (d, i) { return (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 usedColor = theme.palette[color]
@@ -50529,7 +50532,7 @@ var Icon = function (_a) {
                     borderRadius: '4px',
                     borderColor: '1px solid ' + usedColor,
                     overflow: 'visible',
-                    padding: '10px',
+                    padding: usedFontSize + 'px',
                     width: usedFontSize,
                     height: usedFontSize,
                     display: 'flex',
@@ -50540,7 +50543,7 @@ var Icon = function (_a) {
                 return {
                     color: usedColor,
                     width: usedFontSize,
-                    height: fontSize,
+                    height: size,
                     display: 'inline-flex',
                     alignItems: 'center',
                     justifyContent: 'center'
@@ -50548,15 +50551,14 @@ var Icon = function (_a) {
         }
     };
     var isKey = function (key) {
-        return key in Sizes;
+        return key in FontSizes;
     };
-    var usedFontSize = isKey(fontSize)
-        ? Sizes[fontSize]
-        : fontSize >= 0
-            ? fontSize
+    var usedFontSize = isKey(size)
+        ? FontSizes[size]
+        : size >= 0
+            ? size
             : 16;
-    console.log('isKey', isKey(fontSize));
-    return (jsx(Box$1, __assign$1({ component: "span", sx: getStyles() }, { children: jsx(FontAwesomeSvgIcon, { icon: icon, fontSize: usedFontSize }) })));
+    return (jsx(Box$1, __assign$1({ component: "span", sx: getStyles() }, props, { children: jsx(FontAwesomeSvgIcon, { icon: icon, fontSize: usedFontSize }) })));
 };
 
 /******************************************************************************
@@ -50926,6 +50928,9 @@ var TextFieldCss = function (muiTokens) {
     return {
         MuiFormHelperText: {
             styleOverrides: {
+                '@font-face': {
+                    fontFamily: 'Roboto'
+                },
                 root: {
                     fontWeight: 400,
                     fontSize: '11px',
@@ -51094,10 +51099,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 = 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
@@ -51110,12 +51139,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")],
@@ -51124,7 +51158,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")],
@@ -51133,7 +51167,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")],
@@ -51142,7 +51176,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")],
@@ -51151,7 +51185,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")],
@@ -51160,7 +51194,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")],
@@ -51169,7 +51203,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")],
@@ -51178,7 +51212,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")],
@@ -51187,7 +51221,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")],
@@ -51196,7 +51230,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")],
@@ -51205,7 +51239,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")],
@@ -51214,7 +51248,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")],
@@ -51223,7 +51257,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")],
@@ -51232,7 +51266,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")],
@@ -51241,7 +51275,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")],
@@ -51249,9 +51283,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: {
@@ -51272,7 +51306,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;
@@ -51303,5 +51337,5 @@ var DesignSystemProvider = function (_a) {
     return (jsx(DesignSystemContext.Provider, __assign$1({ value: { isDarkTheme: isDarkTheme, themeName: themeName, toggleDarkTheme: toggleDarkTheme } }, { children: jsx(MaterialThemeProvider, { children: children }) })));
 };
 
-export { ActAccordion as Accordion, Button, Checkbox, DesignSystemContext, DesignSystemProvider, Icon as IconProvider, Link, Text, TextField };
+export { Accordion, Button, Checkbox, DesignSystemContext, DesignSystemProvider, Icon as IconProvider, Link, Text, TextField };
 //# sourceMappingURL=index.js.map