@layers-app/shared 0.1.5 → 0.2.1

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,131 @@
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as f, useState as p } from "react";
+import { useMantineTheme as C, Flex as a, Tooltip as L, ColorSwatch as P, getThemeColor as u, parseThemeColor as j, ColorInput as z, ActionIcon as h } from "@mantine/core";
+import { IconPalette as A, IconPencil as E } from "@tabler/icons-react";
+import R from "styled-components";
+import { DEFAULT_VALUES as c } from "../../constants.js";
+const T = f(
+  ({
+    value: e,
+    onChange: t,
+    allowCustomColor: i,
+    colors: l,
+    swatchShape: s = "circle",
+    fullWidth: n = !1,
+    swatchSize: b = 30,
+    ...g
+  }, w) => {
+    const y = C(), S = j({
+      color: e || c.COLORS[0],
+      theme: y
+    }), [O, k] = p(S.value), [v, m] = p(!1);
+    return v ? /* @__PURE__ */ d(a, { align: "center", mih: 30, children: [
+      /* @__PURE__ */ r(
+        z,
+        {
+          w: "100%",
+          popoverProps: {
+            withinPortal: !1,
+            keepMounted: !1
+          },
+          maxLength: 7,
+          withEyeDropper: !1,
+          size: "xs",
+          value: O,
+          onChange: k,
+          onChangeEnd: t,
+          placeholder: "Select custom color"
+        }
+      ),
+      /* @__PURE__ */ r(
+        h,
+        {
+          radius: "xl",
+          variant: "default",
+          color: "gray",
+          onClick: () => m(!1),
+          children: /* @__PURE__ */ r(A, { size: 16 })
+        }
+      )
+    ] }, 1) : /* @__PURE__ */ d(
+      a,
+      {
+        ref: w,
+        ...g,
+        justify: n ? "space-between" : "flex-start",
+        align: "center",
+        mih: 32,
+        children: [
+          (l || c.COLORS).map((o) => {
+            const I = o === e || !e && o === c.COLORS[0];
+            return /* @__PURE__ */ r(
+              D,
+              {
+                value: o,
+                isActive: I,
+                size: b - 4,
+                swatchShape: s,
+                onClick: () => t?.(o)
+              },
+              o
+            );
+          }),
+          i && /* @__PURE__ */ r(
+            h,
+            {
+              radius: "xl",
+              variant: "default",
+              color: "gray",
+              onClick: () => m(!0),
+              children: /* @__PURE__ */ r(E, { size: 16 })
+            }
+          )
+        ]
+      },
+      2
+    );
+  }
+), x = f(
+  ({ value: e, isActive: t, swatchShape: i, ...l }, s) => {
+    const n = C();
+    return /* @__PURE__ */ r(a, { miw: 32, justify: "center", align: "center", children: /* @__PURE__ */ r(L, { label: e || "", withArrow: !0, children: /* @__PURE__ */ r(
+      P,
+      {
+        ref: s,
+        color: e ? u(e, n) : "",
+        radius: i === "circle" ? "xl" : "sm",
+        style: {
+          cursor: "pointer",
+          color: "var(--mantine-color-white)"
+        },
+        ...l,
+        children: t && /* @__PURE__ */ r(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: -3,
+              left: -3,
+              right: -3,
+              bottom: -3,
+              border: `1px solid ${e ? u(e, n) : ""}`,
+              borderRadius: i === "circle" ? "var(--mantine-radius-xl)" : "var(--mantine-radius-sm)",
+              pointerEvents: "none",
+              boxSizing: "border-box"
+            }
+          }
+        )
+      }
+    ) }) });
+  }
+), D = R(x)`
+  .mantine-ColorSwatch-colorOverlay {
+    border-radius: ${({ swatchShape: e }) => e === "square" ? "3px" : "50%"};
+  }
+`, V = Object.assign(T, {
+  ColorCircle: x
+});
+export {
+  x as ColorCircle,
+  V as ColorPicker
+};

package/dist/components/ColorPicker/ColorPickerPopover.d.ts

@@ -8,3 +8,4 @@ interface ColorPickerPopoverProps {
 }
 export declare const ColorPickerPopover: ({ value, onChange, defaultOpened, size, radius, children, }: PropsWithChildren<ColorPickerPopoverProps>) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=ColorPickerPopover.d.ts.map

package/dist/components/ColorPicker/ColorPickerPopover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPickerPopover.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAY,MAAM,OAAO,CAAC;AAMpD,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,GAAI,6DAOhC,iBAAiB,CAAC,uBAAuB,CAAC,4CAgC5C,CAAC"}

package/dist/components/ColorPicker/ColorPickerPopover.js

@@ -0,0 +1,42 @@
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { Popover as t } from "@mantine/core";
+import { ColorPicker as n } from "./ColorPicker.js";
+const w = ({
+  value: r,
+  onChange: i,
+  defaultOpened: c,
+  size: l = 18,
+  radius: d,
+  children: p
+}) => {
+  const [s, e] = h(c);
+  return /* @__PURE__ */ f(
+    t,
+    {
+      opened: s,
+      onChange: e,
+      position: "bottom-start",
+      withArrow: !0,
+      children: [
+        /* @__PURE__ */ o(t.Target, { children: /* @__PURE__ */ o("div", { onClick: () => e((m) => !m), style: { cursor: "pointer" }, children: p || /* @__PURE__ */ o(
+          n.ColorCircle,
+          {
+            value: r,
+            size: l,
+            radius: d
+          }
+        ) }) }),
+        /* @__PURE__ */ o(t.Dropdown, { maw: 270, children: /* @__PURE__ */ o("div", { onClick: () => e(!1), children: /* @__PURE__ */ o(
+          n,
+          {
+            ...i ? { value: r, onChange: i } : { defaultValue: r ?? void 0 }
+          }
+        ) }) })
+      ]
+    }
+  );
+};
+export {
+  w as ColorPickerPopover
+};

package/dist/components/CommentComposer/CommentComposer.module.css.js

@@ -0,0 +1,15 @@
+const o = "_commentComposerWrapper_1iib4_1", e = "_commentComposerFloat_1iib4_68", r = "_composerContainer_1iib4_98", t = "_editorWrapper_1iib4_114", p = "_editMode_1iib4_170", m = {
+  commentComposerWrapper: o,
+  commentComposerFloat: e,
+  composerContainer: r,
+  editorWrapper: t,
+  editMode: p
+};
+export {
+  e as commentComposerFloat,
+  o as commentComposerWrapper,
+  r as composerContainer,
+  m as default,
+  p as editMode,
+  t as editorWrapper
+};

package/dist/components/CommentComposer/CommentEditorHotkeys.d.ts

@@ -1,12 +1,18 @@
-import { ReactNode } from 'react';
-import { EditorType } from '@layers-app/editor';
-import * as React from 'react';
-type Props = {
-    children: (editorRef: React.MutableRefObject<EditorType | null>) => ReactNode;
+import React from 'react';
+import { CommentComposerTypes } from './types';
+export declare const CommentEditorHandler: ({ children, onSubmit, editorRef, commentDraft, onBlur, inputContainerRef, isFloat, isEdit, hasChanges, ns, }: {
+    children: React.ReactNode;
     onSubmit: () => void;
-    handleBlur: () => void;
-    autoFocus?: boolean;
-    registerClearEditor?: (fn: () => void) => void;
-};
-export declare function CommentEditorBehavior({ children, onSubmit, handleBlur, autoFocus, registerClearEditor, }: Props): import("react/jsx-runtime").JSX.Element;
-export {};
+    editorRef: React.MutableRefObject<any>;
+    inputContainerRef: React.MutableRefObject<any>;
+    commentDraft: {
+        text: string;
+        files: CommentComposerTypes.CommentAttachment[];
+    };
+    onBlur?: () => void;
+    isFloat: boolean;
+    isEdit: boolean;
+    hasChanges: boolean;
+    ns: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CommentEditorHotkeys.d.ts.map

package/dist/components/CommentComposer/CommentEditorHotkeys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentEditorHotkeys.d.ts","sourceRoot":"","sources":["../../../src/components/CommentComposer/CommentEditorHotkeys.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C,eAAO,MAAM,oBAAoB,GAAI,8GAWlC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACvC,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC/C,YAAY,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,EAAE,CAAC;KACjD,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,4CAoJA,CAAC"}

package/dist/components/CommentComposer/CommentEditorHotkeys.js

@@ -0,0 +1,99 @@
+import { jsx as S } from "react/jsx-runtime";
+import { useRef as D, useEffect as m } from "react";
+import { useTranslation as T } from "react-i18next";
+import { openRemoveConfirmModal as y } from "../modals/RemoveConfirmModal.js";
+import w from "./CommentComposer.module.css.js";
+const W = ({
+  children: C,
+  onSubmit: v,
+  editorRef: a,
+  commentDraft: l,
+  onBlur: c,
+  inputContainerRef: g,
+  isFloat: f,
+  isEdit: i,
+  hasChanges: s,
+  ns: P
+}) => {
+  const p = D(null), L = i || f, { t: r } = T(P);
+  return m(() => {
+    const t = (e) => {
+      if (e.code === "Enter" && !e.shiftKey) {
+        if (e.stopPropagation(), i ? s : !s) return;
+        p.current && p.current.contains(document.activeElement) && (e.preventDefault(), v());
+      }
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [v, i, s]), m(() => {
+    if (!L) return;
+    const t = a.current;
+    t && setTimeout(() => {
+      t.focus(() => ({ defaultSelection: "rootEnd" }));
+    }, 0);
+  }, []), m(() => {
+    const t = a.current;
+    if (!t) return;
+    const e = () => setTimeout(() => {
+      t.focus(() => ({ defaultSelection: "rootEnd" }));
+    }, 0), o = (u) => {
+      const n = u.target;
+      if (!n || n.closest("button") || n.closest("[data-no-focus]")) return;
+      if (n.closest("[data-editor-spacer='true']")) {
+        e();
+        return;
+      }
+      const d = n.closest(`.${w.commentComposerWrapper}`);
+      if (!d) return;
+      const E = d.querySelector("[data-comment-footer]");
+      if (!E || !E.contains(n)) return;
+      d.querySelector(`.${w.imagePreviewWrapper}`) || d.querySelector(`.${w.filePreviewWrapper}`) || e();
+    };
+    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
+  }, [a]), m(() => {
+    const t = (e) => {
+      const o = e.target;
+      if (!o) return;
+      const u = g.current;
+      if (u && !u.contains(o) && !(o.closest(".mantine-Modal-root") || o.closest(".floating-text-format-popup") || o.closest('[data-test-id="floating-link-dropdown"]'))) {
+        if (i) {
+          if (!s) {
+            e.stopPropagation(), e.preventDefault(), y({
+              title: r("composer.discardTitle"),
+              children: r("composer.discardDescription"),
+              labels: {
+                confirm: r("composer.discardConfirm"),
+                cancel: r("composer.cancel")
+              },
+              icon: null,
+              onConfirm: () => c?.()
+            });
+            return;
+          }
+          c?.();
+          return;
+        }
+        if (f) {
+          if (l.text.trim() !== "" || (l.files?.length ?? 0) > 0) {
+            e.stopPropagation(), e.preventDefault(), y({
+              title: r("editor.composer.discardCommentTitle"),
+              children: r("editor.composer.discardCommentDescription"),
+              labels: {
+                confirm: r("editor.composer.discardConfirm"),
+                cancel: r("editor.composer.cancel")
+              },
+              icon: null,
+              onConfirm: () => c?.()
+            });
+            return;
+          }
+          c?.();
+          return;
+        }
+      }
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, [i, f, s, l, c]), /* @__PURE__ */ S("div", { ref: p, children: C });
+};
+export {
+  W as CommentEditorHandler
+};

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

@@ -1,55 +1,3 @@
-import { MutableRefObject } from 'react';
-import { EditorType, RangeSelection } from '@layers-app/editor';
-import { Comment, CommentsNs, GeneralComment, ICommentFile, ICommentOptions, IUser, Thread } from '../CommentsPanel/types.ts';
-import * as React from 'react';
-interface CommentValue {
-    value: string;
-    files: ICommentFile[];
-}
-interface CommentComposerProps {
-    children: (args: {
-        onSubmit: () => void;
-        handleBlur: () => void;
-        autoFocus: boolean;
-        setCommentValue: React.Dispatch<React.SetStateAction<CommentValue>>;
-        commentValue: CommentValue;
-        registerClearEditor?: (fn: () => void) => void;
-        editorRef?: React.MutableRefObject<EditorType | null>;
-    }) => React.ReactNode;
-    getSelectionText?: (selection: RangeSelection) => string;
-    removeCommentImage?: (index: string) => void;
-    providedUser?: IUser;
-    updateLocation?: (boxElem: HTMLDivElement, selectionRef: MutableRefObject<RangeSelection | null>, selectionState: {
-        container: HTMLDivElement;
-        elements: HTMLSpanElement[];
-    }) => void;
-    commentValue: {
-        value: string;
-        files: ICommentFile[];
-    };
-    setCommentValue: React.Dispatch<React.SetStateAction<{
-        value: string;
-        files: ICommentFile[];
-    }>>;
-    isEditInput?: boolean;
-    autoFocus?: boolean;
-    handleBlur: () => void;
-    thread?: Thread;
-    updateThreadId?: (tempId: string, realId: string, updatedAt: string, commentType: string, files: ICommentFile[], thread?: Thread) => void;
-    setCommentActions?: React.Dispatch<React.SetStateAction<{
-        replyList: string[];
-        editCommentId: string;
-        editedContent: string;
-    }>>;
-    isGeneral?: boolean;
-    submitAddComment: (commentOrThread: Comment | Thread | GeneralComment, isInlineComment: boolean, thread?: Thread | GeneralComment, selection?: RangeSelection | null, files?: File[]) => void;
-    handleEditComment?: (data: {
-        value: string;
-        files: ICommentFile[];
-    }) => void;
-    provideCommentOptions?: ICommentOptions;
-    placeholder?: string;
-    composerLocales?: CommentsNs;
-}
-export declare const CommentComposer: ({ submitAddComment, commentValue, thread, setCommentValue, handleBlur, autoFocus, provideCommentOptions, removeCommentImage, handleEditComment, isEditInput, isGeneral, updateThreadId, setCommentActions, updateLocation, getSelectionText, children, providedUser, placeholder, composerLocales, }: CommentComposerProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+import { CommentComposerProps } from './types';
+export declare const CommentComposer: ({ children, onSubmit, initialDraft, updateLocation, onBlur, setEdit, ns, }: CommentComposerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CommentComposer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommentComposer/index.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,oBAAoB,EAAwB,MAAM,SAAS,CAAC;AA0CrE,eAAO,MAAM,eAAe,GAAI,4EAQ7B,oBAAoB,4CAwTtB,CAAC"}

package/dist/components/CommentComposer/index.js

@@ -0,0 +1,266 @@
+import { jsx as o, jsxs as z } from "react/jsx-runtime";
+import { useState as K, useRef as v, useMemo as _ } from "react";
+import { useTranslation as X } from "react-i18next";
+import { Attachment02Icon as V, Sent02Icon as Z } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as A } from "@hugeicons/react";
+import { Stack as q, Box as Q, Group as N, FileButton as Y, ActionIcon as $, UnstyledButton as D, Text as ee, Button as te } from "@mantine/core";
+import { showErrorNotification as L } from "../../helpers/showNotifications.js";
+import { AttachmentsPreview as oe } from "../AttachmentsPreview/AttachmentsPreview.js";
+import { CommentEditorHandler as ne } from "./CommentEditorHotkeys.js";
+import { useFloatingPosition as re } from "./useFloatingPosition.js";
+import h from "./CommentComposer.module.css.js";
+function M(t) {
+  return "id" in t;
+}
+function se(t) {
+  return typeof t == "object" && "isTemp" in t;
+}
+function ie(t) {
+  const l = URL.createObjectURL(t);
+  return {
+    id: `temp-${crypto.randomUUID()}`,
+    name: t.name,
+    type: t.type,
+    size: t.size,
+    url: l,
+    src: l,
+    isImage: t.type.startsWith("image/"),
+    isTemp: !0,
+    raw: t
+  };
+}
+const ce = 5 * 1024 * 1024, le = 10;
+function U(t, l) {
+  return t(`composer.${l}`, { defaultValue: "" }) || t(`editor.composer.${l}`);
+}
+const be = ({
+  children: t,
+  onSubmit: l,
+  initialDraft: a,
+  updateLocation: T,
+  onBlur: j,
+  setEdit: B,
+  ns: C = "comments"
+}) => {
+  const [m, R] = K({
+    text: a?.text ?? "",
+    files: a?.files ?? []
+  }), { t: p } = X(C), k = p(C === "comments" ? "composer.placeholder" : "editor.composer.placeholder"), u = v(null), d = typeof a?.text < "u", i = {
+    text: m.text,
+    files: m.files
+  }, F = v(null), O = _(
+    () => ({
+      container: document.createElement("div"),
+      elements: []
+    }),
+    []
+  ), P = v(null), b = !!T;
+  re({
+    boxRef: F,
+    isFloat: b,
+    updateLocation: T,
+    selectionRef: P,
+    selectionState: O
+  });
+  const { textChanged: H, newFiles: W, deletedFiles: G, hasChanges: w } = _(() => {
+    const e = a?.files || [], n = m.files, r = a?.text !== i.text, s = n.filter((c) => c.isTemp), x = new Set(
+      n.filter(
+        (c) => M(c)
+      ).map((c) => c.id)
+    ), f = e.filter(M).filter((c) => !x.has(c.id)), y = d ? JSON.stringify(a) === JSON.stringify(m) : i.text.trim().length > 0 || s.length > 0 || f.length > 0;
+    return {
+      textChanged: r,
+      newFiles: s,
+      deletedFiles: f,
+      hasChanges: y
+    };
+  }, [d, a, m, i.text]), S = () => {
+    B ? B({
+      id: "",
+      text: "",
+      files: []
+    }) : j?.();
+  }, I = (e, n = !1) => {
+    R((r) => {
+      if (n)
+        return { text: "", files: [] };
+      const s = typeof e == "function" ? e(r) : e;
+      return {
+        text: s.text,
+        files: s.files
+      };
+    });
+  }, J = (e, n) => {
+    e && n((r) => {
+      const s = r.files, x = le - s.length, f = [], y = [];
+      e.forEach((E) => {
+        E.size > ce ? y.push(E) : f.push(E);
+      }), y.length > 0 && L({
+        message: U(p, "uploadErrors.fileTooLarge")
+      }), f.length > x && L({
+        message: U(p, "uploadErrors.tooManyFiles")
+      });
+      const c = f.slice(0, x);
+      return {
+        ...r,
+        files: [...s, ...c.map(ie)]
+      };
+    });
+  }, g = async () => {
+    try {
+      d ? await l({
+        mode: "edit",
+        data: {
+          textChanged: H,
+          newFiles: W,
+          deletedFiles: G,
+          newText: i.text
+        }
+      }) : await l({
+        mode: "create",
+        data: {
+          text: i.text,
+          files: m.files.filter(se)
+        }
+      });
+    } catch {
+      return;
+    }
+    S(), u.current && u.current.update(() => {
+      const e = u.current._editorState._nodeMap.get("root");
+      if (!e) return;
+      e.clear();
+      const n = u.current._nodes.get("paragraph");
+      if (!n) return;
+      const r = new n.klass();
+      e.append(r), r.select();
+    }), I({ text: "", files: [] }, !0);
+  };
+  return /* @__PURE__ */ o(
+    q,
+    {
+      ref: F,
+      className: `
+      ${h.commentComposerWrapper}
+      ${b ? h.commentComposerFloat : ""}
+      ${d ? h.editMode : ""}
+  `,
+      children: /* @__PURE__ */ z(
+        "div",
+        {
+          className: h.composerContainer,
+          style: {
+            "--placeholder-text": `"${k}"`
+          },
+          children: [
+            /* @__PURE__ */ o("div", { className: h.editorWrapper, children: /* @__PURE__ */ o(
+              ne,
+              {
+                onSubmit: g,
+                editorRef: u,
+                inputContainerRef: F,
+                commentDraft: i,
+                onBlur: S,
+                isEdit: d,
+                isFloat: b,
+                hasChanges: w,
+                ns: C,
+                children: t?.({
+                  onSubmit: g,
+                  handleBlur: () => {
+                  },
+                  setCommentDraft: I,
+                  commentDraft: i,
+                  editorRef: u,
+                  initialContent: a?.text ?? ""
+                })
+              }
+            ) }),
+            /* @__PURE__ */ o(Q, { h: 10, "data-editor-spacer": !0, tabIndex: 0, style: { width: "100%" } }),
+            /* @__PURE__ */ o(
+              oe,
+              {
+                files: m.files,
+                mode: "draft",
+                onRemove: (e) => R((n) => ({
+                  ...n,
+                  files: n.files.filter((r, s) => s !== e)
+                }))
+              }
+            ),
+            /* @__PURE__ */ z(
+              N,
+              {
+                justify: d ? "space-between" : "flex-end",
+                "data-comment-footer": !0,
+                align: "center",
+                w: "unset",
+                mt: m.files.length ? "xs" : 0,
+                tabIndex: 0,
+                gap: "4px",
+                children: [
+                  /* @__PURE__ */ o(
+                    Y,
+                    {
+                      onChange: (e) => J(e, I),
+                      multiple: !0,
+                      children: (e) => /* @__PURE__ */ o($, { ...e, variant: "subtle", size: "lg", color: "gray", children: /* @__PURE__ */ o(
+                        A,
+                        {
+                          style: { transform: "rotate(35deg)" },
+                          icon: V,
+                          size: 20
+                        }
+                      ) })
+                    }
+                  ),
+                  d ? /* @__PURE__ */ z(N, { gap: "8px", children: [
+                    /* @__PURE__ */ o(
+                      D,
+                      {
+                        onClick: S,
+                        "data-no-focus": !0,
+                        style: {
+                          cursor: "pointer",
+                          padding: 0,
+                          margin: 0,
+                          background: "none",
+                          border: "none"
+                        },
+                        children: /* @__PURE__ */ o(ee, { size: "sm", c: "dimmed", children: p("composer.cancel") })
+                      }
+                    ),
+                    /* @__PURE__ */ o(
+                      te,
+                      {
+                        size: "xs",
+                        radius: "md",
+                        onClick: g,
+                        disabled: d ? w : !w,
+                        children: p("composer.save")
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ o(
+                    $,
+                    {
+                      color: "var(--mantine-primary-color-filled)",
+                      size: "lg",
+                      "data-comment-submit-button": !0,
+                      variant: "filled",
+                      onClick: g,
+                      disabled: !i.text.trim() && i.files.length === 0,
+                      children: /* @__PURE__ */ o(A, { icon: Z, size: 20 })
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  be as CommentComposer
+};