@drawnagency/primitives 0.1.61 → 0.1.62

package/dist/chunk-JRT4KWHU.js

@@ -0,0 +1,1201 @@
+import {
+  Checkbox,
+  FormLabel,
+  Input
+} from "./chunk-5THS4K5D.js";
+import {
+  EditableGrid,
+  EditablePlainText,
+  MediaBlock,
+  containerGridClass,
+  useEditableCollection
+} from "./chunk-QWDOJUUO.js";
+import {
+  AddIcon,
+  DeleteIcon,
+  DragHandle,
+  IconButton
+} from "./chunk-I5737FJY.js";
+import {
+  DEFAULT_LINK,
+  LinkValueSchema
+} from "./chunk-3DCG4DNU.js";
+import {
+  curatedIcons,
+  getIcon
+} from "./chunk-WDSVHKAH.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+import {
+  HexColorSchema,
+  SingleMediaReferenceSchema
+} from "./chunk-TEYTLQVH.js";
+import {
+  defineSection
+} from "./chunk-VKAGMEKE.js";
+
+// src/components/sections/Colors/index.tsx
+import { z as z2 } from "zod";
+import { Palette } from "lucide-react";
+
+// src/components/sections/Colors/schema.ts
+import { z } from "zod";
+var ColorSpaceSchema = z.object({
+  hex: HexColorSchema.optional(),
+  rgb: z.string().optional(),
+  cmyk: z.string().optional(),
+  pantone: z.string().optional()
+}).refine(
+  (data) => data.hex !== void 0 || data.rgb !== void 0 || data.cmyk !== void 0 || data.pantone !== void 0,
+  { message: "At least one color space must be defined" }
+);
+var ColorItemSchema = z.object({
+  name: z.string().optional(),
+  spaces: z.array(ColorSpaceSchema).min(1)
+});
+
+// src/components/brandguide/Colors.tsx
+import { useState as useState2, useEffect } from "react";
+import { Eye, EyeOff } from "lucide-react";
+
+// src/components/brandguide/ColorSwatchSettings.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function mergeSpaces(spaces) {
+  return Object.assign({}, ...spaces);
+}
+function ColorSwatchSettings({ color, onChange }) {
+  const [localColor, setLocalColor] = useState(() => ({
+    ...color,
+    spaces: [mergeSpaces(color.spaces)]
+  }));
+  const space = localColor.spaces[0] || {};
+  const update = (updated) => {
+    setLocalColor(updated);
+    onChange(updated);
+  };
+  const updateSpace = (key, value) => {
+    const newSpace = { ...space, [key]: value || void 0 };
+    update({ ...localColor, spaces: [newSpace] });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        label: "Name",
+        value: localColor.name || "",
+        onChange: (name) => update({ ...localColor, name })
+      }
+    ),
+    ["hex", "rgb", "cmyk", "pantone"].map((key) => /* @__PURE__ */ jsx(
+      Input,
+      {
+        label: key.toUpperCase(),
+        value: space[key] || "",
+        onChange: (value) => updateSpace(key, value)
+      },
+      key
+    ))
+  ] });
+}
+
+// src/components/brandguide/Colors.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getContrastClass(hex) {
+  if (!hex) return "text-white";
+  const h = hex.replace("#", "");
+  if (h.length < 6) return "text-white";
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  const yiq = (r * 299 + g * 587 + b * 114) / 1e3;
+  return yiq >= 128 ? "text-black" : "text-white";
+}
+var createColorItem = () => ({
+  name: "",
+  spaces: [{ hex: "#cccccc" }]
+});
+function buildContent(colors, options) {
+  const { label, columns, collapsing, showLabel } = options;
+  return {
+    type: "colors",
+    content: { colors },
+    ...label || columns || collapsing !== void 0 || showLabel !== void 0 ? { options: { label, columns, collapsing, showLabel } } : {}
+  };
+}
+function Colors({ colors, columns = 3, label, collapsing, showLabel = true, onChange, openModal }) {
+  if (onChange && openModal) {
+    return /* @__PURE__ */ jsx2(
+      ColorsEditable,
+      {
+        colors,
+        columns,
+        label,
+        collapsing,
+        showLabel,
+        onChange,
+        openModal
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(ColorsView, { colors, columns, label, collapsing, showLabel });
+}
+function ColorsView({
+  colors,
+  columns,
+  label,
+  collapsing,
+  showLabel
+}) {
+  const [expanded, setExpanded] = useState2(!collapsing);
+  const [copiedIndex, setCopiedIndex] = useState2(null);
+  const handleCopy = (value, colorIndex) => {
+    if (navigator.clipboard?.writeText) {
+      navigator.clipboard.writeText(value);
+    } else {
+      const ta = document.createElement("textarea");
+      ta.value = value;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+    }
+    setCopiedIndex(colorIndex);
+    setTimeout(() => setCopiedIndex(null), 1500);
+  };
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    (showLabel && !!label || collapsing) && /* @__PURE__ */ jsxs2("div", { className: "mb-4 flex items-center gap-2", children: [
+      showLabel && !!label && /* @__PURE__ */ jsx2("span", { className: "text-lg font-bold", children: label }),
+      collapsing && /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          onClick: () => setExpanded(!expanded),
+          className: "cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast",
+          children: [
+            /* @__PURE__ */ jsx2("span", { children: expanded ? "Hide Details" : "Show Details" }),
+            expanded ? /* @__PURE__ */ jsx2(EyeOff, { size: 16 }) : /* @__PURE__ */ jsx2(Eye, { size: 16 })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "@container", children: /* @__PURE__ */ jsx2("div", { className: cn("grid gap-4", containerGridClass[columns] || containerGridClass[3]), children: colors.map((color, i) => {
+      const hex = color.spaces[0]?.hex;
+      const contrast = getContrastClass(hex);
+      return /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-md border border-base-200", children: [
+        /* @__PURE__ */ jsxs2("div", { className: cn("relative flex min-h-[80px] items-end p-3", contrast), style: { backgroundColor: hex || "#ccc" }, children: [
+          color.name && /* @__PURE__ */ jsx2("span", { className: "text-sm font-bold", children: color.name }),
+          copiedIndex === i && /* @__PURE__ */ jsx2("span", { className: cn(
+            "absolute top-2 right-2 rounded-full px-2.5 py-0.5 text-xs font-medium",
+            getContrastClass(hex) === "text-black" ? "bg-black/15 text-black" : "bg-white/25 text-white"
+          ), children: "Copied!" })
+        ] }),
+        expanded && /* @__PURE__ */ jsx2("div", { className: "space-y-1 bg-base-accent p-3 text-sm", children: color.spaces.map(
+          (space, j) => Object.entries(space).map(
+            ([key, value]) => value ? /* @__PURE__ */ jsxs2("button", { onClick: () => handleCopy(value, i), className: "cursor-pointer flex w-full justify-between hover:text-primary", children: [
+              /* @__PURE__ */ jsx2("span", { className: "font-medium uppercase", children: key }),
+              /* @__PURE__ */ jsx2("span", { children: value })
+            ] }, `${j}-${key}`) : null
+          )
+        ) })
+      ] }, i);
+    }) }) })
+  ] });
+}
+function ColorsEditable({
+  colors,
+  columns,
+  label,
+  collapsing,
+  showLabel,
+  onChange,
+  openModal
+}) {
+  const [expanded, setExpanded] = useState2(!collapsing);
+  const options = { label, columns, collapsing, showLabel };
+  useEffect(() => {
+    setExpanded(!collapsing);
+  }, [collapsing]);
+  const handleItemSettings = (index) => {
+    const color = colors[index];
+    openModal(
+      "Color Settings",
+      /* @__PURE__ */ jsx2(ColorSwatchSettings, { color, onChange: (updated) => {
+        const newColors = colors.map((c, i) => i === index ? updated : c);
+        onChange(buildContent(newColors, options));
+      } })
+    );
+  };
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    (showLabel && !!label || collapsing) && /* @__PURE__ */ jsxs2("div", { className: "mb-4 flex items-center gap-2", children: [
+      showLabel && !!label && /* @__PURE__ */ jsx2(
+        EditablePlainText,
+        {
+          tag: "span",
+          value: label,
+          onChange: (newLabel) => onChange(buildContent(colors, { ...options, label: newLabel })),
+          isEditMode: true,
+          className: "text-lg font-bold"
+        }
+      ),
+      collapsing && /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          onClick: () => setExpanded(!expanded),
+          className: "cursor-pointer ml-auto flex items-center gap-1.5 text-sm text-base-contrast-light hover:text-base-contrast",
+          children: [
+            /* @__PURE__ */ jsx2("span", { children: expanded ? "Hide Details" : "Show Details" }),
+            expanded ? /* @__PURE__ */ jsx2(EyeOff, { size: 16 }) : /* @__PURE__ */ jsx2(Eye, { size: 16 })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2(
+      EditableGrid,
+      {
+        items: colors,
+        columns,
+        onChange: (newColors) => onChange(buildContent(newColors, options)),
+        createItem: createColorItem,
+        isEditMode: true,
+        onItemSettings: handleItemSettings,
+        renderItem: (color, { index }) => /* @__PURE__ */ jsx2(
+          ColorSwatchEditable,
+          {
+            color,
+            index,
+            colors,
+            options,
+            onChange,
+            expanded
+          }
+        )
+      }
+    )
+  ] });
+}
+function ColorSwatchEditable({
+  color,
+  index,
+  colors,
+  options,
+  onChange,
+  expanded
+}) {
+  const hex = color.spaces[0]?.hex;
+  const contrast = getContrastClass(hex);
+  const updateColor = (updated) => {
+    const newColors = colors.map((c, i) => i === index ? updated : c);
+    onChange(buildContent(newColors, options));
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "overflow-hidden rounded-md border border-base-200", children: [
+    /* @__PURE__ */ jsx2("div", { className: cn("flex min-h-[80px] items-end p-3", contrast), style: { backgroundColor: hex || "#ccc" }, children: /* @__PURE__ */ jsx2(
+      EditablePlainText,
+      {
+        tag: "span",
+        value: color.name || "",
+        onChange: (name) => updateColor({ ...color, name }),
+        isEditMode: true,
+        placeholder: "Color name",
+        className: "text-sm font-bold"
+      }
+    ) }),
+    expanded && /* @__PURE__ */ jsx2("div", { className: "space-y-1 bg-base-accent p-3 text-sm", children: color.spaces.map(
+      (space, j) => Object.entries(space).map(
+        ([key, value]) => value ? /* @__PURE__ */ jsxs2("div", { className: "flex w-full justify-between", children: [
+          /* @__PURE__ */ jsx2("span", { className: "font-medium uppercase", children: key }),
+          /* @__PURE__ */ jsx2("span", { children: value })
+        ] }, `${j}-${key}`) : null
+      )
+    ) })
+  ] });
+}
+
+// src/lib/text.ts
+function stripHtmlToPlainText(html) {
+  return html.replace(/<(script|style)\b[^>]*>[\s\S]*?<\/\1>/gi, "").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
+}
+function truncate(text, maxLength) {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength) + "...";
+}
+function pluralize(n, word) {
+  return `${n} ${word}${n === 1 ? "" : "s"}`;
+}
+
+// src/components/sections/Colors/index.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var schema = z2.object({
+  type: z2.literal("colors"),
+  content: z2.object({ colors: z2.array(ColorItemSchema) }),
+  options: z2.object({
+    label: z2.string().optional(),
+    columns: z2.number().int().min(2).max(4).optional(),
+    collapsing: z2.boolean().optional(),
+    showLabel: z2.boolean().optional()
+  }).optional()
+});
+var Colors_default = defineSection({
+  type: "colors",
+  category: "brand-guide",
+  label: "Colors",
+  icon: /* @__PURE__ */ jsx3(Palette, { size: 18 }),
+  schema,
+  component: ({ content, options, onChange, openModal }) => /* @__PURE__ */ jsx3(
+    Colors,
+    {
+      colors: content.content.colors,
+      columns: options?.columns,
+      label: options?.label,
+      collapsing: options?.collapsing,
+      showLabel: options?.showLabel,
+      onChange: onChange ? (c) => onChange(c) : void 0,
+      openModal
+    }
+  ),
+  defaults: () => ({
+    type: "colors",
+    content: { colors: [{ spaces: [{ hex: "#000000" }] }] }
+  }),
+  getLabel: (content) => pluralize(content.content.colors.length, "color"),
+  getThumbnails: (content) => content.content.colors.filter((c) => c.spaces[0]?.hex).map((c) => ({ type: "color", value: c.spaces[0].hex })),
+  settings: {
+    columns: {
+      type: "select",
+      label: "Columns",
+      default: "3",
+      coerce: "number",
+      options: [{ label: "2", value: "2" }, { label: "3", value: "3" }, { label: "4", value: "4" }]
+    },
+    label: { type: "text", label: "Label", default: "", placeholder: "Color Section Label" },
+    showLabel: { type: "checkbox", label: "Show label", default: true },
+    collapsing: { type: "checkbox", label: "Collapsing layout", default: false }
+  }
+});
+
+// src/components/sections/IconList/index.tsx
+import { z as z3 } from "zod";
+import { List } from "lucide-react";
+
+// src/components/sections/IconList/IconList.tsx
+import { useRef as useRef3, useEffect as useEffect4, useState as useState3, useCallback } from "react";
+import { Check as Check2, CopyPlus, Pencil, X as X2 } from "lucide-react";
+
+// src/components/primitives/IconPicker.tsx
+import { useEffect as useEffect2, useRef } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function IconPicker({ selected, onSelect, onClose, showRemove = true }) {
+  const panelRef = useRef(null);
+  useEffect2(() => {
+    function handleMouseDown(e) {
+      if (panelRef.current && !panelRef.current.contains(e.target)) onClose();
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: panelRef,
+      className: "absolute z-50 w-56 rounded-lg border border-base-200 bg-base p-2 shadow-lg",
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-5 gap-1", children: curatedIcons.map((entry) => {
+          const Icon = entry.icon;
+          const isSelected = selected === entry.id;
+          return /* @__PURE__ */ jsx4(
+            "button",
+            {
+              "aria-label": entry.label,
+              className: cn(
+                "cursor-pointer flex h-9 w-9 items-center justify-center rounded transition-colors",
+                "text-base-contrast-light hover:bg-base-accent hover:text-base-contrast",
+                isSelected && "ring-2 ring-primary bg-base-accent text-primary"
+              ),
+              onClick: () => onSelect(entry.id),
+              children: /* @__PURE__ */ jsx4(Icon, { size: 18 })
+            },
+            entry.id
+          );
+        }) }),
+        showRemove && /* @__PURE__ */ jsx4(
+          "button",
+          {
+            className: "cursor-pointer mt-2 w-full rounded px-2 py-1.5 text-center text-xs text-base-contrast-light hover:bg-base-accent hover:text-base-contrast",
+            onClick: () => onSelect(null),
+            children: "Remove icon"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/sections/IconList/DoDontToggle.tsx
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { Check, X } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function DoDontToggle({ value, onSelect, onClose }) {
+  const panelRef = useRef2(null);
+  useEffect3(() => {
+    function handleMouseDown(e) {
+      if (panelRef.current && !panelRef.current.contains(e.target)) onClose();
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      ref: panelRef,
+      className: "absolute z-50 w-44 rounded-lg border border-base-200 bg-base p-2 shadow-lg",
+      children: /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-3 gap-2", children: [
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            "aria-label": "No do/don't tag",
+            className: cn(
+              "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
+              "text-base-contrast-light hover:bg-base-accent",
+              value === void 0 && "ring-2 ring-primary bg-base-accent"
+            ),
+            onClick: () => onSelect(void 0),
+            children: [
+              /* @__PURE__ */ jsx5("span", { className: "flex h-5 w-5 items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" }),
+              /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium", children: "None" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Do",
+            className: cn(
+              "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
+              "text-green-600 hover:bg-base-accent",
+              value === "do" && "ring-2 ring-primary bg-base-accent"
+            ),
+            onClick: () => onSelect("do"),
+            children: [
+              /* @__PURE__ */ jsx5(Check, { size: 20 }),
+              /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium", children: "Do" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Don't",
+            className: cn(
+              "cursor-pointer flex flex-col items-center justify-center gap-1 rounded py-2 transition-colors",
+              "text-red-600 hover:bg-base-accent",
+              value === "dont" && "ring-2 ring-primary bg-base-accent"
+            ),
+            onClick: () => onSelect("dont"),
+            children: [
+              /* @__PURE__ */ jsx5(X, { size: 20 }),
+              /* @__PURE__ */ jsx5("span", { className: "text-xs font-medium", children: "Don't" })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/components/sections/IconList/IconList.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function IconList({
+  items,
+  icon = null,
+  showLabel = true,
+  stackText = false,
+  labelClassName = "font-bold text-base-contrast",
+  textClassName = "text-base-contrast-light",
+  iconClassName = "text-primary",
+  onChange,
+  onItemsChange
+}) {
+  const isEditMode = !!onChange || !!onItemsChange;
+  const emitItems = useCallback(
+    (newItems) => {
+      onChange?.({
+        type: "icon_list",
+        content: { items: newItems },
+        options: { icon, showLabel, stackText }
+      });
+      onItemsChange?.(newItems);
+    },
+    [onChange, onItemsChange, icon, showLabel, stackText]
+  );
+  if (!isEditMode) {
+    return /* @__PURE__ */ jsx6(
+      ViewIconList,
+      {
+        items,
+        defaultIcon: icon,
+        showLabel,
+        stackText,
+        labelClassName,
+        textClassName,
+        iconClassName
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx6(
+    EditIconList,
+    {
+      items,
+      defaultIcon: icon,
+      showLabel,
+      stackText,
+      labelClassName,
+      textClassName,
+      iconClassName,
+      onItemsChange: emitItems
+    }
+  );
+}
+function resolveIcon(item, defaultIcon) {
+  if (item.dodont === "do") return getIcon("check") ?? null;
+  if (item.dodont === "dont") return getIcon("x") ?? null;
+  const id = item.icon ?? defaultIcon;
+  return id ? getIcon(id) : null;
+}
+function resolveIconColor(item, iconClassName) {
+  if (item.dodont === "do") return "text-green-600";
+  if (item.dodont === "dont") return "text-red-600";
+  return iconClassName;
+}
+function ViewIconList({
+  items,
+  defaultIcon,
+  showLabel,
+  stackText,
+  labelClassName,
+  textClassName,
+  iconClassName
+}) {
+  const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon));
+  return /* @__PURE__ */ jsx6("div", { className: "grid gap-4 pb-4", children: items.map((item, i) => {
+    const iconEntry = resolveIcon(item, defaultIcon);
+    const iconColor = resolveIconColor(item, iconClassName);
+    return /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        className: cn(
+          "grid gap-x-3",
+          hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1"
+        ),
+        children: [
+          hasAnyIcon && /* @__PURE__ */ jsx6(
+            "div",
+            {
+              "data-testid": "icon-list-icon",
+              className: cn("flex items-start pt-0.5", iconColor),
+              children: iconEntry && /* @__PURE__ */ jsx6(iconEntry.icon, { size: 18 })
+            }
+          ),
+          /* @__PURE__ */ jsxs5(
+            "div",
+            {
+              "data-testid": "icon-list-content",
+              className: stackText ? "flex flex-col" : void 0,
+              children: [
+                showLabel && /* @__PURE__ */ jsxs5("span", { className: labelClassName, children: [
+                  item.label,
+                  !stackText && " "
+                ] }),
+                /* @__PURE__ */ jsx6("span", { className: textClassName, children: item.text })
+              ]
+            }
+          )
+        ]
+      },
+      i
+    );
+  }) });
+}
+function EditIconList({
+  items,
+  defaultIcon,
+  showLabel,
+  stackText,
+  labelClassName,
+  textClassName,
+  iconClassName,
+  onItemsChange
+}) {
+  const { wrappedItems, onReorder, onAdd, onRemove } = useEditableCollection({
+    items,
+    onChange: onItemsChange,
+    createItem: () => ({ label: "", text: "" })
+  });
+  const [dragState, setDragState] = useState3({ sourceId: null, targetId: null });
+  const updateItem = useCallback(
+    (index, patch) => {
+      const updated = wrappedItems.map(
+        (w, i) => i === index ? { ...w.data, ...patch } : w.data
+      );
+      onItemsChange(updated);
+    },
+    [wrappedItems, onItemsChange]
+  );
+  const duplicateItem = useCallback(
+    (index) => {
+      const copy = { ...wrappedItems[index].data };
+      const next = [
+        ...wrappedItems.slice(0, index + 1).map((w) => w.data),
+        copy,
+        ...wrappedItems.slice(index + 1).map((w) => w.data)
+      ];
+      onItemsChange(next);
+    },
+    [wrappedItems, onItemsChange]
+  );
+  const hasAnyIcon = true;
+  return /* @__PURE__ */ jsxs5("div", { className: "group/list relative grid gap-4 pb-4", children: [
+    wrappedItems.map((wrapped, index) => /* @__PURE__ */ jsx6(
+      EditableRow,
+      {
+        id: wrapped.id,
+        index,
+        item: wrapped.data,
+        defaultIcon,
+        hasAnyIcon,
+        showLabel,
+        stackText,
+        labelClassName,
+        textClassName,
+        iconClassName,
+        dragState,
+        setDragState,
+        onReorder,
+        onRemove,
+        onUpdateItem: (patch) => updateItem(index, patch),
+        onDuplicate: () => duplicateItem(index)
+      },
+      wrapped.id
+    )),
+    /* @__PURE__ */ jsx6(
+      TrailingDropZone,
+      {
+        index: wrappedItems.length,
+        dragState,
+        setDragState,
+        onReorder
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      IconButton,
+      {
+        icon: /* @__PURE__ */ jsx6(AddIcon, { size: 16 }),
+        label: "Add item",
+        size: "lg",
+        intent: "primary",
+        onClick: onAdd,
+        className: "absolute -bottom-6 left-1/2 z-20 -translate-x-1/2 rounded-full border border-base-200 bg-base opacity-0 transition-opacity group-hover/list:opacity-100"
+      }
+    )
+  ] });
+}
+function EditableRow({
+  id,
+  index,
+  item,
+  defaultIcon,
+  hasAnyIcon,
+  showLabel,
+  stackText,
+  labelClassName,
+  textClassName,
+  iconClassName,
+  dragState,
+  setDragState,
+  onReorder,
+  onRemove,
+  onUpdateItem,
+  onDuplicate
+}) {
+  const rowRef = useRef3(null);
+  const handleRef = useRef3(null);
+  const [iconHover, setIconHover] = useState3(false);
+  const [pickerOpen, setPickerOpen] = useState3(false);
+  const [dodontOpen, setDodontOpen] = useState3(false);
+  const [editingSuppressed, setEditingSuppressed] = useState3(false);
+  const iconEntry = resolveIcon(item, defaultIcon);
+  const effectiveIconId = item.icon ?? defaultIcon ?? null;
+  const iconColor = resolveIconColor(item, iconClassName);
+  useEffect4(() => {
+    const row = rowRef.current;
+    const handle = handleRef.current;
+    if (!row || !handle) return;
+    let cleanup;
+    let cancelled = false;
+    import("./adapter-HH47ZPGM.js").then(({ draggable, dropTargetForElements }) => {
+      if (cancelled) return;
+      const cleanupDraggable = draggable({
+        element: handle,
+        getInitialData: () => ({ dragType: "icon-list-row", id, index }),
+        onDragStart: () => setDragState({ sourceId: id, targetId: null }),
+        onDrop: () => setDragState({ sourceId: null, targetId: null })
+      });
+      const cleanupDropTarget = dropTargetForElements({
+        element: row,
+        canDrop: ({ source }) => source.data.dragType === "icon-list-row",
+        getData: () => ({ id, index }),
+        onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: id })),
+        onDragLeave: () => setDragState(
+          (prev) => prev.targetId === id ? { ...prev, targetId: null } : prev
+        ),
+        onDrop: ({ source }) => {
+          const fromIndex = source.data.index;
+          if (fromIndex !== index) onReorder(fromIndex, index);
+        }
+      });
+      cleanup = () => {
+        cleanupDraggable();
+        cleanupDropTarget();
+      };
+    });
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [id, index, onReorder, setDragState]);
+  const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
+  const onEditableActivity = (e) => {
+    const t = e.target;
+    if (t.matches?.("input, textarea, [contenteditable], [contenteditable='true']")) {
+      setEditingSuppressed(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: rowRef,
+      className: cn(
+        "group/row relative grid gap-x-3",
+        hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1",
+        isDropTarget && "border-t-2 border-primary"
+      ),
+      onFocusCapture: onEditableActivity,
+      onInput: onEditableActivity,
+      onMouseMove: () => setEditingSuppressed(false),
+      children: [
+        hasAnyIcon && /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            "data-testid": "icon-list-icon",
+            className: cn("relative flex items-start pt-0.5", iconColor),
+            onMouseEnter: () => setIconHover(true),
+            onMouseLeave: () => setIconHover(false),
+            children: [
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  className: "cursor-pointer transition-opacity hover:opacity-70",
+                  "aria-label": "Change icon",
+                  onClick: () => {
+                    setPickerOpen((prev) => !prev);
+                    setDodontOpen(false);
+                  },
+                  children: iconHover && !pickerOpen ? /* @__PURE__ */ jsx6(Pencil, { size: 18, className: "text-base-contrast-light" }) : iconEntry ? /* @__PURE__ */ jsx6(iconEntry.icon, { size: 18 }) : /* @__PURE__ */ jsx6("span", { className: "flex h-[18px] w-[18px] items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" })
+                }
+              ),
+              pickerOpen && /* @__PURE__ */ jsx6("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx6(
+                IconPicker,
+                {
+                  selected: effectiveIconId,
+                  showRemove: true,
+                  onSelect: (newIcon) => {
+                    onUpdateItem({ icon: newIcon ?? void 0, dodont: void 0 });
+                    setPickerOpen(false);
+                    setIconHover(false);
+                  },
+                  onClose: () => {
+                    setPickerOpen(false);
+                    setIconHover(false);
+                  }
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { className: stackText ? "flex flex-col" : void 0, children: [
+          showLabel && /* @__PURE__ */ jsx6(
+            EditablePlainText,
+            {
+              tag: "span",
+              value: item.label,
+              onChange: (label) => onUpdateItem({ label }),
+              isEditMode: true,
+              placeholder: "Label",
+              className: cn(labelClassName, !stackText && "mr-1")
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            EditablePlainText,
+            {
+              tag: "span",
+              value: item.text,
+              onChange: (text) => onUpdateItem({ text }),
+              isEditMode: true,
+              placeholder: "Text",
+              className: textClassName
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs5(
+          "div",
+          {
+            className: cn(
+              "absolute right-1 top-1 z-10 flex items-center gap-1",
+              editingSuppressed ? "opacity-0 pointer-events-none" : "opacity-0 group-hover/row:opacity-100 no-hover:opacity-100"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx6(
+                  "button",
+                  {
+                    "aria-label": "Set do/don't",
+                    onClick: () => {
+                      setDodontOpen((p) => !p);
+                      setPickerOpen(false);
+                    },
+                    className: "cursor-pointer rounded bg-base/80 p-1 shadow-sm text-base-contrast-light hover:text-primary",
+                    children: item.dodont === "do" ? /* @__PURE__ */ jsx6(Check2, { size: 14, className: "text-green-600" }) : item.dodont === "dont" ? /* @__PURE__ */ jsx6(X2, { size: 14, className: "text-red-600" }) : /* @__PURE__ */ jsx6(Pencil, { size: 14 })
+                  }
+                ),
+                dodontOpen && /* @__PURE__ */ jsx6("div", { className: "absolute top-full right-0 z-50 mt-1", children: /* @__PURE__ */ jsx6(
+                  DoDontToggle,
+                  {
+                    value: item.dodont,
+                    onSelect: (v) => {
+                      onUpdateItem({ dodont: v });
+                      setDodontOpen(false);
+                    },
+                    onClose: () => setDodontOpen(false)
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx6(
+                IconButton,
+                {
+                  ref: handleRef,
+                  icon: /* @__PURE__ */ jsx6(DragHandle, { size: 14 }),
+                  label: "Drag to reorder",
+                  size: "sm",
+                  className: "cursor-grab rounded bg-base/80 p-1 shadow-sm text-base-contrast-light/80 hover:text-base-contrast active:cursor-grabbing",
+                  tabIndex: -1
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  "aria-label": "Duplicate item",
+                  onClick: onDuplicate,
+                  className: "cursor-pointer rounded bg-base/80 p-1 shadow-sm text-base-contrast-light hover:text-primary",
+                  children: /* @__PURE__ */ jsx6(CopyPlus, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                IconButton,
+                {
+                  icon: /* @__PURE__ */ jsx6(DeleteIcon, { size: 14 }),
+                  label: "Delete item",
+                  size: "sm",
+                  intent: "destructive",
+                  onClick: () => onRemove(id),
+                  className: "bg-base/80 shadow-sm"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function TrailingDropZone({
+  index,
+  dragState,
+  setDragState,
+  onReorder
+}) {
+  const ref = useRef3(null);
+  const trailingId = "__trailing__";
+  useEffect4(() => {
+    const el = ref.current;
+    if (!el) return;
+    let cleanup;
+    let cancelled = false;
+    import("./adapter-HH47ZPGM.js").then(({ dropTargetForElements }) => {
+      if (cancelled) return;
+      cleanup = dropTargetForElements({
+        element: el,
+        canDrop: ({ source }) => source.data.dragType === "icon-list-row",
+        getData: () => ({ id: trailingId, index }),
+        onDragEnter: () => setDragState((prev) => ({ ...prev, targetId: trailingId })),
+        onDragLeave: () => setDragState(
+          (prev) => prev.targetId === trailingId ? { ...prev, targetId: null } : prev
+        ),
+        onDrop: ({ source }) => {
+          const fromIndex = source.data.index;
+          if (fromIndex !== index - 1) onReorder(fromIndex, index - 1);
+        }
+      });
+    });
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+  }, [index, onReorder, setDragState]);
+  const isDropTarget = dragState.targetId === trailingId && dragState.sourceId !== null;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ref,
+      className: cn("absolute bottom-0 left-0 right-0 h-4", isDropTarget && "border-t-2 border-primary")
+    }
+  );
+}
+
+// src/components/sections/IconList/IconListSettings.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function IconListSettings({
+  icon: initialIcon,
+  showLabel: initialShowLabel,
+  stackText: initialStackText,
+  onChange
+}) {
+  const [icon, setIcon] = useState4(initialIcon);
+  const [showLabel, setShowLabel] = useState4(initialShowLabel);
+  const [stackText, setStackText] = useState4(initialStackText);
+  const [pickerOpen, setPickerOpen] = useState4(false);
+  const emit = (overrides) => onChange({ content: {}, options: { icon, showLabel, stackText, ...overrides } });
+  const showIcons = icon !== null;
+  const iconEntry = icon ? getIcon(icon) : null;
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx7(FormLabel, { htmlFor: "icon-picker-btn", children: "Default Icon" }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            id: "icon-picker-btn",
+            className: "cursor-pointer flex items-center gap-2 rounded border border-base-200 px-3 py-1.5 text-sm text-base-contrast-light hover:border-primary hover:text-primary",
+            onClick: () => setPickerOpen((prev) => !prev),
+            children: [
+              iconEntry && /* @__PURE__ */ jsx7(iconEntry.icon, { size: 16 }),
+              /* @__PURE__ */ jsx7("span", { children: iconEntry?.label ?? "None" })
+            ]
+          }
+        ),
+        icon && /* @__PURE__ */ jsx7(
+          "button",
+          {
+            className: "cursor-pointer text-xs text-base-contrast-light hover:text-base-contrast",
+            onClick: () => {
+              setIcon(null);
+              emit({ icon: null });
+            },
+            children: "Clear"
+          }
+        )
+      ] }),
+      pickerOpen && /* @__PURE__ */ jsx7("div", { className: "absolute top-full left-0 z-50 mt-1", children: /* @__PURE__ */ jsx7(
+        IconPicker,
+        {
+          selected: icon,
+          onSelect: (newIcon) => {
+            if (newIcon !== null) {
+              setIcon(newIcon);
+              emit({ icon: newIcon });
+            }
+            setPickerOpen(false);
+          },
+          onClose: () => setPickerOpen(false)
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx7(
+      Checkbox,
+      {
+        checked: showLabel,
+        onChange: (v) => {
+          setShowLabel(v);
+          emit({ showLabel: v });
+        },
+        label: "Show labels"
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx7(
+      Checkbox,
+      {
+        checked: stackText,
+        onChange: (v) => {
+          setStackText(v);
+          emit({ stackText: v });
+        },
+        label: "Stack label above text"
+      }
+    )
+  ] });
+}
+
+// src/components/sections/IconList/index.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var IconListItemSchema = z3.object({
+  label: z3.string(),
+  text: z3.string(),
+  icon: z3.string().optional(),
+  dodont: z3.enum(["do", "dont"]).optional()
+});
+var schema2 = z3.object({
+  type: z3.literal("icon_list"),
+  content: z3.object({
+    items: z3.array(IconListItemSchema)
+  }),
+  options: z3.object({
+    icon: z3.string().nullable().optional(),
+    showLabel: z3.boolean().optional(),
+    stackText: z3.boolean().optional()
+  }).optional()
+});
+var IconList_default = defineSection({
+  type: "icon_list",
+  category: "brand-guide",
+  label: "Icon List",
+  icon: /* @__PURE__ */ jsx8(List, { size: 18 }),
+  schema: schema2,
+  component: ({ content, options, onChange }) => /* @__PURE__ */ jsx8(
+    IconList,
+    {
+      items: content.content.items,
+      icon: options?.icon,
+      showLabel: options?.showLabel,
+      stackText: options?.stackText,
+      onChange: onChange ? (c) => onChange(c) : void 0
+    }
+  ),
+  defaults: () => ({
+    type: "icon_list",
+    content: { items: [{ label: "", text: "" }] }
+  }),
+  getLabel: (content) => pluralize(content.content.items.length, "icon"),
+  settingsForm: IconListSettings
+});
+
+// src/components/sections/DoDontMedia/index.tsx
+import { z as z4 } from "zod";
+import { Image as ImageIcon } from "lucide-react";
+
+// src/components/sections/DoDontMedia/DoDontMediaBlock.tsx
+import { Check as Check3, X as X3 } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+function DoDontMediaBlock({ refValue, options, link, dodont, isEditMode, onRefChange }) {
+  return /* @__PURE__ */ jsxs7("div", { children: [
+    /* @__PURE__ */ jsx9("div", { className: "flex h-10 items-center justify-center pb-1", children: dodont === "do" ? /* @__PURE__ */ jsx9(Check3, { size: 28, className: "text-green-600" }) : /* @__PURE__ */ jsx9(X3, { size: 28, className: "text-red-600" }) }),
+    /* @__PURE__ */ jsx9(
+      MediaBlock,
+      {
+        refValue,
+        options,
+        link,
+        isEditMode,
+        onRefChange
+      }
+    )
+  ] });
+}
+
+// src/components/sections/DoDontMedia/index.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var schema3 = z4.object({
+  type: z4.literal("dodont_media"),
+  content: z4.object({
+    ref: SingleMediaReferenceSchema,
+    link: LinkValueSchema.optional(),
+    dodont: z4.enum(["do", "dont"])
+  }),
+  options: z4.object({
+    square: z4.boolean().optional(),
+    showCaption: z4.boolean().optional(),
+    border: z4.boolean().optional(),
+    objectFit: z4.enum(["cover", "contain"]).optional()
+  }).default({})
+});
+var DoDontMedia_default = defineSection({
+  type: "dodont_media",
+  label: "Do / Don't Media",
+  category: "brand-guide",
+  icon: /* @__PURE__ */ jsx10(ImageIcon, { size: 18 }),
+  schema: schema3,
+  component: ({ content, options, onChange }) => /* @__PURE__ */ jsx10(
+    DoDontMediaBlock,
+    {
+      refValue: content.content.ref,
+      options: options ?? {},
+      link: content.content.link,
+      dodont: content.content.dodont,
+      isEditMode: !!onChange,
+      onRefChange: onChange ? (ref) => onChange({ ...content, content: { ...content.content, ref } }) : void 0
+    }
+  ),
+  defaults: () => ({
+    type: "dodont_media",
+    content: { ref: { type: "image", imageId: "" }, dodont: "do" },
+    options: {}
+  }),
+  getLabel: () => "Do / Don't Media",
+  getThumbnails: (content) => content.content.ref.imageId ? [{ type: "image", src: content.content.ref.imageId }] : [],
+  settings: {
+    square: { type: "checkbox", label: "Square aspect ratio", default: false },
+    showCaption: { type: "checkbox", label: "Show caption", default: false },
+    border: { type: "checkbox", label: "Border", default: false },
+    objectFit: {
+      type: "select",
+      label: "Image fit",
+      default: "contain",
+      options: [
+        { label: "Contain", value: "contain" },
+        { label: "Cover", value: "cover" }
+      ]
+    },
+    link: { type: "link", label: "Link", default: DEFAULT_LINK, target: "content" },
+    dodont: {
+      type: "select",
+      label: "Do / Don't",
+      target: "content",
+      default: "do",
+      options: [
+        { label: "Do", value: "do" },
+        { label: "Don't", value: "dont" }
+      ]
+    }
+  },
+  inheritableSettings: ["square", "showCaption", "border", "objectFit"],
+  settingsTabs: [
+    { label: "Display", fields: ["square", "showCaption", "border", "objectFit"] },
+    { label: "Link", fields: ["link"] },
+    { label: "Do / Don't", fields: ["dodont"] }
+  ]
+});
+
+// src/components/sections/brand-guide.ts
+var brandGuideSectionDefs = [Colors_default, IconList_default, DoDontMedia_default];
+
+export {
+  stripHtmlToPlainText,
+  truncate,
+  pluralize,
+  ColorSpaceSchema,
+  ColorItemSchema,
+  brandGuideSectionDefs
+};