@pagehub/sdk 0.1.0

package/dist/chunks/ClassNameInput-F0Elm8ug.js

@@ -0,0 +1,717 @@
+import { jsx as n, jsxs as c, Fragment as j } from "react/jsx-runtime";
+import be, { useState as P, useEffect as Ne, useCallback as re } from "react";
+import { dM as pe, P as X, B as ye, dL as Y, dN as ke, dO as me, dP as Ce, dQ as le, dR as De, cl as Te, h as Se, bC as G, d as se, dS as oe, dT as Be, ds as Ae, D as H, bn as we, b$ as ue, c1 as Ve, u as Ee, cG as Pe, cJ as $e, bP as W, R as ie, b_ as _e, c0 as Ie, dU as Le } from "./index-lNS44FHV.js";
+import { useNode as ze, useEditor as Oe } from "@craftjs/core";
+function Me({
+  children: e,
+  pill: r = !1,
+  className: a = "",
+  onClick: l,
+  onContextMenu: t
+}) {
+  const p = r || (typeof e == "number" ? e > 1 : String(e).length > 2);
+  return /* @__PURE__ */ n(
+    l ? "button" : "span",
+    {
+      type: l ? "button" : void 0,
+      onClick: l,
+      onContextMenu: t,
+      className: `inline-flex items-center justify-center text-[9px] leading-tight font-semibold transition-colors ${p ? "rounded-full px-1.5 py-0.5" : "rounded-md px-1 py-0.5"} ${a}`,
+      children: e
+    }
+  );
+}
+const fe = ({
+  value: e,
+  displayValue: r,
+  onClick: a,
+  bgColor: l = "bg-primary text-primary-content",
+  onDragStart: t,
+  onDragEnd: p,
+  draggable: x = !0,
+  tooltipValue: y
+}) => {
+  if (!e)
+    return null;
+  const k = r || pe(e), i = y || e, b = () => {
+    const s = k.split("--");
+    return s.length > 1 ? /* @__PURE__ */ c(j, { children: [
+      s[0],
+      /* @__PURE__ */ c("span", { className: "font-bold", children: [
+        "--",
+        s[1]
+      ] })
+    ] }) : k;
+  };
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      draggable: x,
+      onClick: (s) => {
+        s.preventDefault(), s.stopPropagation(), s.shiftKey ? t && t(s, { value: e, type: "copy" }) : navigator.clipboard.writeText(e).then(() => {
+        }).catch((g) => {
+          ye.error("Failed to copy:", g);
+        });
+      },
+      onContextMenu: (s) => {
+        s.preventDefault(), s.stopPropagation(), s.ctrlKey ? a && a(s, { deleteLinked: !0 }) : a && a(s, { deleteLinked: !1 });
+      },
+      onDragStart: (s) => {
+        t && t(s, { value: e, type: "move" }), s.dataTransfer.effectAllowed = "move", s.dataTransfer.setData("text/plain", e);
+      },
+      onDragEnd: (s) => {
+        p && p(s);
+      },
+      className: `${l} inline-flex rounded-md px-1.5 py-0.5 text-xs font-medium whitespace-nowrap hover:brightness-110 ${x ? "cursor-grab transition-transform hover:scale-105 active:cursor-grabbing" : "cursor-pointer"}`,
+      "data-tooltip-id": X,
+      "data-tooltip-content": i,
+      "data-tooltip-place": "top",
+      "data-tooltip-offset": 10,
+      children: b()
+    }
+  );
+}, Re = ({ value: e, onClick: r, className: a = "" }) => {
+  if (!e)
+    return null;
+  const l = pe(e), t = () => {
+    const p = l.split("--");
+    return p.length > 1 ? /* @__PURE__ */ c(j, { children: [
+      p[0],
+      /* @__PURE__ */ c("span", { className: "font-bold", children: [
+        "--",
+        p[1]
+      ] })
+    ] }) : l;
+  };
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      onClick: r,
+      className: `bg-base-200 text-base-content inline-flex cursor-pointer rounded-md px-1 py-0.5 text-xs font-medium ${a}`,
+      "data-tooltip-id": X,
+      "data-tooltip-content": `Add ${e}`,
+      "data-tooltip-place": "top",
+      "data-tooltip-offset": 10,
+      children: t()
+    }
+  );
+}, Ke = (e) => !!me(e) || Ce(e), je = /* @__PURE__ */ new Set(["sm", "md", "lg", "xl", "2xl", "dark", "hover"]), F = (e) => {
+  if (!e || typeof e != "string") return !1;
+  const { segments: r, base: a } = Y(e);
+  for (const l of r)
+    if (!je.has(l)) return !1;
+  return !a.includes(":");
+};
+function Ue(e) {
+  const { segments: r } = Y(e), a = ke(r);
+  if (a.includes("hover")) return "other";
+  const l = a.find((t) => t === "sm" || t === "md" || t === "lg" || t === "xl" || t === "2xl");
+  return l === "sm" ? "sm" : l === "md" ? "desktop" : l === "lg" ? "lg" : l === "xl" ? "xl" : l === "2xl" ? "2xl" : "mobile";
+}
+function We(e, r) {
+  const a = {
+    mobile: [],
+    sm: [],
+    desktop: [],
+    lg: [],
+    xl: [],
+    "2xl": [],
+    other: []
+  }, l = (e || "").split(/\s+/).filter(Boolean);
+  for (const t of l) {
+    if (r != null && r.includes(t)) continue;
+    const p = Ue(t);
+    a[p].push(t);
+  }
+  return a;
+}
+function de(e) {
+  const r = e || "desktop";
+  return r === "mobile" ? "mobile" : r === "sm" || r === "tablet" ? "sm" : r === "desktop" ? "mobile" : r === "md" ? "desktop" : r === "lg" ? "lg" : r === "xl" ? "xl" : r === "2xl" ? "2xl" : "mobile";
+}
+const ce = {
+  mobile: "base",
+  sm: "sm",
+  md: "md",
+  desktop: "md",
+  lg: "lg",
+  xl: "xl",
+  "2xl": "2xl"
+}, Fe = "border border-sidebar-border bg-sidebar-accent text-sidebar-foreground shadow-sm", Ge = "border border-transparent text-neutral-content hover:border-sidebar-border hover:bg-sidebar-accent/80", I = "border-2 border-dashed border-base-content/35 bg-base-content/10", He = [
+  {
+    id: "mobile",
+    label: "Base",
+    hint: "default",
+    icon: "mobile",
+    dropValid: I,
+    dropInvalid: "border-2 border-dashed border-error bg-error/10",
+    borderIdle: "border-base-300"
+  },
+  {
+    id: "sm",
+    label: "SM",
+    hint: "640px+",
+    icon: "badge",
+    dropValid: I,
+    dropInvalid: "border-2 border-dashed border-error bg-error/10",
+    borderIdle: "border-base-300"
+  },
+  {
+    id: "desktop",
+    label: "MD",
+    hint: "768px+",
+    icon: "desktop",
+    dropValid: I,
+    dropInvalid: "border-2 border-dashed border-error bg-error/10",
+    borderIdle: "border-base-300"
+  },
+  {
+    id: "lg",
+    label: "LG",
+    hint: "1024px+",
+    icon: "badge",
+    dropValid: I,
+    dropInvalid: "border-2 border-dashed border-error bg-error/10",
+    borderIdle: "border-base-300"
+  },
+  {
+    id: "xl",
+    label: "XL",
+    hint: "1280px+",
+    icon: "badge",
+    dropValid: I,
+    dropInvalid: "border-2 border-dashed border-error bg-error/10",
+    borderIdle: "border-base-300"
+  },
+  {
+    id: "2xl",
+    label: "2XL",
+    hint: "1536px+",
+    icon: "badge",
+    dropValid: I,
+    dropInvalid: "border-2 border-dashed border-error bg-error/10",
+    borderIdle: "border-base-300"
+  }
+], L = "bg-base-200 text-base-content border border-base-300/60", Xe = {
+  mobile: L,
+  sm: L,
+  desktop: L,
+  lg: L,
+  xl: L,
+  "2xl": L
+}, z = ["sm:", "md:", "lg:", "xl:", "2xl:"];
+function Ye({
+  classes: e,
+  onSave: r,
+  classInput: a,
+  setClassInput: l
+}) {
+  const [t, p] = P([]), [x, y] = P(0);
+  Ne(() => {
+    if (a.length < 2) return;
+    const i = z.some((u) => a.startsWith(u));
+    let b;
+    if (i) {
+      const u = z.find((f) => a.startsWith(f)), v = a.substring(u.length);
+      b = le.filter((f) => f == null ? void 0 : f.includes(v)).map((f) => `${u}${f}`);
+    } else {
+      const u = le.filter((f) => f == null ? void 0 : f.includes(a)), v = u.slice(0, 5).flatMap((f) => z.map((T) => `${T}${f}`));
+      b = [...u, ...v];
+    }
+    p(b.filter((u) => !(e != null && e.includes(u))).slice(0, 4)), y(0);
+  }, [a]);
+  const k = !!(a && t.length);
+  return /* @__PURE__ */ c(j, { children: [
+    /* @__PURE__ */ n("label", { htmlFor: "class-search-input", className: "text-base-content sr-only text-sm font-medium", children: "Search" }),
+    /* @__PURE__ */ c("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ n(
+        De,
+        {
+          value: a,
+          onChange: l,
+          placeholder: "Class Search",
+          size: "slim",
+          inputProps: {
+            id: "class-search-input",
+            role: "searchbox",
+            required: !0,
+            ...Te
+          },
+          onKeyDown: (i) => {
+            if (i.key === "Tab" && t.length > 0)
+              if (i.preventDefault(), z.some((u) => a.startsWith(u))) {
+                const u = t.find((v) => v.startsWith(a.split(":")[0] + ":"));
+                l(u || t[0]);
+              } else
+                l(t[0]);
+            i.key === "ArrowDown" && t.length > 0 && (i.preventDefault(), y((b) => Math.min(b + 1, t.length - 1))), i.key === "ArrowUp" && t.length > 0 && (i.preventDefault(), y((b) => Math.max(b - 1, 0))), i.key === "Enter" && (i.preventDefault(), t.length > 0 && x > 0 ? l(t[x]) : r());
+          }
+        }
+      ),
+      (a == null ? void 0 : a.length) > 0 && t.length > 0 && t[0].startsWith(a) && /* @__PURE__ */ c("div", { className: "pointer-events-none absolute inset-0 z-0 flex items-center pr-7 pl-7 text-xs", children: [
+        /* @__PURE__ */ n("span", { className: "invisible", children: a }),
+        /* @__PURE__ */ n("span", { className: "text-neutral-content font-mono", children: t[0].slice(a.length) })
+      ] })
+    ] }),
+    k && /* @__PURE__ */ c("div", { className: "ph-panel-soft absolute top-9 z-50 w-full overflow-hidden", children: [
+      /* @__PURE__ */ n("div", { className: "scrollbar-light flex max-h-60 w-full flex-wrap gap-2 overflow-auto p-2", children: t.map((i, b) => /* @__PURE__ */ n(
+        Re,
+        {
+          value: i,
+          onClick: () => r(i),
+          className: b === x ? "bg-accent text-accent-content ring-accent rounded-lg ring-2" : ""
+        },
+        b
+      )) }),
+      t.length > 0 && /* @__PURE__ */ c("div", { className: "border-base-300 bg-neutral/50 text-neutral-content border-t p-2 text-xs", children: [
+        /* @__PURE__ */ c("div", { className: "flex flex-wrap gap-1", children: [
+          /* @__PURE__ */ c("span", { children: [
+            "Press",
+            " ",
+            /* @__PURE__ */ n("kbd", { className: "bg-base-200 text-base-content rounded-md border px-1.5 py-0.5", children: "Tab" }),
+            " ",
+            "to complete"
+          ] }),
+          /* @__PURE__ */ c("span", { children: [
+            "Use",
+            " ",
+            /* @__PURE__ */ n("kbd", { className: "bg-base-200 text-base-content rounded-md border px-1.5 py-0.5", children: "↑↓" }),
+            " ",
+            "to navigate"
+          ] }),
+          /* @__PURE__ */ c("span", { children: [
+            "Press",
+            " ",
+            /* @__PURE__ */ n("kbd", { className: "bg-base-200 text-base-content rounded-md border px-1.5 py-0.5", children: "Enter" }),
+            " ",
+            "to select"
+          ] })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "mt-1", children: [
+          "Unprefixed classes are the base layer (mobile-first). Prefix with",
+          " ",
+          ["sm:", "md:", "lg:", "xl:", "2xl:"].map((i, b, u) => /* @__PURE__ */ c("span", { children: [
+            /* @__PURE__ */ n("kbd", { className: "bg-base-200 text-base-content rounded-md border px-1.5 py-0.5", children: i }),
+            b < u.length - 1 ? ", " : " "
+          ] }, i)),
+          "for overrides from that min-width breakpoint and up."
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function K({
+  icon: e,
+  tooltip: r,
+  onClick: a,
+  className: l
+}) {
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      onClick: (t) => {
+        t.stopPropagation(), a();
+      },
+      className: `rounded p-1 transition-all hover:scale-110 ${l}`,
+      "data-tooltip-id": X,
+      "data-tooltip-content": r,
+      "data-tooltip-place": "top",
+      "data-tooltip-offset": 10,
+      children: e
+    }
+  );
+}
+function qe({
+  id: e,
+  classes: r,
+  rawTokenDisplay: a = !1,
+  dragOverCategory: l,
+  isDragging: t,
+  borderIdle: p,
+  dropValid: x,
+  dropInvalid: y,
+  onDragOver: k,
+  onDragLeave: i,
+  onDrop: b,
+  onDragStart: u,
+  onDragEnd: v,
+  onDelete: f
+}) {
+  const T = l === e, s = l === `invalid-${e}`, g = T ? `${x} ring-1 ring-base-content/25 scale-[1.01]` : s ? y : t ? "ring-1 ring-base-content/20" : "";
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      role: "presentation",
+      className: `flex flex-wrap gap-1.5 rounded-lg border border-dashed p-2 transition-all ${p} ${g}`,
+      onDragOver: (h) => k(h, e),
+      onDragLeave: i,
+      onDrop: (h) => b(h, e),
+      children: r.map((h, S) => /* @__PURE__ */ n(
+        fe,
+        {
+          value: h,
+          displayValue: a ? h : void 0,
+          onClick: ($, A) => f(h, e, A == null ? void 0 : A.deleteLinked),
+          bgColor: Xe[e] || "bg-neutral text-base-content",
+          onDragStart: ($, A) => u($, { ...A, sourceCategory: e }),
+          onDragEnd: v
+        },
+        `${e}-${h}-${S}`
+      ))
+    }
+  );
+}
+function he({ onClick: e }) {
+  return /* @__PURE__ */ n(Ae, { onClick: e, icon: /* @__PURE__ */ n(G, { size: 12, "aria-hidden": !0 }), children: "Clear All Styles" });
+}
+function Je({
+  bucketLists: e,
+  otherClasses: r,
+  rawTokenDisplay: a = !1,
+  selectedViews: l,
+  toggleView: t,
+  dragOverCategory: p,
+  onDragOver: x,
+  onDragLeave: y,
+  onDrop: k,
+  onDragStart: i,
+  onDragEnd: b,
+  onDelete: u,
+  onClearBucket: v,
+  onClearAll: f,
+  draggedItem: T,
+  showClearAllButton: s = !0
+}) {
+  const [g, h] = P(null), [S, $] = P({ mobile: !0 }), A = [...Object.values(e).flat(), ...r], O = re((o, N) => {
+    o.length !== 0 && (navigator.clipboard.writeText(o.join(" ")), h(N), setTimeout(() => h(null), 2e3));
+  }, []), M = re((o) => {
+    $((N) => ({ ...N, [o]: !N[o] }));
+  }, []), U = (o, N) => N.length > 0 || S[o] || p === o || p === `invalid-${o}`, R = !!T;
+  return /* @__PURE__ */ c(j, { children: [
+    He.map((o) => {
+      const N = e[o.id] || [], _ = l[o.id], D = U(o.id, N) || R;
+      return /* @__PURE__ */ c("div", { className: "w-full space-y-2", children: [
+        /* @__PURE__ */ c("div", { className: "flex w-full min-w-0 items-stretch gap-1", children: [
+          /* @__PURE__ */ n("div", { className: "flex w-7 shrink-0 items-start justify-center pt-2", children: /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              onClick: () => M(o.id),
+              className: "text-neutral-content hover:text-base-content rounded p-0.5 transition-colors",
+              "aria-label": D ? "Collapse bucket" : "Expand bucket",
+              "aria-expanded": D,
+              children: /* @__PURE__ */ n(
+                Se,
+                {
+                  className: `size-3 transition-transform ${D ? "rotate-90" : ""}`
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              onClick: () => t(o.id),
+              className: `flex min-w-0 flex-1 items-center justify-between gap-3 rounded-md px-3 py-2 text-xs font-medium transition-colors ${_ ? Fe : Ge}`,
+              children: [
+                /* @__PURE__ */ c("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                  /* @__PURE__ */ n("span", { className: "truncate", children: o.label }),
+                  !D && N.length > 0 && /* @__PURE__ */ n(Me, { children: N.length })
+                ] }),
+                /* @__PURE__ */ n("span", { className: "shrink-0 text-end text-[10px] font-normal tabular-nums opacity-70", children: o.hint })
+              ]
+            }
+          ),
+          N.length > 0 && /* @__PURE__ */ c("div", { className: "flex shrink-0 items-center self-center", children: [
+            /* @__PURE__ */ n(
+              K,
+              {
+                icon: /* @__PURE__ */ n(G, { className: "size-3.5" }),
+                tooltip: "Clear",
+                onClick: () => v(N),
+                className: "text-neutral-content hover:bg-error/10 hover:text-error"
+              }
+            ),
+            /* @__PURE__ */ n(
+              K,
+              {
+                icon: g === o.id ? /* @__PURE__ */ n(se, { className: "size-3.5" }) : /* @__PURE__ */ n(oe, { className: "size-3.5" }),
+                tooltip: g === o.id ? "Copied!" : `Copy ${o.id} classes`,
+                onClick: () => O(N, o.id),
+                className: "text-neutral-content hover:bg-accent/10 hover:text-base-content"
+              }
+            )
+          ] })
+        ] }),
+        D && /* @__PURE__ */ n(
+          qe,
+          {
+            id: o.id,
+            classes: N,
+            rawTokenDisplay: a,
+            dragOverCategory: p,
+            isDragging: R,
+            borderIdle: o.borderIdle,
+            dropValid: o.dropValid,
+            dropInvalid: o.dropInvalid,
+            onDragOver: x,
+            onDragLeave: y,
+            onDrop: k,
+            onDragStart: i,
+            onDragEnd: b,
+            onDelete: u
+          }
+        )
+      ] }, o.id);
+    }),
+    r.length > 0 && /* @__PURE__ */ c("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ c("div", { className: "text-neutral-content flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-medium", children: [
+          /* @__PURE__ */ n(Be, { className: "size-3.5 shrink-0 opacity-80" }),
+          /* @__PURE__ */ c("span", { className: "flex flex-col items-start leading-tight", children: [
+            /* @__PURE__ */ n("span", { children: "Other variants" }),
+            /* @__PURE__ */ n("span", { className: "text-[10px] font-normal opacity-80", children: "hover, max-, etc." })
+          ] })
+        ] }),
+        /* @__PURE__ */ c("div", { className: "ml-auto flex items-center", children: [
+          /* @__PURE__ */ n(
+            K,
+            {
+              icon: /* @__PURE__ */ n(G, { className: "size-3.5" }),
+              tooltip: "Clear",
+              onClick: () => v(r),
+              className: "text-neutral-content hover:bg-error/10 hover:text-error"
+            }
+          ),
+          /* @__PURE__ */ n(
+            K,
+            {
+              icon: g === "other" ? /* @__PURE__ */ n(se, { className: "size-3.5" }) : /* @__PURE__ */ n(oe, { className: "size-3.5" }),
+              tooltip: g === "other" ? "Copied!" : "Copy other classes",
+              onClick: () => O(r, "other"),
+              className: "text-neutral-content hover:bg-accent/10 hover:text-base-content"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ n(
+        "div",
+        {
+          role: "presentation",
+          className: `border-base-300 flex flex-wrap gap-1.5 rounded-lg border border-dashed p-2 transition-colors ${p === "invalid-other" ? "border-error bg-error/10 border-2 border-dashed" : ""}`,
+          onDragOver: (o) => {
+            o.preventDefault(), T && x(o, "other");
+          },
+          onDragLeave: y,
+          children: r.map((o, N) => /* @__PURE__ */ n(
+            fe,
+            {
+              value: o,
+              displayValue: a ? o : void 0,
+              onClick: (_, D) => u(o, "other", D == null ? void 0 : D.deleteLinked),
+              bgColor: "bg-neutral text-base-content",
+              onDragStart: (_, D) => i(_, { ...D, sourceCategory: "other" }),
+              onDragEnd: b
+            },
+            `other-${o}-${N}`
+          ))
+        }
+      )
+    ] }),
+    s && A.length > 0 && /* @__PURE__ */ n(he, { onClick: f })
+  ] });
+}
+const Qe = ({
+  value: e,
+  changed: r,
+  nodeProps: a,
+  setProp: l,
+  canvasView: t,
+  children: p,
+  clearAllPlacement: x = "in-buckets",
+  rawTokenDisplay: y = !1
+}) => {
+  const [k, i] = Ee(ue), b = H(Pe), u = k.dark ?? !1, v = Array.isArray(e) ? e : [], [f, T] = P(""), [s, g] = P(null), [h, S] = P(null), $ = (m) => {
+    i((d) => ({ ...d, [m]: !d[m] }));
+  }, A = (m = null) => {
+    const d = (m || f).split(" ").filter((B) => !v.includes(B));
+    if (!d.length) return;
+    const C = d.filter((B) => z.some((w) => B.startsWith(w))), V = d.filter((B) => !z.some((w) => B.startsWith(w)));
+    C.forEach((B) => {
+      l((w) => {
+        w.className = ie(w.className || "", B);
+      }, 0);
+    }), V.length > 0 && r([...v, ...V]), T("");
+  }, O = (m) => {
+    l((d) => {
+      d.className && (d.className = (d.className || "").split(/\s+/).filter(Boolean).filter((C) => C !== m).join(" "));
+    });
+  }, M = (m) => Y(m).base, U = (m, d) => {
+    g({ ...d, type: m.shiftKey ? "copy" : "move" }), m.dataTransfer && (m.dataTransfer.effectAllowed = m.shiftKey ? "copy" : "move");
+  }, R = () => {
+    g(null), S(null);
+  }, o = (m, d) => {
+    if (m.preventDefault(), s) {
+      const C = M(s.value), V = d !== "other" && (F(s.value) || d === "mobile") && Ke(C);
+      S(V ? d : `invalid-${d}`);
+    }
+  }, N = (m, d) => {
+    if (m.preventDefault(), S(null), !s) return;
+    const { value: C, type: V, sourceCategory: B } = s;
+    if (B === d || d === "other") return;
+    const w = M(C);
+    if (!F(C) && d !== "mobile") return;
+    const xe = F(C) ? (() => {
+      const E = _e(d, u);
+      return E ? `${E}${w}` : w;
+    })() : C;
+    V !== "copy" && B && l((E) => {
+      E.className = (E.className || "").split(/\s+/).filter(Boolean).filter((ve) => ve !== C).join(" ");
+    }, 0), l((E) => {
+      E.className = ie(E.className || "", xe);
+    }, 0), g(null);
+  }, _ = a ? { ...a } : {}, {
+    mobile: D,
+    sm: q,
+    desktop: J,
+    lg: Q,
+    xl: Z,
+    "2xl": ee,
+    other: te
+  } = We(_.className || "", v || []), ne = [D, q, J, Q, Z, ee, te].flat(), ge = (m) => {
+    l((d) => {
+      if (!d.className) return;
+      const C = (d.className || "").split(/\s+/).filter(Boolean).filter((V) => !m.includes(V));
+      d.className = C.join(" ");
+    }, 0);
+  }, ae = () => {
+    l((m) => {
+      if (!m.className) return;
+      const d = (m.className || "").split(/\s+/).filter(Boolean).filter((C) => !ne.includes(C));
+      m.className = d.join(" ");
+    }, 0), r([]);
+  };
+  return /* @__PURE__ */ c("div", { className: "relative z-10 flex w-full min-w-0 flex-col gap-6", children: [
+    /* @__PURE__ */ n(
+      Ye,
+      {
+        classes: v,
+        onSave: A,
+        classInput: f,
+        setClassInput: T
+      }
+    ),
+    /* @__PURE__ */ c("div", { className: "text-xxs text-neutral-content -mt-5 flex flex-wrap items-baseline gap-x-1 pl-1", children: [
+      /* @__PURE__ */ n("span", { children: "Apply to:" }),
+      /* @__PURE__ */ n("span", { className: "text-base-content font-medium", children: b.size > 0 ? $e(k, t, b).map((m) => ce[m] ?? m).join(" + ") : ce[de(t)] ?? de(t) }),
+      b.size === 0 && /* @__PURE__ */ n("span", { className: "text-neutral-content", children: "(canvas layer)" })
+    ] }),
+    /* @__PURE__ */ n(
+      Je,
+      {
+        bucketLists: { mobile: D, sm: q, desktop: J, lg: Q, xl: Z, "2xl": ee },
+        otherClasses: te,
+        rawTokenDisplay: y,
+        selectedViews: k,
+        toggleView: $,
+        dragOverCategory: h,
+        onDragOver: o,
+        onDragLeave: () => S(null),
+        onDrop: N,
+        onDragStart: U,
+        onDragEnd: R,
+        onDelete: O,
+        onClearBucket: ge,
+        onClearAll: ae,
+        draggedItem: s,
+        showClearAllButton: x === "in-buckets"
+      }
+    ),
+    p,
+    x === "after-append" && ne.length > 0 && /* @__PURE__ */ n(he, { onClick: ae })
+  ] });
+};
+function Ze({
+  full: e = !1,
+  propKey: r,
+  children: a,
+  clearAllPlacement: l = "in-buckets",
+  ...t
+}) {
+  const {
+    actions: { setProp: p },
+    nodeProps: x,
+    id: y
+  } = ze((s) => {
+    var g;
+    return { nodeProps: (g = s.data) == null ? void 0 : g.props, id: s.id };
+  }), { query: k, actions: i } = Oe(), b = H(we), u = H(ue).dark ?? !1, v = Ie(b), f = (x || {})[r], T = (s) => {
+    const g = [];
+    if (!s.filter((h) => h).length)
+      return W({
+        propKey: "className",
+        value: [],
+        setProp: p,
+        propType: "component",
+        query: k,
+        actions: i,
+        nodeId: y
+      });
+    s.forEach((h) => {
+      const S = me(h);
+      if (S)
+        return W({
+          propKey: S,
+          value: h,
+          setProp: p,
+          propType: "class",
+          view: v,
+          query: k,
+          actions: i,
+          nodeId: y,
+          classDark: u
+        });
+      g.push(h);
+    }), g.length && W({
+      propKey: "className",
+      value: g.filter((h) => h),
+      setProp: p,
+      propType: "component",
+      query: k,
+      actions: i,
+      nodeId: y
+    });
+  };
+  return t.valueLabels && t.valueLabels[f] && t.valueLabels[f], /* @__PURE__ */ n(Ve, { frame: "bare", label: t != null && t.labelHide || t == null ? void 0 : t.label, propKey: r, children: /* @__PURE__ */ n(
+    Qe,
+    {
+      nodeProps: { ...x },
+      value: f,
+      changed: T,
+      setProp: p,
+      canvasView: b,
+      clearAllPlacement: l,
+      rawTokenDisplay: t.type === "className" || r === "className",
+      children: a
+    }
+  ) });
+}
+const et = be.lazy(
+  () => import("./CSSEditorInput-CboK8r0F.js").then((e) => ({ default: e.CSSEditorInput }))
+), lt = () => /* @__PURE__ */ n(
+  Ze,
+  {
+    propKey: "className",
+    type: "className",
+    propType: "component",
+    label: "",
+    labelHide: !0,
+    clearAllPlacement: "after-append",
+    children: /* @__PURE__ */ n(be.Suspense, { fallback: /* @__PURE__ */ n(Le, {}), children: /* @__PURE__ */ n(et, {}) })
+  }
+);
+export {
+  lt as ClassNameInput
+};