@zeniai/web-components 4.4.70 → 4.4.71-beta0AN

package/dist/TaskDescriptionEditor-DyTyMxvk.js

@@ -0,0 +1,700 @@
+import { j as e } from "./vendor-react-DRsGZW4u.js";
+import { useRef as $, useCallback as I, useState as f, useEffect as A } from "react";
+import x from "@emotion/styled";
+import { $generateHtmlFromNodes as gt, $generateNodesFromDOM as bt } from "@lexical/html";
+import { AutoLinkNode as ft, LinkNode as ht, $isLinkNode as P, TOGGLE_LINK_COMMAND as H } from "@lexical/link";
+import { ListNode as nt, ListItemNode as xt, $isListNode as Nt, INSERT_UNORDERED_LIST_COMMAND as Et, REMOVE_LIST_COMMAND as kt } from "@lexical/list";
+import { LexicalComposer as yt } from "@lexical/react/LexicalComposer";
+import { useLexicalComposerContext as st } from "@lexical/react/LexicalComposerContext";
+import { ContentEditable as Ct } from "@lexical/react/LexicalContentEditable";
+import jt from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin as Tt } from "@lexical/react/LexicalHistoryPlugin";
+import { LinkPlugin as vt } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin as Lt } from "@lexical/react/LexicalListPlugin";
+import { RichTextPlugin as $t } from "@lexical/react/LexicalRichTextPlugin";
+import { HeadingNode as At, QuoteNode as Rt, $isHeadingNode as St } from "@lexical/rich-text";
+import { $isParentElementRTL as Dt, $isAtNodeEnd as W } from "@lexical/selection";
+import { $getNearestNodeOfType as Ot, mergeRegister as rt } from "@lexical/utils";
+import { useTheme as Mt } from "@mui/material/styles";
+import { $getSelection as at, $isRangeSelection as lt, SELECTION_CHANGE_COMMAND as ct, CAN_UNDO_COMMAND as _t, CAN_REDO_COMMAND as wt, FORMAT_TEXT_COMMAND as B, FORMAT_ELEMENT_COMMAND as M, INDENT_CONTENT_COMMAND as It, OUTDENT_CONTENT_COMMAND as Pt, UNDO_COMMAND as Bt, REDO_COMMAND as Ht, $getRoot as K, $createParagraphNode as Ut } from "lexical";
+import { createPortal as Ft } from "react-dom";
+import { cc as zt, ce as Wt, cd as Kt, af as Gt, fs as r, i$ as U, fB as Vt, gF as p, gq as Xt, dC as Qt, hz as Yt, g4 as qt, aP as Jt } from "./SessionTimeoutPopup-BMerO3g4.js";
+import { t as Zt, E as te, C as ee, a as oe, P as ie, L as ne, S as se, d as re, l as ae, g as le, h as ce, f as de, b as me, k as pe, e as ue, c as ge, i as be, j as fe } from "./underline-BNKkE4Fr.js";
+const he = (t) => t.replace(zt, "&").replace(Wt, "<").replace(Kt, ">"), xe = /* @__PURE__ */ new Set([
+  "ADDRESS",
+  "ARTICLE",
+  "ASIDE",
+  "BLOCKQUOTE",
+  "DD",
+  "DIV",
+  "DL",
+  "DT",
+  "FIGURE",
+  "FOOTER",
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "HEADER",
+  "LI",
+  "MAIN",
+  "NAV",
+  "OL",
+  "P",
+  "PRE",
+  "SECTION",
+  "TABLE",
+  "TBODY",
+  "TD",
+  "TFOOT",
+  "TH",
+  "THEAD",
+  "TR",
+  "UL"
+]), _ = (t) => t != null && t.nodeType === Node.ELEMENT_NODE && xe.has(t.tagName), Ne = (t) => {
+  const { previousSibling: o, nextSibling: i } = t, s = o == null || _(o), n = i == null || _(i);
+  return s && n && (_(o) || _(i));
+}, Ee = (t) => {
+  const o = t.createTreeWalker(t.body, NodeFilter.SHOW_TEXT), i = [];
+  let s = o.nextNode();
+  for (; s != null; )
+    i.push(s), s = o.nextNode();
+  i.forEach((n) => {
+    if (n.parentNode == null || n.textContent == null)
+      return;
+    const a = n.textContent.replace(Gt, `
+`);
+    if (!a.includes(`
+`) || a.trim() === "" && Ne(n))
+      return;
+    const c = t.createDocumentFragment();
+    a.split(`
+`).forEach((d, g) => {
+      g > 0 && c.appendChild(t.createElement("br")), d !== "" && c.appendChild(t.createTextNode(d));
+    }), n.parentNode.replaceChild(c, n);
+  });
+}, ke = 200, ye = (t, o) => {
+  if (t.delete(o), t.add(o), t.size > ke) {
+    const i = t.values().next().value;
+    i != null && t.delete(i);
+  }
+}, Ce = (t, o, i) => t !== o && !i.has(t), w = 1, {
+  taskManagement: {
+    taskDetail: { descriptionEditorTooltip: k }
+  },
+  common: {
+    texts: {
+      bold: G,
+      italic: V,
+      underline: X,
+      link: Q,
+      bulletList: Y,
+      indent: q,
+      outdent: J,
+      undo: Z,
+      redo: tt
+    }
+  }
+} = Yt.getLocalizedStrings();
+function et(t, o) {
+  o === null ? (t.style.opacity = "0", t.style.top = "-1000px", t.style.left = "-1000px") : (t.style.opacity = "1", t.style.top = `${o.top + o.height + window.pageYOffset + 10}px`, t.style.left = `${o.left + window.pageXOffset - t.offsetWidth / 2 + o.width / 2}px`);
+}
+function dt(t) {
+  const o = t.anchor, i = t.focus, s = t.anchor.getNode(), n = t.focus.getNode();
+  return s === n ? s : t?.isBackward() ? W(i) ? s : n : W(o) ? n : s;
+}
+function je({ editor: t }) {
+  const o = Mt(), i = $(null), s = $(null), n = $(!1), [a, c] = f(""), [d, g] = f(!1), [j, N] = f(null), b = I(() => {
+    const l = at();
+    if (lt(l)) {
+      const C = dt(l), h = C.getParent();
+      P(h) ? c(h.getURL()) : P(C) ? c(C.getURL()) : c("");
+    }
+    const R = i.current, y = window.getSelection(), S = document.activeElement;
+    if (R === null)
+      return;
+    const T = t.getRootElement();
+    if (l !== null && y != null && !y.isCollapsed && T !== null && T.contains(y.anchorNode)) {
+      const C = y.getRangeAt(0);
+      let h;
+      if (y.anchorNode === T) {
+        let v = T;
+        for (; v.firstElementChild != null; )
+          v = v.firstElementChild;
+        h = v.getBoundingClientRect();
+      } else
+        h = C.getBoundingClientRect();
+      n.current || et(R, h), N(l);
+    } else (!S || S.className !== "link-input") && (et(R, null), N(null), g(!1), c(""));
+    return !0;
+  }, [t]);
+  return A(() => rt(
+    t.registerUpdateListener(({ editorState: l }) => {
+      l.read(() => {
+        b();
+      });
+    }),
+    t.registerCommand(
+      ct,
+      () => (b(), !0),
+      w
+    )
+  ), [t, b]), A(() => {
+    t.getEditorState().read(() => {
+      b();
+    });
+  }, [t, b]), A(() => {
+    d && s.current != null && s.current?.focus();
+  }, [d]), /* @__PURE__ */ e.jsx(De, { ref: i, children: d ? /* @__PURE__ */ e.jsx(
+    "input",
+    {
+      ref: s,
+      className: "link-input",
+      value: a,
+      onChange: (l) => {
+        c(l.target.value);
+      },
+      onKeyDown: (l) => {
+        l.key === "Enter" ? (l.preventDefault(), j !== null && (a !== "" && t.dispatchCommand(H, a), g(!1))) : l.key === "Escape" && (l.preventDefault(), g(!1));
+      }
+    }
+  ) : /* @__PURE__ */ e.jsxs(Oe, { className: "link-input", children: [
+    /* @__PURE__ */ e.jsx(Me, { href: a, target: "_blank", rel: "noopener noreferrer", children: a }),
+    /* @__PURE__ */ e.jsx(
+      _e,
+      {
+        className: "link-edit",
+        type: "button",
+        tabIndex: 0,
+        onMouseDown: (l) => l.preventDefault(),
+        onClick: () => {
+          g(!0);
+        },
+        children: /* @__PURE__ */ e.jsx(
+          qt,
+          {
+            style: {
+              width: r.sp3,
+              height: r.sp3,
+              color: o.colors.primary
+            }
+          }
+        )
+      }
+    )
+  ] }) });
+}
+function Te({ onChange: t }) {
+  const [o] = st(), i = $(null), [s, n] = f(!1), [a, c] = f(!1), [d, g] = f("paragraph"), [, j] = f(!1), [N, b] = f(!1), [l, R] = f(!1), [y, S] = f(!1), [T, C] = f(!1), h = I(() => {
+    const m = at();
+    if (lt(m)) {
+      const L = m.anchor.getNode(), E = L.getKey() === "root" ? L : L.getTopLevelElementOrThrow(), D = E.getKey();
+      if (o.getElementByKey(D) !== null)
+        if (Nt(E)) {
+          const O = Ot(L, nt), ut = O ? O.getTag() : E.getTag();
+          g(ut);
+        } else {
+          const O = St(E) ? E.getTag() : E.getType();
+          g(O);
+        }
+      C(m.hasFormat("bold")), R(m.hasFormat("italic")), S(m.hasFormat("underline")), j(Dt(m));
+      const z = dt(m), pt = z.getParent();
+      P(pt) || P(z) ? b(!0) : b(!1);
+    }
+  }, [o]);
+  A(() => rt(
+    o.registerUpdateListener(({ editorState: m }) => {
+      m.read(() => {
+        h();
+      });
+    }),
+    o.registerCommand(
+      ct,
+      () => (h(), !1),
+      w
+    ),
+    o.registerCommand(
+      _t,
+      (m) => (n(m), !1),
+      w
+    ),
+    o.registerCommand(
+      wt,
+      (m) => (c(m), !1),
+      w
+    )
+  ), [o, h]), A(() => o.registerUpdateListener(
+    ({ dirtyElements: m, dirtyLeaves: L, editorState: E, tags: D }) => {
+      D.has("history-merge") || D.has("initial-content") || m.size === 0 && L.size === 0 || E.read(() => {
+        const F = gt(o, null);
+        t(F);
+      });
+    }
+  ), [o, t]);
+  const v = I(() => {
+    N ? o.dispatchCommand(H, null) : o.dispatchCommand(H, "https://");
+  }, [o, N]), mt = () => {
+    d !== "ul" ? o.dispatchCommand(Et, void 0) : o.dispatchCommand(kt, void 0);
+  };
+  return /* @__PURE__ */ e.jsxs(Se, { className: "toolbar", ref: i, children: [
+    /* @__PURE__ */ e.jsxs(ot, { children: [
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: G, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          onClick: () => o.dispatchCommand(B, "bold"),
+          className: "toolbar-item spaced " + (T ? "active" : ""),
+          "data-testid": "task-description-editor-toolbar-bold",
+          "aria-label": G,
+          children: /* @__PURE__ */ e.jsx(se, { className: "format" })
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: V, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          onClick: () => o.dispatchCommand(B, "italic"),
+          className: "toolbar-item spaced " + (l ? "active" : ""),
+          "data-testid": "task-description-editor-toolbar-italic",
+          "aria-label": V,
+          children: /* @__PURE__ */ e.jsx(re, { className: "format" })
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: X, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          onClick: () => o.dispatchCommand(B, "underline"),
+          className: "toolbar-item spaced " + (y ? "active" : ""),
+          "data-testid": "task-description-editor-toolbar-underline",
+          "aria-label": X,
+          children: /* @__PURE__ */ e.jsx(ae, { className: "format" })
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: Q, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          onClick: v,
+          className: "toolbar-item spaced " + (N ? "active" : ""),
+          "data-testid": "task-description-editor-toolbar-link",
+          "aria-label": Q,
+          children: /* @__PURE__ */ e.jsx(le, { className: "format" })
+        }
+      ) }),
+      N && Ft(/* @__PURE__ */ e.jsx(je, { editor: o }), document.body),
+      /* @__PURE__ */ e.jsx(it, {}),
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: Y, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          onClick: mt,
+          className: "toolbar-item spaced " + (d === "ul" ? "active" : ""),
+          "data-testid": "task-description-editor-toolbar-bulletList",
+          "aria-label": Y,
+          children: /* @__PURE__ */ e.jsx(ce, { className: "format" })
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(it, {}),
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: k.leftAlign, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          onClick: () => o.dispatchCommand(M, "left"),
+          className: "toolbar-item spaced",
+          "data-testid": "task-description-editor-toolbar-leftAlign",
+          "aria-label": k.leftAlign,
+          children: /* @__PURE__ */ e.jsx(de, { className: "format" })
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(
+        p,
+        {
+          placement: "bottom",
+          title: k.centerAlign,
+          children: /* @__PURE__ */ e.jsx(
+            u,
+            {
+              type: "button",
+              onClick: () => o.dispatchCommand(M, "center"),
+              className: "toolbar-item spaced",
+              "data-testid": "task-description-editor-toolbar-centerAlign",
+              "aria-label": k.centerAlign,
+              children: /* @__PURE__ */ e.jsx(me, { className: "format" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: k.rightAlign, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          onClick: () => o.dispatchCommand(M, "right"),
+          className: "toolbar-item spaced",
+          "data-testid": "task-description-editor-toolbar-rightAlign",
+          "aria-label": k.rightAlign,
+          children: /* @__PURE__ */ e.jsx(pe, { className: "format" })
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(
+        p,
+        {
+          placement: "bottom",
+          title: k.justifyAlign,
+          children: /* @__PURE__ */ e.jsx(
+            u,
+            {
+              type: "button",
+              onClick: () => o.dispatchCommand(M, "justify"),
+              className: "toolbar-item",
+              "data-testid": "task-description-editor-toolbar-justifyAlign",
+              "aria-label": k.justifyAlign,
+              children: /* @__PURE__ */ e.jsx(ue, { className: "format" })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: q, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          onClick: () => o.dispatchCommand(It, void 0),
+          className: "toolbar-item",
+          "data-testid": "task-description-editor-toolbar-indent",
+          "aria-label": q,
+          children: /* @__PURE__ */ e.jsx(ge, { className: "format" })
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: J, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          onClick: () => o.dispatchCommand(Pt, void 0),
+          className: "toolbar-item",
+          "data-testid": "task-description-editor-toolbar-outdent",
+          "aria-label": J,
+          children: /* @__PURE__ */ e.jsx(be, { className: "format" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e.jsxs(ot, { children: [
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: Z, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          disabled: !s,
+          onClick: () => o.dispatchCommand(Bt, void 0),
+          className: "toolbar-item spaced",
+          "data-testid": "task-description-editor-toolbar-undo",
+          "aria-label": Z,
+          children: /* @__PURE__ */ e.jsx(Xt, { className: "format" })
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(p, { placement: "bottom", title: tt, children: /* @__PURE__ */ e.jsx(
+        u,
+        {
+          type: "button",
+          disabled: !a,
+          onClick: () => o.dispatchCommand(Ht, void 0),
+          className: "toolbar-item",
+          "data-testid": "task-description-editor-toolbar-redo",
+          "aria-label": tt,
+          children: /* @__PURE__ */ e.jsx(fe, { className: "format" })
+        }
+      ) })
+    ] })
+  ] });
+}
+function ve({
+  emittedHtml: t,
+  initialValue: o
+}) {
+  const [i] = st(), s = $(void 0);
+  return A(() => {
+    const n = o ?? "";
+    if (!Ce(
+      n,
+      s.current,
+      t
+    )) {
+      s.current = n;
+      return;
+    }
+    const a = s.current == null;
+    if (s.current = n, n.trim() === "") {
+      a || i.update(
+        () => {
+          const c = K();
+          c.clear(), c.append(Ut());
+        },
+        { tag: "initial-content" }
+      );
+      return;
+    }
+    i.update(
+      () => {
+        const c = new DOMParser(), d = n.trim(), g = d.startsWith("<p") || d.startsWith("<div") || d.startsWith("<ul") || d.startsWith("<ol") || d.startsWith("<h") ? n : `<p>${he(n)}</p>`, j = c.parseFromString(g, "text/html");
+        Ee(j);
+        const N = bt(i, j), b = K();
+        b.clear(), b.append(...N);
+      },
+      { tag: "initial-content" }
+    );
+  }, [i, o, t]), null;
+}
+const Le = {
+  namespace: "TaskDescriptionEditor",
+  onError(t) {
+    throw t;
+  },
+  nodes: [
+    At,
+    nt,
+    xt,
+    Rt,
+    ft,
+    ht
+  ],
+  theme: Zt
+};
+function no({
+  initialValue: t,
+  placeholder: o,
+  onChange: i
+}) {
+  const s = $(/* @__PURE__ */ new Set()).current, n = I(
+    (a) => {
+      ye(s, a), i(a);
+    },
+    [s, i]
+  );
+  return /* @__PURE__ */ e.jsxs(yt, { initialConfig: Le, children: [
+    /* @__PURE__ */ e.jsx(te, {}),
+    /* @__PURE__ */ e.jsxs($e, { children: [
+      /* @__PURE__ */ e.jsx(Te, { onChange: n }),
+      /* @__PURE__ */ e.jsxs(Ae, { children: [
+        /* @__PURE__ */ e.jsx(
+          $t,
+          {
+            contentEditable: /* @__PURE__ */ e.jsx(Ct, { className: "task-editor-input" }),
+            placeholder: o != null && o !== "" ? /* @__PURE__ */ e.jsx(Re, { children: o }) : null,
+            ErrorBoundary: jt
+          }
+        ),
+        /* @__PURE__ */ e.jsx(
+          ve,
+          {
+            emittedHtml: s,
+            initialValue: t
+          }
+        ),
+        /* @__PURE__ */ e.jsx(ee, {}),
+        /* @__PURE__ */ e.jsx(oe, {}),
+        /* @__PURE__ */ e.jsx(Tt, {}),
+        /* @__PURE__ */ e.jsx(Lt, {}),
+        /* @__PURE__ */ e.jsx(vt, {}),
+        /* @__PURE__ */ e.jsx(ie, {}),
+        /* @__PURE__ */ e.jsx(ne, { maxDepth: 7 })
+      ] })
+    ] })
+  ] });
+}
+const $e = x(Vt)`
+  position: relative;
+  margin: ${r.sp0};
+  border-radius: ${r.sp2};
+  color: ${(t) => t.theme.colors.primary};
+  text-align: left;
+  border: 1px solid ${(t) => t.theme.colors.grey3};
+  overflow: hidden;
+  margin-bottom: ${r.sp3};
+
+  &:hover {
+    border: 1px solid ${(t) => t.theme.colors.primary};
+
+    .toolbar {
+      border-bottom: 1px solid ${(t) => t.theme.colors.primary};
+    }
+  }
+
+  &:focus-within {
+    border: 1px solid ${(t) => t.theme.colors.primary};
+
+    .toolbar {
+      border-bottom: 1px solid ${(t) => t.theme.colors.primary};
+    }
+  }
+
+  .task-editor-input {
+    min-height: 80px;
+    max-height: 240px;
+    overflow: auto;
+    resize: none;
+    ${U.largeRegular.css};
+    color: ${(t) => t.theme.colors.primary};
+    position: relative;
+    tab-size: 1;
+    outline: 0;
+    padding: ${r.sp3} 12px;
+
+    .editor__link {
+      color: ${(t) => t.theme.colors.link};
+      text-decoration: none;
+    }
+    .editor__link:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  .task-editor-input p {
+    margin: 0;
+  }
+
+  .toolbar {
+    display: flex;
+    margin-bottom: 1px;
+    background: ${(t) => t.theme.colors.grey5};
+    padding: ${r.sp1};
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    vertical-align: middle;
+    border-bottom: 1px solid ${(t) => t.theme.colors.grey3};
+    justify-content: space-between;
+  }
+
+  .toolbar button.toolbar-item {
+    border: 0;
+    display: flex;
+    background: none;
+    border-radius: ${r.sp2};
+    padding: ${r.sp1};
+    cursor: pointer;
+    vertical-align: middle;
+  }
+
+  .toolbar button.toolbar-item:disabled {
+    cursor: not-allowed;
+  }
+
+  .toolbar button.toolbar-item.spaced {
+    margin-right: 2px;
+  }
+
+  .toolbar button.toolbar-item svg.format {
+    background-size: contain;
+    display: inline-block;
+    height: ${r.sp3};
+    width: ${r.sp3};
+    vertical-align: -0.25em;
+    display: flex;
+    color: ${(t) => t.theme.colors.grey1};
+  }
+
+  .toolbar button.toolbar-item:disabled svg.format {
+    opacity: 0.2;
+  }
+
+  .toolbar button.toolbar-item.active {
+    svg.format {
+      color: ${(t) => t.theme.colors.primary};
+    }
+  }
+
+  .toolbar .toolbar-item:hover:not([disabled]) {
+    svg.format {
+      color: ${(t) => t.theme.colors.primary};
+    }
+  }
+
+  .toolbar .divider {
+    width: 1px;
+    background-color: ${(t) => t.theme.colors.background};
+    margin: ${r.sp0} ${r.sp1};
+  }
+`, Ae = x.div`
+  background-color: transparent;
+  position: relative;
+`, Re = x(Qt)`
+  color: ${(t) => t.theme.colors.grey2};
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: ${r.sp3};
+  left: 12px;
+  user-select: none;
+  display: inline-block;
+  pointer-events: none;
+`, Se = x.div``, ot = x.div`
+  display: flex;
+  align-items: center;
+  gap: ${r.sp1};
+`, u = x.button``, it = () => /* @__PURE__ */ e.jsx("div", { className: "divider" }), De = x.div`
+  position: absolute;
+  z-index: 10000;
+  top: -10000px;
+  left: -10000px;
+  margin-top: -6px;
+  max-width: 300px;
+  width: 100%;
+  opacity: 0;
+  border: 1px solid ${(t) => t.theme.colors.grey3};
+  background-color: ${(t) => t.theme.colors.grey5};
+  box-shadow: ${r.sp0} 5px 10px ${Jt.overlayLight};
+  border-radius: ${r.sp2};
+  transition: opacity 0.5s;
+
+  .link-input {
+    display: block;
+    box-sizing: border-box;
+    padding: ${r.sp3};
+    border-radius: ${r.sp3};
+    background-color: ${(t) => t.theme.colors.grey5};
+    ${U.standardRegular.css};
+    color: ${(t) => t.theme.colors.primary};
+    border: 0;
+    outline: 0;
+    position: relative;
+  }
+
+  button.link-edit {
+    display: flex;
+    align-items: center;
+    width: 35px;
+    position: absolute;
+    right: ${r.sp0};
+    top: ${r.sp0};
+    bottom: ${r.sp0};
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+
+    &:focus {
+      outline: none;
+    }
+  }
+`, Oe = x.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`, Me = x.a`
+  color: ${(t) => t.theme.colors.link};
+  text-decoration: none;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 30px;
+  ${U.standardRegular.css};
+
+  &:hover {
+    text-decoration: underline;
+  }
+`, _e = x.button``;
+export {
+  no as default
+};