@trinitydesign/design-system 1.2.0

package/dist/forms.js

@@ -0,0 +1,971 @@
+import { jsxs as L, Fragment as Se, jsx as e } from "react/jsx-runtime";
+import * as a from "react";
+import { createElement as Le, useState as ie, useRef as Ie, useCallback as K } from "react";
+import { useTheme as ce, Paper as oe, Divider as ge, Button as ae, alpha as de, Autocomplete as ze, Typography as te, ListItem as ye, ListItemIcon as se, Checkbox as we, Box as J, ListItemText as ve, Popper as Fe, Chip as Ce, TextField as De, Alert as ue, Stack as Be, List as Re, LinearProgress as Te, ListItemSecondaryAction as Ee, IconButton as V, Tooltip as g, ToggleButtonGroup as Pe, ToggleButton as q, FormControl as Ue, Select as Ae, MenuItem as X } from "@mui/material";
+import { Add as qe, Close as me, Check as he, FullscreenExit as Me, Fullscreen as Oe, FormatClear as je, Redo as He, Undo as We, FormatAlignLeft as $e, FormatAlignCenter as Ke, FormatAlignRight as Ve, FormatAlignJustify as Ge, Image as Ne, Link as _e, Code as Je, FormatQuote as Qe, FormatListNumbered as Ye, FormatListBulleted as Ze, StrikethroughS as Xe, FormatUnderlined as et, FormatItalic as tt, FormatBold as rt } from "@mui/icons-material";
+import le from "@mui/icons-material/CloudUpload";
+import nt from "@mui/icons-material/InsertDriveFile";
+import ot from "@mui/icons-material/Delete";
+import xe from "@mui/icons-material/CheckCircle";
+import it from "@mui/icons-material/Error";
+import lt from "@mui/icons-material/PictureAsPdf";
+import at from "@mui/icons-material/Image";
+import st from "@mui/icons-material/VideoLibrary";
+import ct from "@mui/icons-material/Description";
+const fe = () => `new-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, dt = (l) => /* @__PURE__ */ e(
+  Fe,
+  {
+    ...l,
+    placement: "bottom-start",
+    modifiers: [
+      {
+        name: "offset",
+        options: {
+          offset: [0, 4]
+        }
+      }
+    ]
+  }
+), wt = ({
+  options: l,
+  value: h,
+  defaultValue: s,
+  onChange: v,
+  creatable: m = !1,
+  onCreate: C,
+  createText: I = 'Create "{value}"',
+  multiple: f = !1,
+  placeholder: G = "Select...",
+  label: M,
+  helperText: u,
+  error: T = !1,
+  errorMessage: Q,
+  disabled: O = !1,
+  fullWidth: p = !1,
+  size: c = "medium",
+  limitTags: d = 3,
+  showCheckbox: j = !0,
+  groupBy: E = !1,
+  loading: w = !1,
+  noOptionsText: H = "No options",
+  filterOptions: x,
+  renderOption: y,
+  renderTag: k,
+  freeSolo: F = !1,
+  autoHighlight: re = !0,
+  clearOnEscape: N = !0,
+  className: ne,
+  sx: ee
+}) => {
+  const R = ce(), [D, P] = a.useState(""), [Y, W] = a.useState(
+    s || []
+  ), b = h !== void 0 ? h : Y, _ = a.useCallback(
+    (t, o) => {
+      if (x)
+        return x(t, o);
+      const i = o.inputValue.toLowerCase();
+      return t.filter(
+        (U) => U.label.toLowerCase().includes(i) || U.secondary?.toLowerCase().includes(i)
+      );
+    },
+    [x]
+  ), $ = a.useMemo(() => !m || !D.trim() ? !1 : !l.some(
+    (o) => o.label.toLowerCase() === D.toLowerCase()
+  ), [m, D, l]), n = async (t, o) => {
+    let i;
+    if (f) {
+      const U = o || [];
+      i = await Promise.all(
+        U.map(async (A) => typeof A == "string" ? m && C ? await C(A) : { id: fe(), label: A } : A)
+      );
+    } else
+      o === null ? i = [] : typeof o == "string" ? m && C ? i = [await C(o)] : i = [{ id: fe(), label: o }] : i = [o];
+    W(i), v?.(i);
+  }, S = a.useCallback(async () => {
+    if (!$ || !C) return;
+    const t = await C(D), o = f ? [...b, t] : [t];
+    W(o), v?.(o), P("");
+  }, [$, C, D, f, b, v]), B = (t) => /* @__PURE__ */ e(
+    De,
+    {
+      ...t,
+      label: M,
+      placeholder: b.length === 0 ? G : void 0,
+      error: T,
+      helperText: T ? Q : u,
+      size: c,
+      InputProps: {
+        ...t.InputProps,
+        sx: {
+          "& .MuiAutocomplete-input": {
+            minWidth: "60px !important"
+          }
+        }
+      }
+    }
+  ), Z = (t, o) => t.map((i, U) => {
+    const A = o({ index: U });
+    return k ? k(i, A.onDelete) : /* @__PURE__ */ Le(
+      Ce,
+      {
+        ...A,
+        key: i.id,
+        label: i.label,
+        size: c,
+        deleteIcon: /* @__PURE__ */ e(me, { fontSize: "small" }),
+        sx: {
+          maxWidth: 150,
+          "& .MuiChip-label": {
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }
+        }
+      }
+    );
+  }), z = a.useCallback(
+    (t) => /* @__PURE__ */ L(oe, { ...t, elevation: 8, children: [
+      t.children,
+      $ && /* @__PURE__ */ L(Se, { children: [
+        /* @__PURE__ */ e(ge, {}),
+        /* @__PURE__ */ e(
+          ae,
+          {
+            fullWidth: !0,
+            startIcon: /* @__PURE__ */ e(qe, {}),
+            onClick: S,
+            sx: {
+              justifyContent: "flex-start",
+              py: 1.5,
+              px: 2,
+              textTransform: "none",
+              color: "primary.main",
+              borderRadius: 0,
+              "&:hover": {
+                backgroundColor: de(R.palette.primary.main, 0.08)
+              }
+            },
+            children: I.replace("{value}", D)
+          }
+        )
+      ] })
+    ] }),
+    [$, I, D, R.palette.primary.main, S]
+  ), r = l;
+  return /* @__PURE__ */ e(
+    ze,
+    {
+      className: ne,
+      sx: {
+        width: p ? "100%" : 300,
+        ...ee
+      },
+      multiple: f,
+      options: r,
+      value: f ? b : b[0] || null,
+      onChange: n,
+      inputValue: D,
+      onInputChange: (t, o) => P(o),
+      getOptionLabel: (t) => typeof t == "string" ? t : t.label,
+      isOptionEqualToValue: (t, o) => t.id === o.id,
+      getOptionDisabled: (t) => typeof t == "object" && t.disabled === !0,
+      groupBy: E ? (t) => t.group || "" : void 0,
+      filterOptions: _,
+      renderInput: B,
+      renderTags: f ? Z : void 0,
+      renderOption: (t, o, { selected: i }) => {
+        const { key: U, ...A } = t;
+        return y ? /* @__PURE__ */ e("li", { ...A, children: y(o, { selected: i }) }, U) : /* @__PURE__ */ L(ye, { ...A, dense: !0, children: [
+          f && j && /* @__PURE__ */ e(se, { sx: { minWidth: 36 }, children: /* @__PURE__ */ e(
+            we,
+            {
+              icon: /* @__PURE__ */ e(J, { sx: { width: 18, height: 18 } }),
+              checkedIcon: /* @__PURE__ */ e(
+                he,
+                {
+                  sx: {
+                    width: 18,
+                    height: 18,
+                    color: "primary.main"
+                  }
+                }
+              ),
+              checked: i,
+              size: "small"
+            }
+          ) }),
+          o.icon && /* @__PURE__ */ e(se, { sx: { minWidth: 36 }, children: o.icon }),
+          /* @__PURE__ */ e(
+            ve,
+            {
+              primary: o.label,
+              secondary: o.secondary,
+              primaryTypographyProps: { variant: "body2" },
+              secondaryTypographyProps: { variant: "caption" }
+            }
+          ),
+          !f && i && /* @__PURE__ */ e(he, { sx: { ml: 1, color: "primary.main" }, fontSize: "small" })
+        ] }, U);
+      },
+      PaperComponent: m ? z : oe,
+      PopperComponent: dt,
+      limitTags: d,
+      disabled: O,
+      loading: w,
+      noOptionsText: $ ? /* @__PURE__ */ e(te, { variant: "body2", color: "text.secondary", children: "Press Enter or click below to create" }) : H,
+      freeSolo: F || m,
+      autoHighlight: re,
+      clearOnEscape: N,
+      disableCloseOnSelect: f,
+      ChipProps: {
+        size: c,
+        deleteIcon: /* @__PURE__ */ e(me, { fontSize: "small" })
+      }
+    }
+  );
+}, ke = (l) => {
+  if (l === 0) return "0 Bytes";
+  const h = 1024, s = ["Bytes", "KB", "MB", "GB"], v = Math.floor(Math.log(l) / Math.log(h));
+  return parseFloat((l / Math.pow(h, v)).toFixed(2)) + " " + s[v];
+}, be = (l) => l.startsWith("image/") ? /* @__PURE__ */ e(at, {}) : l.startsWith("video/") ? /* @__PURE__ */ e(st, {}) : l === "application/pdf" ? /* @__PURE__ */ e(lt, {}) : l.includes("document") || l.includes("text") ? /* @__PURE__ */ e(ct, {}) : /* @__PURE__ */ e(nt, {}), ut = () => `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`, Ft = ({
+  variant: l = "dropzone",
+  accept: h,
+  multiple: s = !1,
+  maxSize: v,
+  maxFiles: m,
+  files: C,
+  onFilesChange: I,
+  onFileSelect: f,
+  onFileRemove: G,
+  onUpload: M,
+  disabled: u = !1,
+  helperText: T,
+  error: Q,
+  showFileList: O = !0,
+  size: p = "medium",
+  sx: c
+}) => {
+  const [d, j] = ie([]), [E, w] = ie(!1), [H, x] = ie(null), y = Ie(null), k = C ?? d, F = K((n) => {
+    typeof n == "function" ? I ? I(n(C ?? d)) : j(n) : I ? I(n) : j(n);
+  }, [C, d, I]), re = (n) => v && n.size > v ? `File "${n.name}" exceeds maximum size of ${ke(v)}` : m && k.length >= m ? `Maximum ${m} files allowed` : null, N = K(
+    async (n) => {
+      const S = Array.from(n), B = [], Z = [];
+      for (const z of S) {
+        const r = re(z);
+        if (r) {
+          Z.push(r);
+          continue;
+        }
+        const t = {
+          id: ut(),
+          file: z,
+          name: z.name,
+          size: z.size,
+          type: z.type,
+          progress: 0,
+          status: "pending",
+          preview: z.type.startsWith("image/") ? URL.createObjectURL(z) : void 0
+        };
+        B.push(t);
+      }
+      if (Z.length > 0 ? x(Z[0]) : x(null), B.length > 0) {
+        const z = s ? [...k, ...B] : B;
+        if (F(z), f?.(B.map((r) => r.file)), M)
+          for (const r of B)
+            try {
+              F(
+                (o) => o.map(
+                  (i) => i.id === r.id ? { ...i, status: "uploading" } : i
+                )
+              );
+              const t = setInterval(() => {
+                F(
+                  (o) => o.map(
+                    (i) => i.id === r.id && i.progress < 90 ? { ...i, progress: i.progress + 10 } : i
+                  )
+                );
+              }, 200);
+              await M(r.file), clearInterval(t), F(
+                (o) => o.map(
+                  (i) => i.id === r.id ? { ...i, status: "complete", progress: 100 } : i
+                )
+              );
+            } catch (t) {
+              F(
+                (o) => o.map(
+                  (i) => i.id === r.id ? {
+                    ...i,
+                    status: "error",
+                    error: t instanceof Error ? t.message : "Upload failed"
+                  } : i
+                )
+              );
+            }
+      }
+    },
+    [k, F, v, m, s, f, M]
+  ), ne = K((n) => {
+    n.preventDefault(), n.stopPropagation(), u || w(!0);
+  }, [u]), ee = K((n) => {
+    n.preventDefault(), n.stopPropagation(), w(!1);
+  }, []), R = K((n) => {
+    n.preventDefault(), n.stopPropagation();
+  }, []), D = K(
+    (n) => {
+      if (n.preventDefault(), n.stopPropagation(), w(!1), u) return;
+      const S = n.dataTransfer.files;
+      S.length > 0 && N(S);
+    },
+    [u, N]
+  ), P = K(
+    (n) => {
+      const S = n.target.files;
+      S && S.length > 0 && N(S), y.current && (y.current.value = "");
+    },
+    [N]
+  ), Y = K(
+    (n) => {
+      n.preview && URL.revokeObjectURL(n.preview);
+      const S = k.filter((B) => B.id !== n.id);
+      F(S), G?.(n);
+    },
+    [k, F, G]
+  ), W = () => {
+    y.current?.click();
+  }, b = Q || H, _ = /* @__PURE__ */ e(
+    "input",
+    {
+      ref: y,
+      type: "file",
+      accept: h,
+      multiple: s,
+      onChange: P,
+      style: { display: "none" },
+      disabled: u
+    }
+  ), $ = K(
+    (n) => {
+      (n.key === "Enter" || n.key === " ") && !u && (n.preventDefault(), W());
+    },
+    [u]
+  );
+  return l === "dropzone" ? /* @__PURE__ */ L(J, { sx: c, children: [
+    _,
+    /* @__PURE__ */ L(
+      oe,
+      {
+        role: "button",
+        tabIndex: u ? -1 : 0,
+        "aria-label": `Upload files${h ? `. Accepted formats: ${h}` : ""}. Drag and drop or press Enter to browse`,
+        "aria-disabled": u,
+        onDragEnter: ne,
+        onDragLeave: ee,
+        onDragOver: R,
+        onDrop: D,
+        onClick: W,
+        onKeyDown: $,
+        sx: {
+          p: p === "small" ? 3 : 4,
+          border: "2px dashed",
+          borderColor: b ? "error.main" : E ? "primary.main" : "divider",
+          borderRadius: "12px",
+          bgcolor: E ? "action.hover" : u ? "action.disabledBackground" : "background.paper",
+          textAlign: "center",
+          cursor: u ? "not-allowed" : "pointer",
+          transition: "all 0.2s ease",
+          "&:hover": {
+            bgcolor: u ? void 0 : "action.hover",
+            borderColor: u ? void 0 : "primary.main"
+          }
+        },
+        children: [
+          /* @__PURE__ */ e(
+            le,
+            {
+              sx: {
+                fontSize: p === "small" ? 40 : 56,
+                color: E ? "primary.main" : "action.active",
+                mb: 2
+              }
+            }
+          ),
+          /* @__PURE__ */ e(te, { variant: p === "small" ? "body1" : "h6", gutterBottom: !0, children: E ? "Drop files here" : "Drag & drop files here" }),
+          /* @__PURE__ */ e(te, { variant: "body2", color: "text.secondary", gutterBottom: !0, children: "or click to browse" }),
+          T && /* @__PURE__ */ e(te, { variant: "caption", color: "text.secondary", children: T })
+        ]
+      }
+    ),
+    b && /* @__PURE__ */ e(ue, { severity: "error", sx: { mt: 2 }, children: b }),
+    O && k.length > 0 && /* @__PURE__ */ e(pe, { files: k, onRemove: Y })
+  ] }) : l === "button" ? /* @__PURE__ */ L(J, { sx: c, children: [
+    _,
+    /* @__PURE__ */ L(
+      ae,
+      {
+        variant: "contained",
+        startIcon: /* @__PURE__ */ e(le, {}),
+        onClick: W,
+        disabled: u,
+        size: p,
+        children: [
+          "Upload ",
+          s ? "Files" : "File"
+        ]
+      }
+    ),
+    b && /* @__PURE__ */ e(ue, { severity: "error", sx: { mt: 2 }, children: b }),
+    O && k.length > 0 && /* @__PURE__ */ e(pe, { files: k, onRemove: Y })
+  ] }) : /* @__PURE__ */ L(J, { sx: c, children: [
+    _,
+    /* @__PURE__ */ L(Be, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", useFlexGap: !0, children: [
+      /* @__PURE__ */ e(
+        ae,
+        {
+          variant: "outlined",
+          size: "small",
+          startIcon: /* @__PURE__ */ e(le, {}),
+          onClick: W,
+          disabled: u,
+          children: "Browse"
+        }
+      ),
+      k.map((n) => /* @__PURE__ */ e(
+        Ce,
+        {
+          icon: n.status === "complete" ? /* @__PURE__ */ e(xe, {}) : be(n.type),
+          label: n.name,
+          onDelete: () => Y(n),
+          color: n.status === "error" ? "error" : n.status === "complete" ? "success" : "default",
+          size: "small",
+          sx: {
+            maxWidth: 200,
+            "& .MuiChip-label": {
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            }
+          }
+        },
+        n.id
+      ))
+    ] }),
+    b && /* @__PURE__ */ e(te, { variant: "caption", color: "error", sx: { mt: 0.5, display: "block" }, children: b })
+  ] });
+}, pe = ({ files: l, onRemove: h }) => /* @__PURE__ */ e(Re, { dense: !0, sx: { mt: 2 }, children: l.map((s) => /* @__PURE__ */ L(
+  ye,
+  {
+    sx: {
+      bgcolor: "background.paper",
+      borderRadius: "8px",
+      mb: 1,
+      border: "1px solid",
+      borderColor: s.status === "error" ? "error.light" : "divider"
+    },
+    children: [
+      /* @__PURE__ */ e(se, { children: s.status === "complete" ? /* @__PURE__ */ e(xe, { color: "success" }) : s.status === "error" ? /* @__PURE__ */ e(it, { color: "error" }) : be(s.type) }),
+      /* @__PURE__ */ e(
+        ve,
+        {
+          primary: s.name,
+          secondary: /* @__PURE__ */ L(J, { component: "span", children: [
+            ke(s.size),
+            s.error && /* @__PURE__ */ L(te, { component: "span", color: "error", sx: { ml: 1 }, children: [
+              "• ",
+              s.error
+            ] })
+          ] }),
+          sx: {
+            "& .MuiListItemText-primary": {
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }
+          }
+        }
+      ),
+      s.status === "uploading" && /* @__PURE__ */ e(J, { sx: { width: 100, mr: 2 }, children: /* @__PURE__ */ e(Te, { variant: "determinate", value: s.progress }) }),
+      /* @__PURE__ */ e(Ee, { children: /* @__PURE__ */ e(V, { edge: "end", onClick: () => h(s), size: "small", children: /* @__PURE__ */ e(ot, { fontSize: "small" }) }) })
+    ]
+  },
+  s.id
+)) }), mt = [
+  "heading",
+  "divider",
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "divider",
+  "bulletList",
+  "numberList",
+  "quote",
+  "code",
+  "divider",
+  "align",
+  "divider",
+  "link",
+  "image",
+  "divider",
+  "undo",
+  "redo",
+  "clearFormat",
+  "divider",
+  "fullscreen"
+], ht = ({
+  items: l,
+  formats: h,
+  headingLevel: s,
+  textAlign: v,
+  onFormat: m,
+  onHeadingChange: C,
+  onAlignChange: I,
+  onUndo: f,
+  onRedo: G,
+  onClearFormat: M,
+  onLinkInsert: u,
+  onImageInsert: T,
+  onFullscreen: Q,
+  isFullscreen: O,
+  canUndo: p,
+  canRedo: c,
+  disabled: d
+}) => {
+  const j = ce(), E = (w, H) => {
+    switch (w) {
+      case "divider":
+        return /* @__PURE__ */ e(
+          ge,
+          {
+            orientation: "vertical",
+            flexItem: !0,
+            sx: { mx: 0.5 }
+          },
+          `divider-${H}`
+        );
+      case "heading":
+        return /* @__PURE__ */ e(Ue, { size: "small", sx: { minWidth: 100, mr: 1 }, children: /* @__PURE__ */ L(
+          Ae,
+          {
+            value: s,
+            onChange: (x) => C(x.target.value),
+            disabled: d,
+            sx: {
+              "& .MuiSelect-select": {
+                py: 0.5,
+                fontSize: "0.875rem"
+              }
+            },
+            children: [
+              /* @__PURE__ */ e(X, { value: "p", children: "Paragraph" }),
+              /* @__PURE__ */ e(X, { value: "h1", children: "Heading 1" }),
+              /* @__PURE__ */ e(X, { value: "h2", children: "Heading 2" }),
+              /* @__PURE__ */ e(X, { value: "h3", children: "Heading 3" }),
+              /* @__PURE__ */ e(X, { value: "h4", children: "Heading 4" }),
+              /* @__PURE__ */ e(X, { value: "h5", children: "Heading 5" }),
+              /* @__PURE__ */ e(X, { value: "h6", children: "Heading 6" })
+            ]
+          }
+        ) }, "heading");
+      case "bold":
+        return /* @__PURE__ */ e(g, { title: "Bold (Ctrl+B)", children: /* @__PURE__ */ e(
+          q,
+          {
+            value: "bold",
+            selected: h.has("bold"),
+            onChange: () => m("bold"),
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(rt, { fontSize: "small" })
+          }
+        ) }, "bold");
+      case "italic":
+        return /* @__PURE__ */ e(g, { title: "Italic (Ctrl+I)", children: /* @__PURE__ */ e(
+          q,
+          {
+            value: "italic",
+            selected: h.has("italic"),
+            onChange: () => m("italic"),
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(tt, { fontSize: "small" })
+          }
+        ) }, "italic");
+      case "underline":
+        return /* @__PURE__ */ e(g, { title: "Underline (Ctrl+U)", children: /* @__PURE__ */ e(
+          q,
+          {
+            value: "underline",
+            selected: h.has("underline"),
+            onChange: () => m("underline"),
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(et, { fontSize: "small" })
+          }
+        ) }, "underline");
+      case "strike":
+        return /* @__PURE__ */ e(g, { title: "Strikethrough", children: /* @__PURE__ */ e(
+          q,
+          {
+            value: "strikeThrough",
+            selected: h.has("strikeThrough"),
+            onChange: () => m("strikeThrough"),
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(Xe, { fontSize: "small" })
+          }
+        ) }, "strike");
+      case "bulletList":
+        return /* @__PURE__ */ e(g, { title: "Bullet List", children: /* @__PURE__ */ e(
+          q,
+          {
+            value: "insertUnorderedList",
+            selected: h.has("insertUnorderedList"),
+            onChange: () => m("insertUnorderedList"),
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(Ze, { fontSize: "small" })
+          }
+        ) }, "bulletList");
+      case "numberList":
+        return /* @__PURE__ */ e(g, { title: "Numbered List", children: /* @__PURE__ */ e(
+          q,
+          {
+            value: "insertOrderedList",
+            selected: h.has("insertOrderedList"),
+            onChange: () => m("insertOrderedList"),
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(Ye, { fontSize: "small" })
+          }
+        ) }, "numberList");
+      case "quote":
+        return /* @__PURE__ */ e(g, { title: "Block Quote", children: /* @__PURE__ */ e(
+          V,
+          {
+            onClick: () => m("formatBlock"),
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(Qe, { fontSize: "small" })
+          }
+        ) }, "quote");
+      case "code":
+        return /* @__PURE__ */ e(g, { title: "Code Block", children: /* @__PURE__ */ e(
+          V,
+          {
+            onClick: () => m("code"),
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(Je, { fontSize: "small" })
+          }
+        ) }, "code");
+      case "link":
+        return /* @__PURE__ */ e(g, { title: "Insert Link", children: /* @__PURE__ */ e(
+          V,
+          {
+            onClick: u,
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(_e, { fontSize: "small" })
+          }
+        ) }, "link");
+      case "image":
+        return /* @__PURE__ */ e(g, { title: "Insert Image", children: /* @__PURE__ */ e(
+          V,
+          {
+            onClick: T,
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(Ne, { fontSize: "small" })
+          }
+        ) }, "image");
+      case "align":
+        return /* @__PURE__ */ L(
+          Pe,
+          {
+            value: v,
+            exclusive: !0,
+            onChange: (x, y) => y && I(y),
+            size: "small",
+            disabled: d,
+            children: [
+              /* @__PURE__ */ e(q, { value: "left", children: /* @__PURE__ */ e(g, { title: "Align Left", children: /* @__PURE__ */ e($e, { fontSize: "small" }) }) }),
+              /* @__PURE__ */ e(q, { value: "center", children: /* @__PURE__ */ e(g, { title: "Align Center", children: /* @__PURE__ */ e(Ke, { fontSize: "small" }) }) }),
+              /* @__PURE__ */ e(q, { value: "right", children: /* @__PURE__ */ e(g, { title: "Align Right", children: /* @__PURE__ */ e(Ve, { fontSize: "small" }) }) }),
+              /* @__PURE__ */ e(q, { value: "justify", children: /* @__PURE__ */ e(g, { title: "Justify", children: /* @__PURE__ */ e(Ge, { fontSize: "small" }) }) })
+            ]
+          },
+          "align"
+        );
+      case "undo":
+        return /* @__PURE__ */ e(g, { title: "Undo (Ctrl+Z)", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+          V,
+          {
+            onClick: f,
+            disabled: d || !p,
+            size: "small",
+            children: /* @__PURE__ */ e(We, { fontSize: "small" })
+          }
+        ) }) }, "undo");
+      case "redo":
+        return /* @__PURE__ */ e(g, { title: "Redo (Ctrl+Y)", children: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+          V,
+          {
+            onClick: G,
+            disabled: d || !c,
+            size: "small",
+            children: /* @__PURE__ */ e(He, { fontSize: "small" })
+          }
+        ) }) }, "redo");
+      case "clearFormat":
+        return /* @__PURE__ */ e(g, { title: "Clear Formatting", children: /* @__PURE__ */ e(
+          V,
+          {
+            onClick: M,
+            disabled: d,
+            size: "small",
+            children: /* @__PURE__ */ e(je, { fontSize: "small" })
+          }
+        ) }, "clearFormat");
+      case "fullscreen":
+        return /* @__PURE__ */ e(g, { title: O ? "Exit Fullscreen" : "Fullscreen", children: /* @__PURE__ */ e(
+          V,
+          {
+            onClick: Q,
+            disabled: d,
+            size: "small",
+            children: O ? /* @__PURE__ */ e(Me, { fontSize: "small" }) : /* @__PURE__ */ e(Oe, { fontSize: "small" })
+          }
+        ) }, "fullscreen");
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ e(
+    J,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        px: 1,
+        py: 0.5,
+        borderBottom: `1px solid ${j.palette.divider}`,
+        backgroundColor: de(j.palette.background.default, 0.5),
+        flexWrap: "wrap",
+        "& .MuiToggleButton-root": {
+          border: "none",
+          borderRadius: 1,
+          p: 0.5
+        },
+        "& .MuiIconButton-root": {
+          p: 0.5
+        }
+      },
+      children: l.map((w, H) => E(w, H))
+    }
+  );
+}, Dt = ({
+  value: l = "",
+  onChange: h,
+  placeholder: s = "Start typing...",
+  height: v = 300,
+  minHeight: m = 150,
+  maxHeight: C,
+  readOnly: I = !1,
+  disabled: f = !1,
+  showToolbar: G = !0,
+  toolbarItems: M = mt,
+  onImageUpload: u,
+  autoFocus: T = !1,
+  className: Q,
+  sx: O
+}) => {
+  const p = ce(), c = a.useRef(null), [d, j] = a.useState(/* @__PURE__ */ new Set()), [E, w] = a.useState("p"), [H, x] = a.useState("left"), [y, k] = a.useState(!1), [F, re] = a.useState(!1), [N, ne] = a.useState(!1), ee = a.useRef(null);
+  a.useEffect(() => {
+    c.current && l !== c.current.innerHTML && (c.current.innerHTML = l);
+  }, [l]), a.useEffect(() => {
+    T && c.current && c.current.focus();
+  }, [T]);
+  const R = a.useCallback(() => {
+    const r = /* @__PURE__ */ new Set();
+    document.queryCommandState("bold") && r.add("bold"), document.queryCommandState("italic") && r.add("italic"), document.queryCommandState("underline") && r.add("underline"), document.queryCommandState("strikeThrough") && r.add("strikeThrough"), document.queryCommandState("insertUnorderedList") && r.add("insertUnorderedList"), document.queryCommandState("insertOrderedList") && r.add("insertOrderedList"), j(r);
+    const t = document.queryCommandValue("formatBlock");
+    t && ["h1", "h2", "h3", "h4", "h5", "h6", "p"].includes(t.toLowerCase()) && w(t.toLowerCase()), document.queryCommandState("justifyLeft") ? x("left") : document.queryCommandState("justifyCenter") ? x("center") : document.queryCommandState("justifyRight") ? x("right") : document.queryCommandState("justifyFull") && x("justify");
+  }, []), D = a.useCallback(() => {
+    c.current && (h?.(c.current.innerHTML), R());
+  }, [h, R]), P = a.useCallback((r) => {
+    r === "code" ? document.execCommand("formatBlock", !1, "pre") : r === "formatBlock" ? document.execCommand("formatBlock", !1, "blockquote") : document.execCommand(r, !1), R(), c.current?.focus();
+  }, [R]), Y = a.useCallback((r) => {
+    document.execCommand("formatBlock", !1, r), w(r), c.current?.focus();
+  }, []), W = a.useCallback((r) => {
+    const t = {
+      left: "justifyLeft",
+      center: "justifyCenter",
+      right: "justifyRight",
+      justify: "justifyFull"
+    };
+    document.execCommand(t[r], !1), x(r), c.current?.focus();
+  }, []), b = () => document.execCommand("undo"), _ = () => document.execCommand("redo"), $ = () => {
+    document.execCommand("removeFormat"), R();
+  }, n = a.useCallback(() => {
+    const r = window.prompt("Enter URL:");
+    r && document.execCommand("createLink", !1, r), c.current?.focus();
+  }, []), S = a.useCallback(() => {
+    ee.current?.click();
+  }, []), B = a.useCallback(async (r) => {
+    const t = r.target.files?.[0];
+    if (!t) return;
+    let o;
+    u ? o = await u(t) : o = URL.createObjectURL(t), document.execCommand("insertImage", !1, o), r.target.value = "", c.current?.focus();
+  }, [u]), Z = () => {
+    k(!y);
+  }, z = a.useCallback((r) => {
+    if (r.ctrlKey || r.metaKey)
+      switch (r.key.toLowerCase()) {
+        case "b":
+          r.preventDefault(), P("bold");
+          break;
+        case "i":
+          r.preventDefault(), P("italic");
+          break;
+        case "u":
+          r.preventDefault(), P("underline");
+          break;
+        case "z":
+          r.shiftKey && (r.preventDefault(), _());
+          break;
+      }
+  }, [P]);
+  return a.useEffect(() => {
+    const r = () => {
+      re(document.queryCommandEnabled("undo")), ne(document.queryCommandEnabled("redo"));
+    }, t = c.current;
+    if (t)
+      return t.addEventListener("input", r), () => t.removeEventListener("input", r);
+  }, []), /* @__PURE__ */ L(
+    oe,
+    {
+      className: Q,
+      variant: "outlined",
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        ...y && {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: p.zIndex.modal,
+          borderRadius: 0
+        },
+        ...O
+      },
+      children: [
+        G && !I && /* @__PURE__ */ e(
+          ht,
+          {
+            items: M,
+            formats: d,
+            headingLevel: E,
+            textAlign: H,
+            onFormat: P,
+            onHeadingChange: Y,
+            onAlignChange: W,
+            onUndo: b,
+            onRedo: _,
+            onClearFormat: $,
+            onLinkInsert: n,
+            onImageInsert: S,
+            onFullscreen: Z,
+            isFullscreen: y,
+            canUndo: F,
+            canRedo: N,
+            disabled: f
+          }
+        ),
+        /* @__PURE__ */ e(
+          J,
+          {
+            ref: c,
+            contentEditable: !I && !f,
+            onInput: D,
+            onKeyDown: z,
+            onSelect: R,
+            sx: {
+              flex: 1,
+              p: 2,
+              overflow: "auto",
+              outline: "none",
+              height: y ? "auto" : v,
+              minHeight: y ? "auto" : m,
+              maxHeight: y ? "none" : C,
+              fontFamily: p.typography.fontFamily,
+              fontSize: p.typography.body1.fontSize,
+              lineHeight: 1.6,
+              color: f ? p.palette.text.disabled : p.palette.text.primary,
+              cursor: f ? "not-allowed" : "text",
+              "&:empty::before": {
+                content: `"${s}"`,
+                color: p.palette.text.secondary,
+                fontStyle: "italic"
+              },
+              "& h1, & h2, & h3, & h4, & h5, & h6": {
+                marginTop: 0,
+                marginBottom: "0.5em",
+                fontWeight: 600
+              },
+              "& h1": { fontSize: "2em" },
+              "& h2": { fontSize: "1.5em" },
+              "& h3": { fontSize: "1.25em" },
+              "& h4": { fontSize: "1em" },
+              "& p": { marginBottom: "1em" },
+              "& ul, & ol": {
+                paddingLeft: "1.5em",
+                marginBottom: "1em"
+              },
+              "& blockquote": {
+                borderLeft: `4px solid ${p.palette.divider}`,
+                paddingLeft: 2,
+                marginLeft: 0,
+                color: p.palette.text.secondary,
+                fontStyle: "italic"
+              },
+              "& pre": {
+                backgroundColor: de(p.palette.text.primary, 0.05),
+                padding: 2,
+                borderRadius: 1,
+                fontFamily: "monospace",
+                overflow: "auto"
+              },
+              "& a": {
+                color: p.palette.primary.main,
+                textDecoration: "underline"
+              },
+              "& img": {
+                maxWidth: "100%",
+                height: "auto",
+                borderRadius: 1
+              }
+            },
+            suppressContentEditableWarning: !0
+          }
+        ),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: ee,
+            type: "file",
+            accept: "image/*",
+            onChange: B,
+            style: { display: "none" }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  wt as C,
+  Ft as F,
+  Dt as R
+};