@portnet/ui 3.0.3 → 3.0.4

package/dist/components/inputs/PuiAutocomplete.js

@@ -0,0 +1,350 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.symbol.description.js");
+var _ArrowDropDown = _interopRequireDefault(require("@mui/icons-material/ArrowDropDown"));
+var _Clear = _interopRequireDefault(require("@mui/icons-material/Clear"));
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+var _formik = require("formik");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _apperance = require("../../config/apperance");
+var _StyledMuiTextField = _interopRequireDefault(require("../common/StyledMuiTextField"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["id", "className", "sx", "label", "name", "value", "error", "disabled", "required", "focused", "loading", "fullWidth", "helperText", "readOnly", "options", "onChange", "isOptionEqualToValue", "getOptionLabel", "getOptionValue", "getOptionKey"],
+  _excluded2 = ["id", "className", "sx", "label", "name", "value", "error", "disabled", "required", "focused", "loading", "fullWidth", "helperText", "readOnly", "options", "onChange", "getOptionLabel", "getOptionValue", "getOptionKey"],
+  _excluded3 = ["formik", "id", "className", "sx", "label", "name", "value", "error", "disabled", "required", "focused", "loading", "fullWidth", "helperText", "readOnly", "options", "onChange", "isOptionEqualToValue", "getOptionLabel", "getOptionValue", "getOptionKey"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const StyledAutocompleteMuiTextField = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_StyledMuiTextField.default, _objectSpread({
+  ref: ref
+}, props))))(() => {
+  return {
+    "& .MuiInputBase-root": {
+      padding: 0,
+      "&.Mui-error .MuiSvgIcon-root": {
+        color: _apperance.palette.error
+      }
+    },
+    "& .MuiAutocomplete-endAdornment .MuiButtonBase-root:hover": {
+      backgroundColor: "transparent"
+    }
+  };
+});
+const PuiStandardAutocomplete = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      id,
+      className,
+      sx,
+      label,
+      name,
+      value,
+      error,
+      disabled,
+      required,
+      focused,
+      loading,
+      fullWidth,
+      helperText,
+      readOnly,
+      options,
+      onChange,
+      isOptionEqualToValue,
+      getOptionLabel,
+      getOptionValue,
+      getOptionKey
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const handleChange = (event, option) => {
+    onChange(option !== null ? getOptionValue(option) : null);
+  };
+  const inputChangeHandler = (event, newInputValue, reason) => {
+    if (reason === "clear") {
+      onChange(null);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Autocomplete, _objectSpread({
+    ref: ref,
+    id: id,
+    className: className,
+    sx: sx,
+    label: label,
+    name: name,
+    value: value,
+    options: options,
+    disabled: loading || disabled,
+    loading: loading,
+    readOnly: readOnly,
+    clearText: "",
+    closeText: "",
+    openText: "",
+    fullWidth: fullWidth,
+    noOptionsText: "Pas d'options",
+    getOptionLabel: getOptionLabel,
+    isOptionEqualToValue: isOptionEqualToValue,
+    onChange: handleChange,
+    clearIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Clear.default, {
+      fontSize: "small"
+    }),
+    onInputChange: inputChangeHandler,
+    popupIcon: loading || disabled || readOnly ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {}),
+    PaperComponent: _ref2 => {
+      let {
+        children
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+        style: {
+          background: "white",
+          fontSize: 13
+        },
+        children: children
+      });
+    },
+    componentsProps: {
+      popper: {
+        sx: {
+          "& .MuiAutocomplete-listbox": {
+            paddingY: 0,
+            "& .MuiAutocomplete-option:not(:last-child)": {
+              borderBottom: "1px solid ".concat(_apperance.palette.gray.light)
+            },
+            "& .MuiAutocomplete-option": {
+              minHeight: "fit-content !important"
+            }
+          }
+        }
+      }
+    },
+    renderOption: (props, option) => {
+      return /*#__PURE__*/(0, _react.createElement)(_material.MenuItem, _objectSpread(_objectSpread({}, props), {}, {
+        value: getOptionValue(option),
+        key: getOptionKey(option),
+        sx: {
+          fontSize: 13
+        }
+      }), getOptionLabel(option));
+    },
+    renderInput: params => {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledAutocompleteMuiTextField, _objectSpread(_objectSpread({}, params), {}, {
+        required: required,
+        focused: focused,
+        fullWidth: fullWidth,
+        label: label,
+        error: error,
+        helperText: helperText,
+        inputProps: _objectSpread(_objectSpread({}, params.inputProps), {}, {
+          name
+        }),
+        InputProps: _objectSpread(_objectSpread({}, params.InputProps), {}, {
+          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [loading && !disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+              size: 16,
+              sx: {
+                color: _apperance.palette.primary,
+                marginRight: "-25px"
+              }
+            }) : null, params.InputProps.endAdornment]
+          })
+        })
+      }));
+    }
+  }, rest));
+});
+const PuiFormikAutocomplete = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+      id,
+      className,
+      sx,
+      label,
+      name,
+      value,
+      error,
+      disabled,
+      required,
+      focused,
+      loading,
+      fullWidth,
+      helperText,
+      readOnly,
+      options,
+      onChange,
+      getOptionLabel,
+      getOptionValue,
+      getOptionKey
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  const formikContext = (0, _formik.useFormikContext)();
+  const [field, meta] = (0, _formik.useField)(name);
+  const [selectedOption, setSelectedOption] = React.useState(null);
+  const [hasError, setHasError] = React.useState(false);
+  const changeHandler = option => {
+    formikContext.setFieldValue(name, option !== null ? getOptionValue(option) : "");
+    setSelectedOption(option);
+    onChange(option);
+  };
+  React.useEffect(() => {
+    setHasError(Boolean(meta) && Boolean(meta.touched) && Boolean(meta.error));
+  }, [meta]);
+  React.useEffect(() => {
+    if ((!Boolean(selectedOption) || getOptionValue(selectedOption) !== value) && value !== undefined && options !== undefined) {
+      let option;
+      if (typeof value === "object") {
+        option = value;
+      } else {
+        option = options.find(option => String(getOptionValue(option)) === String(value));
+      }
+      setSelectedOption(option);
+      formikContext.setFieldValue(name, getOptionValue(option));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, options]);
+  React.useEffect(() => {
+    if (!Boolean(field.value)) {
+      setSelectedOption(null);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [field.value]);
+  React.useEffect(() => {
+    if ((!Boolean(selectedOption) || getOptionValue(selectedOption) !== field.value) && field.value !== undefined && options !== undefined) {
+      let option;
+      if (typeof field.value === "object") {
+        option = field.value;
+      } else {
+        option = options.find(option => getOptionValue(option) === field.value);
+      }
+      setSelectedOption(option);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [field.value, options]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiStandardAutocomplete, _objectSpread({
+    id: id,
+    ref: ref,
+    className: className,
+    sx: sx,
+    label: label,
+    name: name,
+    value: selectedOption !== null && selectedOption !== void 0 ? selectedOption : null,
+    error: error || hasError,
+    disabled: disabled,
+    required: required,
+    focused: focused,
+    loading: loading,
+    fullWidth: fullWidth,
+    helperText: hasError && Boolean(meta.error) ? meta.error : helperText !== null && helperText !== void 0 ? helperText : "",
+    readOnly: readOnly,
+    options: options,
+    onChange: changeHandler,
+    getOptionKey: getOptionKey,
+    getOptionLabel: getOptionLabel,
+    getOptionValue: option => option
+  }, rest));
+});
+const PuiAutocomplete = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
+  let {
+      formik,
+      id,
+      className,
+      sx,
+      label,
+      name,
+      value,
+      error,
+      disabled,
+      required,
+      focused,
+      loading,
+      fullWidth,
+      helperText,
+      readOnly,
+      options,
+      onChange,
+      isOptionEqualToValue,
+      getOptionLabel,
+      getOptionValue,
+      getOptionKey
+    } = _ref4,
+    rest = _objectWithoutProperties(_ref4, _excluded3);
+  return /*#__PURE__*/React.createElement(formik ? PuiFormikAutocomplete : PuiStandardAutocomplete, _objectSpread({
+    ref,
+    id,
+    className,
+    sx,
+    label,
+    name,
+    value,
+    error,
+    disabled,
+    required,
+    focused,
+    loading,
+    fullWidth,
+    helperText,
+    readOnly,
+    options,
+    onChange,
+    isOptionEqualToValue,
+    getOptionLabel,
+    getOptionValue,
+    getOptionKey
+  }, rest), null);
+});
+PuiAutocomplete.propTypes = {
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  sx: _propTypes.default.object,
+  label: _propTypes.default.string,
+  name: _propTypes.default.string,
+  helperText: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  required: _propTypes.default.bool,
+  error: _propTypes.default.bool,
+  formik: _propTypes.default.bool,
+  focused: _propTypes.default.bool,
+  loading: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  fullWidth: _propTypes.default.bool,
+  options: _propTypes.default.array,
+  onChange: _propTypes.default.func,
+  isOptionEqualToValue: _propTypes.default.func,
+  getOptionKey: _propTypes.default.func,
+  getOptionValue: _propTypes.default.func,
+  getOptionLabel: _propTypes.default.func.isRequired
+};
+PuiAutocomplete.defaultProps = {
+  disabled: false,
+  loading: false,
+  required: false,
+  formik: true,
+  error: false,
+  fullWidth: true,
+  readOnly: false,
+  options: [],
+  getOptionKey: option => {
+    if (typeof option === "object") {
+      let key = "";
+      Object.keys(option).forEach(optionKey => {
+        key += "".concat(key.length === 0 ? "" : "-").concat(String(option[optionKey]));
+      });
+      return key;
+    }
+    return option;
+  },
+  getOptionValue: option => option,
+  onChange: () => {}
+};
+var _default = exports.default = PuiAutocomplete;

package/dist/components/inputs/PuiCheckbox.js

@@ -0,0 +1,307 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.string.includes.js");
+require("core-js/modules/es.symbol.description.js");
+var _CheckBoxOutlineBlankRounded = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlankRounded"));
+var _CheckBoxRounded = _interopRequireDefault(require("@mui/icons-material/CheckBoxRounded"));
+var _material = require("@mui/material");
+var _styles = require("@mui/material/styles");
+var _formik = require("formik");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _apperance = require("../../config/apperance");
+var _PuiIcon = _interopRequireDefault(require("../others/PuiIcon"));
+var _PuiIndication = _interopRequireDefault(require("../typography/PuiIndication"));
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["id", "className", "sx", "name", "value", "label", "checked", "error", "helperText", "disableHelperText", "disabled", "required", "onChange", "asArray"],
+  _excluded2 = ["id", "className", "sx", "name", "value", "defaultValue", "label", "error", "disableHelperText", "helperText", "disabled", "checked", "required", "asArray", "onChange"],
+  _excluded3 = ["formik", "id", "className", "sx", "name", "value", "defaultValue", "label", "checked", "asArray", "error", "helperText", "disableHelperText", "disabled", "required", "onChange"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const StyledMuiFormControl = (0, _styles.styled)( /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControl, _objectSpread({
+  ref: ref
+}, props))))(() => {
+  return {
+    "&.MuiFormControl-root": {
+      "& .MuiCheckbox-root": {
+        "& .MuiTouchRipple-root": {
+          display: "none"
+        },
+        "&.Mui-checked .MuiTouchRipple-root": {
+          boxSizing: "border-box",
+          display: "block",
+          position: "absolute",
+          width: "20px",
+          height: "20px",
+          left: "50%",
+          top: "50%",
+          transform: "translate(-50%,-50%)",
+          backgroundColor: _apperance.palette.primary,
+          border: "2px ".concat(_apperance.palette.gray.light, " solid"),
+          borderRadius: "2px",
+          "& *": {
+            display: "none"
+          }
+        },
+        "& .MuiSvgIcon-root": {
+          width: "32px",
+          height: "32px"
+        },
+        "&.Mui-disabled .MuiSvgIcon-root": {
+          color: _apperance.palette.gray.dark
+        }
+      },
+      "& .Mui-error .MuiCheckbox-colorPrimary": {
+        color: _apperance.palette.error
+      },
+      "& .Mui-error .Mui-checked .MuiTouchRipple-root": {
+        backgroundColor: _apperance.palette.error
+      },
+      "& .MuiCheckbox-colorPrimary": {
+        color: _apperance.palette.primary
+      },
+      "&.required .MuiInputBase-root": {
+        backgroundColor: _apperance.palette.background.required
+      },
+      "& .MuiFormControlLabel-root": {
+        margin: 0,
+        "& .MuiTypography-root": {
+          fontSize: ".8rem",
+          color: _apperance.palette.gray.darker,
+          lineSpacing: "-0.03em",
+          userSelect: "none",
+          fontWeight: "600"
+        },
+        "&.Mui-error": {
+          "& .MuiTypography-root": {
+            color: _apperance.palette.error
+          }
+        }
+      },
+      "& .MuiFormHelperText-root": {
+        marginTop: "-10px",
+        fontWeight: "bold",
+        fontSize: ".7rem",
+        color: _apperance.palette.gray.darker
+      }
+    }
+  };
+});
+const PuiStandardCheckbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      id,
+      className,
+      sx,
+      name,
+      value,
+      label,
+      checked,
+      error,
+      helperText,
+      disableHelperText,
+      disabled,
+      required,
+      onChange,
+      asArray
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledMuiFormControl, {
+    error: error,
+    sx: sx,
+    id: id,
+    className: className,
+    disabled: disabled,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+      ref: ref,
+      disabled: disabled,
+      label: label !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Typography, {
+        children: [label, required && " *"]
+      }) : undefined,
+      control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Checkbox, _objectSpread({
+        name: name,
+        checked: checked,
+        required: required,
+        disabled: disabled,
+        value: value !== null && value !== void 0 ? value : true,
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBoxOutlineBlankRounded.default, {}),
+        checkedIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBoxRounded.default, {}),
+        onChange: onChange
+      }, rest))
+    }), !disableHelperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.FormHelperText, {
+      component: "div",
+      children: error && Boolean(helperText) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIndication.default, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
+          type: "danger"
+        }),
+        color: "error",
+        size: "small",
+        children: typeof helperText === "object" ? JSON.stringify(helperText) : helperText
+      }) : helperText
+    })]
+  });
+});
+const PuiFormikCheckbox = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  var _field$value;
+  let {
+      id,
+      className,
+      sx,
+      name,
+      value,
+      defaultValue,
+      label,
+      error,
+      disableHelperText,
+      helperText,
+      disabled,
+      checked,
+      required,
+      asArray,
+      onChange
+    } = _ref2,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  const [field, meta] = (0, _formik.useField)(name);
+  const formikContext = (0, _formik.useFormikContext)();
+  const [hasError, setHasError] = React.useState(false);
+  const changeHandler = (event, hasBeenChecked) => {
+    if (checked === undefined) {
+      if (asArray || value === undefined) {
+        field.onChange(event);
+      } else {
+        formikContext.setFieldValue(name, hasBeenChecked ? event.target.value : formikContext.initialValues[name]);
+      }
+      onChange(event);
+    }
+  };
+  React.useEffect(() => {
+    setHasError(Boolean(meta) && Boolean(meta.touched) && Boolean(meta.error));
+  }, [meta]);
+  React.useEffect(() => {
+    if (defaultValue !== undefined && !asArray) {
+      formikContext.setFieldValue(name, defaultValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValue, asArray]);
+  React.useEffect(() => {
+    if (checked !== undefined) {
+      if (checked) {
+        if (asArray) {
+          if (Array.isArray(field.value) && !field.value.map(checkedValue => JSON.stringify(checkedValue)).includes(JSON.stringify(value))) {
+            formikContext.setFieldValue(name, [...field.value, value]);
+          } else {
+            formikContext.setFieldValue(name, [value]);
+          }
+        } else {
+          formikContext.setFieldValue(name, value);
+        }
+      } else {
+        if (asArray && Array.isArray(field.value) && field.value.map(checkedValue => JSON.stringify(checkedValue)).includes(JSON.stringify(value))) {
+          formikContext.setFieldValue(name, field.value.filter(checkedValue => JSON.stringify(checkedValue) !== JSON.stringify(value)));
+        } else {
+          if (JSON.stringify(field.value) === JSON.stringify(value)) {
+            formikContext.setFieldValue(name, formikContext.initialValues[name]);
+          }
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [checked]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiStandardCheckbox, _objectSpread({
+    id: id,
+    ref: ref,
+    className: className,
+    sx: sx,
+    name: name,
+    error: error || hasError,
+    helperText: hasError && Boolean(meta.error) ? meta.error : helperText !== null && helperText !== void 0 ? helperText : "",
+    value: value,
+    label: label,
+    disableHelperText: disableHelperText,
+    checked: checked !== undefined ? checked : value !== undefined ? !Array.isArray(field.value) && String(field.value) === String(value) || Array.isArray(field.value) && ((_field$value = field.value) === null || _field$value === void 0 ? void 0 : _field$value.includes(String(value))) : Boolean(field.value),
+    disabled: disabled,
+    required: required,
+    onChange: changeHandler
+  }, rest));
+});
+const PuiCheckbox = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+      formik,
+      id,
+      className,
+      sx,
+      name,
+      value,
+      defaultValue,
+      label,
+      checked,
+      asArray,
+      error,
+      helperText,
+      disableHelperText,
+      disabled,
+      required,
+      onChange
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(formik ? PuiFormikCheckbox : PuiStandardCheckbox, _objectSpread({
+    id,
+    ref,
+    className,
+    sx,
+    name,
+    value,
+    defaultValue,
+    label,
+    checked,
+    asArray,
+    error,
+    helperText,
+    disableHelperText,
+    disabled,
+    required,
+    onChange
+  }, rest));
+});
+PuiCheckbox.propTypes = {
+  id: _propTypes.default.string,
+  className: _propTypes.default.string,
+  sx: _propTypes.default.object,
+  label: _propTypes.default.any,
+  helperText: _propTypes.default.string,
+  name: _propTypes.default.string,
+  defaultValue: _propTypes.default.any,
+  asArray: _propTypes.default.bool,
+  error: _propTypes.default.bool,
+  formik: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  disableHelperText: _propTypes.default.bool,
+  required: _propTypes.default.bool,
+  checked: _propTypes.default.bool,
+  onChange: _propTypes.default.func
+};
+PuiCheckbox.defaultProps = {
+  error: false,
+  formik: true,
+  disabled: false,
+  asArray: false,
+  disableHelperText: false,
+  required: false,
+  onChange: () => {}
+};
+var _default = exports.default = PuiCheckbox;