@vizel/react 0.0.1-alpha.1 → 0.0.1-alpha.6

package/dist/index.js

@@ -1,60 +1,68 @@
-import { useVizelContext as r, useVizelContextSafe as t } from "./index2.js";
-import { VizelIconProvider as l, useVizelIconContext as m } from "./index3.js";
-import { VizelThemeProvider as z, useVizelTheme as f, useVizelThemeSafe as x } from "./index4.js";
-import { Vizel as u } from "./index5.js";
-import { VizelBubbleMenu as a } from "./index6.js";
-import { VizelBubbleMenuButton as d } from "./index7.js";
-import { VizelBubbleMenuColorPicker as S } from "./index8.js";
-import { VizelBubbleMenuDefault as c } from "./index9.js";
-import { VizelBubbleMenuDivider as v } from "./index10.js";
-import { VizelColorPicker as E } from "./index11.js";
-import { VizelEditor as C } from "./index12.js";
-import { VizelEmbedView as k } from "./index13.js";
-import { VizelIcon as w } from "./index14.js";
-import { VizelLinkEditor as y } from "./index15.js";
-import { VizelNodeSelector as L } from "./index16.js";
-import { VizelPortal as R } from "./index17.js";
-import { VizelProvider as j } from "./index18.js";
-import { VizelSaveIndicator as F } from "./index19.js";
-import { VizelSlashMenu as H } from "./index20.js";
-import { VizelSlashMenuEmpty as K } from "./index21.js";
-import { VizelSlashMenuItem as Q } from "./index22.js";
-import { createVizelSlashMenuRenderer as W } from "./index23.js";
-import { useVizelAutoSave as Y } from "./index24.js";
-import { useVizelEditor as _ } from "./index25.js";
-import { useVizelEditorState as ee } from "./index26.js";
-import { useVizelMarkdown as re } from "./index27.js";
-import { useVizelState as ie } from "./index28.js";
+import "./index2.js";
+import "./index3.js";
+import "./index4.js";
+import "./index5.js";
+import "./index6.js";
+import "./index7.js";
+import "./index8.js";
+import "./index9.js";
+import { Vizel as f } from "./index10.js";
+import { VizelBubbleMenu as u } from "./index11.js";
+import { VizelBubbleMenuButton as a } from "./index12.js";
+import { VizelBubbleMenuColorPicker as d } from "./index13.js";
+import { VizelBubbleMenuDefault as S } from "./index14.js";
+import { VizelBubbleMenuDivider as c } from "./index15.js";
+import { VizelColorPicker as v } from "./index16.js";
+import { useVizelContext as E, useVizelContextSafe as P } from "./index17.js";
+import { VizelEditor as I } from "./index18.js";
+import { VizelEmbedView as T } from "./index19.js";
+import { VizelIcon as D } from "./index20.js";
+import { VizelIconProvider as A, useVizelIconContext as L } from "./index21.js";
+import { VizelLinkEditor as R } from "./index22.js";
+import { VizelNodeSelector as j } from "./index23.js";
+import { VizelPortal as F } from "./index24.js";
+import { VizelProvider as H } from "./index25.js";
+import { VizelSaveIndicator as K } from "./index26.js";
+import { VizelSlashMenu as Q } from "./index27.js";
+import { VizelSlashMenuEmpty as W } from "./index28.js";
+import { VizelSlashMenuItem as Y } from "./index29.js";
+import { VizelThemeProvider as _, useVizelTheme as $, useVizelThemeSafe as ee } from "./index30.js";
+import { createVizelSlashMenuRenderer as re } from "./index31.js";
+import { useVizelAutoSave as ie } from "./index32.js";
+import { useVizelEditor as me } from "./index33.js";
+import { useVizelEditorState as Ve } from "./index34.js";
+import { useVizelMarkdown as fe } from "./index35.js";
+import { useVizelState as ue } from "./index36.js";
 export {
-  u as Vizel,
-  a as VizelBubbleMenu,
-  d as VizelBubbleMenuButton,
-  S as VizelBubbleMenuColorPicker,
-  c as VizelBubbleMenuDefault,
-  v as VizelBubbleMenuDivider,
-  E as VizelColorPicker,
-  C as VizelEditor,
-  k as VizelEmbedView,
-  w as VizelIcon,
-  l as VizelIconProvider,
-  y as VizelLinkEditor,
-  L as VizelNodeSelector,
-  R as VizelPortal,
-  j as VizelProvider,
-  F as VizelSaveIndicator,
-  H as VizelSlashMenu,
-  K as VizelSlashMenuEmpty,
-  Q as VizelSlashMenuItem,
-  z as VizelThemeProvider,
-  W as createVizelSlashMenuRenderer,
-  Y as useVizelAutoSave,
-  r as useVizelContext,
-  t as useVizelContextSafe,
-  _ as useVizelEditor,
-  ee as useVizelEditorState,
-  m as useVizelIconContext,
-  re as useVizelMarkdown,
-  ie as useVizelState,
-  f as useVizelTheme,
-  x as useVizelThemeSafe
+  f as Vizel,
+  u as VizelBubbleMenu,
+  a as VizelBubbleMenuButton,
+  d as VizelBubbleMenuColorPicker,
+  S as VizelBubbleMenuDefault,
+  c as VizelBubbleMenuDivider,
+  v as VizelColorPicker,
+  I as VizelEditor,
+  T as VizelEmbedView,
+  D as VizelIcon,
+  A as VizelIconProvider,
+  R as VizelLinkEditor,
+  j as VizelNodeSelector,
+  F as VizelPortal,
+  H as VizelProvider,
+  K as VizelSaveIndicator,
+  Q as VizelSlashMenu,
+  W as VizelSlashMenuEmpty,
+  Y as VizelSlashMenuItem,
+  _ as VizelThemeProvider,
+  re as createVizelSlashMenuRenderer,
+  ie as useVizelAutoSave,
+  E as useVizelContext,
+  P as useVizelContextSafe,
+  me as useVizelEditor,
+  Ve as useVizelEditorState,
+  L as useVizelIconContext,
+  fe as useVizelMarkdown,
+  ue as useVizelState,
+  $ as useVizelTheme,
+  ee as useVizelThemeSafe
 };

package/dist/index10.js

@@ -1,7 +1,57 @@
-import { jsx as i } from "react/jsx-runtime";
-function n({ className: e }) {
-  return /* @__PURE__ */ i("span", { className: `vizel-bubble-menu-divider ${e ?? ""}` });
+import { jsxs as g, jsx as o } from "react/jsx-runtime";
+import { useImperativeHandle as h } from "react";
+import { useVizelEditor as q } from "./index33.js";
+import { VizelBubbleMenu as j } from "./index11.js";
+import { VizelEditor as u } from "./index18.js";
+function O({
+  ref: e,
+  initialContent: v,
+  initialMarkdown: d,
+  transformDiagramsOnImport: E = !0,
+  placeholder: m,
+  editable: H = !0,
+  autofocus: I = !1,
+  features: f,
+  className: N,
+  showBubbleMenu: s = !0,
+  enableEmbed: z = !1,
+  bubbleMenuContent: r,
+  children: $,
+  onUpdate: t,
+  onCreate: p,
+  onDestroy: V,
+  onSelectionUpdate: l,
+  onFocus: x,
+  onBlur: c
+}) {
+  const i = q({
+    ...v !== void 0 && { initialContent: v },
+    ...d !== void 0 && { initialMarkdown: d },
+    transformDiagramsOnImport: E,
+    ...m !== void 0 && { placeholder: m },
+    editable: H,
+    autofocus: I,
+    ...f !== void 0 && { features: f },
+    ...t !== void 0 && { onUpdate: t },
+    ...p !== void 0 && { onCreate: p },
+    ...V !== void 0 && { onDestroy: V },
+    ...l !== void 0 && { onSelectionUpdate: l },
+    ...x !== void 0 && { onFocus: x },
+    ...c !== void 0 && { onBlur: c }
+  });
+  return h(
+    e,
+    () => ({
+      editor: i
+    }),
+    [i]
+  ), /* @__PURE__ */ g("div", { className: `vizel-root ${N ?? ""}`, "data-vizel-root": "", children: [
+    /* @__PURE__ */ o(u, { editor: i }),
+    s && i && r && /* @__PURE__ */ o(j, { editor: i, enableEmbed: z, children: r }),
+    s && i && !r && /* @__PURE__ */ o(j, { editor: i, enableEmbed: z }),
+    $
+  ] });
 }
 export {
-  n as VizelBubbleMenuDivider
+  O as Vizel
 };

package/dist/index11.js

@@ -1,179 +1,52 @@
-import { jsxs as z, jsx as l } from "react/jsx-runtime";
-import { normalizeVizelHexColor as N, isVizelValidHexColor as I } from "@vizel/core";
-import { useState as K, useRef as L, useMemo as $, useEffect as y, useCallback as b } from "react";
-import { VizelIcon as w } from "./index14.js";
-const S = 4, j = ["transparent", "inherit"];
-function q({
-  colors: f,
-  value: a,
-  onChange: m,
-  label: M = "Color palette",
-  className: O,
-  allowCustomColor: U = !0,
-  recentColors: s = [],
-  showRecentColors: h = !0,
-  noneValues: g = j
+import { jsx as m } from "react/jsx-runtime";
+import { BubbleMenuPlugin as x } from "@vizel/core";
+import { useRef as f, useEffect as g } from "react";
+import { VizelBubbleMenuDefault as y } from "./index14.js";
+import { useVizelContextSafe as B } from "./index17.js";
+function S({
+  editor: d,
+  className: b,
+  children: a,
+  showDefaultMenu: p = !0,
+  pluginKey: n = "vizelBubbleMenu",
+  updateDelay: u = 100,
+  shouldShow: l,
+  enableEmbed: s
 }) {
-  const [p, d] = K(""), [x, v] = K(-1), u = L([]), D = L(null), i = $(
-    () => [...h ? s : [], ...f.map((e) => e.color)],
-    [h, s, f]
-  );
-  y(() => {
-    u.current.length > i.length && (u.current.length = i.length);
-  }, [i.length]);
-  const H = h ? s.length : 0, o = b(
-    (e) => g.includes(e),
-    [g]
-  ), k = b(
-    (e) => {
-      m(e), d("");
-    },
-    [m]
-  ), V = b(() => {
-    const e = N(p);
-    I(e) && (m(e), d(""));
-  }, [p, m]), R = (e) => {
-    e.key === "Enter" && (e.preventDefault(), V());
-  }, A = b(
-    (e, r) => {
-      const t = i.length;
-      if (t === 0) return;
-      let n = r, c = !1;
-      switch (e.key) {
-        case "ArrowRight":
-          n = (r + 1) % t, c = !0;
-          break;
-        case "ArrowLeft":
-          n = (r - 1 + t) % t, c = !0;
-          break;
-        case "ArrowDown":
-          n = Math.min(r + S, t - 1), c = !0;
-          break;
-        case "ArrowUp":
-          n = Math.max(r - S, 0), c = !0;
-          break;
-        case "Home":
-          n = 0, c = !0;
-          break;
-        case "End":
-          n = t - 1, c = !0;
-          break;
-        case "Enter":
-        case " ": {
-          e.preventDefault();
-          const E = i[r];
-          E && k(E);
-          return;
-        }
+  const v = B(), e = d ?? v?.editor ?? null, r = f(null), o = f(l);
+  return o.current = l, g(() => {
+    if (!(e && r.current))
+      return;
+    const w = x({
+      pluginKey: n,
+      editor: e,
+      element: r.current,
+      updateDelay: u,
+      ...o.current && {
+        shouldShow: ({ editor: t, from: z, to: h }) => o.current?.({ editor: t, from: z, to: h }) ?? !1
+      },
+      options: {
+        placement: "top"
       }
-      c && (e.preventDefault(), v(n), u.current[n]?.focus());
-    },
-    [i, k]
-  );
-  y(() => {
-    a && !o(a) ? d(a) : d("");
-  }, [a, o]), y(() => {
-    const e = a ? i.indexOf(a) : -1;
-    e >= 0 ? v(e) : i.length > 0 && v(0);
-  }, [i, a]);
-  const C = I(N(p)), _ = C ? N(p) : void 0;
-  return /* @__PURE__ */ z(
+    });
+    e.registerPlugin(w);
+    const i = e, c = (t) => {
+      t.key === "Escape" && !i.view.state.selection.empty && (t.preventDefault(), i.commands.setTextSelection(i.view.state.selection.to));
+    };
+    return document.addEventListener("keydown", c), () => {
+      e.unregisterPlugin(n), document.removeEventListener("keydown", c);
+    };
+  }, [e, n, u]), e ? /* @__PURE__ */ m(
     "div",
     {
-      className: `vizel-color-picker-content ${O ?? ""}`,
-      role: "listbox",
-      "aria-label": M,
-      children: [
-        h && s.length > 0 && /* @__PURE__ */ z("div", { className: "vizel-color-picker-section", children: [
-          /* @__PURE__ */ l("div", { className: "vizel-color-picker-label", children: "Recent" }),
-          /* @__PURE__ */ l("div", { className: "vizel-color-picker-recent", children: s.map((e, r) => /* @__PURE__ */ l(
-            "button",
-            {
-              ref: (t) => {
-                u.current[r] = t;
-              },
-              type: "button",
-              role: "option",
-              "aria-selected": a === e,
-              "aria-label": e,
-              tabIndex: x === r ? 0 : -1,
-              className: `vizel-color-picker-swatch ${a === e ? "is-active" : ""}`,
-              onClick: () => k(e),
-              onKeyDown: (t) => A(t, r),
-              style: {
-                backgroundColor: o(e) ? "transparent" : e
-              },
-              "data-color": e,
-              children: o(e) ? /* @__PURE__ */ l("span", { className: "vizel-color-picker-none", children: /* @__PURE__ */ l(w, { name: "x" }) }) : null
-            },
-            e
-          )) })
-        ] }),
-        /* @__PURE__ */ l("div", { className: "vizel-color-picker-section", children: /* @__PURE__ */ l("div", { className: "vizel-color-picker-grid", children: f.map((e, r) => {
-          const t = H + r;
-          return /* @__PURE__ */ l(
-            "button",
-            {
-              ref: (n) => {
-                u.current[t] = n;
-              },
-              type: "button",
-              role: "option",
-              "aria-selected": a === e.color,
-              "aria-label": e.name,
-              tabIndex: x === t ? 0 : -1,
-              className: `vizel-color-picker-swatch ${a === e.color ? "is-active" : ""}`,
-              onClick: () => k(e.color),
-              onKeyDown: (n) => A(n, t),
-              style: {
-                backgroundColor: o(e.color) ? "transparent" : e.color
-              },
-              "data-color": e.color,
-              children: o(e.color) ? /* @__PURE__ */ l("span", { className: "vizel-color-picker-none", children: /* @__PURE__ */ l(w, { name: "x" }) }) : null
-            },
-            e.color
-          );
-        }) }) }),
-        U && /* @__PURE__ */ z("div", { className: "vizel-color-picker-input-row", children: [
-          /* @__PURE__ */ l(
-            "span",
-            {
-              className: "vizel-color-picker-preview",
-              style: { backgroundColor: _ || "transparent" },
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ l(
-            "input",
-            {
-              ref: D,
-              type: "text",
-              className: "vizel-color-picker-input",
-              placeholder: "#000000",
-              value: p,
-              onChange: (e) => d(e.target.value),
-              onKeyDown: R,
-              maxLength: 7,
-              "aria-label": "Custom color hex value"
-            }
-          ),
-          /* @__PURE__ */ l(
-            "button",
-            {
-              type: "button",
-              className: "vizel-color-picker-apply",
-              onClick: V,
-              disabled: !C,
-              title: "Apply",
-              "aria-label": "Apply custom color",
-              children: /* @__PURE__ */ l(w, { name: "check" })
-            }
-          )
-        ] })
-      ]
+      ref: r,
+      className: `vizel-bubble-menu ${b ?? ""}`,
+      "data-vizel-bubble-menu": "",
+      style: { visibility: "hidden" },
+      children: a ?? (p && /* @__PURE__ */ m(y, { editor: e, ...s ? { enableEmbed: s } : {} }))
     }
-  );
+  ) : null;
 }
 export {
-  q as VizelColorPicker
+  S as VizelBubbleMenu
 };

package/dist/index12.js

@@ -1,24 +1,28 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useRef as a, useImperativeHandle as c, useEffect as l } from "react";
-import { useVizelContextSafe as s } from "./index2.js";
-function v({ ref: i, editor: o, className: n }) {
-  const d = s(), e = o ?? d?.editor, r = a(null);
-  return c(
-    i,
-    () => ({
-      container: r.current
-    }),
-    []
-  ), l(() => {
-    const t = r.current;
-    if (e && t)
-      return t.appendChild(e.view.dom), e.view.setProps({
-        editable: () => e?.isEditable ?? !1
-      }), () => {
-        e.view.dom.parentNode === t && t.removeChild(e.view.dom);
-      };
-  }, [e]), e ? /* @__PURE__ */ f("div", { ref: r, className: n, "data-vizel-content": "" }) : null;
+import { jsx as l } from "react/jsx-runtime";
+function i({
+  onClick: e,
+  isActive: t = !1,
+  disabled: a = !1,
+  children: n,
+  title: o,
+  className: u,
+  action: b
+}) {
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      type: "button",
+      onClick: e,
+      disabled: a,
+      "aria-pressed": t,
+      className: `vizel-bubble-menu-button ${t ? "is-active" : ""} ${u ?? ""}`,
+      title: o,
+      "data-active": t || void 0,
+      "data-action": b,
+      children: n
+    }
+  );
 }
 export {
-  v as VizelEditor
+  i as VizelBubbleMenuButton
 };

package/dist/index13.js

@@ -1,79 +1,63 @@
-import { jsx as i, jsxs as s } from "react/jsx-runtime";
-import { useRef as a, useEffect as v } from "react";
-import { VizelIcon as p } from "./index14.js";
-const b = (r, e, n) => `vizel-embed ${r ? "is-loading" : ""} ${e ? "ProseMirror-selectednode" : ""} ${n ?? ""}`, h = (r, e) => /* @__PURE__ */ i("div", { className: r, "data-embed-type": "loading", "data-embed-provider": e, children: /* @__PURE__ */ s("div", { className: "vizel-embed-loading", children: [
-  /* @__PURE__ */ i("div", { className: "vizel-embed-loading-spinner" }),
-  /* @__PURE__ */ i("span", { children: "Loading embed..." })
-] }) }), f = (r, e, n) => {
-  const l = ["youtube", "vimeo", "loom", "tiktok"].includes(e.provider ?? "");
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      ref: n,
-      className: r,
-      "data-embed-type": "oembed",
-      "data-embed-provider": e.provider,
-      children: /* @__PURE__ */ i(
-        "div",
-        {
-          className: l ? "vizel-embed-video" : "vizel-embed-oembed",
-          dangerouslySetInnerHTML: { __html: e.html ?? "" }
-        }
-      )
-    }
+import { jsxs as V, jsx as l } from "react/jsx-runtime";
+import { getVizelRecentColors as H, addVizelRecentColor as u, VIZEL_TEXT_COLORS as L, VIZEL_HIGHLIGHT_COLORS as O } from "@vizel/core";
+import { useState as h, useRef as E, useEffect as g, useCallback as I } from "react";
+import { VizelColorPicker as T } from "./index16.js";
+import { VizelIcon as C } from "./index20.js";
+function A({
+  editor: o,
+  type: e,
+  colors: f,
+  className: m,
+  allowCustomColor: d = !0,
+  showRecentColors: s = !0
+}) {
+  const [r, c] = h(!1), [b, x] = h([]), a = E(null), v = f ?? (e === "textColor" ? L : O), i = e === "textColor" ? o.getAttributes("textStyle").color : o.getAttributes("highlight").color;
+  g(() => {
+    r && s && x(H(e));
+  }, [r, s, e]);
+  const p = I(
+    (t) => {
+      e === "textColor" ? t === "inherit" ? o.chain().focus().unsetColor().run() : (o.chain().focus().setColor(t).run(), u(e, t)) : t === "transparent" ? o.chain().focus().unsetHighlight().run() : (o.chain().focus().toggleHighlight({ color: t }).run(), u(e, t)), c(!1);
+    },
+    [o, e]
   );
-}, u = (r, e) => {
-  const n = !!e.image, l = n ? "vizel-embed-card-horizontal" : "";
-  return /* @__PURE__ */ i("div", { className: r, "data-embed-type": "ogp", "data-embed-provider": e.provider, children: /* @__PURE__ */ s(
-    "a",
-    {
-      href: e.url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: `vizel-embed-card ${l}`,
-      children: [
-        n && /* @__PURE__ */ i("img", { src: e.image, alt: "", className: "vizel-embed-card-image", loading: "lazy" }),
-        /* @__PURE__ */ s("div", { className: "vizel-embed-card-content", children: [
-          (e.siteName || e.favicon) && /* @__PURE__ */ s("div", { className: "vizel-embed-card-site", children: [
-            e.favicon && /* @__PURE__ */ i("img", { src: e.favicon, alt: "", className: "vizel-embed-card-favicon" }),
-            e.siteName && /* @__PURE__ */ i("span", { children: e.siteName })
-          ] }),
-          e.title && /* @__PURE__ */ i("div", { className: "vizel-embed-card-title", children: e.title }),
-          e.description && /* @__PURE__ */ i("div", { className: "vizel-embed-card-description", children: e.description }),
-          /* @__PURE__ */ i("div", { className: "vizel-embed-card-url", children: new URL(e.url).hostname })
-        ] })
-      ]
-    }
-  ) });
-}, N = (r, e, n) => /* @__PURE__ */ i("div", { className: r, "data-embed-type": "title", "data-embed-provider": e.provider, children: /* @__PURE__ */ s("a", { href: e.url, target: "_blank", rel: "noopener noreferrer", className: "vizel-embed-link", children: [
-  /* @__PURE__ */ i("span", { className: "vizel-embed-link-icon", children: n }),
-  /* @__PURE__ */ i("span", { className: "vizel-embed-link-text", children: e.title })
-] }) }), z = (r, e, n) => /* @__PURE__ */ i("div", { className: r, "data-embed-type": "link", "data-embed-provider": e.provider, children: /* @__PURE__ */ s("a", { href: e.url, target: "_blank", rel: "noopener noreferrer", className: "vizel-embed-link", children: [
-  /* @__PURE__ */ i("span", { className: "vizel-embed-link-icon", children: n }),
-  /* @__PURE__ */ i("span", { className: "vizel-embed-link-text", children: e.url })
-] }) });
-function w({ data: r, className: e, selected: n }) {
-  const l = a(null);
-  v(() => {
-    if (r.type === "oembed" && r.html && l.current) {
-      const m = l.current.querySelectorAll("script");
-      for (const o of m) {
-        const d = document.createElement("script");
-        o.src ? d.src = o.src : d.textContent = o.textContent, o.parentNode?.replaceChild(d, o);
+  g(() => {
+    const t = (k) => {
+      a.current && !a.current.contains(k.target) && c(!1);
+    };
+    return r && document.addEventListener("mousedown", t), () => {
+      document.removeEventListener("mousedown", t);
+    };
+  }, [r]);
+  const n = e === "textColor", z = n ? /* @__PURE__ */ l(C, { name: "textColor" }) : /* @__PURE__ */ l(C, { name: "highlighter" });
+  return /* @__PURE__ */ V("div", { ref: a, className: `vizel-color-picker ${m ?? ""}`, "data-type": e, children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        type: "button",
+        className: `vizel-bubble-menu-button vizel-color-picker-trigger ${i ? "has-color" : ""}`,
+        onClick: () => c(!r),
+        title: n ? "Text Color" : "Highlight",
+        "data-action": e,
+        style: n ? { color: i || "inherit" } : { "--highlight-color": i || "transparent" },
+        children: z
       }
-      r.provider === "twitter" && "twttr" in window && window.twttr?.widgets?.load?.();
-    }
-  }, [r.type, r.html, r.provider]);
-  const c = b(r.loading, n, e);
-  if (r.loading)
-    return h(c, r.provider);
-  if (r.type === "oembed" && r.html)
-    return f(c, r, l);
-  if (r.type === "ogp")
-    return u(c, r);
-  const t = /* @__PURE__ */ i(p, { name: "link" });
-  return r.type === "title" && r.title ? N(c, r, t) : z(c, r, t);
+    ),
+    r && /* @__PURE__ */ l("div", { className: "vizel-color-picker-dropdown", children: /* @__PURE__ */ l(
+      T,
+      {
+        colors: v,
+        value: i,
+        onChange: p,
+        label: n ? "Text color palette" : "Highlight color palette",
+        allowCustomColor: d,
+        recentColors: b,
+        showRecentColors: s,
+        noneValues: n ? ["inherit"] : ["transparent"]
+      }
+    ) })
+  ] });
 }
 export {
-  w as VizelEmbedView
+  A as VizelBubbleMenuColorPicker
 };