@groupeactual/ui-kit 0.4.12 → 0.4.13

package/dist/esm/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/esm/index.js

@@ -50452,17 +50452,21 @@ 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 = useState(value), internalValue = _b[0], setInternalValue = _b[1];
     useEffect(function () {
         if (value !== internalValue) {
             setInternalValue(value);
         }
     }, [value]);
-    return (jsxs(FormControl$1, __assign$1({ fullWidth: true }, { children: [jsx(FormControlLabel$1, { sx: { display: 'table' }, control: jsx(Box$3, __assign$1({ sx: { display: 'table-cell' } }, { children: jsx(CheckboxMUI, { name: name, sx: { marginTop: -0.5 }, checked: internalValue, color: "primary", onChange: function (e) {
+    return (jsxs(FormControl$1, __assign$1({ fullWidth: true }, { children: [jsx(FormControlLabel$1, { control: jsx(Box$3, { children: jsx(CheckboxMUI, __assign$1({ name: name, sx: { marginTop: -0.5 }, checked: internalValue, color: "primary", onChange: function (e) {
                             setInternalValue(e.target.checked);
                             onChange(name, e.target.checked, true);
-                        } }) })), label: jsx(Typography$1, __assign$1({ sx: sx }, { children: label })) }), error && (jsx(Typography$1, __assign$1({ sx: {
+                        } }, props)) }), label: jsx(Typography$1, __assign$1({ component: "span", sx: {
+                        fontSize: '14px',
+                        fontWeight: 400,
+                        color: error ? '#B80025' : '#000'
+                    } }, { children: label })) }), error && (jsx(Typography$1, __assign$1({ sx: {
                     marginTop: -1,
                     color: '#B80025',
                     fontWeight: 400,
@@ -51020,23 +51024,33 @@ var ButtonCss = function (muiTokens) {
                     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.greyDark + ' !important',
+                        backgroundColor: muiTokens.palette.white + ' !important'
                     }
                 }
             }