@pagehub/sdk 0.1.0

package/dist/chunks/TextMainTab-BlHWyauy.js

@@ -0,0 +1,160 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { useState as v, Suspense as P, lazy as w } from "react";
+import { useEditor as b, useNode as u } from "@craftjs/core";
+import { D as p, bn as N, b$ as y, c1 as f, c2 as S, c3 as E, b6 as O, P as L, bP as M, c0 as A, M as H, c4 as h, N as V, c5 as k, c6 as F, a_ as z } from "./index-lNS44FHV.js";
+import { L as I } from "./loremIpsum-BCDkCRY8.js";
+import { r as W } from "./helpers-Bnp6O4wY.js";
+function _(t) {
+  return t.charAt(0).toUpperCase() + t.slice(1);
+}
+const j = ({ propKey: t, propType: o }) => {
+  const s = p(N), a = p(y).dark ?? !1, r = A(s), { actions: n, query: i } = b(), d = new I({
+    sentencesPerParagraph: {
+      max: 5,
+      min: 3
+    },
+    wordsPerSentence: {
+      max: 16,
+      min: 4
+    }
+  }), {
+    actions: { setProp: x },
+    propValues: G,
+    id: g
+  } = u((l) => {
+    var c;
+    return {
+      propValues: (c = l.data) == null ? void 0 : c.props,
+      id: l.id
+    };
+  }), T = (l) => {
+    M({
+      propKey: t,
+      value: l,
+      setProp: x,
+      view: o === "class" ? r : s,
+      propType: o,
+      query: i,
+      actions: n,
+      nodeId: g,
+      ...o === "class" ? { classDark: a } : {}
+    });
+  };
+  return /* @__PURE__ */ e(f, { label: "Sample", frame: "bare", children: /* @__PURE__ */ e("div", { className: "bg-neutral ml-auto flex w-fit shrink-0 items-center gap-1 rounded-md p-1", children: [
+    {
+      icon: S,
+      label: "Word",
+      generate: () => _(d.generateWords(1))
+    },
+    { icon: E, label: "Sentence", generate: () => d.generateSentences(1) },
+    { icon: O, label: "Paragraph", generate: () => d.generateParagraphs(1) }
+  ].map(({ icon: l, label: c, generate: C }) => /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      "data-tooltip-id": L,
+      "data-tooltip-content": c,
+      "data-tooltip-place": "top",
+      className: "text-neutral-content hover:bg-base-100 hover:text-base-content flex h-6 items-center justify-center rounded px-2 transition-colors",
+      onClick: () => T(C()),
+      children: /* @__PURE__ */ e(l, { className: "size-3.5" })
+    },
+    c
+  )) }) });
+}, D = w(
+  () => import("./CodeEditor-DBNpuBny.js").then((t) => t.a).then((t) => ({ default: t.CodeEditor }))
+);
+function K() {
+  const { query: t } = b(), {
+    actions: { setProp: o },
+    id: s,
+    text: a
+  } = u((n) => {
+    var i;
+    return {
+      text: typeof ((i = n.data.props) == null ? void 0 : i.text) == "string" ? n.data.props.text : ""
+    };
+  }), r = z(t);
+  return /* @__PURE__ */ e("div", { className: "bg-base-100 flex min-h-0 flex-1 flex-col p-4", children: /* @__PURE__ */ e("div", { className: "min-h-0 flex-1 [&>div]:h-full", children: /* @__PURE__ */ e(P, { fallback: null, children: /* @__PURE__ */ e(
+    D,
+    {
+      value: a,
+      onChange: (n) => o((i) => i.text = n),
+      language: "html",
+      height: "100%",
+      lineNumbers: !1,
+      theme: "auto",
+      autoFormatOnMount: !0,
+      autoFormatMountKey: s,
+      toolbarDenseCode: !0,
+      htmlVariableCompletionOptions: r,
+      placeholder: "Enter HTML content"
+    }
+  ) }) }) });
+}
+const R = [
+  { value: "full", label: "Rich" },
+  { value: "inline", label: "Inline" }
+];
+function B() {
+  const {
+    actions: { setProp: t },
+    mode: o
+  } = u((s) => {
+    var a, r, n;
+    return {
+      mode: ((n = (r = (a = s.data) == null ? void 0 : a.props) == null ? void 0 : r.richText) == null ? void 0 : n.mode) || "full"
+    };
+  });
+  return /* @__PURE__ */ e(f, { label: "Format", frame: "bare", children: /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e(
+    F,
+    {
+      dense: !0,
+      "aria-label": "Text format",
+      value: o,
+      onChange: (s) => t((a) => {
+        (!a.richText || typeof a.richText != "object") && (a.richText = {}), a.richText.mode = s;
+      }, 0),
+      options: R
+    }
+  ) }) });
+}
+const Z = () => {
+  const [t, o] = v(!1);
+  return W({
+    Content: /* @__PURE__ */ m(H, { collapsible: !1, children: [
+      /* @__PURE__ */ e(j, { propKey: "text", propType: "component" }),
+      /* @__PURE__ */ e(B, {}),
+      /* @__PURE__ */ m("div", { className: "flex w-full gap-2 [&>*]:flex-1", children: [
+        /* @__PURE__ */ m("button", { type: "button", className: "ph-toolbar-dashed-btn", onClick: () => o(!0), children: [
+          /* @__PURE__ */ e(h, { size: 12, "aria-hidden": !0 }),
+          "Edit HTML"
+        ] }),
+        /* @__PURE__ */ e(V, { id: "settings/ai-button" })
+      ] }),
+      /* @__PURE__ */ e(
+        k,
+        {
+          isOpen: t,
+          onClose: () => o(!1),
+          title: "Edit HTML",
+          icon: /* @__PURE__ */ e(h, { className: "size-3.5" }),
+          storageKey: "textContentEditor",
+          autoSize: !1,
+          defaultWidth: 720,
+          defaultHeight: 520,
+          minWidth: 420,
+          maxWidth: 1100,
+          minHeight: 320,
+          maxHeight: 900,
+          backdrop: !0,
+          edges: ["e", "s", "se", "w", "sw", "n", "ne", "nw"],
+          children: t ? /* @__PURE__ */ e(K, {}) : null
+        }
+      )
+    ] })
+  });
+};
+export {
+  Z as TextMainTab
+};

package/dist/chunks/TextStyleEditorPanel-CPf4Vsr9.js

@@ -0,0 +1,377 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { useState as I, useRef as T, useMemo as z } from "react";
+import { u as L, F as R, C as _, c5 as W, d8 as X, f as H, c6 as B, bC as j, dt as $ } from "./index-lNS44FHV.js";
+import { e as ae, p as le } from "./TypographyPresetInput-Cj4kRkkz.js";
+const G = [
+  ["0.625rem", "XS (10px)"],
+  ["0.75rem", "SM (12px)"],
+  ["0.875rem", "Base- (14px)"],
+  ["1rem", "Base (16px)"],
+  ["1.125rem", "LG (18px)"],
+  ["1.25rem", "XL (20px)"],
+  ["1.5rem", "2XL (24px)"],
+  ["1.875rem", "3XL (30px)"],
+  ["2.25rem", "4XL (36px)"],
+  ["3rem", "5XL (48px)"],
+  ["3.75rem", "6XL (60px)"],
+  ["4.5rem", "7XL (72px)"],
+  ["6rem", "8XL (96px)"],
+  ["8rem", "9XL (128px)"]
+], K = [
+  ["100", "Thin"],
+  ["200", "Extra Light"],
+  ["300", "Light"],
+  ["400", "Normal"],
+  ["500", "Medium"],
+  ["600", "Semibold"],
+  ["700", "Bold"],
+  ["800", "Extra Bold"],
+  ["900", "Black"]
+], M = [
+  ["1", "None"],
+  ["1.15", "Tight"],
+  ["1.2", "Snug"],
+  ["1.25", "Compact"],
+  ["1.375", "Normal-"],
+  ["1.5", "Normal"],
+  ["1.625", "Relaxed"],
+  ["1.75", "Loose"],
+  ["2", "Extra"]
+], U = [
+  ["-0.05em", "Tighter"],
+  ["-0.025em", "Tight"],
+  ["normal", "Normal"],
+  ["0.025em", "Wide"],
+  ["0.05em", "Wider"],
+  ["0.1em", "Widest"]
+], V = [
+  ["none", "None"],
+  ["uppercase", "UPPERCASE"],
+  ["lowercase", "lowercase"],
+  ["capitalize", "Capitalize"]
+], q = [
+  ["none", "None"],
+  ["underline", "Underline"],
+  ["line-through", "Strikethrough"],
+  ["overline", "Overline"]
+], J = [
+  { value: "left", label: "L", tooltip: "Left" },
+  { value: "center", label: "C", tooltip: "Center" },
+  { value: "right", label: "R", tooltip: "Right" },
+  { value: "justify", label: "J", tooltip: "Justify" }
+];
+function x({ children: n }) {
+  return /* @__PURE__ */ o("label", { className: "text-neutral-content mb-1 block text-[11px] font-medium", children: n });
+}
+function p({
+  label: n,
+  value: i,
+  onChange: c,
+  options: b,
+  id: h
+}) {
+  return /* @__PURE__ */ l("div", { children: [
+    /* @__PURE__ */ o(x, { children: n }),
+    /* @__PURE__ */ o($, { value: i, onChange: c, placeholder: n, propKey: h, children: b.map(([f, g]) => /* @__PURE__ */ o("option", { value: f, children: g }, f)) })
+  ] });
+}
+function Z(n) {
+  return !!n && typeof n == "object" && typeof n.r == "number" && typeof n.g == "number" && typeof n.b == "number";
+}
+function Y(n) {
+  if (n == null) return null;
+  if (typeof n == "string") return n;
+  if (typeof n == "object") {
+    const i = n;
+    if (typeof i.value == "string") return i.value;
+    if (Z(i)) {
+      const c = typeof i.a == "number" ? i.a : 1;
+      return `rgba(${i.r}, ${i.g}, ${i.b}, ${c})`;
+    }
+  }
+  return String(n);
+}
+function oe({
+  mode: n,
+  initialDraft: i,
+  originalName: c,
+  existingNames: b,
+  initialPosition: h,
+  defaultWidth: f,
+  defaultHeight: g,
+  onClose: y,
+  onSave: F,
+  onDelete: v
+}) {
+  const [e, O] = I(i), N = T(null), C = T(null), [, k] = L(R), [, w] = L(_), a = (t, s) => {
+    O((r) => ({ ...r, [t]: s }));
+  }, u = e.name.trim(), d = z(() => {
+    if (!u) return "Name is required";
+    const t = u.toLowerCase();
+    return b.some((r) => r.toLowerCase() === t && r !== c) ? `A style named "${u}" already exists` : null;
+  }, [u, b, c]), S = !d, A = () => {
+    var s;
+    const t = ((s = N.current) == null ? void 0 : s.getBoundingClientRect()) || null;
+    k({
+      enabled: !0,
+      value: e.fontFamily ? [e.fontFamily] : [],
+      originalValue: e.fontFamily ? [e.fontFamily] : [],
+      changed: (r) => {
+        const m = Array.isArray(r) ? r[0] : r;
+        a("fontFamily", m || "");
+      },
+      preview: (r) => {
+        const m = Array.isArray(r) ? r[0] : r;
+        a("fontFamily", m || "");
+      },
+      e: t
+    });
+  }, E = () => {
+    var s;
+    const t = ((s = C.current) == null ? void 0 : s.getBoundingClientRect()) || null;
+    w({
+      enabled: !0,
+      value: e.color || "",
+      prefix: "",
+      changed: (r) => {
+        const m = Y(r);
+        m != null && a("color", m);
+      },
+      e: t,
+      mode: "picker",
+      propKey: "text-style-editor-color"
+    });
+  }, P = {
+    fontFamily: e.fontFamily || "inherit",
+    fontSize: e.fontSize || "1rem",
+    fontWeight: e.fontWeight || "400",
+    lineHeight: e.lineHeight || "1.5",
+    letterSpacing: e.letterSpacing || "normal",
+    textTransform: e.textTransform || "none",
+    color: e.color || void 0,
+    textDecoration: e.textDecoration && e.textDecoration !== "none" ? e.textDecoration : void 0,
+    textAlign: e.textAlign || "left"
+  }, D = n === "new" ? "New Text Style" : `Edit · ${c ?? e.name}`;
+  return /* @__PURE__ */ l(
+    W,
+    {
+      isOpen: !0,
+      onClose: y,
+      title: D,
+      storageKey: "text-style-editor",
+      autoSize: !1,
+      defaultWidth: f,
+      defaultHeight: g,
+      minWidth: 300,
+      maxWidth: 520,
+      minHeight: 420,
+      initialPosition: h,
+      persistSize: !1,
+      zIndex: X,
+      scrollable: !0,
+      bodyClassName: "text-base-content flex flex-col gap-3 p-3 text-xs",
+      children: [
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ o(x, { children: "Name" }),
+          /* @__PURE__ */ o(
+            "input",
+            {
+              type: "text",
+              value: e.name,
+              onChange: (t) => a("name", t.target.value),
+              placeholder: "e.g. Heading 2",
+              "aria-invalid": !!d,
+              "aria-describedby": d ? "text-style-name-error" : void 0,
+              className: `input-plain border-base-300 bg-base-100 w-full rounded-md border px-2 py-1.5 text-xs outline-none ${d ? "border-error focus:border-error" : "focus:border-primary"}`
+            }
+          ),
+          d && /* @__PURE__ */ o(
+            "p",
+            {
+              id: "text-style-name-error",
+              role: "alert",
+              className: "text-error mt-1 text-[11px] leading-tight",
+              children: d
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ o(x, { children: "Font Family" }),
+          /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              ref: N,
+              onClick: A,
+              className: "border-base-300 bg-base-100 text-base-content hover:bg-base-200 flex h-8 w-full items-center justify-between gap-2 rounded-md border px-2 text-left text-xs",
+              style: { fontFamily: e.fontFamily || void 0 },
+              children: [
+                /* @__PURE__ */ o("span", { className: "truncate", children: e.fontFamily || "Choose typeface…" }),
+                /* @__PURE__ */ o(H, { className: "text-neutral-content size-3 shrink-0", "aria-hidden": !0 })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l("div", { className: "grid grid-cols-2 gap-2", children: [
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-size",
+              label: "Size",
+              value: e.fontSize,
+              onChange: (t) => a("fontSize", t),
+              options: G
+            }
+          ),
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-weight",
+              label: "Weight",
+              value: e.fontWeight,
+              onChange: (t) => a("fontWeight", t),
+              options: K
+            }
+          ),
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-line-height",
+              label: "Line Height",
+              value: e.lineHeight,
+              onChange: (t) => a("lineHeight", t),
+              options: M
+            }
+          ),
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-letter-spacing",
+              label: "Letter Spacing",
+              value: e.letterSpacing,
+              onChange: (t) => a("letterSpacing", t),
+              options: U
+            }
+          ),
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-transform",
+              label: "Transform",
+              value: e.textTransform,
+              onChange: (t) => a("textTransform", t),
+              options: V
+            }
+          ),
+          /* @__PURE__ */ o(
+            p,
+            {
+              id: "text-style-decoration",
+              label: "Decoration",
+              value: e.textDecoration,
+              onChange: (t) => a("textDecoration", t),
+              options: q
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ o(x, { children: "Text Align" }),
+          /* @__PURE__ */ o(
+            B,
+            {
+              value: e.textAlign,
+              onChange: (t) => a("textAlign", t),
+              options: J,
+              "aria-label": "Text alignment"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l("div", { children: [
+          /* @__PURE__ */ o(x, { children: "Color" }),
+          /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              ref: C,
+              onClick: E,
+              className: "border-base-300 bg-base-100 text-base-content hover:bg-base-200 flex h-8 w-full items-center gap-2 rounded-md border px-2 text-left text-xs",
+              children: [
+                /* @__PURE__ */ o(
+                  "span",
+                  {
+                    className: "border-base-300 size-4 shrink-0 rounded border",
+                    style: { backgroundColor: e.color || "transparent" },
+                    "aria-hidden": !0
+                  }
+                ),
+                /* @__PURE__ */ o("span", { className: "min-w-0 flex-1 truncate", children: e.color || "Inherit" }),
+                e.color && /* @__PURE__ */ o(
+                  "span",
+                  {
+                    role: "button",
+                    tabIndex: 0,
+                    onClick: (t) => {
+                      t.stopPropagation(), a("color", "");
+                    },
+                    onKeyDown: (t) => {
+                      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), a("color", ""));
+                    },
+                    className: "text-neutral-content hover:text-base-content shrink-0 px-1",
+                    "aria-label": "Clear color",
+                    children: "×"
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ l("div", { className: "border-base-300/60 bg-base-200/40 rounded-md border p-3", children: [
+          /* @__PURE__ */ o("p", { className: "text-base-content/45 mb-1 text-[10px] font-semibold tracking-wider uppercase", children: "Preview" }),
+          /* @__PURE__ */ o("div", { style: P, className: "break-words", children: "The quick brown fox jumps over the lazy dog" })
+        ] }),
+        /* @__PURE__ */ l("div", { className: "border-base-300/60 mt-auto flex items-center justify-between gap-2 border-t pt-3", children: [
+          /* @__PURE__ */ o("div", { children: n === "edit" && v && /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              onClick: v,
+              className: "text-error hover:bg-error/10 flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors",
+              children: [
+                /* @__PURE__ */ o(j, { className: "size-3.5", "aria-hidden": !0 }),
+                "Delete"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                onClick: y,
+                className: "text-base-content hover:bg-base-200 rounded-md px-3 py-1 text-xs font-medium transition-colors",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                disabled: !S,
+                onClick: () => {
+                  S && F({ ...e, name: u });
+                },
+                className: "bg-primary text-primary-content rounded-md px-3 py-1 text-xs font-semibold transition-opacity disabled:cursor-not-allowed disabled:opacity-40",
+                children: n === "new" ? "Save as new" : "Update"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  oe as default,
+  ae as emptyDraft,
+  le as presetToDraft
+};

package/dist/chunks/TextStylePickerPanel-D_-pqkbw.js

@@ -0,0 +1,139 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useState as v, useRef as S, useMemo as T } from "react";
+import { c5 as w, d8 as k, cs as z, P, bB as $, ct as C } from "./index-lNS44FHV.js";
+function L(n) {
+  const a = /^\s*h(?:eading)?\s*([1-6])/i.exec(n);
+  return a ? `H${a[1]}` : "P";
+}
+function A(n) {
+  const a = (n.fontSize || "").trim(), s = (n.lineHeight || "").trim();
+  return !a && !s ? "" : s ? `${a} / ${s}` : a;
+}
+const _ = ({ tag: n, active: a = !1 }) => /* @__PURE__ */ t(
+  "span",
+  {
+    className: `border-base-300 flex h-5 min-w-[1.5rem] shrink-0 items-center justify-center rounded border px-1.5 text-[10px] font-bold ${a ? "bg-base-content text-base-100" : "bg-base-100 text-base-content"}`,
+    children: n
+  }
+);
+function H({
+  presets: n,
+  selectedName: a,
+  initialPosition: s,
+  onClose: m,
+  onApply: u,
+  onEditPreset: d,
+  onCreateNew: x,
+  defaultWidth: f,
+  defaultHeight: b,
+  overlay: h
+}) {
+  const [r, y] = v(""), p = S(null), o = T(() => {
+    const e = r.trim().toLowerCase();
+    return e ? n.filter((i) => i.name.toLowerCase().includes(e)) : n;
+  }, [n, r]);
+  return /* @__PURE__ */ l(
+    w,
+    {
+      isOpen: !0,
+      onClose: m,
+      title: "Text Styles",
+      storageKey: "text-style-picker",
+      autoSize: !1,
+      defaultWidth: f,
+      defaultHeight: b,
+      minWidth: 260,
+      maxWidth: 420,
+      minHeight: 260,
+      initialPosition: s,
+      persistSize: !1,
+      zIndex: k,
+      scrollable: !1,
+      children: [
+        /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ l("div", { className: "border-base-300/60 flex items-center gap-1.5 border-b px-3 py-2", children: [
+            /* @__PURE__ */ t(z, { className: "text-neutral-content size-3.5 shrink-0", "aria-hidden": !0 }),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                ref: p,
+                type: "text",
+                value: r,
+                onChange: (e) => y(e.target.value),
+                placeholder: "Search styles...",
+                autoFocus: !0,
+                className: "text-base-content placeholder:text-neutral-content min-w-0 flex-1 bg-transparent text-xs outline-none"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ t("div", { className: "scrollbar min-h-0 flex-1 overflow-y-auto py-1", children: o.length === 0 ? /* @__PURE__ */ t("div", { className: "text-neutral-content px-3 py-6 text-center text-xs italic", children: n.length === 0 ? "No styles yet" : `No matches for "${r}"` }) : o.map((e) => {
+            const i = e.name === a, g = L(e.name), c = A(e), N = {
+              fontFamily: e.fontFamily,
+              fontWeight: e.fontWeight,
+              letterSpacing: e.letterSpacing || "normal",
+              textTransform: e.textTransform || "none"
+            };
+            return /* @__PURE__ */ l(
+              "div",
+              {
+                className: `group flex w-full items-center gap-2 px-2 py-1 text-xs transition-colors ${i ? "bg-base-200" : "hover:bg-base-200/60"}`,
+                children: [
+                  /* @__PURE__ */ l(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => u(e),
+                      className: "flex min-w-0 flex-1 items-center gap-2 text-left",
+                      "aria-label": `Apply style ${e.name}`,
+                      children: [
+                        /* @__PURE__ */ t(_, { tag: g, active: i }),
+                        /* @__PURE__ */ t(
+                          "span",
+                          {
+                            className: "text-base-content min-w-0 flex-1 truncate font-medium",
+                            style: N,
+                            children: e.name
+                          }
+                        ),
+                        c && /* @__PURE__ */ t("span", { className: "text-neutral-content shrink-0 text-[10px] tabular-nums", children: c })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => d(e),
+                      "aria-label": `Edit style ${e.name}`,
+                      "data-tooltip-id": P,
+                      "data-tooltip-content": "Edit style",
+                      className: "text-neutral-content hover:text-base-content hover:bg-base-300/60 flex size-6 shrink-0 items-center justify-center rounded opacity-0 transition-[color,background-color,opacity] group-hover:opacity-100",
+                      children: /* @__PURE__ */ t($, { className: "size-3.5", "aria-hidden": !0 })
+                    }
+                  )
+                ]
+              },
+              e.name
+            );
+          }) }),
+          /* @__PURE__ */ t("div", { className: "border-base-300/60 border-t p-2", children: /* @__PURE__ */ l(
+            "button",
+            {
+              type: "button",
+              onClick: x,
+              className: "bg-base-200 text-base-content hover:bg-base-300 flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium transition-colors",
+              children: [
+                /* @__PURE__ */ t(C, { className: "size-3.5", "aria-hidden": !0 }),
+                "New Style"
+              ]
+            }
+          ) })
+        ] }),
+        h
+      ]
+    }
+  );
+}
+export {
+  H as default
+};