@vidispine/vdt-materialui 23.2.0-pre.2 → 23.2.0

package/dist/es/upload/UploadListItem.js

@@ -0,0 +1,143 @@
+import { jsxs as a, jsx as i } from "react/jsx-runtime";
+import S from "clsx";
+import { filesize as B } from "filesize";
+import { withStyles as T, emphasize as f, ListItem as z, ListItemAvatar as A, Avatar as P, ListItemText as W, Typography as m, ListItemSecondaryAction as v, IconButton as $, Box as c, LinearProgress as H } from "@material-ui/core";
+import { CheckCircle as R, QueryBuilder as j, Delete as U } from "@material-ui/icons";
+import D from "../general/MimeTypeIcon/index.js";
+function M(e) {
+  const { value: o } = e;
+  return /* @__PURE__ */ a(c, { display: "flex", alignItems: "center", children: [
+    /* @__PURE__ */ i(c, { width: "100%", mr: 1, children: /* @__PURE__ */ i(H, { variant: "determinate", ...e }) }),
+    /* @__PURE__ */ i(c, { minWidth: 35, children: o && /* @__PURE__ */ i(m, { variant: "body2", color: "textSecondary", children: `${Math.round(o)}%` }) })
+  ] });
+}
+const q = (e) => ({
+  fileListItemSecondaryAction: {
+    visibility: "hidden"
+  },
+  fileListItemContainer: {
+    cursor: "pointer",
+    "&:not(:first-of-type)": {
+      marginTop: e.spacing(0.5)
+    },
+    backgroundColor: f(e.palette.background.paper, 0.05),
+    "&:hover $fileListItemSecondaryAction": {
+      visibility: "visible"
+    },
+    "&:hover $successIcon": {
+      visibility: "hidden"
+    },
+    "&:hover $progressIcon": {
+      visibility: "hidden"
+    }
+  },
+  fileListItemContainerComplete: {
+    cursor: "default"
+  },
+  fileListItemContainerHover: {
+    "&:hover": {
+      backgroundColor: f(e.palette.background.paper, 0.1)
+    }
+  },
+  successIcon: {
+    color: e.palette.success.main,
+    visibility: "visible"
+  },
+  progressIcon: {
+    visibility: "visible"
+  },
+  errorIcon: {
+    color: e.palette.error.main
+  },
+  progressRoot: {
+    minHeight: 16
+  },
+  thumbsContainer: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginTop: 16
+  },
+  thumb: {
+    display: "inline-flex",
+    borderRadius: 2,
+    border: "1px solid #eaeaea",
+    marginBottom: 8,
+    marginRight: 8,
+    width: 80,
+    height: 80,
+    padding: 4,
+    boxSizing: "border-box"
+  },
+  thumbInner: {
+    display: "flex",
+    width: "100%",
+    overflow: "hidden"
+  },
+  media: {
+    display: "block",
+    width: "auto",
+    height: "100%"
+  },
+  full: {
+    width: "100%",
+    height: "100%"
+  }
+});
+function Q({
+  classes: e,
+  file: o,
+  progress: t,
+  onRemove: y,
+  onClick: b,
+  selected: p,
+  isUploading: g,
+  ProgressComponent: I = M,
+  ProgressProps: C = {},
+  CompleteIcon: L = R,
+  ProgressIcon: x = j,
+  DeleteIcon: w = U,
+  MimeTypeAvatarIcon: N = D
+}) {
+  const { type: n, size: l, name: d, preview: h } = o, u = t && t.transferedBytes ? Math.floor(t.transferedBytes / t.totalBytes * 100) : 0, s = u === 100, k = l ? B(l, { base: 2, standard: "jedec" }) : void 0;
+  let r;
+  return n.includes("image") ? r = "image" : n.includes("video") ? r = "video" : r = "other", /* @__PURE__ */ a(
+    z,
+    {
+      ContainerComponent: "div",
+      ContainerProps: {
+        className: S(
+          e.fileListItemContainer,
+          { [e.fileListItemContainerHover]: !p },
+          { [e.fileListItemContainerComplete]: s }
+        )
+      },
+      onClick: s ? void 0 : b,
+      selected: p,
+      children: [
+        /* @__PURE__ */ i("aside", { className: e.thumbsContainer, children: /* @__PURE__ */ i("div", { className: e.thumb, children: /* @__PURE__ */ a("div", { className: e.thumbInner, children: [
+          r === "image" && /* @__PURE__ */ i("img", { src: h, className: e.media, alt: d }),
+          r === "video" && /* @__PURE__ */ i("video", { className: e.media, autoPlay: !0, muted: !0, children: /* @__PURE__ */ i("source", { src: h, type: n }) }),
+          r === "other" && /* @__PURE__ */ i(A, { className: e.full, children: /* @__PURE__ */ i(P, { variant: "square", className: e.full, children: /* @__PURE__ */ i(N, { mimeType: n, fontSize: "large" }) }) })
+        ] }) }, d) }),
+        /* @__PURE__ */ i(
+          W,
+          {
+            disableTypography: !0,
+            primary: /* @__PURE__ */ a("div", { children: [
+              /* @__PURE__ */ i(m, { variant: "body1", component: "span", display: "block", noWrap: !0, children: d }),
+              l && /* @__PURE__ */ i(m, { variant: "body2", component: "span", display: "block", noWrap: !0, children: k }),
+              /* @__PURE__ */ i("div", { className: e.progressRoot, children: t && /* @__PURE__ */ i(I, { value: u, ...C }) })
+            ] })
+          }
+        ),
+        t && /* @__PURE__ */ i(v, { children: s ? /* @__PURE__ */ i(L, { className: e.successIcon }) : /* @__PURE__ */ i(x, { className: e.progressIcon }) }),
+        /* @__PURE__ */ i(v, { classes: { root: e.fileListItemSecondaryAction }, children: /* @__PURE__ */ i($, { edge: "end", onClick: y, disabled: g, children: /* @__PURE__ */ i(w, {}) }) })
+      ]
+    }
+  );
+}
+const O = T(q, { name: "VdtUploadListItem" })(Q);
+export {
+  O as default
+};

package/dist/es/user/ChangePasswordDialog.js

@@ -0,0 +1,48 @@
+import { jsxs as t, Fragment as g, jsx as a } from "react/jsx-runtime";
+import { withStyles as c, DialogTitle as d, Typography as p, IconButton as h, DialogContent as m } from "@material-ui/core";
+import { Close as u } from "@material-ui/icons";
+import f from "./ChangePasswordForm.js";
+const y = (o) => ({
+  DialogTitle: {
+    margin: 0,
+    padding: o.spacing(2)
+  },
+  closeButton: {
+    position: "absolute",
+    right: o.spacing(1),
+    top: o.spacing(1),
+    color: o.palette.grey[500]
+  }
+});
+function D({
+  classes: o,
+  username: i,
+  onClose: r,
+  onSuccess: l,
+  changePasswordTxt: n = "Change Password",
+  ...s
+}) {
+  return /* @__PURE__ */ t(g, { children: [
+    /* @__PURE__ */ t(d, { disableTypography: !0, className: o.DialogTitle, children: [
+      /* @__PURE__ */ t(p, { variant: "h6", children: [
+        n,
+        i ? `:  ${i}` : ""
+      ] }),
+      r ? /* @__PURE__ */ a(h, { "aria-label": "close", className: o.closeButton, onClick: r, children: /* @__PURE__ */ a(u, {}) }) : null
+    ] }),
+    /* @__PURE__ */ a(m, { dividers: !0, children: /* @__PURE__ */ a(
+      f,
+      {
+        username: i,
+        onSuccess: (e) => {
+          l && l(e), r();
+        },
+        ...s
+      }
+    ) })
+  ] });
+}
+const b = c(y, { name: "VdtChangePasswordDialog" })(D);
+export {
+  b as default
+};

package/dist/es/user/ChangePasswordForm.js

@@ -0,0 +1,224 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { useReducer as H, useState as O, useEffect as J } from "react";
+import r from "prop-types";
+import { withStyles as K, Grow as A, FormControl as h, InputLabel as y, FilledInput as T, InputAdornment as E, IconButton as P, Button as M, CircularProgress as Q } from "@material-ui/core";
+import { Visibility as f, VisibilityOff as g } from "@material-ui/icons";
+import { Alert as N } from "@material-ui/lab";
+import { user as x } from "@vidispine/vdt-api";
+const U = Object.freeze({
+  oldPassword: "",
+  password: "",
+  passwordAgain: "",
+  errors: [],
+  loading: !1,
+  success: !1
+}), s = {
+  SET_LOADING: "SET_LOADING",
+  SET_ERRORS: "SET_ERRORS",
+  SET_INPUT_VALUE: "SET_INPUT_VALUE",
+  SET_SUCCESS: "SET_SUCCESS"
+};
+function W(a, n) {
+  switch (n.type) {
+    case s.SET_LOADING: {
+      const d = {
+        ...a,
+        loading: n.payload
+      };
+      return n.payload && (d.errors = [], d.success = !1), d;
+    }
+    case s.SET_ERRORS:
+      return {
+        ...a,
+        loading: !1,
+        errors: n.payload,
+        success: !1
+      };
+    case s.SET_INPUT_VALUE: {
+      const d = {
+        ...a
+      };
+      return d[n.payload.input] = n.payload.value, d;
+    }
+    case s.SET_SUCCESS:
+      return {
+        ...U,
+        success: !0
+      };
+    default:
+      throw new Error();
+  }
+}
+const X = (a) => ({
+  root: {},
+  FormControl: {
+    display: "flex",
+    marginBottom: a.spacing(3)
+  },
+  alert: {
+    marginBottom: a.spacing(2)
+  }
+});
+function R({
+  classes: a,
+  onSuccess: n,
+  username: d,
+  // used to change passwords for other users
+  validateOldPassword: C,
+  // useful when changing other users passwords
+  changePwdTxt: I,
+  changePwdSuccessTxt: b,
+  usernameErrTxt: _,
+  identicalPwdErrTxt: L,
+  oldPwdTxt: F,
+  oldPwdErrTxt: D,
+  newPwdTxt: G,
+  repeatPwdTxt: V,
+  noPwdTxt: k,
+  noUserTxt: j
+}) {
+  const [o, t] = H(W, U), [l, B] = O(!1), w = () => B(!l), [c, q] = O(d);
+  J(() => {
+    c || (t({ type: s.SET_LOADING, payload: !0 }), x.whoAmI().then(({ data: i }) => {
+      q(i), t({ type: s.SET_LOADING, payload: !1 });
+    }).catch(() => {
+      t({ type: s.SET_ERRORS, payload: [_] });
+    }));
+  }, [c, _]);
+  const v = (i) => {
+    i.preventDefault();
+    const { oldPassword: S, password: p, passwordAgain: z } = o;
+    if (!p || p === "") {
+      t({ type: s.SET_ERRORS, payload: [k] });
+      return;
+    }
+    if (p !== z) {
+      t({ type: s.SET_ERRORS, payload: [L] });
+      return;
+    }
+    if (!c) {
+      t({ type: s.SET_ERRORS, payload: [j] });
+      return;
+    }
+    t({ type: s.SET_LOADING, payload: !0 }), (() => C === !1 ? Promise.resolve() : x.validateUserPassword({
+      userName: c,
+      password: S,
+      queryParams: {
+        type: "raw"
+      }
+    }))().then(() => {
+      x.updateUserPassword({
+        userName: c,
+        password: p,
+        queryParams: {
+          type: "raw"
+        }
+      }).then(() => {
+        t({ type: s.SET_SUCCESS }), n && n({ userName: c, password: p });
+      }).catch(($) => {
+        t({ type: s.SET_ERRORS, payload: [$.message] });
+      });
+    }).catch(() => {
+      t({ type: s.SET_ERRORS, payload: [D] });
+    });
+  }, m = (i) => (S) => {
+    t({
+      type: s.SET_INPUT_VALUE,
+      payload: {
+        input: i,
+        value: S.target.value
+      }
+    });
+  };
+  return /* @__PURE__ */ u("div", { className: a.root, children: [
+    o.errors.map((i) => /* @__PURE__ */ e(A, { in: !0, children: /* @__PURE__ */ e(N, { className: a.alert, severity: "error", children: i }) }, i.substring(1, 5))),
+    o.success && /* @__PURE__ */ e(A, { in: !0, children: /* @__PURE__ */ e(N, { className: a.alert, severity: "success", children: b }) }),
+    /* @__PURE__ */ u("form", { onSubmit: v, children: [
+      C && /* @__PURE__ */ u(h, { variant: "filled", className: a.FormControl, children: [
+        /* @__PURE__ */ e(y, { children: F }),
+        /* @__PURE__ */ e(
+          T,
+          {
+            inputProps: { tabIndex: 1 },
+            type: l ? "text" : "password",
+            value: o.oldPassword,
+            onChange: m("oldPassword"),
+            endAdornment: /* @__PURE__ */ e(E, { position: "end", children: /* @__PURE__ */ e(P, { onClick: w, children: l ? /* @__PURE__ */ e(f, {}) : /* @__PURE__ */ e(g, {}) }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ u(h, { variant: "filled", className: a.FormControl, children: [
+        /* @__PURE__ */ e(y, { children: G }),
+        /* @__PURE__ */ e(
+          T,
+          {
+            inputProps: { tabIndex: 2 },
+            type: l ? "text" : "password",
+            value: o.password,
+            onChange: m("password"),
+            endAdornment: /* @__PURE__ */ e(E, { position: "end", children: /* @__PURE__ */ e(P, { onClick: w, children: l ? /* @__PURE__ */ e(f, {}) : /* @__PURE__ */ e(g, {}) }) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ u(h, { variant: "filled", className: a.FormControl, children: [
+        /* @__PURE__ */ e(y, { children: V }),
+        /* @__PURE__ */ e(
+          T,
+          {
+            inputProps: { tabIndex: 3 },
+            type: l ? "text" : "password",
+            value: o.passwordAgain,
+            onChange: m("passwordAgain"),
+            endAdornment: /* @__PURE__ */ e(E, { position: "end", children: /* @__PURE__ */ e(P, { onClick: w, children: l ? /* @__PURE__ */ e(f, {}) : /* @__PURE__ */ e(g, {}) }) })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      M,
+      {
+        variant: "contained",
+        color: "primary",
+        onClick: v,
+        disabled: !(o.password && o.passwordAgain && !o.loading),
+        children: o.loading ? /* @__PURE__ */ e(Q, { size: 20, color: "inherit" }) : I
+      }
+    )
+  ] });
+}
+R.propTypes = {
+  classes: r.objectOf(r.string),
+  username: r.string,
+  onSuccess: r.func,
+  validateOldPassword: r.bool,
+  changePwdTxt: r.string,
+  changePwdSuccessTxt: r.string,
+  usernameErrTxt: r.string,
+  identicalPwdErrTxt: r.string,
+  oldPwdTxt: r.string,
+  oldPwdErrTxt: r.string,
+  newPwdTxt: r.string,
+  repeatPwdTxt: r.string,
+  noPwdTxt: r.string,
+  noUserTxt: r.string
+};
+R.defaultProps = {
+  classes: {},
+  username: void 0,
+  onSuccess: null,
+  validateOldPassword: !0,
+  changePwdTxt: "Change Password",
+  changePwdSuccessTxt: "Password successfully changed!",
+  usernameErrTxt: "Unable to verify username.",
+  identicalPwdErrTxt: "Passwords are not identical.",
+  oldPwdTxt: "Old password",
+  oldPwdErrTxt: "Unable to verify the old password.",
+  newPwdTxt: "New password",
+  repeatPwdTxt: "Repeat password",
+  noPwdTxt: "No password set",
+  noUserTxt: "Cannot determine username"
+};
+const ne = K(X, { name: "VdtChangePasswordForm" })(R);
+export {
+  ne as default
+};

package/dist/es/user/ChangeUserPasswordDialog/ChangeUserPasswordDialog.js

@@ -0,0 +1,42 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import p from "clsx";
+import o from "prop-types";
+import { DialogTitle as c, DialogContent as d } from "@material-ui/core";
+import f from "@vidispine/proptypes";
+import u from "./components/UserPasswordForm.js";
+const x = () => ({
+  root: {}
+});
+function i({ classes: t, className: a, user: n, onClose: l, onSubmit: m }) {
+  const { userName: s } = n;
+  return /* @__PURE__ */ r("div", { className: p(t.root, "VdtCreateUserDialog-root", a), children: [
+    /* @__PURE__ */ r(c, { children: [
+      "Change password for ",
+      s || "user"
+    ] }),
+    /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(u, { onSubmit: m, onCancel: l, userName: s }) })
+  ] });
+}
+i.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.objectOf(o.string),
+  /**
+   * Override styles with className
+   */
+  className: o.string,
+  onClose: o.func,
+  onSubmit: o.func,
+  user: f.UserType.isRequired
+};
+i.defaultProps = {
+  className: void 0,
+  classes: {},
+  onClose: void 0,
+  onSubmit: void 0
+};
+export {
+  i as default,
+  x as styles
+};

package/dist/es/user/ChangeUserPasswordDialog/components/PasswordField.js

@@ -0,0 +1,20 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useState as e } from "react";
+import { TextField as n, InputAdornment as d, IconButton as p } from "@material-ui/core";
+import { Visibility as m, VisibilityOff as f } from "@material-ui/icons";
+function w(i) {
+  const [t, r] = e(!1);
+  return /* @__PURE__ */ o(
+    n,
+    {
+      type: t ? "text" : "password",
+      InputProps: {
+        endAdornment: /* @__PURE__ */ o(d, { position: "end", children: /* @__PURE__ */ o(p, { onClick: () => r((s) => !s), children: t ? /* @__PURE__ */ o(m, {}) : /* @__PURE__ */ o(f, {}) }) })
+      },
+      ...i
+    }
+  );
+}
+export {
+  w as default
+};

package/dist/es/user/ChangeUserPasswordDialog/components/UserPasswordForm.js

@@ -0,0 +1,57 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { useRef as u } from "react";
+import { withStyles as w, Button as s } from "@material-ui/core";
+import h from "./PasswordField.js";
+const x = (e) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    "& > *": {
+      marginTop: e.spacing(1),
+      marginBottom: e.spacing(1)
+    }
+  },
+  action: {
+    display: "flex",
+    justifyContent: "flex-end"
+  },
+  fields: {
+    display: "flex",
+    alignItems: "center"
+  }
+});
+function y({
+  classes: e,
+  userName: n,
+  onSubmit: i,
+  onCancel: a,
+  submitText: l = "Change",
+  cancelText: d = "Cancel",
+  passwordText: m = "New Password"
+}) {
+  const o = u(), c = (f) => {
+    f.preventDefault();
+    const { value: p } = o.current;
+    i({ userName: n, password: p });
+  };
+  return /* @__PURE__ */ t("form", { className: e.root, onSubmit: c, children: [
+    /* @__PURE__ */ r("div", { className: e.fields, children: /* @__PURE__ */ r(
+      h,
+      {
+        required: !0,
+        fullWidth: !0,
+        name: "password",
+        label: m,
+        inputRef: o
+      }
+    ) }),
+    /* @__PURE__ */ t("div", { className: e.action, children: [
+      /* @__PURE__ */ r(s, { onClick: a, children: d }),
+      /* @__PURE__ */ r(s, { variant: "contained", color: "primary", type: "submit", children: l })
+    ] })
+  ] });
+}
+const C = w(x, { name: "VdtUserPasswordForm" })(y);
+export {
+  C as default
+};

package/dist/es/user/ChangeUserPasswordDialog/index.js

@@ -0,0 +1,9 @@
+import { withStyles as e } from "@material-ui/core";
+import a, { styles as o } from "./ChangeUserPasswordDialog.js";
+const s = e(o, { name: "VdtChangeUserPasswordDialog" })(
+  a
+);
+s.displayName = "ChangeUserPasswordDialog";
+export {
+  s as default
+};

package/dist/es/user/CreateUserDialog/CreateUserDialog.js

@@ -0,0 +1,70 @@
+import { jsxs as C, jsx as i } from "react/jsx-runtime";
+import { useMemo as D } from "react";
+import T from "clsx";
+import o from "prop-types";
+import { DialogTitle as y, DialogContent as N } from "@material-ui/core";
+import U from "@vidispine/proptypes";
+import x from "./components/CreateUserForm.js";
+const L = () => ({
+  root: {},
+  DialogTitle: {},
+  DialogContent: {}
+});
+function n({
+  classes: t,
+  className: p,
+  groupListType: a,
+  onClose: m,
+  onSubmit: c,
+  titleText: l,
+  CreateUserFormProps: u
+}) {
+  const [g, f] = D(() => {
+    const { group: d = [] } = a;
+    return d.reduce(
+      ([r, e], s) => s.role ? [[...r, s], e] : [r, [...e, s]],
+      [[], []]
+    ).map((r) => r.map((e) => e.groupName));
+  }, [a]);
+  return /* @__PURE__ */ C("div", { className: T(t.root, "VdtCreateUserDialog-root", p), children: [
+    l && /* @__PURE__ */ i(y, { className: t.DialogTitle, children: l }),
+    /* @__PURE__ */ i(N, { className: t.DialogContent, children: /* @__PURE__ */ i(
+      x,
+      {
+        onSubmit: c,
+        onCancel: m,
+        roles: g,
+        groups: f,
+        ...u
+      }
+    ) })
+  ] });
+}
+n.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: o.objectOf(o.string),
+  /**
+   * Override styles with className
+   */
+  className: o.string,
+  titleText: o.string,
+  onClose: o.func,
+  onSubmit: o.func,
+  groupListType: U.GroupListType,
+  CreateUserFormProps: o.objectOf(o.any)
+};
+n.defaultProps = {
+  className: void 0,
+  classes: {},
+  titleText: "Create User",
+  onClose: void 0,
+  onSubmit: void 0,
+  groupListType: {},
+  CreateUserFormProps: {}
+};
+export {
+  n as default,
+  L as styles
+};

package/dist/es/user/CreateUserDialog/components/CreateUserForm.js

@@ -0,0 +1,80 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { useRef as a, useState as c } from "react";
+import { withStyles as S, TextField as n, Button as d } from "@material-ui/core";
+import { Autocomplete as f } from "@material-ui/lab";
+import U from "../../ChangeUserPasswordDialog/components/PasswordField.js";
+const F = (t) => ({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    "& > *": {
+      marginTop: t.spacing(1),
+      marginBottom: t.spacing(1)
+    }
+  },
+  action: {
+    display: "flex",
+    justifyContent: "flex-end"
+  }
+});
+function O({
+  classes: t,
+  onSubmit: g,
+  onCancel: b,
+  submitText: R = "Create",
+  cancelText: C = "Cancel",
+  groups: N,
+  roles: h
+}) {
+  const s = a(), l = a(), u = a(), [i, v] = c([]), [m, x] = c([]), y = (e) => {
+    e.preventDefault();
+    const o = {
+      userName: s.current.value,
+      realName: l.current.value,
+      password: u.current.value,
+      groupList: {
+        group: i.concat(m).map((w) => ({ groupName: w }))
+      }
+    };
+    g({ userDocument: o });
+  };
+  return /* @__PURE__ */ p("form", { className: t.root, onSubmit: y, children: [
+    /* @__PURE__ */ r(n, { required: !0, name: "userName", label: "Username", inputRef: s }),
+    /* @__PURE__ */ r(n, { name: "realName", label: "Real name", inputRef: l }),
+    /* @__PURE__ */ r(U, { name: "password", required: !0, fullWidth: !0, label: "Password", inputRef: u }),
+    /* @__PURE__ */ r(
+      f,
+      {
+        name: "groups",
+        multiple: !0,
+        options: N,
+        getOptionLabel: (e) => e,
+        filterSelectedOptions: !0,
+        value: i,
+        onChange: (e, o) => v(o),
+        renderInput: (e) => /* @__PURE__ */ r(n, { ...e, label: "Add to groups" })
+      }
+    ),
+    /* @__PURE__ */ r(
+      f,
+      {
+        name: "roles",
+        multiple: !0,
+        options: h,
+        getOptionLabel: (e) => e,
+        filterSelectedOptions: !0,
+        value: m,
+        onChange: (e, o) => x(o),
+        renderInput: (e) => /* @__PURE__ */ r(n, { ...e, label: "Add roles" })
+      }
+    ),
+    /* @__PURE__ */ p("div", { className: t.action, children: [
+      /* @__PURE__ */ r(d, { onClick: b, children: C }),
+      /* @__PURE__ */ r(d, { variant: "contained", color: "primary", type: "submit", children: R })
+    ] })
+  ] });
+}
+const B = S(F, { name: "VdtCreateUserForm" })(O);
+export {
+  B as default
+};