@groupeactual/ui-kit 0.4.12 → 0.4.14

package/dist/cjs/components/Form/Checkbox/Checkbox.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import { SxProps, Theme } from '@mui/system';
+import { CheckboxProps } from '@mui/material/Checkbox';
 interface Props {
-    error?: string;
-    label: string;
-    value: boolean;
     name: string;
+    value: boolean;
+    label: string;
     onChange: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
-    sx: SxProps<Theme>;
+    error?: string;
 }
-declare const Checkbox: ({ name, value, error, label, onChange, sx }: Props) => JSX.Element;
+declare const Checkbox: ({ name, value, error, label, onChange, ...props }: CheckboxProps & Props) => JSX.Element;
 export default Checkbox;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+interface Props {
+    variant?: 'square' | 'none';
+    icon: IconDefinition;
+    color?: string;
+    fontSize?: number;
+}
+declare const Icon: ({ variant, icon, color, fontSize }: Props) => JSX.Element;
+export default Icon;

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

@@ -1 +1 @@
-export { default } from './IconProvider';
+export { default } from './Icon';

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

@@ -4,4 +4,4 @@ export { default as Button } from './Button';
 export { default as TextField } from './Form/TextField';
 export { default as Checkbox } from './Form/Checkbox';
 export { default as Accordion } from './Accordion';
-export { default as IconProvider } from './Icon/IconProvider';
+export { default as IconProvider } from './Icon/Icon';

package/dist/cjs/index.js

@@ -50450,7 +50450,7 @@ process.env.NODE_ENV !== "production" ? TextField$1.propTypes /* remove-proptype
 } : void 0;
 var MuiTextField = TextField$1;
 
-var Text = function (props) { return jsxRuntime.jsx(Typography$1, __assign$1({}, props)); };
+var Text = function (props) { return (jsxRuntime.jsx(Typography$1, __assign$1({ color: "greyXDark" }, props))); };
 
 var Link = function (props) { return jsxRuntime.jsx(LinkMui, __assign$1({}, props)); };
 
@@ -50466,7 +50466,7 @@ var TextField = function (_a) {
             setInternalValue(value);
         }
     }, [value]);
-    return (jsxRuntime.jsx(MuiTextField, __assign$1({ variant: "outlined", name: name, label: label, value: internalValue, placeholder: placeholder, FormHelperTextProps: { component: 'div' }, InputLabelProps: { shrink: true }, onClick: function (e) { return e.stopPropagation(); }, onChange: function (e) {
+    return (jsxRuntime.jsx(MuiTextField, __assign$1({ id: label === placeholder ? 'text-field-mui' : 'test-field-ds', variant: "outlined", name: name, label: label, value: internalValue, placeholder: label === placeholder ? undefined : placeholder, FormHelperTextProps: { component: 'div' }, InputLabelProps: { shrink: label === placeholder ? undefined : true }, onClick: function (e) { return e.stopPropagation(); }, onChange: function (e) {
             setInternalValue(e.currentTarget.value);
             onChange(e);
         }, onBlur: function (e) {
@@ -50478,18 +50478,24 @@ var TextField = function (_a) {
 };
 
 var Checkbox = function (_a) {
-    var name = _a.name, value = _a.value, error = _a.error, label = _a.label, onChange = _a.onChange, sx = _a.sx;
+    var name = _a.name, value = _a.value, error = _a.error, label = _a.label, onChange = _a.onChange, props = __rest(_a, ["name", "value", "error", "label", "onChange"]);
     var _b = React.useState(value), internalValue = _b[0], setInternalValue = _b[1];
     React.useEffect(function () {
         if (value !== internalValue) {
             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$1({ fullWidth: true }, { children: [jsxRuntime.jsx(FormControlLabel$1, { control: jsxRuntime.jsx(Box$3, { children: jsxRuntime.jsx(CheckboxMUI, __assign$1({ name: name, sx: { marginTop: '-2px' }, 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: {
-                    marginTop: -1,
+                        } }, props)) }), label: jsxRuntime.jsx(Typography$1, __assign$1({ component: "span", sx: {
+                        fontSize: '14px',
+                        marginLeft: '-3px',
+                        marginTop: '2px',
+                        fontWeight: 400,
+                        color: error ? '#B80025' : '#000'
+                    } }, { children: label })) }), error && (jsxRuntime.jsx(Typography$1, __assign$1({ sx: {
+                    marginTop: -0.5,
                     color: '#B80025',
                     fontWeight: 400,
                     fontSize: '10px'
@@ -50512,7 +50518,7 @@ 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: {
-            fontSize: fontSize
+            fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : '14px'
         } }, { children: typeof svgPathData === 'string' ? (jsxRuntime.jsx("path", { d: svgPathData })) : (
         /**
          * A multi-path Font Awesome icon seems to imply a duotune icon. The 0th path seems to
@@ -50523,71 +50529,42 @@ 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 IconProvider = function (_a) {
-    var variant = _a.variant, icon = _a.icon, color = _a.color, size = _a.size;
-    var getFontSize = function () {
-        if (variant === 'roundedIcon') {
-            return '1.5rem';
-        }
-        if (variant === 'smallRoundedIcon') {
-            return '0.9rem';
-        }
-        switch (size) {
-            case 'xxs':
-                return '.8rem';
-            case 'xs':
-                return '1rem';
-            case 'm':
-                return '1.5rem';
-            case 'lg':
-                return '1.8rem';
-            case 'xl':
-                return '2.2rem';
-            case 'xxl':
-                return '4rem';
-            default:
-                return '1.2rem';
-        }
-    };
+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 getStyles = function () {
+        var theme = useTheme$1();
+        var defaultColor = theme.palette[color]
+            ? theme.palette[color]
+            : !color || (color === null || color === void 0 ? void 0 : color.length) === 0
+                ? '#136cac'
+                : color;
         switch (variant) {
-            case 'roundedIcon':
-                return {
-                    color: 'actual.main',
-                    backgroundColor: 'actual.light',
-                    borderRadius: '100px',
-                    overflow: 'visible',
-                    height: 50,
-                    width: 50,
-                    display: 'flex',
-                    fontSize: '1.5rem',
-                    justifyContent: 'center',
-                    alignItems: 'center'
-                };
-            case 'smallRoundedIcon':
+            case 'square':
                 return {
-                    color: 'actual.main',
-                    backgroundColor: 'actual.light',
-                    borderRadius: '100px',
+                    color: defaultColor,
+                    backgroundColor: "".concat(defaultColor, "14"),
+                    borderRadius: '4px',
+                    borderColor: '1px solid ' + defaultColor,
                     overflow: 'visible',
-                    height: 30,
-                    width: 30,
+                    padding: '10px',
+                    width: fontSize,
+                    height: fontSize,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center'
                 };
             default:
                 return {
-                    color: color !== null && color !== void 0 ? color : 'primary.main',
-                    width: getFontSize(),
-                    height: getFontSize(),
+                    color: defaultColor,
+                    width: fontSize,
+                    height: fontSize,
                     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: getFontSize() }) })));
+    return (jsxRuntime.jsx(Box$1, __assign$1({ component: "span", sx: getStyles() }, { children: jsxRuntime.jsx(FontAwesomeSvgIcon, { icon: icon, fontSize: fontSize }) })));
 };
 
 /******************************************************************************
@@ -50973,7 +50950,12 @@ var TextFieldCss = function (muiTokens) {
         },
         MuiOutlinedInput: {
             defaultProps: {
-                notched: true
+                '&#text-field-mui': {
+                    notched: false
+                },
+                '&#text-field-ds': {
+                    notched: true
+                }
             },
             styleOverrides: {
                 input: {
@@ -50981,7 +50963,7 @@ var TextFieldCss = function (muiTokens) {
                     lineHeight: '18px',
                     fontWeight: 400,
                     padding: '12px 14px !important',
-                    height: '18px',
+                    height: '20px',
                     color: muiTokens.palette.greyXDark,
                     '&::placeholder': {
                         color: "".concat(muiTokens.palette.greyDark, " !important"),
@@ -50995,6 +50977,27 @@ var TextFieldCss = function (muiTokens) {
                         color: muiTokens.palette.greyDark,
                         borderColor: muiTokens.palette.greyLightDefaultborder,
                         WebkitTextFillColor: muiTokens.palette.greyDark
+                    },
+                    '&#text-field-mui': {
+                        fontSize: '14px',
+                        lineHeight: '18px',
+                        fontWeight: 400,
+                        padding: '12px 14px !important',
+                        height: '20px',
+                        color: muiTokens.palette.greyXDark,
+                        '&::placeholder': {
+                            color: "".concat(muiTokens.palette.greyDark, " !important"),
+                            opacity: 1 + ' !important',
+                            fontWeight: 400,
+                            lineHeight: '18px',
+                            fontSize: '14px'
+                        },
+                        '&.Mui-disabled': {
+                            backgroundColor: muiTokens.palette.greyXLight,
+                            color: muiTokens.palette.greyDark,
+                            borderColor: muiTokens.palette.greyLightDefaultborder,
+                            WebkitTextFillColor: muiTokens.palette.greyDark
+                        }
                     }
                 },
                 notchedOutline: {
@@ -51010,6 +51013,9 @@ var TextFieldCss = function (muiTokens) {
                     },
                     '&.Mui-hover.MuiOutlinedInput-notchedOutline': {
                         borderColor: muiTokens.palette.greyDark
+                    },
+                    '.MuiSvgIcon-root': {
+                        marginLeft: '-22px'
                     }
                 }
             }
@@ -51017,14 +51023,35 @@ var TextFieldCss = function (muiTokens) {
         MuiInputLabel: {
             styleOverrides: {
                 root: {
-                    fontSize: '16px',
-                    lineHeight: '16px',
-                    height: '16px',
-                    fontWeight: 500,
-                    transform: 'translate(14px, -7px) scale(0.75)',
-                    color: muiTokens.palette.greyXDark,
-                    '&.Mui-disabled': {
-                        color: muiTokens.palette.greyDark
+                    '&#text-field-mui-label': {
+                        fontSize: '14px',
+                        lineHeight: '18px',
+                        height: '16px',
+                        color: "".concat(muiTokens.palette.greyDark, " !important"),
+                        fontWeight: 400,
+                        marginTop: '-3px',
+                        '&.Mui-disabled': {
+                            color: muiTokens.palette.greyDark
+                        },
+                        '&.Mui-focused': {
+                            lineHeight: '16px',
+                            fontWeight: 500,
+                            fontSize: '16px',
+                            marginTop: 0,
+                            color: "".concat(muiTokens.palette.blueClickable, " !important"),
+                            transform: 'translate(14px, -7px) scale(0.75)'
+                        }
+                    },
+                    '&#text-field-ds-label': {
+                        fontSize: '16px',
+                        lineHeight: '16px',
+                        height: '16px',
+                        fontWeight: 500,
+                        transform: 'translate(14px, -7px) scale(0.75)',
+                        color: muiTokens.palette.greyXDark,
+                        '&.Mui-disabled': {
+                            color: muiTokens.palette.greyDark
+                        }
                     }
                 }
             }
@@ -51037,32 +51064,44 @@ var ButtonCss = function (muiTokens) {
         MuiButton: {
             styleOverrides: {
                 root: {
-                    borderRadius: 4,
+                    borderRadius: '4px',
                     padding: '7.5px 16px',
                     fontWeight: muiTokens.typography.fontWeightBold,
                     lineHeight: '18px',
                     textTransform: 'unset',
                     fontSize: '14px',
+                    height: '44px',
                     border: '1px solid'
                 },
                 primary: {
-                    color: muiTokens.palette.white,
-                    backgroundColor: muiTokens.palette.blueClickable,
-                    borderColor: muiTokens.palette.blueClickable,
+                    color: muiTokens.palette.white + ' !important',
+                    backgroundColor: muiTokens.palette.blueClickable + ' !important',
+                    border: '1px solid' + ' !important',
+                    borderColor: muiTokens.palette.blueClickable + ' !important',
                     '&.Mui-disabled': {
-                        backgroundColor: muiTokens.palette.greyMediumInactive,
-                        borderColor: muiTokens.palette.greyMediumInactive,
-                        color: muiTokens.palette.white
+                        backgroundColor: muiTokens.palette.greyMediumInactive + ' !important',
+                        borderColor: muiTokens.palette.greyMediumInactive + ' !important',
+                        color: muiTokens.palette.white + ' !important'
+                    },
+                    '&:hover': {
+                        backgroundColor: muiTokens.palette.blueHoverClickable + ' !important',
+                        borderColor: muiTokens.palette.blueHoverClickable + ' !important'
                     }
                 },
                 secondary: {
                     color: muiTokens.palette.blueClickable,
                     backgroundColor: muiTokens.palette.white,
+                    border: '1px solid',
                     borderColor: muiTokens.palette.greyLightDefaultborder,
                     '&.Mui-disabled': {
                         backgroundColor: muiTokens.palette.white,
-                        borderColor: muiTokens.palette.greyLightDefaultborder,
-                        color: muiTokens.palette.greyMediumInactive
+                        borderColor: muiTokens.palette.greyLightDefaultborder + ' !important',
+                        color: muiTokens.palette.greyMediumInactive + ' !important'
+                    },
+                    '&:hover': {
+                        borderColor: muiTokens.palette.blueHoverClickable + ' !important',
+                        backgroundColor: muiTokens.palette.white + ' !important',
+                        color: muiTokens.palette.blueHoverClickable + ' !important'
                     }
                 }
             }
@@ -51248,7 +51287,7 @@ var useMaterialThemeTokens = function (themeName) {
             snackbar: 1400,
             tooltip: 1500
         },
-        spacing: Number(designTokens["".concat(themeName, "SpacingXxs")]),
+        // spacing: Number(designTokens[`${themeName}SpacingXs`]), // spacing minimum
         palette: getMuiPalette(themeName)
     };
     var muiCss = useMaterialThemeCss(muiTokensObject).muiCss;
@@ -51284,7 +51323,7 @@ exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.DesignSystemContext = DesignSystemContext;
 exports.DesignSystemProvider = DesignSystemProvider;
-exports.IconProvider = IconProvider;
+exports.IconProvider = Icon;
 exports.Link = Link;
 exports.Text = Text;
 exports.TextField = TextField;