@instructure/platform-block-content-editor 0.3.1 → 1.0.0

package/dist/index.js

@@ -1,38 +1,70 @@
-import { jsx as d, jsxs as S, Fragment as ze } from "react/jsx-runtime";
-import { sanitizeHtml as Re } from "@instructure/platform-sanitize";
-import { Flex as J } from "@instructure/ui-flex";
-import { Heading as ne } from "@instructure/ui-heading";
-import { Text as z } from "@instructure/ui-text";
-import { ToggleDetails as We } from "@instructure/ui-toggle-details";
-import { View as f } from "@instructure/ui-view";
-import { createContext as G, useContext as B, useState as F, useMemo as O } from "react";
-import { IconArrowOpenDownSolid as ue, IconArrowOpenEndSolid as $e, IconArrowOpenUpSolid as Ue } from "@instructure/ui-icons";
-import { z as a } from "zod";
-import { Img as qe } from "@instructure/ui-img";
-import { Spinner as Ge } from "@instructure/ui-spinner";
-const Xe = G(void 0), X = () => B(Xe), Qe = G(!1), _ = () => B(Qe), Ce = G(
-  void 0
-);
-function mt({
-  translations: e,
-  translate: o,
-  children: r
+import { jsx as i, jsxs as w, Fragment as ye } from "react/jsx-runtime";
+import { Flex as k } from "@instructure/ui-flex";
+import { Heading as ke } from "@instructure/ui-heading";
+import { Text as S } from "@instructure/ui-text";
+import { ToggleDetails as So } from "@instructure/ui-toggle-details";
+import { View as v } from "@instructure/ui-view";
+import { createContext as we, useContext as pe, useMemo as ee, useState as j, createElement as mt, useCallback as J, useId as jt, useRef as re, useEffect as ve, useLayoutEffect as zo, Children as Ro, Component as Io } from "react";
+import { sanitizeHtml as Lo } from "@instructure/platform-sanitize";
+import { IconArrowOpenDownSolid as ft, IconArrowOpenEndSolid as Vt, IconArrowOpenUpSolid as Oo, IconArrowOpenStartSolid as No, IconCompleteSolid as Ft, IconTroubleSolid as Zt } from "@instructure/ui-icons";
+import { z as s } from "zod";
+import { css as Pe, Global as Be, useTheme as Eo, keyframes as Me } from "@instructure/emotion";
+import { Img as Po } from "@instructure/ui-img";
+import { Spinner as Bo } from "@instructure/ui-spinner";
+import { IconButton as pt, Button as Ne } from "@instructure/ui-buttons";
+import { ScreenReaderContent as et } from "@instructure/ui-a11y-content";
+import { Alert as Mo } from "@instructure/ui-alerts";
+import { ProgressBar as _o } from "@instructure/ui-progress";
+import { Checkbox as $o } from "@instructure/ui-checkbox";
+import { RadioInput as Ho } from "@instructure/ui-radio-input";
+const Do = we(void 0), Wo = () => pe(Do);
+function tt({ html: e, className: t }) {
+  const r = Wo(), o = ee(() => r ? null : Lo(e), [r, e]);
+  return r ? /* @__PURE__ */ i("div", { className: t, children: r(e) }) : /* @__PURE__ */ i(
+    "div",
+    {
+      className: t,
+      dangerouslySetInnerHTML: { __html: o ?? "" }
+    }
+  );
+}
+const jo = we(void 0), he = () => pe(jo), Vo = we(!1), le = () => pe(Vo), Gt = we(void 0);
+function bt({
+  value: e,
+  children: t
 }) {
-  const t = { translations: e, translate: o };
-  return /* @__PURE__ */ d(Ce.Provider, { value: t, children: r });
+  return /* @__PURE__ */ i(Gt.Provider, { value: e, children: t });
 }
-function E() {
-  const e = B(Ce);
-  if (!e)
-    throw new Error("useTranslations must be used within TranslationsProvider");
-  return e;
+function Fo(e, t) {
+  return t ? e.replace(
+    /%\{(\w+)\}/g,
+    (r, o) => o in t ? String(t[o]) : r
+  ) : e;
+}
+function Y(e) {
+  const t = pe(Gt);
+  return ee(() => {
+    const r = {};
+    if (t)
+      for (const [a, d] of Object.entries(t))
+        typeof d == "string" && (r[a] = d);
+    const o = { ...e, ...r }, n = o;
+    return {
+      translations: o,
+      translate: (a, d) => Fo(n[a] ?? a, d)
+    };
+  }, [e, t]);
 }
-const N = { overflowWrap: "break-word" };
-function Ke(e, o, r) {
-  return Math.min(r, Math.max(o, e));
+const Ut = {
+  accordionPlaceholder: "Add accordion...",
+  accordionItemPlaceholderTitle: "Accordion %{index}",
+  accordionItemPlaceholderContent: "Your content here..."
+}, U = { overflowWrap: "break-word" };
+function Zo(e, t, r) {
+  return Math.min(r, Math.max(t, e));
 }
-function ee(e) {
-  const o = e.trim(), r = /^#?([\da-f]{3}|[\da-f]{6})$/i.exec(o);
+function Ze(e) {
+  const t = e.trim(), r = /^#?([\da-f]{3}|[\da-f]{6})$/i.exec(t);
   if (r) {
     let n = r[1];
     return n.length === 3 && (n = n[0] + n[0] + n[1] + n[1] + n[2] + n[2]), {
@@ -41,114 +73,114 @@ function ee(e) {
       b: Number.parseInt(n.slice(4, 6), 16)
     };
   }
-  const t = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+\s*)?\)$/i.exec(o);
-  if (t)
-    return { r: Number(t[1]), g: Number(t[2]), b: Number(t[3]) };
+  const o = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+\s*)?\)$/i.exec(t);
+  if (o)
+    return { r: Number(o[1]), g: Number(o[2]), b: Number(o[3]) };
   throw new Error(`Unsupported color format: "${e}". Use hex or rgb()/rgba().`);
 }
-const oe = (e) => Math.round(Ke(e, 0, 255)).toString(16).padStart(2, "0");
-function he({ r: e, g: o, b: r }) {
-  return `#${oe(e)}${oe(o)}${oe(r)}`;
-}
-function Ye({ r: e, g: o, b: r }) {
-  const t = e / 255, n = o / 255, i = r / 255, c = Math.max(t, n, i), u = Math.min(t, n, i), s = (c + u) / 2;
-  if (c === u)
-    return { h: 0, s: 0, l: s };
-  const l = c - u, h = s > 0.5 ? l / (2 - c - u) : l / (c + u);
-  let p;
-  switch (c) {
-    case t:
-      p = (n - i) / l + (n < i ? 6 : 0);
+const Ge = (e) => Math.round(Zo(e, 0, 255)).toString(16).padStart(2, "0");
+function gt({ r: e, g: t, b: r }) {
+  return `#${Ge(e)}${Ge(t)}${Ge(r)}`;
+}
+function Go({ r: e, g: t, b: r }) {
+  const o = e / 255, n = t / 255, a = r / 255, d = Math.max(o, n, a), c = Math.min(o, n, a), l = (d + c) / 2;
+  if (d === c)
+    return { h: 0, s: 0, l };
+  const u = d - c, h = l > 0.5 ? u / (2 - d - c) : u / (d + c);
+  let g;
+  switch (d) {
+    case o:
+      g = (n - a) / u + (n < a ? 6 : 0);
       break;
     case n:
-      p = (i - t) / l + 2;
+      g = (a - o) / u + 2;
       break;
     default:
-      p = (t - n) / l + 4;
+      g = (o - n) / u + 4;
   }
-  return { h: p / 6, s: h, l: s };
+  return { h: g / 6, s: h, l };
 }
-function W(e, o, r) {
-  if (o === 0) {
-    const c = Math.round(r * 255);
-    return { r: c, g: c, b: c };
+function Se(e, t, r) {
+  if (t === 0) {
+    const d = Math.round(r * 255);
+    return { r: d, g: d, b: d };
   }
-  const t = (c, u, s) => {
-    let l = s;
-    return l < 0 && (l += 1), l > 1 && (l -= 1), l < 1 / 6 ? c + (u - c) * 6 * l : l < 1 / 2 ? u : l < 2 / 3 ? c + (u - c) * (2 / 3 - l) * 6 : c;
-  }, n = r < 0.5 ? r * (1 + o) : r + o - r * o, i = 2 * r - n;
+  const o = (d, c, l) => {
+    let u = l;
+    return u < 0 && (u += 1), u > 1 && (u -= 1), u < 1 / 6 ? d + (c - d) * 6 * u : u < 1 / 2 ? c : u < 2 / 3 ? d + (c - d) * (2 / 3 - u) * 6 : d;
+  }, n = r < 0.5 ? r * (1 + t) : r + t - r * t, a = 2 * r - n;
   return {
-    r: Math.round(t(i, n, e + 1 / 3) * 255),
-    g: Math.round(t(i, n, e) * 255),
-    b: Math.round(t(i, n, e - 1 / 3) * 255)
+    r: Math.round(o(a, n, e + 1 / 3) * 255),
+    g: Math.round(o(a, n, e) * 255),
+    b: Math.round(o(a, n, e - 1 / 3) * 255)
   };
 }
-function pe({ r: e, g: o, b: r }) {
-  const t = (n) => {
-    const i = n / 255;
-    return i <= 0.03928 ? i / 12.92 : ((i + 0.055) / 1.055) ** 2.4;
+function vt({ r: e, g: t, b: r }) {
+  const o = (n) => {
+    const a = n / 255;
+    return a <= 0.03928 ? a / 12.92 : ((a + 0.055) / 1.055) ** 2.4;
   };
-  return 0.2126 * t(e) + 0.7152 * t(o) + 0.0722 * t(r);
+  return 0.2126 * o(e) + 0.7152 * o(t) + 0.0722 * o(r);
 }
-function H(e, o) {
-  const r = pe(e), t = pe(o), n = Math.max(r, t), i = Math.min(r, t);
-  return (n + 0.05) / (i + 0.05);
+function be(e, t) {
+  const r = vt(e), o = vt(t), n = Math.max(r, o), a = Math.min(r, o);
+  return (n + 0.05) / (a + 0.05);
 }
-const Je = 0.9, fe = 0.985, Fe = 0.85, eo = 0.55, ge = 0.03, be = 5e-3, oo = "#000000", to = "#FFFFFF", te = (e) => Math.round(e * 100) / 100;
-function ro(e, o) {
+const Uo = 0.9, Ct = 0.985, qo = 0.85, Xo = 0.55, yt = 0.03, kt = 5e-3, Yo = "#000000", Ko = "#FFFFFF", Ue = (e) => Math.round(e * 100) / 100;
+function Qo(e, t) {
   const {
     minTextContrast: r,
-    minVariantContrast: t,
-    darkText: n = oo,
-    lightText: i = to,
-    lightLightness: c = Je,
-    darkLightness: u = eo
-  } = o, { h: s, s: l } = Ye(ee(e)), h = ee(n), p = ee(i), b = Math.min(l, Fe);
-  let v = c, k = W(s, b, v);
-  for (; H(h, k) < r && v < fe; )
-    v = Math.min(fe, v + be), k = W(s, b, v);
-  let y = u, R = W(s, l, y);
-  const L = () => H(p, R) >= r && H(k, R) >= t;
-  for (; !L() && y > ge; )
-    y = Math.max(ge, y - be), R = W(s, l, y);
+    minVariantContrast: o,
+    darkText: n = Yo,
+    lightText: a = Ko,
+    lightLightness: d = Uo,
+    darkLightness: c = Xo
+  } = t, { h: l, s: u } = Go(Ze(e)), h = Ze(n), g = Ze(a), p = Math.min(u, qo);
+  let C = d, T = Se(l, p, C);
+  for (; be(h, T) < r && C < Ct; )
+    C = Math.min(Ct, C + kt), T = Se(l, p, C);
+  let I = c, x = Se(l, u, I);
+  const P = () => be(g, x) >= r && be(T, x) >= o;
+  for (; !P() && I > yt; )
+    I = Math.max(yt, I - kt), x = Se(l, u, I);
   return {
     light: {
-      color: he(k),
+      color: gt(T),
       textColor: n,
-      contrast: te(H(h, k))
+      contrast: Ue(be(h, T))
     },
     dark: {
-      color: he(R),
-      textColor: i,
-      contrast: te(H(p, R))
+      color: gt(x),
+      textColor: a,
+      contrast: Ue(be(g, x))
     },
-    variantContrast: te(H(k, R))
+    variantContrast: Ue(be(T, x))
   };
 }
-const me = {
+const wt = {
   /** AA, normal-size text (below 18pt, or 14pt bold). */
   AA_NORMAL_TEXT: 4.5,
   /** 1.4.11, UI components and graphical objects against adjacent colors. */
   NON_TEXT: 3
-}, no = 0.3, io = "#273540";
-function ao(e) {
-  return ro(e, {
-    minTextContrast: me.AA_NORMAL_TEXT,
-    minVariantContrast: me.NON_TEXT,
-    darkLightness: no,
-    darkText: io
+}, Jo = 0.3, er = "#273540";
+function tr(e) {
+  return Qo(e, {
+    minTextContrast: wt.AA_NORMAL_TEXT,
+    minVariantContrast: wt.NON_TEXT,
+    darkLightness: Jo,
+    darkText: er
   });
 }
-function Z(e, o) {
+function ue(e, t) {
   if (e)
     try {
-      const { light: r, dark: t } = ao(e), n = o === "light" ? r : t;
+      const { light: r, dark: o } = tr(e), n = t === "light" ? r : o;
       return { color: n.color, textColor: n.textColor };
     } catch {
       return;
     }
 }
-function ie(e) {
+function xe(e) {
   return {
     decoration: {
       background: "brand",
@@ -160,610 +192,601 @@ function ie(e) {
     textThemeOverride: { primaryColor: e.textColor }
   };
 }
-function Se(e, o) {
+function qt(e, t) {
   return {
-    decoration: { background: "transparent", borderWidth: o, borderColor: "brand" },
+    decoration: { background: "transparent", borderWidth: t, borderColor: "brand" },
     viewThemeOverride: { borderColorBrand: e.color }
   };
 }
-function w(e, o) {
-  const { textColor: r, ...t } = e.decoration;
+function de(e, t) {
+  const { textColor: r, ...o } = e.decoration;
   return {
     view: {
-      ...t,
-      borderRadius: o.borderRadius,
-      padding: o.padding,
+      ...o,
+      borderRadius: t.borderRadius,
+      padding: t.padding,
       themeOverride: e.viewThemeOverride
     },
     text: { color: r, themeOverride: e.textThemeOverride }
   };
 }
-const $ = {
+const ze = {
   light: { background: "brand", borderColor: "brand", inverseText: !0 },
   dark: { background: "primary-inverse", borderColor: "primary", inverseText: !0 },
   neutral: { background: "secondary", borderColor: "secondary", inverseText: !1 }
-}, so = {
+}, or = {
   light: "brand",
   dark: "primary",
   neutral: "secondary"
-}, U = {
+}, Ie = {
   togglePadding: "0",
   iconMargin: "0",
   toggleFocusBorderColor: "transparent"
-}, M = "small", co = (e, o) => {
-  var r, t;
+}, ge = "small", rr = (e, t) => {
+  var r, o;
   return {
-    ...U,
-    textColor: (t = (r = o.colors) == null ? void 0 : r.contrasts) == null ? void 0 : t.white1010
+    ...Ie,
+    textColor: (o = (r = t.colors) == null ? void 0 : r.contrasts) == null ? void 0 : o.white1010
   };
 };
-function lo(e, o, r) {
-  const t = o === "neutral" ? void 0 : Z(r, o);
+function nr(e, t, r) {
+  const o = t === "neutral" ? void 0 : ue(r, t);
   if (e === "solid")
     return {
-      item: t ? {
+      item: o ? {
         background: "brand",
         borderColor: "brand",
-        themeOverride: { backgroundBrand: t.color, borderColorBrand: t.color }
+        themeOverride: { backgroundBrand: o.color, borderColorBrand: o.color }
       } : {
-        background: $[o].background,
-        borderColor: $[o].borderColor
+        background: ze[t].background,
+        borderColor: ze[t].borderColor
       },
       // The ring sits on the fill, so it reuses the accessible color already paired with
       // that surface: the brand variant's own text color, or the inverse token when the
       // un-branded fill is dark enough to need light text.
-      header: t ? { padding: M, themeOverride: { focusColorInfo: t.textColor } } : $[o].inverseText ? { padding: M, focusColor: "inverse" } : { padding: M },
+      header: o ? { padding: ge, themeOverride: { focusColorInfo: o.textColor } } : ze[t].inverseText ? { padding: ge, focusColor: "inverse" } : { padding: ge },
       // The surface change is the divider here, so no border of its own.
-      content: { background: "primary", borderWidth: "0", padding: M },
-      toggle: t ? { ...U, textColor: t.textColor } : $[o].inverseText ? co : U
+      content: { background: "primary", borderWidth: "0", padding: ge },
+      toggle: o ? { ...Ie, textColor: o.textColor } : ze[t].inverseText ? rr : Ie
     };
-  const n = t ? "brand" : so[o], i = t ? { borderColorBrand: t.color } : void 0;
+  const n = o ? "brand" : or[t], a = o ? { borderColorBrand: o.color } : void 0;
   return {
-    item: { background: "transparent", borderColor: n, themeOverride: i },
+    item: { background: "transparent", borderColor: n, themeOverride: a },
     // Transparent surface, so InstUI's default `info` ring already contrasts.
-    header: { padding: M },
+    header: { padding: ge },
     content: {
       background: "transparent",
       borderColor: n,
       borderWidth: "small none none none",
-      padding: M,
-      themeOverride: i
+      padding: ge,
+      themeOverride: a
     },
-    toggle: U
+    toggle: Ie
   };
 }
-function uo({
+function ir({
   index: e,
-  count: o,
+  count: t,
   connection: r,
-  cornerStyle: t
+  cornerStyle: o
 }) {
-  const n = t === "rounded" ? "large" : "0", i = e === 0, c = e === o - 1, u = `${n} ${n} 0 0`;
+  const n = o === "rounded" ? "large" : "0", a = e === 0, d = e === t - 1, c = `${n} ${n} 0 0`;
   return r === "separated" ? {
     borderWidth: "small",
     borderRadius: n,
-    margin: i ? "none" : "small none none none",
+    margin: a ? "none" : "small none none none",
     contentBorderRadius: `0 0 ${n} ${n}`,
-    headerBorderRadius: u
+    headerBorderRadius: c
   } : {
-    borderWidth: i ? "small" : "none small small small",
-    borderRadius: i && c ? n : i ? `${n} ${n} 0 0` : c ? `0 0 ${n} ${n}` : "0",
+    borderWidth: a ? "small" : "none small small small",
+    borderRadius: a && d ? n : a ? `${n} ${n} 0 0` : d ? `0 0 ${n} ${n}` : "0",
     margin: "none",
-    contentBorderRadius: c ? `0 0 ${n} ${n}` : "0",
-    headerBorderRadius: i ? u : "0"
+    contentBorderRadius: d ? `0 0 ${n} ${n}` : "0",
+    headerBorderRadius: a ? c : "0"
   };
 }
-function ho(e) {
-  return e === "center" ? { closedIcon: $e, openIcon: ue } : { closedIcon: ue, openIcon: Ue };
+function ar(e) {
+  return e === "center" ? { closedIcon: Vt, openIcon: ft } : { closedIcon: ft, openIcon: Oo };
 }
-function po(e) {
+function dr(e) {
   return e === "right" ? "row" : "row-reverse";
 }
-const ve = () => /* @__PURE__ */ d(ze, {});
-function vt({
+const xt = () => /* @__PURE__ */ i(ye, {});
+function lr({
   title: e,
-  variant: o = "h2",
+  variant: t = "h2",
   supportingText: r,
-  items: t = [],
+  items: o = [],
   accordionStyle: n = "outline",
-  colorTheme: i = "light",
-  connection: c = "connected",
-  cornerStyle: u = "rounded",
-  dropdownPlacement: s = "left",
-  dropdownDirection: l = "down",
+  colorTheme: a = "light",
+  connection: d = "connected",
+  cornerStyle: c = "rounded",
+  dropdownPlacement: l = "left",
+  dropdownDirection: u = "down",
   editingItemId: h
 }) {
-  const p = _(), { translations: b, translate: v } = E(), k = X(), [y, R] = F(
+  const g = le(), { translations: p, translate: C } = Y(Ut), T = he(), [I, x] = j(
     new Set(h !== void 0 ? [h] : [])
-  ), [L, Q] = F(h), [P, V] = F(null);
-  h !== L && (Q(h), R((m) => {
-    const T = new Set(m);
-    return L !== void 0 && T.delete(L), h !== void 0 && T.add(h), T;
+  ), [P, G] = j(h), [M, D] = j(null);
+  h !== P && (G(h), x((N) => {
+    const f = new Set(N);
+    return P !== void 0 && f.delete(P), h !== void 0 && f.add(h), f;
   }));
-  const K = (m) => {
-    R((T) => {
-      const C = new Set(T);
-      return C.has(m) ? C.delete(m) : C.add(m), C;
+  const F = (N) => {
+    x((f) => {
+      const y = new Set(f);
+      return y.has(N) ? y.delete(N) : y.add(N), y;
     });
   }, {
-    item: j,
-    header: De,
-    content: Pe,
-    toggle: He
-  } = O(
-    () => lo(n, i, k),
-    [n, i, k]
-  ), { closedIcon: Me, openIcon: Ze } = O(
-    () => ho(l),
-    [l]
-  ), Be = JSON.stringify(t.map((m) => m.content)), Ve = O(
-    () => t.map((m) => Re(m.content)),
-    // eslint-disable-next-line react/exhaustive-deps -- keyed by content, not identity
-    [Be]
-  ), je = po(s), ce = (e || r) && /* @__PURE__ */ S(f, { as: "div", margin: "none none medium none", children: [
-    e && /* @__PURE__ */ d(ne, { level: o, children: e }),
-    r && /* @__PURE__ */ d(z, { as: "p", color: "secondary", children: r })
+    item: te,
+    header: q,
+    content: Z,
+    toggle: W
+  } = ee(
+    () => nr(n, a, T),
+    [n, a, T]
+  ), { closedIcon: K, openIcon: ae } = ee(
+    () => ar(u),
+    [u]
+  ), $ = dr(l), z = (e || r) && /* @__PURE__ */ w(v, { as: "div", margin: "none none medium none", children: [
+    e && /* @__PURE__ */ i(ke, { level: t, children: e }),
+    r && /* @__PURE__ */ i(S, { as: "p", color: "secondary", children: r })
   ] });
-  return t.length === 0 ? /* @__PURE__ */ d(f, { as: "div", className: "bce-block bce-block-accordion", children: /* @__PURE__ */ S("div", { style: N, children: [
-    ce,
-    p && /* @__PURE__ */ d(
-      f,
+  return o.length === 0 ? /* @__PURE__ */ i(v, { as: "div", className: "bce-block bce-block-accordion", children: /* @__PURE__ */ w("div", { style: U, children: [
+    z,
+    g && /* @__PURE__ */ i(
+      v,
       {
         as: "div",
-        ...j,
+        ...te,
         borderWidth: "small",
-        borderRadius: u === "rounded" ? "large" : "0",
+        borderRadius: c === "rounded" ? "large" : "0",
         padding: "medium",
         textAlign: "center",
-        children: /* @__PURE__ */ d(z, { color: "secondary", children: b.accordionPlaceholder })
+        children: /* @__PURE__ */ i(S, { color: "secondary", children: p.accordionPlaceholder })
       }
     )
-  ] }) }) : /* @__PURE__ */ d(f, { as: "div", className: "bce-block bce-block-accordion", children: /* @__PURE__ */ S("div", { style: N, children: [
-    ce,
-    t.map((m, T) => {
-      const C = uo({
-        index: T,
-        count: t.length,
-        connection: c,
-        cornerStyle: u
-      }), le = p && !m.title && !m.content, Y = y.has(m.id);
-      return /* @__PURE__ */ d(
-        f,
+  ] }) }) : /* @__PURE__ */ i(v, { as: "div", className: "bce-block bce-block-accordion", children: /* @__PURE__ */ w("div", { style: U, children: [
+    z,
+    o.map((N, f) => {
+      const y = ir({
+        index: f,
+        count: o.length,
+        connection: d,
+        cornerStyle: c
+      }), m = g && !N.title && !N.content, b = I.has(N.id);
+      return /* @__PURE__ */ i(
+        v,
         {
           as: "div",
-          ...j,
-          borderWidth: C.borderWidth,
-          borderRadius: C.borderRadius,
-          margin: C.margin,
-          children: /* @__PURE__ */ d(
-            We,
+          ...te,
+          borderWidth: y.borderWidth,
+          borderRadius: y.borderRadius,
+          margin: y.margin,
+          children: /* @__PURE__ */ i(
+            So,
             {
               variant: "default",
               fluidWidth: !0,
-              expanded: Y,
-              onToggle: () => K(m.id),
-              onFocus: () => V(m.id),
-              onBlur: () => V(null),
-              icon: ve,
-              iconExpanded: ve,
-              themeOverride: He,
-              summary: /* @__PURE__ */ d(
-                f,
+              expanded: b,
+              onToggle: () => F(N.id),
+              onFocus: () => D(N.id),
+              onBlur: () => D(null),
+              icon: xt,
+              iconExpanded: xt,
+              themeOverride: W,
+              summary: /* @__PURE__ */ i(
+                v,
                 {
                   as: "span",
                   display: "block",
-                  ...De,
-                  borderRadius: Y ? C.headerBorderRadius : C.borderRadius,
-                  withFocusOutline: P === m.id,
+                  ...q,
+                  borderRadius: b ? y.headerBorderRadius : y.borderRadius,
+                  withFocusOutline: M === N.id,
                   focusPosition: "inset",
-                  children: /* @__PURE__ */ S(J, { direction: je, gap: "x-small", children: [
-                    /* @__PURE__ */ d(J.Item, { shouldGrow: !0, shouldShrink: !0, children: le ? v("accordionItemPlaceholderTitle", { index: T + 1 }) : m.title }),
-                    /* @__PURE__ */ d(J.Item, { children: Y ? /* @__PURE__ */ d(Ze, {}) : /* @__PURE__ */ d(Me, {}) })
+                  children: /* @__PURE__ */ w(k, { direction: $, gap: "x-small", children: [
+                    /* @__PURE__ */ i(k.Item, { shouldGrow: !0, shouldShrink: !0, children: m ? C("accordionItemPlaceholderTitle", { index: f + 1 }) : N.title }),
+                    /* @__PURE__ */ i(k.Item, { children: b ? /* @__PURE__ */ i(ae, {}) : /* @__PURE__ */ i(K, {}) })
                   ] })
                 }
               ),
-              children: /* @__PURE__ */ d(f, { as: "div", ...Pe, borderRadius: C.contentBorderRadius, children: le ? /* @__PURE__ */ d(z, { color: "secondary", children: b.accordionItemPlaceholderContent }) : /* @__PURE__ */ d(
-                "div",
-                {
-                  dangerouslySetInnerHTML: { __html: Ve[T] ?? "" }
-                }
-              ) })
+              children: /* @__PURE__ */ i(v, { as: "div", ...Z, borderRadius: y.contentBorderRadius, children: m ? /* @__PURE__ */ i(S, { color: "secondary", children: p.accordionItemPlaceholderContent }) : /* @__PURE__ */ i(tt, { html: N.content }) })
             }
           )
         },
-        m.id
+        N.id
       );
     })
   ] }) });
 }
-function g(e) {
+function V(e) {
   if (!e)
     return {};
   try {
-    const o = JSON.parse(e);
-    if (typeof o == "object" && o !== null)
-      return o;
+    const t = JSON.parse(e);
+    if (typeof t == "object" && t !== null)
+      return t;
   } catch {
     return { description: e };
   }
   return {};
 }
-function x(e) {
+function X(e) {
   return JSON.stringify(e);
 }
-a.ZodType.prototype.zodLabel = function(e) {
-  const o = g(this.description);
+s.ZodType.prototype.zodLabel = function(e) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       label: e
     })
   );
 };
-a.ZodType.prototype.zodPlaceholder = function(e) {
-  const o = g(this.description);
+s.ZodType.prototype.zodPlaceholder = function(e) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       placeholder: e
     })
   );
 };
-a.ZodType.prototype.zodHelp = function(e) {
-  const o = g(this.description);
+s.ZodType.prototype.zodHelp = function(e) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       help: e
     })
   );
 };
-a.ZodType.prototype.zodHidden = function(e = !0) {
-  const o = g(this.description);
+s.ZodType.prototype.zodHidden = function(e = !0) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       hidden: e
     })
   );
 };
-a.ZodType.prototype.zodTextarea = function(e = !0) {
-  const o = g(this.description);
+s.ZodType.prototype.zodTextarea = function(e = !0) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       textarea: e
     })
   );
 };
-a.ZodType.prototype.zodRichText = function(e = !0) {
-  const o = g(this.description);
+s.ZodType.prototype.zodRichText = function(e = !0) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       richtext: e
     })
   );
 };
-a.ZodType.prototype.zodRange = function(e) {
-  const o = g(this.description);
+s.ZodType.prototype.zodRange = function(e) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       range: e
     })
   );
 };
-a.ZodType.prototype.zodCodeEditor = function(e = !0) {
-  const o = g(this.description);
+s.ZodType.prototype.zodCodeEditor = function(e = !0) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       codeeditor: e
     })
   );
 };
-a.ZodType.prototype.zodImage = function(e = !0) {
-  const o = g(this.description);
+s.ZodType.prototype.zodImage = function(e = !0) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       image: e
     })
   );
 };
-a.ZodType.prototype.zodVideo = function(e = !0) {
-  const o = g(this.description);
+s.ZodType.prototype.zodVideo = function(e = !0) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       video: e
     })
   );
 };
-a.ZodType.prototype.zodHiddenWhen = function(e) {
-  const o = g(this.description), r = o.hiddenWhen;
-  let t;
-  return r ? t = [...Array.isArray(r) ? r : [r], e] : t = e, this.describe(
-    x({
-      ...o,
-      hiddenWhen: t
+s.ZodType.prototype.zodHiddenWhen = function(e) {
+  const t = V(this.description), r = t.hiddenWhen;
+  let o;
+  return r ? o = [...Array.isArray(r) ? r : [r], e] : o = e, this.describe(
+    X({
+      ...t,
+      hiddenWhen: o
     })
   );
 };
-a.ZodType.prototype.zodDisabledWhen = function(e) {
-  const o = g(this.description), r = o.disabledWhen;
-  let t;
-  return r ? t = [...Array.isArray(r) ? r : [r], e] : t = e, this.describe(
-    x({
-      ...o,
-      disabledWhen: t
+s.ZodType.prototype.zodDisabledWhen = function(e) {
+  const t = V(this.description), r = t.disabledWhen;
+  let o;
+  return r ? o = [...Array.isArray(r) ? r : [r], e] : o = e, this.describe(
+    X({
+      ...t,
+      disabledWhen: o
     })
   );
 };
-a.ZodType.prototype.zodItemLabel = function(e) {
-  const o = g(this.description);
+s.ZodType.prototype.zodItemLabel = function(e) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       itemLabel: e
     })
   );
 };
-a.ZodType.prototype.zodItemName = function(e) {
-  const o = g(this.description);
+s.ZodType.prototype.zodItemName = function(e) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       itemName: e
     })
   );
 };
-a.ZodType.prototype.zodManageLayer = function(e) {
-  const o = g(this.description);
+s.ZodType.prototype.zodManageLayer = function(e) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       manageLayer: e
     })
   );
 };
-a.ZodType.prototype.zodAnswers = function(e = !0) {
-  const o = g(this.description);
+s.ZodType.prototype.zodAnswers = function(e = !0) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       answers: e
     })
   );
 };
-a.ZodType.prototype.zodAltText = function(e = !0) {
-  const o = g(this.description);
+s.ZodType.prototype.zodAltText = function(e = !0) {
+  const t = V(this.description);
   return this.describe(
-    x({
-      ...o,
+    X({
+      ...t,
       altText: e
     })
   );
 };
-function de(e) {
-  const o = e._def.typeName;
-  return o === "ZodOptional" || o === "ZodDefault" || o === "ZodNullable" || o === "ZodCatch" ? de(e._def.innerType) : e;
-}
-var fo = /* @__PURE__ */ ((e) => (e.TEXT = "text", e.TEXTAREA = "textarea", e.NUMBER = "number", e.RANGE = "range", e.BOOLEAN = "boolean", e.SELECT = "select", e.RICHTEXT = "richtext", e.IMAGE = "image", e.VIDEO = "video", e.ALTTEXT = "alttext", e.ASSET = "asset", e.ARRAY = "array", e.CODEEDITOR = "codeeditor", e.OBJECT = "object", e.ANSWERS = "answers", e.UNKNOWN = "unknown", e))(fo || {});
-function q(e) {
-  const o = g(e.description);
-  if (o.range)
+function ot(e) {
+  const t = e._def.typeName;
+  return t === "ZodOptional" || t === "ZodDefault" || t === "ZodNullable" || t === "ZodCatch" ? ot(e._def.innerType) : e;
+}
+var sr = /* @__PURE__ */ ((e) => (e.TEXT = "text", e.TEXTAREA = "textarea", e.NUMBER = "number", e.RANGE = "range", e.BOOLEAN = "boolean", e.SELECT = "select", e.RICHTEXT = "richtext", e.IMAGE = "image", e.VIDEO = "video", e.ALTTEXT = "alttext", e.ASSET = "asset", e.ARRAY = "array", e.CODEEDITOR = "codeeditor", e.OBJECT = "object", e.ANSWERS = "answers", e.UNKNOWN = "unknown", e))(sr || {});
+function Le(e) {
+  const t = V(e.description);
+  if (t.range)
     return "range";
-  if (o.textarea)
+  if (t.textarea)
     return "textarea";
-  if (o.richtext)
+  if (t.richtext)
     return "richtext";
-  if (o.codeeditor)
+  if (t.codeeditor)
     return "codeeditor";
-  if (o.image)
+  if (t.image)
     return "image";
-  if (o.video)
+  if (t.video)
     return "video";
-  if (o.answers)
+  if (t.answers)
     return "answers";
-  if (o.altText)
+  if (t.altText)
     return "alttext";
   const r = e._def.typeName;
   if (r === "ZodOptional" || r === "ZodDefault" || r === "ZodNullable" || r === "ZodCatch")
-    return q(e._def.innerType);
+    return Le(e._def.innerType);
   if (r === "ZodString") {
-    const t = e;
-    if (t._def.checks) {
-      for (const n of t._def.checks)
+    const o = e;
+    if (o._def.checks) {
+      for (const n of o._def.checks)
         if (n.kind === "email" || n.kind === "url") return "text";
     }
     return "text";
   }
   return r === "ZodNumber" ? "number" : r === "ZodBoolean" ? "boolean" : r === "ZodEnum" || r === "ZodNativeEnum" || r === "ZodUnion" ? "select" : r === "ZodArray" ? "array" : r === "ZodObject" ? "object" : "unknown";
 }
-function Te(e) {
-  const o = {}, r = e._def.typeName;
+function Xt(e) {
+  const t = {}, r = e._def.typeName;
   if (r === "ZodOptional" || r === "ZodDefault" || r === "ZodNullable" || r === "ZodCatch")
-    return Te(e._def.innerType);
+    return Xt(e._def.innerType);
   if (r === "ZodString") {
-    const t = e;
-    if (t._def.checks)
-      for (const n of t._def.checks)
-        n.kind === "min" && (o.minLength = n.value), n.kind === "max" && (o.maxLength = n.value), n.kind === "email" && (o.email = !0), n.kind === "url" && (o.url = !0), n.kind === "regex" && (o.pattern = n.regex.source);
+    const o = e;
+    if (o._def.checks)
+      for (const n of o._def.checks)
+        n.kind === "min" && (t.minLength = n.value), n.kind === "max" && (t.maxLength = n.value), n.kind === "email" && (t.email = !0), n.kind === "url" && (t.url = !0), n.kind === "regex" && (t.pattern = n.regex.source);
   }
   if (r === "ZodNumber") {
-    const t = e;
-    if (t._def.checks)
-      for (const n of t._def.checks)
-        n.kind === "min" && (o.min = n.value), n.kind === "max" && (o.max = n.value);
+    const o = e;
+    if (o._def.checks)
+      for (const n of o._def.checks)
+        n.kind === "min" && (t.min = n.value), n.kind === "max" && (t.max = n.value);
   }
   if (r === "ZodArray") {
-    const t = e;
-    t._def.minLength && (o.minLength = t._def.minLength.value), t._def.maxLength && (o.maxLength = t._def.maxLength.value), t._def.exactLength && (o.minLength = t._def.exactLength.value, o.maxLength = t._def.exactLength.value);
+    const o = e;
+    o._def.minLength && (t.minLength = o._def.minLength.value), o._def.maxLength && (t.maxLength = o._def.maxLength.value), o._def.exactLength && (t.minLength = o._def.exactLength.value, t.maxLength = o._def.exactLength.value);
   }
-  return o;
+  return t;
 }
-function we(e) {
-  const o = e._def.typeName;
-  if (o === "ZodOptional" || o === "ZodDefault" || o === "ZodNullable" || o === "ZodCatch")
-    return we(e._def.innerType);
-  if (o === "ZodEnum")
-    return e._def.values.map((t) => ({
-      value: t,
-      label: t.charAt(0).toUpperCase() + t.slice(1)
+function Yt(e) {
+  const t = e._def.typeName;
+  if (t === "ZodOptional" || t === "ZodDefault" || t === "ZodNullable" || t === "ZodCatch")
+    return Yt(e._def.innerType);
+  if (t === "ZodEnum")
+    return e._def.values.map((o) => ({
+      value: o,
+      label: o.charAt(0).toUpperCase() + o.slice(1)
       // Capitalize first letter
     }));
-  if (o === "ZodNativeEnum") {
-    const t = e._def.values;
-    return Object.entries(t).map(([n, i]) => ({
-      value: i,
+  if (t === "ZodNativeEnum") {
+    const o = e._def.values;
+    return Object.entries(o).map(([n, a]) => ({
+      value: a,
       label: n
     }));
   }
-  if (o === "ZodUnion") {
-    const r = e, t = [];
+  if (t === "ZodUnion") {
+    const r = e, o = [];
     for (const n of r._def.options)
       if (n._def.typeName === "ZodLiteral") {
-        const i = n._def.value;
-        t.push({
-          value: i,
-          label: String(i).charAt(0).toUpperCase() + String(i).slice(1)
+        const a = n._def.value;
+        o.push({
+          value: a,
+          label: String(a).charAt(0).toUpperCase() + String(a).slice(1)
         });
       }
-    return t.length > 0 ? t : void 0;
+    return o.length > 0 ? o : void 0;
   }
 }
-function Le(e) {
-  const o = e._def.typeName;
-  if (o === "ZodDefault") {
+function Kt(e) {
+  const t = e._def.typeName;
+  if (t === "ZodDefault") {
     const r = e;
     return typeof r._def.defaultValue == "function" ? r._def.defaultValue() : r._def.defaultValue;
   }
-  if (o === "ZodOptional" || o === "ZodNullable")
-    return Le(e._def.innerType);
+  if (t === "ZodOptional" || t === "ZodNullable")
+    return Kt(e._def.innerType);
 }
-function go(e) {
-  const o = e._def.typeName;
-  return !(o === "ZodOptional" || o === "ZodNullable" || o === "ZodDefault");
-}
-function bo(e, o) {
-  const r = g(o.description), t = q(o), n = Te(o), i = go(o), c = Le(o), u = we(o);
-  let s = o;
-  for (; s._def.typeName === "ZodOptional" || s._def.typeName === "ZodDefault" || s._def.typeName === "ZodNullable" || s._def.typeName === "ZodCatch"; )
-    s = s._def.innerType;
-  let l, h;
-  if (t === "array" && s._def.typeName === "ZodArray") {
-    l = s._def.type;
-    const v = de(l);
-    v._def.typeName === "ZodObject" && (h = ye(v));
+function cr(e) {
+  const t = e._def.typeName;
+  return !(t === "ZodOptional" || t === "ZodNullable" || t === "ZodDefault");
+}
+function ur(e, t) {
+  const r = V(t.description), o = Le(t), n = Xt(t), a = cr(t), d = Kt(t), c = Yt(t);
+  let l = t;
+  for (; l._def.typeName === "ZodOptional" || l._def.typeName === "ZodDefault" || l._def.typeName === "ZodNullable" || l._def.typeName === "ZodCatch"; )
+    l = l._def.innerType;
+  let u, h;
+  if (o === "array" && l._def.typeName === "ZodArray") {
+    u = l._def.type;
+    const C = ot(u);
+    C._def.typeName === "ZodObject" && (h = Tt(C));
   }
-  let p;
-  return t === "object" && s._def.typeName === "ZodObject" && (p = ye(s)), {
+  let g;
+  return o === "object" && l._def.typeName === "ZodObject" && (g = Tt(l)), {
     name: e,
-    type: t,
-    required: i,
-    defaultValue: c,
-    options: u,
+    type: o,
+    required: a,
+    defaultValue: d,
+    options: c,
     validation: n,
-    itemSchema: l,
+    itemSchema: u,
     itemProperties: h,
-    properties: p,
+    properties: g,
     ...r
   };
 }
-function ye(e) {
-  const o = e.shape, r = {};
-  for (const [t, n] of Object.entries(o))
-    r[t] = bo(t, n);
+function Tt(e) {
+  const t = e.shape, r = {};
+  for (const [o, n] of Object.entries(t))
+    r[o] = ur(o, n);
   return r;
 }
-function Ae(e, o, r, t = []) {
-  const n = [], i = [...t, e].join("."), c = g(o.description);
-  if (c.hidden)
+function Qt(e, t, r, o = []) {
+  const n = [], a = [...o, e].join("."), d = V(t.description);
+  if (d.hidden)
     return n;
-  c.label || n.push({
-    field: i,
+  d.label || n.push({
+    field: a,
     issue: "missing-label",
-    message: `Field "${i}" is missing .zodLabel() annotation. All visible fields must have labels.`
+    message: `Field "${a}" is missing .zodLabel() annotation. All visible fields must have labels.`
   });
-  const u = de(o), s = u._def.typeName;
-  if ((s === "ZodAny" || s === "ZodUnknown") && n.push({
-    field: i,
+  const c = ot(t), l = c._def.typeName;
+  if ((l === "ZodAny" || l === "ZodUnknown") && n.push({
+    field: a,
     issue: "invalid-type",
-    message: `Field "${i}" uses z.any() or z.unknown() without .zodHidden(). These types must be hidden from forms.`
-  }), s === "ZodEffects" && n.push({
-    field: i,
+    message: `Field "${a}" uses z.any() or z.unknown() without .zodHidden(). These types must be hidden from forms.`
+  }), l === "ZodEffects" && n.push({
+    field: a,
     issue: "invalid-type",
-    message: `Field "${i}" uses a ZodEffects type (.refine()/.transform()/z.custom()) without .zodHidden(). The form generator can't render these; hide the field or use a mappable type.`
-  }), s === "ZodObject") {
-    const l = mo(
-      u,
+    message: `Field "${a}" uses a ZodEffects type (.refine()/.transform()/z.custom()) without .zodHidden(). The form generator can't render these; hide the field or use a mappable type.`
+  }), l === "ZodObject") {
+    const u = hr(
+      c,
       r,
-      [...t, e]
+      [...o, e]
     );
-    n.push(...l);
+    n.push(...u);
   }
   return n;
 }
-function mo(e, o, r) {
-  const t = [], n = e.shape;
-  for (const [i, c] of Object.entries(n)) {
-    const u = Ae(i, c, o, r);
-    t.push(...u);
+function hr(e, t, r) {
+  const o = [], n = e.shape;
+  for (const [a, d] of Object.entries(n)) {
+    const c = Qt(a, d, t, r);
+    o.push(...c);
   }
-  return t;
+  return o;
 }
-function vo(e, o) {
+function mr(e, t) {
   const r = [];
-  if (!(e instanceof a.ZodObject))
+  if (!(e instanceof s.ZodObject))
     return r.push({
       field: "_root",
       issue: "invalid-type",
-      message: `Component "${o}" schema must be a ZodObject (z.object({...})). Received: ${e.constructor.name}`
+      message: `Component "${t}" schema must be a ZodObject (z.object({...})). Received: ${e.constructor.name}`
     }), { valid: !1, errors: r };
-  const t = e.shape;
-  for (const [n, i] of Object.entries(t)) {
-    const c = Ae(n, i, o);
-    r.push(...c);
+  const o = e.shape;
+  for (const [n, a] of Object.entries(o)) {
+    const d = Qt(n, a, t);
+    r.push(...d);
   }
   return {
     valid: r.length === 0,
     errors: r
   };
 }
-function I(e, o) {
-  const r = vo(e, o);
+function ne(e, t) {
+  const r = mr(e, t);
   if (!r.valid) {
-    const t = r.errors.map((n) => `  • ${n.field}: ${n.message}`).join(`
+    const o = r.errors.map((n) => `  • ${n.field}: ${n.message}`).join(`
 `);
     throw new TypeError(
-      `Component "${o}" schema validation failed:
-${t}
+      `Component "${t}" schema validation failed:
+${o}
 
 All visible fields must have .zodLabel() annotations. Use .zodHidden() for fields managed by the designer (like children, style, etc.)`
     );
   }
   return e;
 }
-const D = a.enum(["rounded", "square"]), Oe = a.enum(["left", "center", "right"]), Ne = a.enum(["light", "dark", "neutral"]), _e = a.enum(["h2", "h3", "h4"]), yo = a.enum(["outline", "solid"]), xo = a.enum(["connected", "separated"]), ko = a.enum(["left", "right"]), zo = a.enum(["down", "center"]), xe = 10, Ro = a.object({
-  id: a.string().zodHidden(),
-  title: a.string().max(100).zodLabel("Title").zodHelp("Title displayed on the accordion header"),
-  content: a.string().zodRichText().zodLabel("Content").zodHelp("Content shown when the accordion is expanded")
-}), Co = a.object({
-  title: a.string().optional().zodTextarea().zodLabel("Heading text (optional)").zodHelp("Optional heading displayed above the accordion list"),
+const se = s.enum(["rounded", "square"]), Jt = s.enum(["left", "center", "right"]), Te = s.enum(["light", "dark", "neutral"]), rt = s.enum(["h2", "h3", "h4"]), eo = s.enum(["none", "light", "dark"]), to = "None: transparent; Light: brand color; Dark: dark surface — both with contrasting text", fr = s.enum(["outline", "solid"]), pr = s.enum(["connected", "separated"]), br = s.enum(["left", "right"]), gr = s.enum(["down", "center"]), At = 10, vr = s.object({
+  id: s.string().zodHidden(),
+  title: s.string().max(100).zodLabel("Title").zodHelp("Title displayed on the accordion header"),
+  content: s.string().zodRichText().zodLabel("Content").zodHelp("Content shown when the accordion is expanded")
+}), Cr = s.object({
+  title: s.string().optional().zodTextarea().zodLabel("Heading text (optional)").zodHelp("Optional heading displayed above the accordion list"),
   // `.default(x).optional()` (optional outermost) is intentional: the default is applied
   // by the component and `AccordionDefaultProps`, not by schema `.parse()`.
-  variant: _e.default("h2").optional().zodLabel("Heading level").zodHelp("Semantic heading level - determines text size automatically"),
-  supportingText: a.string().optional().zodTextarea().zodLabel("Supporting text (optional)").zodHelp("Optional paragraph content below the heading"),
-  items: a.array(Ro).max(xe).zodLabel(`Accordions (up to ${xe})`).zodItemLabel("title").zodItemName("Accordion").zodManageLayer("Accordions").zodHelp("List of accordion sections"),
-  accordionStyle: yo.default("outline").optional().zodLabel("Style").zodHelp("Outline shows a border; Solid fills the header background"),
-  colorTheme: Ne.default("light").optional().zodLabel("Color theme").zodHelp("Light uses the primary color; Dark uses inverse; Neutral uses grey"),
-  connection: xo.default("connected").optional().zodLabel("Connection").zodHelp("Connected joins accordion items together; Separated adds spacing"),
-  cornerStyle: D.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded or square corners for the accordion"),
-  dropdownPlacement: ko.default("left").optional().zodLabel("Dropdown placement").zodHelp("Place the expand/collapse icon on the left or right"),
-  dropdownDirection: zo.default("down").optional().zodLabel("Dropdown direction").zodHelp("Down points the chevron down when collapsed; Center points it sideways")
-}), ae = {
+  variant: rt.default("h2").optional().zodLabel("Heading level").zodHelp("Semantic heading level - determines text size automatically"),
+  supportingText: s.string().optional().zodTextarea().zodLabel("Supporting text (optional)").zodHelp("Optional paragraph content below the heading"),
+  items: s.array(vr).max(At).zodLabel(`Accordions (up to ${At})`).zodItemLabel("title").zodItemName("Accordion").zodManageLayer("Accordions").zodHelp("List of accordion sections"),
+  accordionStyle: fr.default("outline").optional().zodLabel("Style").zodHelp("Outline shows a border; Solid fills the header background"),
+  colorTheme: Te.default("light").optional().zodLabel("Color theme").zodHelp("Light uses the primary color; Dark uses inverse; Neutral uses grey"),
+  connection: pr.default("connected").optional().zodLabel("Connection").zodHelp("Connected joins accordion items together; Separated adds spacing"),
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded or square corners for the accordion"),
+  dropdownPlacement: br.default("left").optional().zodLabel("Dropdown placement").zodHelp("Place the expand/collapse icon on the left or right"),
+  dropdownDirection: gr.default("down").optional().zodLabel("Dropdown direction").zodHelp("Down points the chevron down when collapsed; Center points it sideways")
+}), _e = {
   variant: "h2",
   items: [
     { id: "accordion-default-1", title: "", content: "" },
@@ -777,18 +800,95 @@ const D = a.enum(["rounded", "square"]), Oe = a.enum(["left", "center", "right"]
   dropdownPlacement: "left",
   dropdownDirection: "down"
 };
-for (const e of ae.items)
+for (const e of _e.items)
   Object.freeze(e);
-Object.freeze(ae.items);
-Object.freeze(ae);
-const yt = I(
-  Co,
+Object.freeze(_e.items);
+Object.freeze(_e);
+const yr = ne(
+  Cr,
   "Accordion"
-), So = {
+), oe = {
+  LAYOUT: "layout",
+  ACTIVITY_CONTENT: "activityContent",
+  INTERACTIVE_CONTENT: "interactiveContent",
+  WIDGET: "widget"
+}, oo = {
+  LayoutContainer: { category: oe.LAYOUT, acceptsChildren: !0 },
+  TwoColumn: { category: oe.LAYOUT, acceptsChildren: !0 },
+  Header: { category: oe.ACTIVITY_CONTENT, acceptsChildren: !1 },
+  Text: { category: oe.ACTIVITY_CONTENT, acceptsChildren: !1 },
+  QuoteBlock: { category: oe.ACTIVITY_CONTENT, acceptsChildren: !1 },
+  CodeBlock: { category: oe.ACTIVITY_CONTENT, acceptsChildren: !1 },
+  ImageBlock: { category: oe.ACTIVITY_CONTENT, acceptsChildren: !1 },
+  VideoBlock: { category: oe.ACTIVITY_CONTENT, acceptsChildren: !1 },
+  Accordion: { category: oe.INTERACTIVE_CONTENT, acceptsChildren: !1 },
+  TabsBlock: { category: oe.INTERACTIVE_CONTENT, acceptsChildren: !1 },
+  KnowledgeCheckBlock: {
+    category: oe.INTERACTIVE_CONTENT,
+    acceptsChildren: !1
+  },
+  FlashCards: { category: oe.INTERACTIVE_CONTENT, acceptsChildren: !1 },
+  MixAndMatch: { category: oe.INTERACTIVE_CONTENT, acceptsChildren: !1 },
+  WidgetBlock: { category: oe.WIDGET, acceptsChildren: !1 }
+};
+function ro(e) {
+  return Object.prototype.hasOwnProperty.call(oo, e);
+}
+function kr(e) {
+  return ro(e) ? "not-registered" : "unknown";
+}
+const wr = {};
+function ie(e) {
+  const {
+    wireName: t,
+    component: r,
+    english: o,
+    schema: n,
+    defaultProps: a,
+    acceptsChildren: d,
+    renderDragPreview: c,
+    wrapsChildrenInGridCells: l
+  } = e, u = {
+    schema: n,
+    defaultProps: a,
+    // Catalogued blocks answer this from the catalogue, so a block file can't contradict
+    // it; a host's own block has no catalogue entry and says so itself.
+    acceptsChildren: ro(t) ? oo[t].acceptsChildren : d ?? !1,
+    ...c ? { renderDragPreview: c } : {},
+    ...l ? { wrapsChildrenInGridCells: !0 } : {}
+  };
+  return o ? ({ label: h, translations: g }) => {
+    const p = (C) => /* @__PURE__ */ i(bt, { value: g, children: mt(r, C) });
+    return p.displayName = `${t}WithTranslations`, { ...u, component: p, label: h };
+  } : ({ label: h }) => {
+    const g = (p) => /* @__PURE__ */ i(bt, { value: wr, children: mt(r, p) });
+    return g.displayName = `${t}WithoutTranslations`, { ...u, component: g, label: h };
+  };
+}
+const Ya = ie({
+  wireName: "Accordion",
+  component: lr,
+  schema: yr,
+  defaultProps: _e,
+  english: Ut
+}), no = {
+  placeholderContent: "Your content here..."
+}, Xe = "bce-rich-text", xr = Pe`
+  .${Xe} :is(td, th) {
+    padding: 4px 8px;
+  }
+  .${Xe} :is(td, th):empty::after {
+    content: '\\00a0';
+  }
+`;
+function Tr() {
+  return /* @__PURE__ */ i(Be, { styles: xr });
+}
+const Ar = {
   background: "transparent",
   borderWidth: "0",
   borderColor: void 0
-}, To = {
+}, Sr = {
   light: {
     background: "brand",
     borderWidth: "0",
@@ -802,67 +902,83 @@ const yt = I(
     textColor: "primary-inverse"
   },
   neutral: { background: "secondary", borderWidth: "0", borderColor: void 0 }
-}, wo = {
+}, zr = {
   light: { background: "transparent", borderWidth: "small", borderColor: "brand" },
   dark: { background: "transparent", borderWidth: "small", borderColor: "primary" },
   neutral: { background: "transparent", borderWidth: "small", borderColor: "secondary" }
 };
-function Lo(e, o) {
+function Rr(e, t) {
   switch (e) {
     case "fill":
-      return To[o];
+      return Sr[t];
     case "outline":
-      return wo[o];
+      return zr[t];
     default:
-      return So;
+      return Ar;
   }
 }
-function Ao(e, o, r, t) {
+function Ir(e, t, r, o) {
   const n = {
     borderRadius: r === "rounded" ? "large" : "0",
     padding: "medium"
-  }, i = o === "neutral" ? void 0 : Z(t, o);
-  if (i) {
+  }, a = t === "neutral" ? void 0 : ue(o, t);
+  if (a) {
     if (e === "fill")
-      return w(ie(i), n);
+      return de(xe(a), n);
     if (e === "outline")
-      return w(Se(i, "small"), n);
+      return de(qt(a, "small"), n);
   }
-  return w({ decoration: Lo(e, o) }, n);
+  return de({ decoration: Rr(e, t) }, n);
 }
-function xt({
+function Lr({
   content: e,
-  textStyle: o = "outline",
+  textStyle: t = "outline",
   colorTheme: r = "light",
-  cornerStyle: t = "rounded"
+  cornerStyle: o = "rounded"
 }) {
-  const n = _(), { translations: i } = E(), c = X(), { view: u, text: s } = O(
-    () => Ao(o, r, t, c),
-    [o, r, t, c]
-  ), l = n && !e, h = O(() => Re(e), [e]);
-  return /* @__PURE__ */ d(f, { as: "div", ...u, className: "bce-block bce-block-text", children: /* @__PURE__ */ d("div", { style: N, children: l ? /* @__PURE__ */ d(z, { color: s.color, themeOverride: s.themeOverride, children: i.placeholderContent }) : /* @__PURE__ */ d(z, { as: "div", color: s.color, themeOverride: s.themeOverride, children: /* @__PURE__ */ d(
-    "div",
-    {
-      dangerouslySetInnerHTML: { __html: h }
-    }
-  ) }) }) });
+  const n = le(), { translations: a } = Y(no), d = he(), { view: c, text: l } = ee(
+    () => Ir(t, r, o, d),
+    [t, r, o, d]
+  );
+  return /* @__PURE__ */ w(v, { as: "div", ...c, className: "bce-block bce-block-text", children: [
+    /* @__PURE__ */ i(Tr, {}),
+    /* @__PURE__ */ i("div", { style: U, children: n && !e ? /* @__PURE__ */ i(S, { color: l.color, themeOverride: l.themeOverride, children: a.placeholderContent }) : /* @__PURE__ */ i(S, { as: "div", color: l.color, themeOverride: l.themeOverride, children: /* @__PURE__ */ i(tt, { className: Xe, html: e }) }) })
+  ] });
 }
-const Oo = a.enum(["none", "outline", "fill"]), No = a.object({
-  content: a.string().zodRichText().zodLabel("Content").zodHelp("Rich text content with inline formatting support"),
+const Or = s.enum(["none", "outline", "fill"]), Nr = s.object({
+  content: s.string().zodRichText().zodLabel("Content").zodHelp("Rich text content with inline formatting support"),
   // `.default(x).optional()` (optional outermost) is intentional: it keeps the field
   // optional in the inferred props so callers may omit it; the default is applied by the
   // component and `TextDefaultProps`, not by schema `.parse()`.
-  textStyle: Oo.default("outline").optional().zodLabel("Style").zodHelp("None removes decoration; Outline shows a border; Fill adds a background color"),
-  colorTheme: Ne.default("light").optional().zodLabel("Color theme").zodHelp("Light uses a subtle emphasis; Dark uses a strong emphasis; Neutral uses grey"),
-  cornerStyle: D.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded corners or sharp square corners (only applies when a style is selected)")
-}), kt = {
+  textStyle: Or.default("outline").optional().zodLabel("Style").zodHelp("None removes decoration; Outline shows a border; Fill adds a background color"),
+  colorTheme: Te.default("light").optional().zodLabel("Color theme").zodHelp("Light uses a subtle emphasis; Dark uses a strong emphasis; Neutral uses grey"),
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded corners or sharp square corners (only applies when a style is selected)")
+}), Er = {
   content: "",
   textStyle: "outline",
   colorTheme: "light",
   cornerStyle: "rounded"
-}, zt = I(No, "Text"), _o = {
+}, Pr = ne(Nr, "Text"), Ka = ie({
+  wireName: "Text",
+  component: Lr,
+  schema: Pr,
+  defaultProps: Er,
+  english: no
+}), io = {
+  bannerPlaceholderTitle: "Your banner",
+  bannerPlaceholderSubtitle: "Your optional eyebrow text"
+}, Br = {
+  left: "start",
+  center: "center",
+  right: "end"
+}, Mr = {
   none: { background: "transparent", borderWidth: "0", borderColor: void 0 },
-  light: { background: "brand", borderWidth: "0", borderColor: void 0 },
+  light: {
+    background: "brand",
+    borderWidth: "0",
+    borderColor: void 0,
+    textColor: "primary-inverse"
+  },
   dark: {
     background: "primary-inverse",
     borderWidth: "0",
@@ -870,28 +986,56 @@ const Oo = a.enum(["none", "outline", "fill"]), No = a.object({
     textColor: "primary-inverse"
   }
 };
-function Eo(e, o, r) {
-  const t = {
-    borderRadius: o === "rounded" ? "large" : "0",
+function ao(e, t) {
+  const r = e === "light" ? "light" : e === "dark" ? "dark" : void 0, o = r && ue(t, r);
+  return o ? xe(o) : { decoration: Mr[e] };
+}
+const Oe = {
+  borderWidth: "small",
+  borderColor: "primary"
+}, _r = {
+  light: { ...Oe, background: "brand", textColor: "primary-inverse" },
+  dark: { ...Oe, background: "primary-inverse", textColor: "primary-inverse" },
+  neutral: { ...Oe, background: "secondary" }
+};
+function nt(e, t) {
+  const r = e === "neutral" ? void 0 : ue(t, e);
+  if (!r)
+    return {
+      styling: { decoration: _r[e] },
+      // Both `light` and `dark` resolve to a dark token surface carrying inverse text;
+      // only `neutral`'s pale grey is a light one.
+      isDarkSurface: e !== "neutral"
+    };
+  const o = xe(r);
+  return {
+    styling: { ...o, decoration: { ...o.decoration, ...Oe } },
+    // `deriveBrandColorVariants` builds `light` as a pale tint carrying dark text and
+    // `dark` as a genuinely dark surface, so the tone follows the requested variant.
+    isDarkSurface: e === "dark"
+  };
+}
+function $r(e, t, r) {
+  return de(ao(e, r), {
+    borderRadius: t === "rounded" ? "large" : "0",
     padding: "medium"
-  }, n = e === "light" ? "light" : e === "dark" ? "dark" : void 0, i = n && Z(r, n);
-  return w(i ? ie(i) : { decoration: _o[e] }, t);
+  });
 }
-function Rt({
+function Hr({
   title: e,
-  variant: o,
+  variant: t,
   subtitle: r,
-  content: t,
+  content: o,
   headerStyle: n = "none",
-  cornerStyle: i = "rounded"
+  cornerStyle: a = "rounded"
 }) {
-  const c = _(), { translations: u } = E(), s = X(), { view: l, text: h } = O(
-    () => Eo(n, i, s),
-    [n, i, s]
-  ), p = c && !e && !r && !t, b = p ? u.bannerPlaceholderTitle : e, v = p ? u.bannerPlaceholderSubtitle : r, k = p ? void 0 : t;
-  return /* @__PURE__ */ d(f, { as: "div", ...l, className: "bce-block bce-block-banner", children: /* @__PURE__ */ S("div", { style: N, children: [
-    v && /* @__PURE__ */ d(
-      z,
+  const d = le(), { translations: c } = Y(io), l = he(), { view: u, text: h } = ee(
+    () => $r(n, a, l),
+    [n, a, l]
+  ), g = d && !e && !r && !o, p = g ? c.bannerPlaceholderTitle : e, C = g ? c.bannerPlaceholderSubtitle : r, T = g ? void 0 : o;
+  return /* @__PURE__ */ i(v, { as: "div", ...u, className: "bce-block bce-block-banner", children: /* @__PURE__ */ w("div", { style: U, children: [
+    C && /* @__PURE__ */ i(
+      S,
       {
         as: "div",
         size: "small",
@@ -900,18 +1044,18 @@ function Rt({
         letterSpacing: "expanded",
         color: h.color,
         themeOverride: h.themeOverride,
-        children: v
+        children: C
       }
     ),
-    /* @__PURE__ */ d(ne, { level: o, color: h.color, themeOverride: h.themeOverride, children: b }),
-    k && /* @__PURE__ */ d(z, { as: "div", color: h.color, themeOverride: h.themeOverride, children: k })
+    /* @__PURE__ */ i(ke, { level: t, color: h.color, themeOverride: h.themeOverride, children: p }),
+    T && /* @__PURE__ */ i(S, { as: "div", color: h.color, themeOverride: h.themeOverride, children: T })
   ] }) });
 }
-const Io = a.enum(["none", "light", "dark"]), Do = a.object({
-  title: a.string().zodTextarea().zodLabel("Heading text").zodHelp("Main heading text for this section"),
-  variant: _e.default("h2").zodLabel("Heading level").zodHelp("Semantic heading level - determines text size automatically"),
-  subtitle: a.string().optional().zodTextarea().zodLabel("Eyebrow text (optional)").zodHelp("Optional small text displayed above the main title"),
-  content: a.string().optional().zodTextarea().zodLabel("Supporting text (optional)").zodHelp("Optional paragraph content below title"),
+const Dr = s.object({
+  title: s.string().zodTextarea().zodLabel("Heading text").zodHelp("Main heading text for this section"),
+  variant: rt.default("h2").zodLabel("Heading level").zodHelp("Semantic heading level - determines text size automatically"),
+  subtitle: s.string().optional().zodTextarea().zodLabel("Eyebrow text (optional)").zodHelp("Optional small text displayed above the main title"),
+  content: s.string().optional().zodTextarea().zodLabel("Supporting text (optional)").zodHelp("Optional paragraph content below title"),
   // `.default(x).optional()` (optional outermost) is intentional: it keeps defaulted
   // style fields optional in the inferred props so callers may omit them; the default is
   // applied by the component and `BannerDefaultProps`, not by schema `.parse()`.
@@ -919,56 +1063,65 @@ const Io = a.enum(["none", "light", "dark"]), Do = a.object({
   // Schema-internal field name is kept as `headerStyle` (the canvas-horizon
   // original) even though the block/component was renamed to Banner, so the
   // host data contract is preserved.
-  headerStyle: Io.default("none").optional().zodLabel("Color").zodHelp("None: transparent; Light: secondary color; Dark: primary color with white text"),
-  cornerStyle: D.default("rounded").optional().zodLabel("Corners").zodHelp("Choose between rounded or sharp square corners")
-}), Ct = {
+  headerStyle: eo.default("none").optional().zodLabel("Color").zodHelp(to),
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Choose between rounded or sharp square corners")
+}), Wr = {
   title: "",
   variant: "h2",
   headerStyle: "none",
   cornerStyle: "rounded"
-}, St = I(Do, "Banner"), ke = { background: "secondary", borderWidth: "0", borderColor: void 0 }, Po = {
+}, jr = ne(Dr, "Banner"), Qa = ie({
+  wireName: "Header",
+  component: Hr,
+  schema: jr,
+  defaultProps: Wr,
+  english: io
+}), lo = {
+  quotePlaceholderContent: "Your quote here",
+  quotePlaceholderAuthor: "Author"
+}, St = { background: "secondary", borderWidth: "0", borderColor: void 0 }, Vr = {
   background: "transparent",
   borderWidth: "none none none large",
   borderColor: "brand"
-}, Ho = { background: "transparent", borderWidth: "0", borderColor: void 0 };
-function Mo(e, o, r) {
-  const t = o === "rounded" ? "large" : "0";
+}, Fr = { background: "transparent", borderWidth: "0", borderColor: void 0 };
+function Zr(e, t, r) {
+  const o = t === "rounded" ? "large" : "0";
   switch (e) {
     case "background-secondary": {
-      const n = Z(r, "light"), i = n ? ie(n) : { decoration: ke };
-      return w(i, { borderRadius: t, padding: "medium" });
+      const n = ue(r, "light"), a = n ? xe(n) : { decoration: St };
+      return de(a, { borderRadius: o, padding: "medium" });
     }
     case "background-grey":
-      return w({ decoration: ke }, { borderRadius: t, padding: "medium" });
+      return de({ decoration: St }, { borderRadius: o, padding: "medium" });
     case "border-primary": {
-      const n = Z(r, "dark"), i = n ? Se(n, "none none none large") : { decoration: Po };
-      return w(i, { borderRadius: "0", padding: "0 0 0 small" });
+      const n = ue(r, "dark"), a = n ? qt(n, "none none none large") : { decoration: Vr };
+      return de(a, { borderRadius: "0", padding: "0 0 0 small" });
     }
     default:
-      return w({ decoration: Ho }, { borderRadius: t, padding: "0" });
+      return de({ decoration: Fr }, { borderRadius: o, padding: "0" });
   }
 }
-function Tt({
+function Gr({
   content: e,
-  author: o,
+  author: t,
   decorationStyle: r = "background-secondary",
-  cornerStyle: t = "rounded"
+  cornerStyle: o = "rounded"
 }) {
-  const n = _(), { translations: i } = E(), c = X(), { view: u, text: s } = O(
-    () => Mo(r, t, c),
-    [r, t, c]
-  ), l = n && !e && !o, h = l ? i.quotePlaceholderContent : e, p = l ? i.quotePlaceholderAuthor : o;
-  return /* @__PURE__ */ d(f, { as: "div", ...u, className: "bce-block bce-block-quote", children: /* @__PURE__ */ S("div", { style: N, children: [
-    /* @__PURE__ */ S(
-      z,
+  const n = le(), { translations: a } = Y(lo), d = he(), { view: c, text: l } = ee(
+    () => Zr(r, o, d),
+    [r, o, d]
+  ), u = n && !e && !t, h = u ? a.quotePlaceholderContent : e, g = u ? a.quotePlaceholderAuthor : t;
+  return /* @__PURE__ */ i(v, { as: "div", ...c, className: "bce-block bce-block-quote", children: /* @__PURE__ */ w("div", { style: U, children: [
+    /* @__PURE__ */ w(
+      S,
       {
         as: "blockquote",
         size: "x-large",
         weight: "bold",
         fontStyle: "italic",
         lineHeight: "double",
-        color: s.color,
-        themeOverride: s.themeOverride,
+        color: l.color,
+        themeOverride: l.themeOverride,
         children: [
           '"',
           h,
@@ -976,48 +1129,56 @@ function Tt({
         ]
       }
     ),
-    p && /* @__PURE__ */ d(f, { as: "div", textAlign: "end", children: /* @__PURE__ */ S(z, { as: "cite", size: "small", color: s.color, themeOverride: s.themeOverride, children: [
+    g && /* @__PURE__ */ i(v, { as: "div", textAlign: "end", children: /* @__PURE__ */ w(S, { as: "cite", size: "small", color: l.color, themeOverride: l.themeOverride, children: [
       "– ",
-      p
+      g
     ] }) })
   ] }) });
 }
-const Zo = a.enum([
+const Ur = s.enum([
   "none",
   "background-secondary",
   "background-grey",
   "border-primary"
-]), Bo = a.object({
-  content: a.string().zodTextarea().zodLabel("Quote Content").zodHelp("The main text of the quotation"),
-  author: a.string().optional().zodLabel("Author").zodHelp("Optional attribution for the quote"),
+]), qr = s.object({
+  content: s.string().zodTextarea().zodLabel("Quote Content").zodHelp("The main text of the quotation"),
+  author: s.string().optional().zodLabel("Author").zodHelp("Optional attribution for the quote"),
   // `.default(x).optional()` (optional outermost) is intentional: it keeps the field
   // optional in the inferred props so callers may omit it; the default is applied by the
   // component and `QuoteDefaultProps`, not by schema `.parse()`.
-  decorationStyle: Zo.default("background-secondary").optional().zodLabel("Style").zodHelp("Choose background or border styling for the quote block"),
-  cornerStyle: D.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded corners or sharp square corners")
-}), wt = {
+  decorationStyle: Ur.default("background-secondary").optional().zodLabel("Style").zodHelp("Choose background or border styling for the quote block"),
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded corners or sharp square corners")
+}), Xr = {
   content: "",
   decorationStyle: "background-secondary",
   cornerStyle: "rounded"
-}, Lt = I(Bo, "Quote");
-function Vo(e) {
+}, Yr = ne(qr, "Quote"), Ja = ie({
+  wireName: "QuoteBlock",
+  component: Gr,
+  schema: Yr,
+  defaultProps: Xr,
+  english: lo
+}), so = {
+  codeBlockPlaceholder: "// Your code here"
+};
+function Kr(e) {
   return {
     background: "secondary",
     borderRadius: e === "rounded" ? "large" : "0",
     padding: "medium"
   };
 }
-function At({ code: e, language: o, header: r, cornerStyle: t = "rounded" }) {
-  const n = _(), { translations: i } = E(), c = Vo(t), s = n && !e ? i.codeBlockPlaceholder : e;
-  return /* @__PURE__ */ d(f, { as: "div", className: "bce-block bce-block-codeblock", children: /* @__PURE__ */ S("div", { style: N, children: [
-    r && /* @__PURE__ */ d(f, { as: "div", margin: "0 0 small 0", children: /* @__PURE__ */ d(ne, { level: "h4", children: r }) }),
-    /* @__PURE__ */ S(f, { as: "div", ...c, children: [
-      o && /* @__PURE__ */ d(f, { as: "div", margin: "0 0 x-small 0", children: /* @__PURE__ */ d(z, { as: "div", size: "small", weight: "bold", transform: "uppercase", color: "secondary", children: o }) }),
-      /* @__PURE__ */ d("pre", { style: { margin: 0, whiteSpace: "pre", overflow: "auto" }, children: /* @__PURE__ */ d("code", { children: s }) })
+function Qr({ code: e, language: t, header: r, cornerStyle: o = "rounded" }) {
+  const n = le(), { translations: a } = Y(so), d = Kr(o), l = n && !e ? a.codeBlockPlaceholder : e;
+  return /* @__PURE__ */ i(v, { as: "div", className: "bce-block bce-block-codeblock", children: /* @__PURE__ */ w("div", { style: U, children: [
+    r && /* @__PURE__ */ i(v, { as: "div", margin: "0 0 small 0", children: /* @__PURE__ */ i(ke, { level: "h4", children: r }) }),
+    /* @__PURE__ */ w(v, { as: "div", ...d, children: [
+      t && /* @__PURE__ */ i(v, { as: "div", margin: "0 0 x-small 0", children: /* @__PURE__ */ i(S, { as: "div", size: "small", weight: "bold", transform: "uppercase", color: "secondary", children: t }) }),
+      /* @__PURE__ */ i("pre", { style: { margin: 0, whiteSpace: "pre", overflow: "auto" }, children: /* @__PURE__ */ i("code", { children: l }) })
     ] })
   ] }) });
 }
-const jo = a.enum([
+const Jr = s.enum([
   "javascript",
   "json",
   "html",
@@ -1025,310 +1186,347 @@ const jo = a.enum([
   "bash",
   "yaml",
   "text"
-]), Wo = a.object({
-  code: a.string().zodCodeEditor().zodLabel("Code").zodHelp("The code content to display"),
+]), en = s.object({
+  code: s.string().zodCodeEditor().zodLabel("Code").zodHelp("The code content to display"),
   // Unknown languages fall back to 'text'; an absent value defaults to 'javascript'
   // (matches the canvas-horizon original). `.optional()` sits inside `.default()`
   // so `parse({ code })` yields `'javascript'` rather than `undefined` — which
   // also makes the inferred `language` required.
-  language: jo.catch("text").optional().default("javascript").zodLabel("Language").zodHelp("Programming language shown as a label above the code"),
-  header: a.string().optional().zodLabel("Header").zodHelp("Optional heading displayed above the code block"),
+  language: Jr.catch("text").optional().default("javascript").zodLabel("Language").zodHelp("Programming language shown as a label above the code"),
+  header: s.string().optional().zodLabel("Header").zodHelp("Optional heading displayed above the code block"),
   // `.default(x).optional()` (optional outermost) keeps this optional in the inferred
   // props; the default is applied by the component and `CodeBlockDefaultProps`, not by
   // `.parse()`. (Contrast `language` above, which needs its value present after parse
   // and so orders `.optional().default()`.)
-  cornerStyle: D.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded corners or sharp square corners")
-}), Ot = {
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded corners or sharp square corners")
+}), tn = {
   code: "",
   language: "javascript",
   cornerStyle: "rounded"
-}, Nt = I(
-  Wo,
+}, on = ne(
+  en,
   "CodeBlock"
-), $o = () => ({ isLoading: !1, isError: !0 }), Uo = () => ({ isLoading: !1, isError: !0 }), se = G({}), _t = se.Provider, qo = (e) => (B(se).useImageUrl ?? $o)(e), Go = (e) => (B(se).useVideoUrl ?? Uo)(e), Xo = ["http:", "https:"];
-function re(e) {
+), ed = ie({
+  wireName: "CodeBlock",
+  component: Qr,
+  schema: on,
+  defaultProps: tn,
+  english: so
+}), rn = () => ({ isLoading: !1, isError: !0 }), nn = () => ({ isLoading: !1, isError: !0 }), an = () => ({ isLoading: !1, isError: !0 }), $e = we({}), td = $e.Provider, dn = (e) => (pe($e).useImageUrl ?? rn)(e), ln = (e) => (pe($e).useVideoUrl ?? nn)(e), sn = (e) => (pe($e).useWidget ?? an)(e), co = {
+  imageBlockPlaceholder: "Add image...",
+  imageBlockLoading: "Loading image...",
+  imageBlockError: "Failed to load image"
+}, cn = ["http:", "https:"];
+function Ye(e) {
   if (!e) return !1;
-  const o = e.replace(/[\t\n\r]/g, "");
-  if (!o || o.startsWith("//")) return !1;
-  if (o.startsWith("/")) return !o.includes("\\");
+  const t = e.replace(/[\t\n\r]/g, "");
+  if (!t || t.startsWith("//")) return !1;
+  if (t.startsWith("/")) return !t.includes("\\");
   try {
-    return Xo.includes(new URL(o).protocol);
+    return cn.includes(new URL(t).protocol);
   } catch {
     return !1;
   }
 }
-function A({
+function ce({
   text: e,
-  subtitle: o,
+  subtitle: t,
   variant: r = "empty",
-  borderRadius: t = "medium"
+  borderRadius: o = "medium"
 }) {
-  const n = r === "processing" ? "secondary" : "primary", i = r !== "empty";
-  return /* @__PURE__ */ d(
-    f,
+  const n = r === "processing" ? "secondary" : "primary", a = r !== "empty";
+  return /* @__PURE__ */ i(
+    v,
     {
       as: "div",
       background: n,
-      borderRadius: t,
+      borderRadius: o,
       padding: "large",
       textAlign: "center",
-      "aria-live": i ? "polite" : void 0,
-      "aria-atomic": i ? !0 : void 0,
-      children: /* @__PURE__ */ d("div", { style: N, children: r === "loading" ? /* @__PURE__ */ d(Ge, { size: "small", renderTitle: e }) : r === "processing" ? /* @__PURE__ */ S(ze, { children: [
-        /* @__PURE__ */ d(z, { as: "div", children: e }),
-        o && /* @__PURE__ */ d(z, { as: "p", color: "secondary", children: o })
-      ] }) : /* @__PURE__ */ d(z, { color: r === "error" ? "danger" : "secondary", children: e }) })
+      "aria-live": a ? "polite" : void 0,
+      "aria-atomic": a ? !0 : void 0,
+      children: /* @__PURE__ */ i("div", { style: U, children: r === "loading" ? /* @__PURE__ */ i(Bo, { size: "small", renderTitle: e }) : r === "processing" ? /* @__PURE__ */ w(ye, { children: [
+        /* @__PURE__ */ i(S, { as: "div", children: e }),
+        t && /* @__PURE__ */ i(S, { as: "p", color: "secondary", children: t })
+      ] }) : /* @__PURE__ */ i(S, { color: r === "error" ? "danger" : "secondary", children: e }) })
     }
   );
 }
-const Ee = {
-  left: "start",
-  center: "center",
-  right: "end"
-}, Qo = {
+const un = {
   square: "1 / 1",
   circle: "1 / 1",
   landscape: "3 / 2",
   portrait: "3 / 4"
+}, hn = {
+  left: "0 auto",
+  center: "auto",
+  right: "auto 0"
 };
-function Ko(e, o, r, t) {
+function mn(e, t, r, o) {
   return {
-    textAlign: Ee[o],
+    marginInline: hn[t],
     width: `${r}%`,
-    aspectRatio: Qo[e],
-    borderRadius: e === "circle" ? "circle" : t === "rounded" ? "large" : "0"
+    aspectRatio: un[e],
+    borderRadius: e === "circle" ? "circle" : o === "rounded" ? "large" : "0"
   };
 }
-function Et({
+function fn({
   asset_id: e,
-  isDecorative: o = !1,
+  isDecorative: t = !1,
   alt: r,
-  size: t = 100,
+  size: o = 50,
   ratio: n = "square",
-  align: i = "left",
-  cornerStyle: c = "rounded"
+  align: a = "left",
+  cornerStyle: d = "rounded"
 }) {
-  const u = _(), { translations: s } = E(), { url: l, isLoading: h, isError: p } = qo(e), b = Ko(n, i, t, c), v = () => e ? h ? /* @__PURE__ */ d(
-    A,
+  const c = le(), { translations: l } = Y(co), { url: u, isLoading: h, isError: g } = dn(e), p = mn(n, a, o, d);
+  return /* @__PURE__ */ i(v, { as: "div", className: "bce-block bce-block-image", width: "100%", children: e ? h ? /* @__PURE__ */ i(
+    ce,
     {
-      borderRadius: b.borderRadius,
+      borderRadius: p.borderRadius,
       variant: "loading",
-      text: s.imageBlockLoading
+      text: l.imageBlockLoading
     }
-  ) : p || !re(l) ? /* @__PURE__ */ d(
-    A,
+  ) : g || !Ye(u) ? /* @__PURE__ */ i(
+    ce,
     {
-      borderRadius: b.borderRadius,
+      borderRadius: p.borderRadius,
       variant: "error",
-      text: s.imageBlockError
-    }
-  ) : /* @__PURE__ */ d(
-    f,
-    {
-      as: "span",
-      display: "inline-block",
-      width: b.width,
-      maxWidth: "100%",
-      borderRadius: b.borderRadius,
-      overflowX: "hidden",
-      overflowY: "hidden",
-      children: /* @__PURE__ */ d("div", { style: { aspectRatio: b.aspectRatio, width: "100%" }, children: /* @__PURE__ */ d(
-        qe,
-        {
-          src: l,
-          alt: o ? "" : r,
-          role: o ? "presentation" : void 0,
-          display: "block",
-          width: "100%",
-          height: "100%",
-          constrain: "cover"
-        }
-      ) })
+      text: l.imageBlockError
     }
-  ) : u ? /* @__PURE__ */ d(
-    A,
+  ) : (
+    // aspectRatio has no InstUI token; the crop/fit is done by Img constrain="cover".
+    /* @__PURE__ */ i(
+      "div",
+      {
+        style: {
+          width: p.width,
+          maxWidth: "100%",
+          marginInline: p.marginInline,
+          aspectRatio: p.aspectRatio
+        },
+        children: /* @__PURE__ */ i(
+          v,
+          {
+            as: "div",
+            width: "100%",
+            height: "100%",
+            borderRadius: p.borderRadius,
+            overflowX: "hidden",
+            overflowY: "hidden",
+            children: /* @__PURE__ */ i(
+              Po,
+              {
+                src: u,
+                alt: t ? "" : r,
+                role: t ? "presentation" : void 0,
+                display: "block",
+                width: "100%",
+                height: "100%",
+                constrain: "cover"
+              }
+            )
+          }
+        )
+      }
+    )
+  ) : c ? /* @__PURE__ */ i(
+    ce,
     {
-      borderRadius: b.borderRadius,
-      text: s.imageBlockPlaceholder
+      borderRadius: p.borderRadius,
+      text: l.imageBlockPlaceholder
     }
-  ) : null;
-  return /* @__PURE__ */ d(f, { as: "div", className: "bce-block bce-block-image", textAlign: b.textAlign, children: v() });
+  ) : null });
 }
-const Yo = a.enum(["square", "circle", "landscape", "portrait"]), Jo = a.object({
+const pn = s.enum(["square", "circle", "landscape", "portrait"]), bn = s.object({
   // Opaque host asset id; the host resolves it to a file via the asset context.
-  asset_id: a.string().zodLabel("Image").zodImage(),
-  isDecorative: a.boolean().default(!1).zodLabel("Image is decorative"),
-  alt: a.string().zodLabel("Alt text").zodPlaceholder("Describe the image...").zodAltText().zodDisabledWhen({ field: "isDecorative", value: !0 }),
-  size: a.number().min(20).max(100).default(100).zodRange({ min: 20, max: 100, step: 10, formatValue: "%" }).zodLabel("Size").zodHelp("Image width as percentage"),
-  ratio: Yo.default("square").zodLabel("Image Ratio").zodHelp("Aspect ratio for the image display"),
-  align: Oe.default("left").zodLabel("Alignment").zodHelp("Horizontal alignment of the image"),
-  cornerStyle: D.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded corners or sharp square corners")
-}), It = {
+  asset_id: s.string().zodLabel("Image").zodImage(),
+  isDecorative: s.boolean().default(!1).zodLabel("Image is decorative"),
+  alt: s.string().zodLabel("Alt text").zodPlaceholder("Describe the image...").zodAltText().zodDisabledWhen({ field: "isDecorative", value: !0 }),
+  size: s.number().min(20).max(100).default(50).zodRange({ min: 20, max: 100, step: 10, formatValue: "%" }).zodLabel("Size").zodHelp("Image width as a percentage of the container"),
+  ratio: pn.default("square").zodLabel("Image Ratio").zodHelp("Aspect ratio for the image display"),
+  align: Jt.default("left").zodLabel("Alignment").zodHelp("Horizontal alignment of the image"),
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded corners or sharp square corners")
+}), gn = {
   asset_id: "",
   isDecorative: !1,
   alt: "",
-  size: 100,
+  size: 50,
   ratio: "square",
   align: "left",
   cornerStyle: "rounded"
-}, Dt = I(
-  Jo,
+}, vn = ne(
+  bn,
   "ImageBlock"
-), Fo = "16 / 9";
-function Ie(e, o, r) {
+), od = ie({
+  wireName: "ImageBlock",
+  component: fn,
+  schema: vn,
+  defaultProps: gn,
+  english: co
+}), uo = {
+  videoBlockPlaceholder: "Add video...",
+  videoBlockLoading: "Loading video...",
+  videoBlockError: "Failed to load video",
+  videoBlockUnsupportedProvider: "Unsupported video provider",
+  videoBlockProcessing: "Video is processing",
+  videoBlockProcessingSubtitle: "Once video is done processing, block will update. This could take a few minutes.",
+  videoBlockTitle: "Video"
+}, Cn = "16 / 9";
+function ho(e, t, r) {
   return {
-    textAlign: Ee[e],
-    width: `${o}%`,
-    aspectRatio: Fo,
+    textAlign: Br[e],
+    width: `${t}%`,
+    aspectRatio: Cn,
     borderRadius: r === "rounded" ? "large" : "0"
   };
 }
-const et = /^(?:https?:\/\/)?(?:[\w-]+\.)*(?:youtube\.com\/(?:watch\?v=|embed\/|v\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})(?![\w-])/, ot = /^(?:https?:\/\/)?(?:[\w-]+\.)*vimeo\.com\/(?:video\/)?(\d+)(?![\w-])/;
-function tt(e) {
-  const o = e.match(et);
-  if (o)
-    return `https://www.youtube.com/embed/${o[1]}`;
-  const r = e.match(ot);
+const yn = /^(?:https?:\/\/)?(?:[\w-]+\.)*(?:youtube\.com\/(?:watch\?v=|embed\/|v\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})(?![\w-])/, kn = /^(?:https?:\/\/)?(?:[\w-]+\.)*vimeo\.com\/(?:video\/)?(\d+)(?![\w-])/;
+function wn(e) {
+  const t = e.match(yn);
+  if (t)
+    return `https://www.youtube.com/embed/${t[1]}`;
+  const r = e.match(kn);
   return r ? `https://player.vimeo.com/video/${r[1]}` : null;
 }
-function Pt({
+function xn({
   source: e = "file",
-  asset_id: o,
+  asset_id: t,
   video_url: r,
-  alt: t,
+  alt: o,
   size: n = 100,
-  align: i = "center",
-  cornerStyle: c = "rounded"
+  align: a = "center",
+  cornerStyle: d = "rounded"
 }) {
-  const u = _(), { translations: s } = E(), { url: l, displayName: h, mediaEntryId: p, isLoading: b, isProcessing: v, isError: k } = Go(
-    e === "file" ? o : ""
-  ), y = Ie(i, n, c), R = (P, V, K, j) => /* @__PURE__ */ d(
-    f,
+  const c = le(), { translations: l } = Y(uo), { url: u, displayName: h, mediaEntryId: g, isLoading: p, isProcessing: C, isError: T } = ln(
+    e === "file" ? t : ""
+  ), I = ho(a, n, d), x = (M, D, F, te) => /* @__PURE__ */ i(
+    v,
     {
       as: "span",
       display: "inline-block",
-      width: y.width,
+      width: I.width,
       maxWidth: "100%",
-      borderRadius: y.borderRadius,
+      borderRadius: I.borderRadius,
       overflowX: "hidden",
       overflowY: "hidden",
-      children: /* @__PURE__ */ d("div", { style: { aspectRatio: y.aspectRatio, width: "100%", position: "relative" }, children: /* @__PURE__ */ d(
+      children: /* @__PURE__ */ i("div", { style: { aspectRatio: I.aspectRatio, width: "100%", position: "relative" }, children: /* @__PURE__ */ i(
         "iframe",
         {
-          src: P,
-          title: V,
-          allow: K,
+          src: M,
+          title: D,
+          allow: F,
           allowFullScreen: !0,
           loading: "lazy",
           referrerPolicy: "strict-origin-when-cross-origin",
-          "data-media-id": j,
+          "data-media-id": te,
           style: { position: "absolute", inset: 0, width: "100%", height: "100%", border: "none" }
         }
       ) })
     }
-  ), L = () => u ? /* @__PURE__ */ d(
-    A,
+  ), P = () => c ? /* @__PURE__ */ i(
+    ce,
     {
-      borderRadius: y.borderRadius,
-      text: s.videoBlockPlaceholder
+      borderRadius: I.borderRadius,
+      text: l.videoBlockPlaceholder
     }
-  ) : null, Q = () => {
+  ) : null, G = () => {
     if (e === "link") {
       if (!r)
-        return L();
-      const P = tt(r);
-      return re(P) ? R(
-        P,
-        t || s.videoBlockTitle,
+        return P();
+      const M = wn(r);
+      return Ye(M) ? x(
+        M,
+        o || l.videoBlockTitle,
         "autoplay; encrypted-media; picture-in-picture; fullscreen"
-      ) : /* @__PURE__ */ d(
-        A,
+      ) : /* @__PURE__ */ i(
+        ce,
         {
-          borderRadius: y.borderRadius,
+          borderRadius: I.borderRadius,
           variant: "error",
-          text: s.videoBlockUnsupportedProvider
+          text: l.videoBlockUnsupportedProvider
         }
       );
     }
-    return o ? b ? /* @__PURE__ */ d(
-      A,
+    return t ? p ? /* @__PURE__ */ i(
+      ce,
       {
-        borderRadius: y.borderRadius,
+        borderRadius: I.borderRadius,
         variant: "loading",
-        text: s.videoBlockLoading
+        text: l.videoBlockLoading
       }
-    ) : v ? /* @__PURE__ */ d(
-      A,
+    ) : C ? /* @__PURE__ */ i(
+      ce,
       {
-        borderRadius: y.borderRadius,
+        borderRadius: I.borderRadius,
         variant: "processing",
-        text: s.videoBlockProcessing,
-        subtitle: s.videoBlockProcessingSubtitle
+        text: l.videoBlockProcessing,
+        subtitle: l.videoBlockProcessingSubtitle
       }
-    ) : k || !re(l) ? /* @__PURE__ */ d(
-      A,
+    ) : T || !Ye(u) ? /* @__PURE__ */ i(
+      ce,
       {
-        borderRadius: y.borderRadius,
+        borderRadius: I.borderRadius,
         variant: "error",
-        text: s.videoBlockError
+        text: l.videoBlockError
       }
-    ) : R(
-      l,
-      t || h || s.videoBlockTitle,
+    ) : x(
+      u,
+      o || h || l.videoBlockTitle,
       "fullscreen",
-      p
-    ) : L();
+      g
+    ) : P();
   };
-  return /* @__PURE__ */ d(f, { as: "div", className: "bce-block bce-block-video", textAlign: y.textAlign, children: Q() });
+  return /* @__PURE__ */ i(v, { as: "div", className: "bce-block bce-block-video", textAlign: I.textAlign, children: G() });
 }
-function Ht({
+function Tn({
   size: e = 100,
-  align: o = "center",
+  align: t = "center",
   cornerStyle: r = "rounded"
 }) {
-  const t = Ie(o, e, r);
-  return /* @__PURE__ */ d(f, { as: "div", textAlign: t.textAlign, children: /* @__PURE__ */ d(
-    f,
+  const o = ho(t, e, r);
+  return /* @__PURE__ */ i(v, { as: "div", textAlign: o.textAlign, children: /* @__PURE__ */ i(
+    v,
     {
       as: "span",
       display: "inline-block",
-      width: t.width,
+      width: o.width,
       maxWidth: "100%",
-      borderRadius: t.borderRadius,
+      borderRadius: o.borderRadius,
       background: "secondary",
       overflowX: "hidden",
       overflowY: "hidden",
-      children: /* @__PURE__ */ d(
+      children: /* @__PURE__ */ i(
         "div",
         {
           style: {
-            aspectRatio: t.aspectRatio,
+            aspectRatio: o.aspectRatio,
             width: "100%",
             display: "flex",
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ d(z, { color: "secondary", children: "Video" })
+          children: /* @__PURE__ */ i(S, { color: "secondary", children: "Video" })
         }
       )
     }
   ) });
 }
-const rt = a.enum(["file", "link"]), nt = a.object({
+const An = s.enum(["file", "link"]), Sn = s.object({
   // How the video is supplied: an uploaded file (resolved via the asset context)
   // or an external link (YouTube/Vimeo). Set by the editor, not shown as a field.
-  source: rt.default("file").zodHidden(),
+  source: An.default("file").zodHidden(),
   // Opaque host asset id; the host resolves it to a playable URL via the asset context.
-  asset_id: a.string().zodLabel("Video").zodVideo(),
-  video_url: a.string().optional().zodHidden(),
-  alt: a.string().zodLabel("Alt Text").zodHelp("Required for accessibility"),
-  size: a.number().min(20).max(100).default(100).zodRange({ min: 20, max: 100, step: 10, formatValue: "%" }).zodLabel("Size").zodHelp("Video width as percentage"),
-  align: Oe.default("center").zodLabel("Alignment").zodHelp("Horizontal alignment of the video"),
+  asset_id: s.string().zodLabel("Video").zodVideo(),
+  video_url: s.string().optional().zodHidden(),
+  alt: s.string().zodLabel("Alt Text").zodHelp("Required for accessibility"),
+  size: s.number().min(20).max(100).default(100).zodRange({ min: 20, max: 100, step: 10, formatValue: "%" }).zodLabel("Size").zodHelp("Video width as percentage"),
+  align: Jt.default("center").zodLabel("Alignment").zodHelp("Horizontal alignment of the video"),
   // `.default(x).optional()` (optional outermost) keeps this optional in the inferred
   // props; the default is applied by the component and `VideoBlockDefaultProps`, not by
   // schema `.parse()`.
-  cornerStyle: D.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded corners or sharp square corners")
-}), Mt = {
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded corners or sharp square corners")
+}), zn = {
   source: "file",
   asset_id: "",
   video_url: "",
@@ -1336,50 +1534,2233 @@ const rt = a.enum(["file", "link"]), nt = a.object({
   size: 100,
   align: "center",
   cornerStyle: "rounded"
-}, Zt = I(
-  nt,
+}, Rn = ne(
+  Sn,
   "VideoBlock"
-);
+), rd = ie({
+  wireName: "VideoBlock",
+  component: xn,
+  schema: Rn,
+  defaultProps: zn,
+  english: uo,
+  renderDragPreview: Tn
+}), mo = {
+  tabsBlockItemPlaceholderTitle: "Tab %{index}",
+  tabsBlockItemPlaceholderContent: "Your content here..."
+}, fo = (e) => e === "rounded" ? "large" : "0", In = {
+  pill: "pill",
+  rounded: "medium",
+  square: "0"
+}, it = (e, t) => e === "full-width" || t === "left" ? "start" : "center", Ce = "xx-small small", at = (e, t) => ({
+  view: {
+    background: "transparent",
+    borderWidth: e,
+    borderColor: "transparent",
+    borderRadius: t,
+    padding: Ce
+  }
+});
+function Ln(e) {
+  const { outline: t, cornerStyle: r, tabsWidth: o, alignment: n, brandColor: a } = e, d = "none none medium none", c = ue(a, "light");
+  return {
+    container: {
+      borderWidth: t === "outline" ? "small" : "0",
+      borderColor: "secondary",
+      borderRadius: fo(r),
+      padding: "none medium"
+    },
+    row: {
+      view: { padding: "small none none none" },
+      justifyItems: it(o, n)
+    },
+    // The selected tab is marked by a rule beneath it. Every tab reserves that edge so
+    // selecting one doesn't shift the row.
+    getTab: (l) => l ? {
+      view: {
+        background: "transparent",
+        borderWidth: d,
+        borderColor: "brand",
+        borderRadius: "0",
+        padding: Ce,
+        themeOverride: c ? { borderColorBrand: c.color } : void 0
+      }
+    } : at(d, "0"),
+    panel: { padding: "small none" },
+    overlapsPanel: !1
+  };
+}
+function On(e) {
+  const {
+    outline: t,
+    cornerStyle: r,
+    tabsRowBackground: o,
+    tabsWidth: n,
+    alignment: a,
+    selectedTabStyle: d,
+    selectedTabCorners: c,
+    brandColor: l
+  } = e, u = ue(l, "light"), h = In[c], g = o === "filled";
+  return {
+    container: {
+      background: "primary",
+      borderWidth: t === "outline" ? "small" : "0",
+      borderColor: "secondary",
+      borderRadius: fo(r),
+      padding: "medium medium none medium"
+    },
+    row: {
+      view: g ? {
+        background: u ? "brand" : "secondary",
+        borderRadius: h,
+        padding: "xx-small",
+        themeOverride: u ? { backgroundBrand: u.color } : void 0
+      } : { padding: "none" },
+      justifyItems: it(n, a)
+    },
+    getTab: (p) => p ? d === "filled" ? {
+      view: {
+        background: "brand",
+        borderWidth: "small",
+        borderColor: "transparent",
+        borderRadius: h,
+        padding: Ce,
+        themeOverride: u ? { backgroundBrand: u.color } : void 0
+      },
+      textColor: u ? "primary" : "primary-inverse",
+      textThemeOverride: u ? { primaryColor: u.textColor } : void 0
+    } : {
+      view: {
+        background: "transparent",
+        borderWidth: "small",
+        borderColor: "brand",
+        borderRadius: h,
+        padding: Ce,
+        themeOverride: u ? { borderColorBrand: u.color } : void 0
+      }
+    } : at("small", h),
+    panel: { padding: "small none" },
+    overlapsPanel: !1
+  };
+}
+const Nn = {
+  light: {
+    override: (e) => ({
+      backgroundBrand: e.backgroundBrand,
+      borderColorBrand: e.backgroundBrand
+    }),
+    inverseText: !0
+  },
+  dark: {
+    override: (e) => ({
+      backgroundBrand: e.backgroundPrimaryInverse,
+      borderColorBrand: e.backgroundPrimaryInverse
+    }),
+    inverseText: !0
+  },
+  neutral: {
+    override: (e) => ({
+      backgroundBrand: e.backgroundSecondary,
+      borderColorBrand: e.backgroundSecondary
+    }),
+    inverseText: !1
+  }
+};
+function En(e) {
+  const { color: t, tabsWidth: r, alignment: o, selectedTabStyle: n, activeIndex: a, tabCount: d, brandColor: c } = e, l = t === "neutral" ? void 0 : ue(c, t), u = Nn[t], h = l ? { backgroundBrand: l.color, borderColorBrand: l.color } : u.override, g = !l && u.inverseText, p = "large large 0 0", C = r === "full-width", T = a === 0 && (C || o === "left"), I = a === d - 1 && C, x = `${T ? "0" : "large"} ${I ? "0" : "large"} large large`;
+  return {
+    container: { padding: "none" },
+    row: { view: { padding: "none" }, justifyItems: it(r, o) },
+    getTab: (P) => P ? n === "filled" ? {
+      view: {
+        background: "brand",
+        borderWidth: "small small none small",
+        borderColor: "brand",
+        borderRadius: p,
+        padding: Ce,
+        themeOverride: h
+      },
+      textColor: g ? "primary-inverse" : "primary",
+      textThemeOverride: l ? { primaryColor: l.textColor } : void 0
+    } : {
+      view: {
+        background: "primary",
+        borderWidth: "small small none small",
+        borderColor: "brand",
+        borderRadius: p,
+        padding: Ce,
+        themeOverride: h
+      }
+    } : at("small small none small", p),
+    panel: {
+      background: "primary",
+      borderWidth: "small",
+      borderColor: "brand",
+      borderRadius: x,
+      padding: "medium",
+      themeOverride: h
+    },
+    overlapsPanel: !0
+  };
+}
+function Pn(e) {
+  switch (e.style) {
+    case "folder":
+      return En(e);
+    case "simple":
+      return Ln(e);
+    case "segments":
+      return On(e);
+  }
+}
+function Bn({ itemCount: e, onSelect: t }) {
+  return { handleKeyDown: J(
+    (o, n) => {
+      if (e === 0)
+        return;
+      let a;
+      switch (o.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+          a = (n + 1) % e;
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+          a = (n - 1 + e) % e;
+          break;
+        case "Home":
+          a = 0;
+          break;
+        case "End":
+          a = e - 1;
+          break;
+        default:
+          return;
+      }
+      o.preventDefault(), a !== n && t(a);
+    },
+    [e, t]
+  ) };
+}
+const Mn = (e) => {
+  try {
+    return e.matches(":focus-visible");
+  } catch {
+    return !0;
+  }
+}, _n = {
+  position: "relative",
+  zIndex: 1,
+  marginBottom: "-1px"
+}, $n = { display: "none" };
+function Hn({
+  title: e,
+  variant: t = "h2",
+  supportingText: r,
+  tabs: o = [],
+  style: n = "segments",
+  outline: a = "outline",
+  color: d = "light",
+  cornerStyle: c = "rounded",
+  tabsRowBackground: l = "none",
+  tabsWidth: u = "full-width",
+  alignment: h = "left",
+  selectedTabStyle: g = "filled",
+  selectedTabCorners: p = "pill",
+  editingItemId: C
+}) {
+  var y;
+  const T = le(), { translations: I, translate: x } = Y(mo), P = he(), G = jt(), M = o.length, [D, F] = j(C ?? ((y = o[0]) == null ? void 0 : y.id)), [te, q] = j(C), [Z, W] = j(null), K = re(/* @__PURE__ */ new Map());
+  C !== te && (q(C), C !== void 0 && F(C));
+  const ae = o.findIndex((m) => m.id === D), $ = ae >= 0 ? ae : 0, z = ee(
+    () => Pn({
+      style: n,
+      outline: a,
+      color: d,
+      cornerStyle: c,
+      tabsRowBackground: l,
+      tabsWidth: u,
+      alignment: h,
+      selectedTabStyle: g,
+      selectedTabCorners: p,
+      activeIndex: $,
+      tabCount: M,
+      brandColor: P
+    }),
+    [
+      n,
+      a,
+      d,
+      c,
+      l,
+      u,
+      h,
+      g,
+      p,
+      $,
+      M,
+      P
+    ]
+  ), { handleKeyDown: N } = Bn({
+    itemCount: M,
+    onSelect: (m) => {
+      var R, E;
+      const b = (R = o[m]) == null ? void 0 : R.id;
+      b !== void 0 && (F(b), (E = K.current.get(b)) == null || E.focus());
+    }
+  }), f = (e || r) && /* @__PURE__ */ w(v, { as: "div", margin: "none none medium none", children: [
+    e && /* @__PURE__ */ i(ke, { level: t, children: e }),
+    r && /* @__PURE__ */ i(S, { as: "p", color: "secondary", children: r })
+  ] });
+  return M === 0 ? /* @__PURE__ */ i(v, { as: "div", className: "bce-block bce-block-tabs", children: /* @__PURE__ */ i("div", { style: U, children: f }) }) : /* @__PURE__ */ i(v, { as: "div", className: "bce-block bce-block-tabs", children: /* @__PURE__ */ w("div", { style: U, children: [
+    f,
+    /* @__PURE__ */ w(v, { as: "div", ...z.container, children: [
+      /* @__PURE__ */ i("div", { style: z.overlapsPanel ? _n : void 0, children: /* @__PURE__ */ i(v, { as: "div", role: "tablist", ...z.row.view, children: /* @__PURE__ */ i(k, { justifyItems: z.row.justifyItems, alignItems: "stretch", children: o.map((m, b) => {
+        const R = b === $, E = T && !m.label && !m.content, { view: _, textColor: H, textThemeOverride: O } = z.getTab(R);
+        return /* @__PURE__ */ i(k.Item, { shouldGrow: u === "full-width", shouldShrink: !0, children: /* @__PURE__ */ i(
+          v,
+          {
+            as: "button",
+            type: "button",
+            role: "tab",
+            id: `${G}-tab-${b}`,
+            "aria-selected": R,
+            "aria-controls": `${G}-panel-${b}`,
+            tabIndex: R ? 0 : -1,
+            elementRef: (B) => {
+              B ? K.current.set(m.id, B) : K.current.delete(m.id);
+            },
+            onClick: () => F(m.id),
+            onKeyDown: (B) => N(B, b),
+            onFocus: (B) => {
+              Mn(B.currentTarget) && W(m.id);
+            },
+            onBlur: () => W(null),
+            display: "block",
+            width: "100%",
+            minWidth: "0",
+            cursor: "pointer",
+            textAlign: "center",
+            ..._,
+            withFocusOutline: Z === m.id,
+            focusPosition: "offset",
+            children: /* @__PURE__ */ i(
+              S,
+              {
+                size: "small",
+                weight: R ? "bold" : "normal",
+                color: H,
+                themeOverride: O,
+                children: E ? x("tabsBlockItemPlaceholderTitle", { index: b + 1 }) : m.label
+              }
+            )
+          }
+        ) }, m.id);
+      }) }) }) }),
+      /* @__PURE__ */ i(v, { as: "div", ...z.panel, children: o.map((m, b) => {
+        const R = T && !m.label && !m.content, E = b === $;
+        return /* @__PURE__ */ i(
+          "div",
+          {
+            role: "tabpanel",
+            id: `${G}-panel-${b}`,
+            "aria-labelledby": `${G}-tab-${b}`,
+            hidden: !E,
+            style: E ? void 0 : $n,
+            children: R ? /* @__PURE__ */ i(S, { color: "secondary", children: I.tabsBlockItemPlaceholderContent }) : /* @__PURE__ */ i(tt, { html: m.content })
+          },
+          m.id
+        );
+      }) })
+    ] })
+  ] }) });
+}
+const Dn = s.enum(["simple", "folder", "segments"]), Wn = s.enum(["outline", "none"]), jn = s.enum(["none", "filled"]), Vn = s.enum(["full-width", "relative"]), Fn = s.enum(["left", "center"]), Zn = s.enum(["filled", "outline"]), Gn = s.enum(["pill", "rounded", "square"]), zt = 5, Un = s.object({
+  id: s.string().zodHidden(),
+  // The cap keeps a title on one line at the widths the tab row allows; past it the
+  // row either wraps into several lines or squeezes its neighbours out of legibility.
+  label: s.string().max(25).zodLabel("Title").zodHelp("Display text for this tab"),
+  content: s.string().zodRichText().zodLabel("Content").zodHelp("Rich text content displayed when this tab is selected")
+}), qn = s.object({
+  title: s.string().optional().zodTextarea().zodLabel("Heading text (optional)").zodHelp("Optional heading displayed above the tabs"),
+  variant: rt.default("h2").optional().zodLabel("Heading level").zodHelp("Semantic heading level - determines text size automatically"),
+  supportingText: s.string().optional().zodTextarea().zodLabel("Supporting text (optional)").zodHelp("Optional paragraph content below the heading"),
+  /*
+   * Deliberately not `.zodManageLayer()`, unlike Accordion's `items`. That opt-in only
+   * collapses an inline list behind a "Manage" panel once it reaches the host's
+   * threshold — which is also 5 — so on a field capped at 5 it could only ever trigger
+   * at full capacity. The per-item Edit button that drives `editingItemId` comes from
+   * the array renderer itself and does not depend on it.
+   */
+  tabs: s.array(Un).min(1).max(zt).zodLabel(`Tabs (up to ${zt})`).zodItemLabel("label").zodItemName("Tab").zodHelp("Add tabs with labels and content"),
+  // `.default(x).optional()` (optional outermost) is intentional, as in Accordion: the
+  // default is applied by the component and `TabsBlockDefaultProps`, not by schema
+  // `.parse()`, so a host may omit any style field when constructing props.
+  style: Dn.default("segments").optional().zodLabel("Style").zodHelp("Visual style of the tab row"),
+  outline: Wn.default("outline").optional().zodLabel("Outline").zodHelp("Border around the content panel").zodHiddenWhen({ field: "style", values: ["folder"] }),
+  color: Te.default("light").optional().zodLabel("Color").zodHelp("Light or dark color scheme").zodHiddenWhen({ field: "style", values: ["segments", "simple"] }),
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Corner style of the overall container").zodHiddenWhen({ field: "style", values: ["folder"] }),
+  tabsRowBackground: jn.default("none").optional().zodLabel("Tabs row background").zodHelp("Background fill behind the tab row").zodHiddenWhen({ field: "style", values: ["folder", "simple"] }),
+  tabsWidth: Vn.default("full-width").optional().zodLabel("Tabs width").zodHelp("Whether tabs stretch to fill the full width"),
+  alignment: Fn.default("left").optional().zodLabel("Alignment").zodHelp("Tab row alignment when not full width").zodHiddenWhen({ field: "tabsWidth", values: ["full-width"] }),
+  selectedTabStyle: Zn.default("filled").optional().zodLabel("Selected tab").zodHelp("Style of the active tab indicator").zodHiddenWhen({ field: "style", values: ["simple"] }),
+  selectedTabCorners: Gn.default("pill").optional().zodLabel("Selected tab corners").zodHelp("Corner style of the active tab").zodHiddenWhen({ field: "style", values: ["folder", "simple"] })
+}), He = {
+  variant: "h2",
+  tabs: [
+    { id: "tab-default-1", label: "", content: "" },
+    { id: "tab-default-2", label: "", content: "" },
+    { id: "tab-default-3", label: "", content: "" }
+  ],
+  style: "segments",
+  outline: "outline",
+  color: "light",
+  cornerStyle: "rounded",
+  tabsRowBackground: "none",
+  tabsWidth: "full-width",
+  alignment: "left",
+  selectedTabStyle: "filled",
+  selectedTabCorners: "pill"
+};
+for (const e of He.tabs)
+  Object.freeze(e);
+Object.freeze(He.tabs);
+Object.freeze(He);
+const Xn = ne(
+  qn,
+  "TabsBlock"
+), nd = ie({
+  wireName: "TabsBlock",
+  component: Hn,
+  schema: Xn,
+  defaultProps: He,
+  english: mo
+}), dt = {
+  flashCardsTitle: "Flashcards",
+  flashCardsPlaceholder: "Add flashcards...",
+  flashCardsFrontLabel: "Front",
+  flashCardsBackLabel: "Back",
+  flashCardsFlipHint: "Click to flip",
+  flashCardsCounter: "%{current} of %{total}",
+  flashCardsCardAnnouncement: "Card %{current} of %{total}: %{question}",
+  flashCardsPreviousCard: "Previous card",
+  flashCardsNextCard: "Next card",
+  flashCardsFrontAriaLabel: "Front: %{question}. Click to see answer.",
+  flashCardsBackAriaLabel: "Back: %{answer}. Click to see question."
+};
+function Ee(e) {
+  const t = [...e];
+  for (let r = t.length - 1; r > 0; r--) {
+    const o = Math.floor(Math.random() * (r + 1));
+    [t[r], t[o]] = [t[o], t[r]];
+  }
+  return t;
+}
+const Yn = "300ms";
+function po() {
+  const { transitions: e } = Eo();
+  return Number.parseFloat((e == null ? void 0 : e.duration) ?? Yn) !== 0;
+}
+const De = "120px", bo = 450, Kn = "cubic-bezier(0.22, 0.61, 0.36, 1)", Qn = "480px", Jn = "400px", ei = "1rem", ti = Me`
+  from { transform: translateX(${De}); opacity: 0; }
+  35%  { opacity: 1; }
+  to   { transform: translateX(0);         opacity: 1; }
+`, oi = Me`
+  from { transform: translateX(-${De}); opacity: 0; }
+  35%  { opacity: 1; }
+  to   { transform: translateX(0);          opacity: 1; }
+`, ri = Me`
+  from { transform: translateX(0);          opacity: 1; }
+  45%  { opacity: 0; }
+  to   { transform: translateX(-${De}); opacity: 0; }
+`, ni = Me`
+  from { transform: translateX(0);         opacity: 1; }
+  45%  { opacity: 0; }
+  to   { transform: translateX(${De}); opacity: 0; }
+`, A = {
+  /** The deck itself, and the ancestor every rule below can rely on. */
+  root: "bce-block-flashcards",
+  /** Set on the deck when motion is switched off; see `useMotionEnabled`. */
+  motionOff: "bce-flashcards-no-motion",
+  viewport: "bce-flashcards-viewport",
+  layer: "bce-flashcards-layer",
+  flip: "bce-flashcards-flip",
+  inner: "bce-flashcards-inner",
+  flipped: "bce-flashcards-flipped",
+  face: "bce-flashcards-face",
+  faceBack: "bce-flashcards-face-back",
+  faceText: "bce-flashcards-face-text",
+  /** Carries the live region's text, which has nothing to show a sighted reader. */
+  srOnly: "bce-flashcards-sr-only"
+}, me = {
+  enter: {
+    next: "bce-flashcards-enter-next",
+    prev: "bce-flashcards-enter-prev",
+    none: ""
+  },
+  exit: {
+    next: "bce-flashcards-exit-next",
+    prev: "bce-flashcards-exit-prev",
+    none: ""
+  }
+};
+function Rt(e, t) {
+  return `${A.layer} ${me[e][t]}`.trim();
+}
+const ii = Pe`
+  .${A.viewport} {
+    position: relative;
+    width: 100%;
+    max-width: ${Qn};
+    min-width: 0;
+    height: ${Jn};
+    margin: 0 auto;
+  }
+
+  .${A.layer} {
+    position: absolute;
+    inset: 0;
+    animation-duration: ${bo}ms;
+    animation-timing-function: ${Kn};
+    animation-fill-mode: both;
+  }
+
+  .${me.enter.next} { animation-name: ${ti}; }
+  .${me.enter.prev} { animation-name: ${oi}; }
+
+  /* The card being left behind is on its way out: inert, and never a hit target. */
+  .${me.exit.next},
+  .${me.exit.prev} {
+    pointer-events: none;
+  }
+  .${me.exit.next} { animation-name: ${ri}; }
+  .${me.exit.prev} { animation-name: ${ni}; }
+
+  .${A.flip} {
+    display: block;
+    width: 100%;
+    height: 100%;
+    padding: 0 ${ei};
+    box-sizing: border-box;
+    background: none;
+    border: none;
+    cursor: pointer;
+    perspective: 1000px;
+  }
+  .${A.flip}:disabled {
+    cursor: default;
+  }
+
+  .${A.inner} {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transform: rotateX(0deg);
+    transform-style: preserve-3d;
+    transform-origin: center center;
+    transition: transform 600ms ease;
+  }
+  .${A.inner}.${A.flipped} {
+    transform: rotateX(180deg);
+  }
+
+  /*
+   * The two faces are stacked in the same place and turn together; whichever is facing
+   * away is hidden. Nothing else belongs on them: a compositor hint or a nudge along Z
+   * both change how the browser rasterises the pair mid-turn, and both showed up as a
+   * flicker as the card passed edge-on.
+   */
+  .${A.inner} > .${A.face} {
+    /* The front face is in flow and gives the pair its height. */
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+    flex-direction: column;
+    justify-content: space-between;
+    backface-visibility: hidden;
+  }
+  .${A.inner} > .${A.faceBack} {
+    position: absolute;
+    inset: 0;
+    transform: rotateX(180deg);
+  }
+
+  /* Long text wraps and scrolls inside the card instead of stretching it. */
+  .${A.faceText} {
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+  }
+
+  /*
+   * Clipped rather than hidden: display none and visibility hidden both take the element
+   * out of the accessibility tree, which is the one thing this text is for.
+   */
+  .${A.srOnly} {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .${A.motionOff} .${A.layer} {
+    animation: none;
+  }
+  .${A.motionOff} .${A.inner} {
+    transition: none;
+  }
+
+  /*
+   * Qualified by the deck, like the rule above it: that outweighs the per-direction
+   * animation on specificity, rather than only on being written last.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    .${A.root} .${A.layer} {
+      animation: none;
+    }
+    .${A.root} .${A.inner} {
+      transition: none;
+    }
+  }
+`;
+function ai() {
+  return /* @__PURE__ */ i(Be, { styles: ii });
+}
+function It({
+  className: e,
+  label: t,
+  text: r,
+  hint: o,
+  face: n,
+  isFacingAway: a
+}) {
+  return /* @__PURE__ */ w(
+    v,
+    {
+      as: "div",
+      display: "flex",
+      ...n,
+      className: e,
+      "aria-hidden": a || void 0,
+      children: [
+        /* @__PURE__ */ i(S, { size: "small", children: t }),
+        /* @__PURE__ */ i("div", { className: A.faceText, style: U, children: /* @__PURE__ */ i(S, { size: "large", children: r }) }),
+        /* @__PURE__ */ i(S, { size: "small", color: "secondary", children: o })
+      ]
+    }
+  );
+}
+function Lt({
+  front: e,
+  back: t,
+  isFlipped: r,
+  onFlip: o,
+  face: n,
+  interactive: a = !0,
+  buttonRef: d
+}) {
+  const { translations: c, translate: l } = Y(dt);
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      ref: d,
+      className: A.flip,
+      disabled: !a,
+      onClick: o,
+      "aria-pressed": r,
+      "aria-label": r ? l("flashCardsBackAriaLabel", { answer: t ?? "" }) : l("flashCardsFrontAriaLabel", { question: e ?? "" }),
+      children: /* @__PURE__ */ w("div", { className: r ? `${A.inner} ${A.flipped}` : A.inner, children: [
+        /* @__PURE__ */ i(
+          It,
+          {
+            className: A.face,
+            label: c.flashCardsFrontLabel,
+            text: e,
+            hint: c.flashCardsFlipHint,
+            face: n,
+            isFacingAway: r
+          }
+        ),
+        /* @__PURE__ */ i(
+          It,
+          {
+            className: `${A.face} ${A.faceBack}`,
+            label: c.flashCardsBackLabel,
+            text: t,
+            hint: c.flashCardsFlipHint,
+            face: n,
+            isFacingAway: !r
+          }
+        )
+      ] })
+    }
+  );
+}
+function di(e, t, r) {
+  const o = t === "rounded" ? "large" : "0", n = { borderRadius: o, padding: "medium none" }, { styling: a } = nt(e, r), { view: d, text: c } = de(a, n);
+  return {
+    container: d,
+    text: c,
+    face: { background: "primary", shadow: "resting", borderRadius: o, padding: "medium" }
+  };
+}
+const li = Object.freeze([]);
+function Ot(e, t) {
+  return { key: e, order: e === null ? null : Ee(t) };
+}
+function Nt(e, t) {
+  return t && e !== null && document.activeElement === e;
+}
+function si({
+  cards: e = [],
+  randomize: t = !1,
+  colorTheme: r = "light",
+  cornerStyle: o = "rounded"
+}) {
+  const n = le(), { translations: a, translate: d } = Y(dt), c = he(), l = po(), { container: u, text: h, face: g } = ee(
+    () => di(r, o, c),
+    [r, o, c]
+  ), p = e ?? li, C = ee(
+    () => t && !n ? JSON.stringify(p.map(({ front: O, back: B }) => [O, B])) : null,
+    [p, t, n]
+  ), [T, I] = j(() => Ot(C, p));
+  let x = T;
+  x.key !== C && (x = Ot(C, p), I(x));
+  const P = x.order ?? p, [G, M] = j(0), [D, F] = j(!1), [te, q] = j("none"), [Z, W] = j(null), [K, ae] = j(""), $ = P.length, z = $ === 0 ? 0 : Math.max(0, Math.min(G, $ - 1)), N = P[z], f = re(null), y = re(null), m = re(null), b = re(!1), R = J(() => F((O) => !O), []), E = J(
+    (O, B, xo) => {
+      var ht;
+      if (l) {
+        const { front: To, back: Ao } = P[z] ?? {};
+        W({ front: To, back: Ao, direction: B, isFlipped: D });
+      }
+      F(!1), q(B), M(O);
+      const ut = { current: O + 1, total: $ }, Ae = (ht = P[O]) == null ? void 0 : ht.front;
+      ae(
+        Ae != null && Ae.trim() && !xo ? d("flashCardsCardAnnouncement", { ...ut, question: Ae }) : d("flashCardsCounter", ut)
+      );
+    },
+    [l, D, P, z, $, d]
+  ), _ = J(() => {
+    if (z < $ - 1) {
+      const O = z + 1, B = Nt(m.current, O === $ - 1);
+      b.current = B, E(O, "next", B);
+    }
+  }, [E, z, $]), H = J(() => {
+    if (z > 0) {
+      const O = z - 1, B = Nt(y.current, O === 0);
+      b.current = B, E(O, "prev", B);
+    }
+  }, [E, z]);
+  return ve(() => {
+    var O;
+    b.current && (b.current = !1, (O = f.current) == null || O.focus());
+  }, [z]), zo(() => {
+    G !== z && (M(z), F(!1), q("none"), W(null), ae(""));
+  }, [G, z]), ve(() => {
+    if (!Z)
+      return;
+    const O = setTimeout(() => W(null), bo + 50);
+    return () => clearTimeout(O);
+  }, [Z]), $ === 0 ? n ? /* @__PURE__ */ i(v, { as: "div", className: `bce-block ${A.root}`, children: /* @__PURE__ */ i(v, { as: "div", ...u, padding: "medium", textAlign: "center", children: /* @__PURE__ */ i(S, { color: h.color ?? "secondary", themeOverride: h.themeOverride, children: a.flashCardsPlaceholder }) }) }) : null : /* @__PURE__ */ w(
+    v,
+    {
+      as: "div",
+      ...u,
+      overflowX: "hidden",
+      overflowY: "hidden",
+      className: `bce-block ${A.root}${l ? "" : ` ${A.motionOff}`}`,
+      children: [
+        /* @__PURE__ */ i(ai, {}),
+        /* @__PURE__ */ i("div", { style: U, children: /* @__PURE__ */ w(k, { direction: "column", gap: "medium", children: [
+          /* @__PURE__ */ i(k.Item, { padding: "none medium", overflowX: "visible", overflowY: "visible", children: /* @__PURE__ */ i(S, { weight: "bold", color: h.color, themeOverride: h.themeOverride, children: a.flashCardsTitle }) }),
+          /* @__PURE__ */ i(k.Item, { overflowX: "visible", overflowY: "visible", children: /* @__PURE__ */ w("div", { className: A.viewport, children: [
+            Z && // Keyed like the entering card: navigating again before this one has
+            // finished must mount a fresh layer, or the browser sees the same element
+            // with the same animation and does not replay it.
+            /* @__PURE__ */ i(
+              "div",
+              {
+                className: Rt("exit", Z.direction),
+                onAnimationEnd: () => W(null),
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ i(
+                  Lt,
+                  {
+                    front: Z.front,
+                    back: Z.back,
+                    isFlipped: Z.isFlipped,
+                    face: g,
+                    interactive: !1
+                  }
+                )
+              },
+              `exit-${z}`
+            ),
+            /* @__PURE__ */ i("div", { className: Rt("enter", te), children: /* @__PURE__ */ i(
+              Lt,
+              {
+                front: N == null ? void 0 : N.front,
+                back: N == null ? void 0 : N.back,
+                isFlipped: D,
+                onFlip: R,
+                face: g,
+                buttonRef: f
+              }
+            ) }, `enter-${z}`)
+          ] }) }),
+          /* @__PURE__ */ i(k.Item, { overflowX: "visible", overflowY: "visible", children: /* @__PURE__ */ w(k, { gap: "small", alignItems: "center", justifyItems: "center", children: [
+            /* @__PURE__ */ i(k.Item, { children: /* @__PURE__ */ i(
+              pt,
+              {
+                screenReaderLabel: a.flashCardsPreviousCard,
+                renderIcon: No,
+                shape: "circle",
+                size: "small",
+                interaction: z <= 0 ? "disabled" : "enabled",
+                onClick: H,
+                elementRef: (O) => {
+                  y.current = O instanceof HTMLButtonElement ? O : null;
+                }
+              }
+            ) }),
+            /* @__PURE__ */ w(k.Item, { children: [
+              /* @__PURE__ */ i(S, { color: h.color, themeOverride: h.themeOverride, children: d("flashCardsCounter", {
+                current: z + 1,
+                total: $
+              }) }),
+              /* @__PURE__ */ i("output", { className: A.srOnly, children: K })
+            ] }),
+            /* @__PURE__ */ i(k.Item, { children: /* @__PURE__ */ i(
+              pt,
+              {
+                screenReaderLabel: a.flashCardsNextCard,
+                renderIcon: Vt,
+                shape: "circle",
+                size: "small",
+                interaction: z >= $ - 1 ? "disabled" : "enabled",
+                onClick: _,
+                elementRef: (O) => {
+                  m.current = O instanceof HTMLButtonElement ? O : null;
+                }
+              }
+            ) })
+          ] }) })
+        ] }) })
+      ]
+    }
+  );
+}
+const Et = 50, ci = s.object({
+  front: s.string().zodTextarea().zodLabel("Front").zodHelp("The question side of the card"),
+  back: s.string().zodTextarea().zodLabel("Back").zodHelp("The answer side of the card")
+}), ui = s.object({
+  cards: s.array(ci).max(Et).default([]).zodLabel(`Flashcards (up to ${Et})`).zodItemLabel("front").zodItemName("Flashcard").zodManageLayer("Flashcards").zodHelp("Cards in this deck, each with a question and an answer"),
+  // `.default(x).optional()` (optional outermost) is intentional: the default is applied
+  // by the component and `FlashCardsDefaultProps`, not by schema `.parse()`.
+  randomize: s.boolean().default(!1).optional().zodLabel("Randomize cards").zodHelp("Shuffle the card order each time"),
+  colorTheme: Te.default("light").optional().zodLabel("Color").zodHelp("Background color theme for the flashcard container"),
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Choose between rounded or sharp corners")
+}), We = {
+  cards: [
+    { front: "", back: "" },
+    { front: "", back: "" },
+    { front: "", back: "" }
+  ],
+  randomize: !1,
+  colorTheme: "light",
+  cornerStyle: "rounded"
+};
+for (const e of We.cards)
+  Object.freeze(e);
+Object.freeze(We.cards);
+Object.freeze(We);
+const hi = ne(
+  ui,
+  "FlashCards"
+), id = ie({
+  wireName: "FlashCards",
+  component: si,
+  schema: hi,
+  defaultProps: We,
+  english: dt
+}), lt = {
+  mixAndMatchTitle: "Mix and match",
+  mixAndMatchPlaceholder: "Add mix and match...",
+  mixAndMatchInstructions: "Click a card from the left and then right to pair.",
+  mixAndMatchCompleteTitle: "Nice work!",
+  mixAndMatchCompleteSubtitle: "You matched all the cards.",
+  mixAndMatchPracticeAgain: "Practice again",
+  mixAndMatchReset: "Reset",
+  mixAndMatchCorrect: "Correct match!",
+  mixAndMatchIncorrect: "Incorrect match, try again.",
+  mixAndMatchCloseFeedback: "Close match feedback message",
+  mixAndMatchTermAriaLabel: "Term: %{text}",
+  mixAndMatchDefinitionAriaLabel: "Definition: %{text}",
+  mixAndMatchProgress: "%{matched} of %{total} matched",
+  mixAndMatchProgressShort: "%{matched}/%{total}"
+}, mi = {
+  default: { borderWidth: "small", borderColor: "transparent" },
+  selected: { borderWidth: "small small large large", borderColor: "brand" },
+  correct: { borderWidth: "small small large large", borderColor: "success" },
+  incorrect: { borderWidth: "small small large large", borderColor: "danger" }
+};
+function fi(e) {
+  return mi[e];
+}
+function pi(e, t, r) {
+  const o = t === "rounded" ? "large" : "0", n = { borderRadius: o, padding: "medium" }, { styling: a, isDarkSurface: d } = nt(e, r), { view: c, text: l } = de(a, n), u = ue(r, "dark");
+  return {
+    container: c,
+    text: l,
+    card: {
+      background: "primary",
+      shadow: "resting",
+      borderRadius: o,
+      padding: "medium",
+      themeOverride: u ? { borderColorBrand: u.color, focusColorInfo: u.color } : void 0
+    },
+    focusColor: d ? "inverse" : "info",
+    progressColor: d ? "primary-inverse" : "primary"
+  };
+}
+const bi = "640px", Pt = 400, Bt = "0.75rem", L = {
+  /**
+   * The activity's outermost element. It carries `container-type`, so it is also the
+   * ancestor every `@container` rule below resolves against — which is why the padded
+   * panel has to be a separate element inside it rather than this one.
+   */
+  root: "bce-block-mixandmatch",
+  /** Set on the root when motion is switched off; see `useMotionEnabled`. */
+  motionOff: "bce-mixandmatch-no-motion",
+  panel: "bce-mixandmatch-panel",
+  grid: "bce-mixandmatch-grid",
+  column: "bce-mixandmatch-column",
+  card: "bce-mixandmatch-card",
+  /** A matched card: still laid out, so the cards below it do not jump up the column. */
+  cardMatched: "bce-mixandmatch-card-matched"
+}, gi = Pe`
+  .${L.root} {
+    container-type: inline-size;
+    width: 100%;
+  }
+
+  .${L.grid} {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3rem;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .${L.column} {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    min-width: 0;
+  }
+
+  /*
+   * Both transitions are declared together: split across two rules, the more specific one
+   * would replace the other outright rather than adding to it.
+   */
+  .${L.root} .${L.card} {
+    display: block;
+    width: 100%;
+    min-width: 0;
+    min-height: 8.125rem;
+    box-sizing: border-box;
+    cursor: pointer;
+    text-align: start;
+    transition:
+      border-color 0.15s ease,
+      opacity ${Pt}ms ease,
+      visibility 0s linear ${Pt}ms;
+  }
+
+  .${L.root} .${L.card}:disabled {
+    cursor: default;
+  }
+
+  /*
+   * A matched card keeps its space but leaves the tab order and the a11y tree. The
+   * visibility delay above matches the fade, so it stays hittable for exactly as long as
+   * it is still visible.
+   */
+  .${L.root} .${L.cardMatched} {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  /*
+   * Narrow columns wrap the text far more, so the cards need height and the padding has
+   * to give some width back. Both override a token the element sets on itself, hence the
+   * child selectors.
+   */
+  @container (max-width: ${bi}) {
+    .${L.grid} {
+      gap: 0.5rem;
+    }
+    .${L.root} > .${L.panel} {
+      padding: ${Bt};
+    }
+    .${L.root} .${L.card} {
+      min-height: 12.5rem;
+      padding: ${Bt};
+    }
+  }
+
+  /*
+   * Buttons are swept up alongside the cards because InstUI animates its own focus ring
+   * from a hardcoded 0.2s that reads nothing from the theme, and Button — unlike View —
+   * exposes no way to switch it off. Both selectors outweigh the single emotion class
+   * InstUI declares that transition in.
+   */
+  .${L.motionOff} .${L.card},
+  .${L.motionOff} button {
+    transition: none;
+  }
+
+  /*
+   * Qualified by the root, like the rule above it: that outweighs the card's own
+   * transition on specificity, rather than only on being written last.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    .${L.root} .${L.card},
+    .${L.root} button {
+      transition: none;
+    }
+  }
+`;
+function vi() {
+  return /* @__PURE__ */ i(Be, { styles: gi });
+}
+const Mt = 100;
+function _t({
+  text: e,
+  state: t,
+  matched: r,
+  card: o,
+  disabled: n,
+  ariaDisabled: a,
+  label: d,
+  pressed: c,
+  onClick: l,
+  elementRef: u
+}) {
+  const h = e.length > Mt, g = h ? `${e.slice(0, Mt)}…` : e;
+  return /* @__PURE__ */ i(
+    v,
+    {
+      ...o,
+      ...fi(t),
+      as: "button",
+      type: "button",
+      focusPosition: "inset",
+      disabled: n,
+      "aria-disabled": a || void 0,
+      "aria-label": d,
+      "aria-pressed": c,
+      onClick: l,
+      elementRef: u,
+      className: `${L.card}${r ? ` ${L.cardMatched}` : ""}`,
+      children: /* @__PURE__ */ i("div", { style: U, title: h ? e : void 0, children: /* @__PURE__ */ i(S, { children: g }) })
+    }
+  );
+}
+const Ci = 600, yi = 1e3, $t = "\0", ki = "
";
+function wi(e, t, r) {
+  const o = e.map((n) => `${n.term}${$t}${n.definition}`).join(ki);
+  return [t, String(r), o].join($t);
+}
+function fe(e) {
+  return e.state === "correct" || e.matched;
+}
+function go(e) {
+  return !e.matched && (e.state === "correct" || e.state === "incorrect");
+}
+function xi(e, t) {
+  return !go(e) && (fe(e) || !t);
+}
+function Ti(e) {
+  return e === null || e === document.body ? !1 : e.isConnected && !e.matches(":disabled");
+}
+function Ht(e, t) {
+  return e.map((r, o) => ({
+    id: `${t}-${o}`,
+    text: t === "term" ? r.term : r.definition,
+    pairIndex: o,
+    state: "default",
+    matched: !1
+  }));
+}
+function Ai(e, t, r) {
+  const o = t === "on" && !r ? Ee(e) : e, n = Ht(o, "definition");
+  return {
+    terms: Ht(o, "term"),
+    // Shuffled whatever `randomizeCards` says: left in step the two columns line up row by
+    // row and the activity answers itself.
+    definitions: r ? n : Ee(n)
+  };
+}
+function Si({
+  pairs: e = [],
+  randomizeCards: t = "on",
+  colorTheme: r = "light",
+  cornerStyle: o = "rounded"
+}) {
+  const n = le(), { translations: a } = Y(lt), d = he(), c = ee(
+    () => pi(r, o, d),
+    [r, o, d]
+  ), l = e ?? [];
+  return l.length === 0 ? n ? /* @__PURE__ */ i(v, { as: "div", className: `bce-block ${L.root}`, children: /* @__PURE__ */ i(v, { as: "div", ...c.container, className: L.panel, textAlign: "center", children: /* @__PURE__ */ i(S, { color: c.text.color ?? "secondary", themeOverride: c.text.themeOverride, children: a.mixAndMatchPlaceholder }) }) }) : null : /* @__PURE__ */ i(
+    zi,
+    {
+      pairs: l,
+      randomizeCards: t,
+      isDesignerMode: n,
+      view: c
+    },
+    wi(l, t, n)
+  );
+}
+function zi({ pairs: e, randomizeCards: t, isDesignerMode: r, view: o }) {
+  const { translations: n, translate: a } = Y(lt), d = po(), [c] = j(() => Ai(e, t, r)), [l, u] = j(c.terms), [h, g] = j(c.definitions), [p, C] = j(null), [T, I] = j(null), x = re([]), P = re(/* @__PURE__ */ new Map()), G = re(null), M = re(null), D = re(null), F = J(() => {
+    for (const f of x.current)
+      clearTimeout(f);
+    x.current = [], D.current = null;
+  }, []), te = J((f, y) => {
+    const m = setTimeout(() => {
+      x.current = x.current.filter((b) => b !== m), f();
+    }, y);
+    return x.current.push(m), m;
+  }, []), q = J(() => {
+    const f = D.current;
+    f !== null && (clearTimeout(f), x.current = x.current.filter((y) => y !== f), D.current = null);
+  }, []);
+  ve(() => F, [F]), ve(() => {
+    var y, m;
+    const f = M.current;
+    f && (M.current = null, !Ti(document.activeElement) && (f === "restart" ? (y = G.current) == null || y.focus() : (m = P.current.get(f)) == null || m.focus()));
+  });
+  const Z = l.filter((f) => f.matched).length, W = l.length, K = Z === W, ae = J((f, y) => {
+    I((m) => ({ seq: ((m == null ? void 0 : m.seq) ?? 0) + 1, variant: f, message: y }));
+  }, []), $ = J(() => {
+    var f;
+    F(), u(c.terms), g(c.definitions), C(null), I(null), M.current = ((f = c.terms[0]) == null ? void 0 : f.id) ?? null;
+  }, [c, F]), z = J(
+    (f) => {
+      if (l.some((m) => m.id === f && fe(m)))
+        return;
+      q(), I(null);
+      const y = p === f;
+      C(y ? null : f), u(
+        (m) => m.map((b) => {
+          if (fe(b))
+            return b;
+          const R = !y && b.id === f ? "selected" : "default";
+          return b.state === R ? b : { ...b, state: R };
+        })
+      ), g(
+        (m) => m.map(
+          (b) => b.state === "incorrect" ? { ...b, state: "default" } : b
+        )
+      );
+    },
+    [p, l, q]
+  ), N = J(
+    (f) => {
+      if (!p)
+        return;
+      const y = h.find((_) => _.id === f), m = l.find((_) => _.id === p);
+      if (!y || !m || fe(y) || fe(m))
+        return;
+      const b = y.pairIndex === m.pairIndex, R = (_) => _.id === p || _.id === f, E = (_) => (H) => R(H) ? { ...H, state: _ } : H;
+      if (C(null), u((_) => _.map(E(b ? "correct" : "incorrect"))), g((_) => _.map(E(b ? "correct" : "incorrect"))), b) {
+        ae("success", n.mixAndMatchCorrect);
+        const _ = l.filter((H) => !fe(H) && H.id !== p);
+        te(() => {
+          var O;
+          const H = (B) => R(B) ? { ...B, matched: !0 } : B;
+          u((B) => B.map(H)), g((B) => B.map(H)), M.current = ((O = _[0]) == null ? void 0 : O.id) ?? "restart";
+        }, Ci);
+        return;
+      }
+      ae("error", n.mixAndMatchIncorrect), D.current = te(() => {
+        D.current = null;
+        const _ = (H) => R(H) && H.state === "incorrect" ? { ...H, state: "default" } : H;
+        u((H) => H.map(_)), g((H) => H.map(_)), M.current = p;
+      }, yi);
+    },
+    [p, h, l, ae, te, n]
+  );
+  return /* @__PURE__ */ w(
+    v,
+    {
+      as: "div",
+      className: `bce-block ${L.root}${d ? "" : ` ${L.motionOff}`}`,
+      children: [
+        /* @__PURE__ */ i(vi, {}),
+        /* @__PURE__ */ i(et, { as: "div", children: /* @__PURE__ */ i("div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: K ? (
+          /*
+           * The completion panel swaps in silently — a screen reader would hear only the
+           * name of the button focus lands on — so the finish goes through the same region
+           * the match feedback does. `aria-atomic` reads the two sentences as one
+           * announcement, which is how they are shown.
+           */
+          /* @__PURE__ */ w("span", { children: [
+            n.mixAndMatchCompleteTitle,
+            " ",
+            n.mixAndMatchCompleteSubtitle
+          ] }, "complete")
+        ) : T && /* @__PURE__ */ i("span", { children: T.message }, T.seq) }) }),
+        /* @__PURE__ */ i(v, { as: "div", ...o.container, className: L.panel, children: /* @__PURE__ */ w(k, { direction: "column", gap: "medium", children: [
+          /* @__PURE__ */ w(k.Item, { overflowX: "visible", overflowY: "visible", children: [
+            /* @__PURE__ */ i(
+              S,
+              {
+                weight: "bold",
+                transform: "uppercase",
+                color: o.text.color,
+                themeOverride: o.text.themeOverride,
+                children: n.mixAndMatchTitle
+              }
+            ),
+            !K && /* @__PURE__ */ i(v, { as: "div", padding: "x-small none none", children: /* @__PURE__ */ i(S, { color: o.text.color, themeOverride: o.text.themeOverride, children: n.mixAndMatchInstructions }) })
+          ] }),
+          K ? /* @__PURE__ */ i(k.Item, { overflowX: "visible", overflowY: "visible", children: /* @__PURE__ */ w(v, { as: "div", padding: "large none", textAlign: "center", children: [
+            /* @__PURE__ */ i(
+              S,
+              {
+                as: "div",
+                size: "xx-large",
+                weight: "bold",
+                color: o.text.color,
+                themeOverride: o.text.themeOverride,
+                children: n.mixAndMatchCompleteTitle
+              }
+            ),
+            /* @__PURE__ */ i(v, { as: "div", padding: "x-small none medium", children: /* @__PURE__ */ i(S, { color: o.text.color, themeOverride: o.text.themeOverride, children: n.mixAndMatchCompleteSubtitle }) }),
+            /* @__PURE__ */ i(
+              Ne,
+              {
+                color: "primary",
+                focusColor: o.focusColor,
+                onClick: $,
+                elementRef: (f) => {
+                  G.current = f instanceof HTMLElement ? f : null;
+                },
+                children: n.mixAndMatchPracticeAgain
+              }
+            )
+          ] }) }) : /* @__PURE__ */ w(ye, { children: [
+            /* @__PURE__ */ i(k.Item, { overflowX: "visible", overflowY: "visible", children: /* @__PURE__ */ w(k, { gap: "small", alignItems: "center", children: [
+              /* @__PURE__ */ i(k.Item, { shouldGrow: !0, shouldShrink: !0, children: /* @__PURE__ */ i(
+                _o,
+                {
+                  size: "small",
+                  color: o.progressColor,
+                  valueNow: Z,
+                  valueMax: W,
+                  screenReaderLabel: a("mixAndMatchProgress", { matched: Z, total: W }),
+                  renderValue: ({ valueNow: f, valueMax: y }) => /* @__PURE__ */ i(
+                    S,
+                    {
+                      size: "small",
+                      color: o.text.color,
+                      themeOverride: o.text.themeOverride,
+                      children: a("mixAndMatchProgressShort", {
+                        matched: f,
+                        total: y
+                      })
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ i(k.Item, { overflowX: "visible", overflowY: "visible", children: /* @__PURE__ */ i(
+                Ne,
+                {
+                  size: "small",
+                  color: "primary",
+                  focusColor: o.focusColor,
+                  onClick: $,
+                  children: n.mixAndMatchReset
+                }
+              ) })
+            ] }) }),
+            T && /* @__PURE__ */ i(k.Item, { overflowX: "visible", overflowY: "visible", children: /* @__PURE__ */ i(
+              Mo,
+              {
+                variant: T.variant,
+                margin: "none",
+                timeout: 5e3,
+                renderCloseButtonLabel: n.mixAndMatchCloseFeedback,
+                onDismiss: () => I(null),
+                children: T.message
+              },
+              T.seq
+            ) }),
+            /* @__PURE__ */ i(k.Item, { overflowX: "visible", overflowY: "visible", children: /* @__PURE__ */ w("div", { className: L.grid, children: [
+              /* @__PURE__ */ i("div", { className: L.column, children: l.map((f) => /* @__PURE__ */ i(
+                _t,
+                {
+                  text: f.text,
+                  state: f.state,
+                  matched: f.matched,
+                  card: o.card,
+                  disabled: fe(f),
+                  pressed: f.state === "selected",
+                  label: a("mixAndMatchTermAriaLabel", { text: f.text }),
+                  onClick: () => z(f.id),
+                  elementRef: (y) => {
+                    y ? P.current.set(f.id, y) : P.current.delete(f.id);
+                  }
+                },
+                f.id
+              )) }),
+              /* @__PURE__ */ i("div", { className: L.column, children: h.map((f) => /* @__PURE__ */ i(
+                _t,
+                {
+                  text: f.text,
+                  state: f.state,
+                  matched: f.matched,
+                  card: o.card,
+                  disabled: xi(f, p),
+                  ariaDisabled: go(f),
+                  label: a("mixAndMatchDefinitionAriaLabel", {
+                    text: f.text
+                  }),
+                  onClick: () => N(f.id)
+                },
+                f.id
+              )) })
+            ] }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+const Dt = 10, Ri = s.object({
+  term: s.string().zodTextarea().zodLabel("Left").zodHelp("The card shown in the left column"),
+  definition: s.string().zodTextarea().zodLabel("Right").zodHelp("The card it pairs with, shown in the right column")
+}), Ii = s.enum(["on", "off"]), Li = s.object({
+  pairs: s.array(Ri).max(Dt).default([]).zodLabel(`Sets (up to ${Dt})`).zodItemLabel("term").zodItemName("Set").zodManageLayer("Sets").zodHelp("Pairs of cards the learner matches up"),
+  // `.default(x).optional()` (optional outermost) is intentional: the default is applied
+  // by the component and `MixAndMatchDefaultProps`, not by schema `.parse()`.
+  randomizeCards: Ii.default("on").optional().zodLabel("Randomize order (Preview to see change)").zodHelp("Shuffle the card order each time"),
+  colorTheme: Te.default("light").optional().zodLabel("Color").zodHelp("Background color theme for the container"),
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Choose between rounded or sharp corners")
+}), je = {
+  pairs: [
+    { term: "", definition: "" },
+    { term: "", definition: "" },
+    { term: "", definition: "" },
+    { term: "", definition: "" }
+  ],
+  randomizeCards: "on",
+  colorTheme: "light",
+  cornerStyle: "rounded"
+};
+for (const e of je.pairs)
+  Object.freeze(e);
+Object.freeze(je.pairs);
+Object.freeze(je);
+const Oi = ne(
+  Li,
+  "MixAndMatch"
+), ad = ie({
+  wireName: "MixAndMatch",
+  component: Si,
+  schema: Oi,
+  defaultProps: je,
+  english: lt
+}), st = {
+  knowledgeCheckTitle: "Knowledge check",
+  knowledgeCheckPlaceholder: "Add knowledge check...",
+  knowledgeCheckQuestionPlaceholder: "Your question here",
+  knowledgeCheckAnswerPlaceholder: "Answer %{index}",
+  knowledgeCheckSelectOne: "Select one answer.",
+  knowledgeCheckSelectAll: "Select all that apply.",
+  knowledgeCheckCheckAnswer: "Check answer",
+  knowledgeCheckTryAgain: "Try again",
+  knowledgeCheckPracticeAgain: "Practice again",
+  knowledgeCheckCorrect: "Nice work! You got the correct answer!",
+  knowledgeCheckIncorrect: "Oops, that's incorrect.",
+  knowledgeCheckAnswerCorrectLabel: "Correct",
+  knowledgeCheckAnswerIncorrectLabel: "Incorrect"
+}, Ni = {
+  default: { borderWidth: "small", borderColor: "primary" },
+  correct: { borderWidth: "small", borderColor: "success" },
+  incorrect: { borderWidth: "small", borderColor: "danger" }
+};
+function Ei(e) {
+  return Ni[e];
+}
+function Pi(e, t, r) {
+  const o = t === "rounded" ? "large" : "0", { view: n, text: a } = de(ao(e, r), {
+    borderRadius: "0",
+    padding: "medium"
+  });
+  return {
+    container: {
+      background: "primary",
+      borderWidth: "small",
+      borderColor: "primary",
+      borderRadius: o
+    },
+    band: n,
+    bandText: a,
+    answer: {
+      background: "primary",
+      borderRadius: t === "rounded" ? "medium" : "0",
+      padding: "small medium"
+    }
+  };
+}
+function Bi({
+  id: e,
+  label: t,
+  isMultiSelect: r,
+  groupName: o,
+  checked: n,
+  disabled: a,
+  state: d,
+  view: c,
+  stateLabel: l,
+  onToggle: u,
+  inputRef: h
+}) {
+  const g = d === "default" ? null : /* @__PURE__ */ w(k.Item, { children: [
+    d === "correct" ? /* @__PURE__ */ i(Ft, { color: "success" }) : /* @__PURE__ */ i(Zt, { color: "error" }),
+    /* @__PURE__ */ i(et, { children: l })
+  ] }), p = /* @__PURE__ */ i("div", { style: U, children: t });
+  return /* @__PURE__ */ i(v, { as: "div", ...c, ...Ei(d), children: /* @__PURE__ */ w(k, { gap: "small", justifyItems: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ i(k.Item, { shouldGrow: !0, shouldShrink: !0, children: r ? /* @__PURE__ */ i(
+      $o,
+      {
+        label: p,
+        value: e,
+        checked: n,
+        disabled: a,
+        onChange: (C) => u(C.target.checked),
+        inputRef: h
+      }
+    ) : /* @__PURE__ */ i(
+      Ho,
+      {
+        label: p,
+        name: o,
+        value: e,
+        checked: n,
+        disabled: a,
+        onChange: () => u(!0),
+        inputRef: h
+      }
+    ) }),
+    g
+  ] }) });
+}
+const qe = "\0", Mi = "
";
+function _i(e, t, r, o) {
+  const n = t.map(
+    (a) => `${a.id}${qe}${a.label}${qe}${a.isCorrect}`
+  ).join(Mi);
+  return [e, r, String(o), n].join(qe);
+}
+function $i({
+  questionType: e = "Multiple choice",
+  question: t,
+  answerOrder: r = "set",
+  answers: o = [],
+  headerStyle: n = "none",
+  cornerStyle: a = "rounded"
+}) {
+  const d = le(), { translations: c } = Y(st), l = he(), u = ee(
+    () => Pi(n, a, l),
+    [n, a, l]
+  ), h = o ?? [];
+  return h.length === 0 ? d ? /* @__PURE__ */ i(
+    v,
+    {
+      as: "div",
+      ...u.container,
+      textAlign: "center",
+      padding: "medium",
+      className: "bce-block bce-block-knowledgecheck",
+      children: /* @__PURE__ */ i(S, { color: "secondary", children: c.knowledgeCheckPlaceholder })
+    }
+  ) : null : /* @__PURE__ */ i(
+    Hi,
+    {
+      questionType: e,
+      question: t,
+      answerOrder: r,
+      answers: h,
+      isDesignerMode: d,
+      view: u
+    },
+    _i(e, h, r, d)
+  );
+}
+function Hi({ questionType: e, question: t, answerOrder: r, answers: o, isDesignerMode: n, view: a }) {
+  const { translations: d, translate: c } = Y(st), l = jt(), u = `${l}-answers`, h = `${l}-question`, g = `${l}-hint`, [p, C] = j([]), [T, I] = j("initial"), [x, P] = j(null), G = re(null), M = re(null), D = re(null), F = J((m) => {
+    M.current = m instanceof HTMLElement ? m : null;
+  }, []), te = J((m) => {
+    G.current = m;
+  }, []), q = e === "Multiple choice", [Z] = j(
+    () => r === "random" && q && !n ? Ee(o) : o
+  ), W = T !== "initial", K = T === "correct", ae = J(
+    (m, b) => {
+      C((R) => q ? b ? R.includes(m) ? R : [...R, m] : R.filter((E) => E !== m) : b ? [m] : []);
+    },
+    [q]
+  ), $ = () => {
+    var R;
+    const m = Z.filter((E, _) => p.includes(_)), b = q ? m.length === Z.filter((E) => E.isCorrect).length && m.every((E) => E.isCorrect) : ((R = m[0]) == null ? void 0 : R.isCorrect) ?? !1;
+    I(b ? "correct" : "incorrect"), P((E) => ({
+      seq: ((E == null ? void 0 : E.seq) ?? 0) + 1,
+      message: b ? d.knowledgeCheckCorrect : d.knowledgeCheckIncorrect
+    })), D.current = "action";
+  }, z = () => {
+    C([]), I("initial"), P(null), D.current = "firstAnswer";
+  };
+  ve(() => {
+    var b, R;
+    const m = D.current;
+    m && (D.current = null, m === "action" ? (b = M.current) == null || b.focus() : (R = G.current) == null || R.focus());
+  }, [T]);
+  const N = (m, b) => !W || !p.includes(b) ? "default" : m.isCorrect ? "correct" : "incorrect", f = (m) => {
+    if (m !== "default")
+      return m === "correct" ? d.knowledgeCheckAnswerCorrectLabel : d.knowledgeCheckAnswerIncorrectLabel;
+  }, y = n && !t ? d.knowledgeCheckQuestionPlaceholder : t;
+  return /* @__PURE__ */ w(
+    v,
+    {
+      as: "div",
+      ...a.container,
+      overflowX: "hidden",
+      overflowY: "hidden",
+      className: "bce-block bce-block-knowledgecheck",
+      children: [
+        /* @__PURE__ */ i(et, { as: "div", children: /* @__PURE__ */ i("div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: x && /* @__PURE__ */ i("span", { children: x.message }, x.seq) }) }),
+        /* @__PURE__ */ i(v, { as: "div", ...a.band, children: /* @__PURE__ */ w(k, { direction: "column", gap: "small", children: [
+          /* @__PURE__ */ i(k.Item, { children: /* @__PURE__ */ i(
+            S,
+            {
+              as: "div",
+              size: "small",
+              weight: "bold",
+              transform: "uppercase",
+              letterSpacing: "expanded",
+              color: a.bandText.color,
+              themeOverride: a.bandText.themeOverride,
+              children: d.knowledgeCheckTitle
+            }
+          ) }),
+          /* @__PURE__ */ i(k.Item, { children: /* @__PURE__ */ i("div", { id: h, style: U, children: /* @__PURE__ */ i(
+            ke,
+            {
+              level: "h2",
+              color: a.bandText.color,
+              themeOverride: a.bandText.themeOverride,
+              children: y
+            }
+          ) }) })
+        ] }) }),
+        /* @__PURE__ */ i(v, { as: "div", padding: "medium", children: /* @__PURE__ */ w(k, { direction: "column", gap: "x-small", children: [
+          /* @__PURE__ */ i(k.Item, { padding: "0 0 x-small 0", children: /* @__PURE__ */ i(S, { size: "small", color: "secondary", children: /* @__PURE__ */ i("span", { id: g, children: q ? d.knowledgeCheckSelectAll : d.knowledgeCheckSelectOne }) }) }),
+          /* @__PURE__ */ i(
+            "div",
+            {
+              role: q ? "group" : "radiogroup",
+              "aria-labelledby": h,
+              "aria-describedby": g,
+              children: /* @__PURE__ */ i(k, { direction: "column", gap: "x-small", children: Z.map((m, b) => {
+                const R = N(m, b);
+                return (
+                  // Keyed by position for the same reason the selection is, and React treats
+                  // duplicate keys as unsupported rather than merely warning about them.
+                  /* @__PURE__ */ i(k.Item, { overflowX: "visible", overflowY: "visible", children: /* @__PURE__ */ i(
+                    Bi,
+                    {
+                      id: m.id,
+                      label: m.label || c("knowledgeCheckAnswerPlaceholder", { index: b + 1 }),
+                      isMultiSelect: q,
+                      groupName: u,
+                      checked: p.includes(b),
+                      disabled: W,
+                      state: R,
+                      stateLabel: f(R),
+                      view: a.answer,
+                      onToggle: (E) => ae(b, E),
+                      inputRef: b === 0 ? te : void 0
+                    }
+                  ) }, b)
+                );
+              }) })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ i(v, { as: "div", padding: "0 medium medium", children: /* @__PURE__ */ i(
+          v,
+          {
+            as: "div",
+            padding: W ? "small medium" : "0",
+            borderWidth: W ? "small" : "0",
+            borderColor: K ? "success" : "danger",
+            borderRadius: a.answer.borderRadius,
+            children: /* @__PURE__ */ w(
+              k,
+              {
+                gap: "medium",
+                justifyItems: W ? "space-between" : "center",
+                alignItems: "center",
+                children: [
+                  W && /* @__PURE__ */ i(k.Item, { shouldShrink: !0, children: /* @__PURE__ */ w(k, { gap: "small", alignItems: "center", children: [
+                    /* @__PURE__ */ i(k.Item, { children: K ? /* @__PURE__ */ i(Ft, { color: "success" }) : /* @__PURE__ */ i(Zt, { color: "error" }) }),
+                    /* @__PURE__ */ i(k.Item, { shouldShrink: !0, children: /* @__PURE__ */ i("div", { style: U, children: /* @__PURE__ */ i(S, { children: x == null ? void 0 : x.message }) }) })
+                  ] }) }),
+                  /* @__PURE__ */ i(k.Item, { children: W ? /* @__PURE__ */ i(Ne, { color: "primary", onClick: z, elementRef: F, children: K ? d.knowledgeCheckPracticeAgain : d.knowledgeCheckTryAgain }) : /* @__PURE__ */ i(
+                    Ne,
+                    {
+                      color: "primary",
+                      onClick: $,
+                      disabled: p.length === 0,
+                      elementRef: F,
+                      children: d.knowledgeCheckCheckAnswer
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+const Di = s.enum(["Multiple choice", "True or false"]), Wi = s.enum(["set", "random"]), ji = s.object({
+  id: s.string(),
+  label: s.string(),
+  isCorrect: s.boolean()
+}), Vi = s.object({
+  // `.default(x).optional()` (optional outermost) on every defaulted field here: the props
+  // stay omittable, and a host seeding its settings form from the schema metadata rather
+  // than from `KnowledgeCheckDefaultProps` still gets a value — a bare `.optional()`
+  // surfaces no `defaultValue`, leaving the select unset on content predating the field.
+  questionType: Di.default("Multiple choice").optional().zodLabel("Question type").zodHelp("Multiple choice or True/False question"),
+  question: s.string().zodLabel("Question").zodHelp("The question learners will answer"),
+  answerOrder: Wi.default("set").optional().zodLabel("Answer order").zodHelp("Fixed order or randomized each time").zodHiddenWhen({ field: "questionType", values: ["True or false"] }),
+  // Deliberately uncapped, and the item fields carry no labels: `.zodAnswers()` routes
+  // the host to its own answer editor, which owns the row layout and the correct/
+  // incorrect toggle rather than reading per-field metadata.
+  answers: s.array(ji).zodAnswers().zodLabel("Answer options"),
+  headerStyle: eo.default("none").optional().zodLabel("Color").zodHelp(to),
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Rounded or sharp corners")
+}), Ve = {
+  questionType: "Multiple choice",
+  question: "",
+  answerOrder: "set",
+  answers: [
+    { id: "a1", label: "", isCorrect: !0 },
+    { id: "a2", label: "", isCorrect: !1 },
+    { id: "a3", label: "", isCorrect: !1 }
+  ],
+  headerStyle: "none",
+  cornerStyle: "rounded"
+};
+for (const e of Ve.answers)
+  Object.freeze(e);
+Object.freeze(Ve.answers);
+Object.freeze(Ve);
+const Fi = ne(
+  Vi,
+  "KnowledgeCheck"
+), dd = ie({
+  wireName: "KnowledgeCheckBlock",
+  component: $i,
+  schema: Fi,
+  defaultProps: Ve,
+  english: st
+}), Wt = 15, Zi = "1rem", Gi = {
+  none: "space0",
+  xsmall: "space4",
+  small: "space8",
+  medium: "space16",
+  large: "space36",
+  xlarge: "space60",
+  xxlarge: "space60"
+}, Ui = {
+  none: { background: "transparent", borderWidth: "0", borderColor: void 0 },
+  primary: {
+    background: "primary-inverse",
+    borderWidth: "0",
+    borderColor: void 0,
+    textColor: "primary-inverse"
+  },
+  secondary: { background: "secondary", borderWidth: "0", borderColor: void 0 }
+}, qi = {
+  none: void 0,
+  primary: "dark",
+  secondary: "light"
+};
+function Xi(e, t) {
+  const r = qi[e], o = r && ue(t, r);
+  return o ? xe(o) : { decoration: Ui[e] };
+}
+const Yi = {
+  normal: "normal",
+  middle: "center",
+  top: "flex-start",
+  bottom: "flex-end"
+}, Ki = {
+  center: "center",
+  left: "start",
+  right: "end"
+};
+function Qi(e) {
+  const t = (r) => r ? Gi[r] : "0";
+  return [t(e == null ? void 0 : e.top), t(e == null ? void 0 : e.right), t(e == null ? void 0 : e.bottom), t(e == null ? void 0 : e.left)].join(
+    " "
+  );
+}
+function Ji({
+  columnSpan: e,
+  rowSpan: t,
+  gridColumn: r,
+  gridRow: o,
+  order: n
+}) {
+  const a = (u, h) => u !== void 0 && Number.isFinite(u) ? Math.min(Math.max(Math.trunc(u), 0), h) : void 0, d = (u, h) => u !== void 0 && Number.isFinite(u) && Math.trunc(u) > 0 ? `span ${Math.max(1, Math.min(Math.trunc(u), h))}` : void 0, c = a(r, Wt - 1), l = a(o, Number.POSITIVE_INFINITY);
+  return {
+    gridColumnStart: c !== void 0 ? c + 1 : void 0,
+    gridColumnEnd: d(e, Wt - (c ?? 0)),
+    gridRowStart: l !== void 0 ? l + 1 : void 0,
+    gridRowEnd: d(t, Number.POSITIVE_INFINITY),
+    order: n || void 0
+  };
+}
+function ea(e, t, r, o, n, a) {
+  const d = e !== "none", c = Xi(e, r), { view: l } = de(c, {
+    borderRadius: d ? "large" : "0",
+    padding: d ? "space16" : void 0
+  });
+  return {
+    container: l,
+    margin: Qi(a),
+    outer: {
+      flex: 1,
+      minHeight: "fit-content",
+      display: "grid",
+      justifyItems: o ? Ki[o] : void 0,
+      ...Ji(t)
+    },
+    inner: {
+      display: "flex",
+      flexDirection: "column",
+      // Without this, `justifyContent` resolves against a content-sized box and does nothing.
+      height: "100%",
+      gap: Zi,
+      justifyContent: n ? Yi[n] : void 0
+    }
+  };
+}
+function ta({
+  children: e,
+  // Defaulted here as well as in the schema, as every block in the package is: `.default()`
+  // sits under an `.optional()`, so `.parse()` does not fill these in, and until the block
+  // applied them itself a container that stored no `horizontalPosition` laid out differently
+  // from one created from `LayoutContainerDefaultProps` — while the host's settings form
+  // showed "center" for both.
+  horizontalPosition: t = "center",
+  verticalPosition: r = "normal",
+  margin: o,
+  backgroundStyle: n = "none",
+  columnSpan: a,
+  rowSpan: d,
+  gridColumn: c,
+  gridRow: l,
+  order: u
+}) {
+  const h = he(), {
+    container: g,
+    margin: p,
+    outer: C,
+    inner: T
+  } = ee(
+    () => ea(
+      n,
+      { columnSpan: a, rowSpan: d, gridColumn: c, gridRow: l, order: u },
+      h,
+      t,
+      r,
+      o
+    ),
+    [
+      n,
+      a,
+      d,
+      c,
+      l,
+      u,
+      h,
+      t,
+      r,
+      o
+    ]
+  );
+  return Ro.toArray(e).length === 0 ? null : (
+    // A single-cell grid, so the surface stretches to the cell the parent gave this block
+    // minus its own margins, and `horizontalPosition` can align it as the cell's
+    // `justify-items`. As a plain block child it would fill the cell whatever the alignment
+    // says, and reaching the same height with `height: 100%` would overflow by the
+    // vertical margins.
+    /* @__PURE__ */ i("div", { className: "bce-block bce-block-layoutcontainer", style: C, children: /* @__PURE__ */ i(v, { as: "div", margin: p, ...g, children: /* @__PURE__ */ i("div", { style: { ...T, ...U }, children: e }) }) })
+  );
+}
+const Re = s.enum([
+  "none",
+  "xsmall",
+  "small",
+  "medium",
+  "large",
+  "xlarge",
+  "xxlarge"
+]), oa = s.enum(["none", "primary", "secondary"]), ra = s.enum(["center", "left", "right"]), na = s.enum(["normal", "middle", "top", "bottom"]), ia = s.object({
+  top: Re.optional().zodLabel("Top Margin"),
+  right: Re.optional().zodLabel("Right Margin"),
+  bottom: Re.optional().zodLabel("Bottom Margin"),
+  left: Re.optional().zodLabel("Left Margin")
+}).optional(), aa = s.object({
+  columnSpan: s.number().optional().zodHidden(),
+  rowSpan: s.number().optional().zodHidden(),
+  gridColumn: s.number().optional().zodHidden(),
+  gridRow: s.number().optional().zodHidden(),
+  order: s.number().optional().zodHidden()
+}), da = s.object({
+  // The nested blocks, supplied by the host's viewer or designer.
+  children: s.any().zodHidden(),
+  horizontalPosition: ra.default("center").optional().zodLabel("Horizontal Position").zodHelp("Horizontal alignment of content within the container"),
+  verticalPosition: na.default("normal").optional().zodLabel("Vertical Position").zodHelp("Vertical alignment of content within the container"),
+  margin: ia.zodLabel("Margin").zodHelp(
+    "Fine-grained control of spacing around the container"
+  ),
+  backgroundStyle: oa.default("none").optional().zodLabel("Background Style").zodHelp(
+    "When using primary/secondary, avoid nested background styles to prevent visual noise"
+  )
+}).merge(aa), vo = {
+  horizontalPosition: "center",
+  verticalPosition: "normal",
+  backgroundStyle: "none"
+};
+Object.freeze(vo);
+const la = ne(
+  da,
+  "LayoutContainer"
+), ld = ie({
+  wireName: "LayoutContainer",
+  component: ta,
+  schema: la,
+  defaultProps: vo
+}), Ke = 20, Qe = 80, Fe = 50, sa = s.enum(["none", "small", "medium", "large"]), ca = s.enum(["left-first", "right-first"]), ua = s.enum(["none", "outline", "solid"]), ha = s.enum(["none", "light", "dark", "neutral"]), ma = s.object({
+  // The nested blocks, supplied by the host's viewer or designer.
+  children: s.any().zodHidden(),
+  // `.default(x).optional()`, optional outermost: the reader still recurses to the default
+  // for the host's settings form, but the prop stays omittable in the emitted props type —
+  // the default is applied by the component and `TwoColumnDefaultProps`, not by `.parse()`.
+  leftColumnWidth: s.number().min(Ke).max(Qe).default(Fe).optional().zodRange({
+    min: Ke,
+    max: Qe,
+    step: 5,
+    formatValue: "%",
+    // The slider sets both columns at once, so the host labels each end rather
+    // than showing a single anonymous number.
+    valueLabel: "Left",
+    complementLabel: "Right"
+  }).zodLabel("Column widths"),
+  mobileStackingOrder: ca.default("left-first").optional().zodLabel("Mobile stacking order").zodHelp("Which column appears first when stacked on mobile devices"),
+  gapSpacing: sa.default("medium").optional().zodLabel("Gap space").zodHelp("Space between the two columns"),
+  containerStyle: ua.default("none").optional().zodLabel("Style").zodHelp("Visual style of the two-column container"),
+  cornerStyle: se.default("rounded").optional().zodLabel("Corners").zodHelp("Border radius style for the container"),
+  backgroundColor: ha.default("none").optional().zodLabel("Background color").zodHelp("Background color of the two-column container")
+}), Co = {
+  leftColumnWidth: Fe,
+  gapSpacing: "medium",
+  mobileStackingOrder: "left-first",
+  containerStyle: "none",
+  cornerStyle: "rounded",
+  backgroundColor: "none"
+};
+Object.freeze(Co);
+const fa = ne(
+  ma,
+  "TwoColumn"
+), pa = {
+  none: "0",
+  small: "0.5rem",
+  medium: "1rem",
+  large: "1.5rem"
+}, ba = {
+  none: { borderWidth: "0", borderColor: void 0 },
+  outline: { borderWidth: "small", borderColor: "primary" },
+  solid: { borderWidth: "medium", borderColor: "secondary" }
+}, ga = {
+  decoration: { background: "transparent", borderWidth: "0", borderColor: void 0 }
+};
+function va(e, t, r, o, n, a) {
+  const d = n === "none" ? ga : nt(n, a).styling, { view: c } = de(
+    {
+      ...d,
+      decoration: { ...d.decoration, ...ba[r] }
+    },
+    {
+      borderRadius: o === "rounded" ? "large" : "0",
+      // Padding only earns its place once there is a surface or an outline to inset from.
+      padding: n !== "none" || r !== "none" ? "space16" : void 0
+    }
+  ), l = Number.isFinite(e) ? Math.min(Math.max(e, Ke), Qe) : Fe;
+  return {
+    container: c,
+    cssVariables: {
+      "--bce-twocol-left": `${l}fr`,
+      "--bce-twocol-right": `${100 - l}fr`,
+      "--bce-twocol-gap": pa[t]
+    }
+  };
+}
+const Ca = "768px", Q = {
+  /**
+   * The outermost element. It carries `container-type`, so it is also the ancestor the
+   * `@container` rule resolves against — which is why the grid has to be a separate
+   * element inside it rather than this one.
+   */
+  root: "bce-block-twocolumn",
+  grid: "bce-twocolumn-grid",
+  gridReverse: "bce-twocolumn-grid-reverse"
+}, ya = Pe`
+  .${Q.root} {
+    container-type: inline-size;
+    width: 100%;
+  }
+
+  .${Q.root} > .${Q.grid} {
+    display: grid;
+    /*
+     * minmax(0, ...) rather than a bare fr: an fr track's automatic minimum is min-content,
+     * so one unbreakable word or a fixed-width image in the narrow column pushes that track
+     * past its share and the two stop totalling the width.
+     */
+    grid-template-columns: minmax(0, var(--bce-twocol-left)) minmax(0, var(--bce-twocol-right));
+    gap: var(--bce-twocol-gap);
+    width: 100%;
+    align-items: start;
+  }
+
+  @container (max-width: ${Ca}) {
+    .${Q.root} > .${Q.grid} {
+      grid-template-columns: 1fr;
+    }
+
+    /*
+     * The host assigns each child its column with an inline grid-column, so clearing that
+     * for the stacked layout means outranking an inline style.
+     */
+    .${Q.root} > .${Q.grid} > * {
+      grid-column: 1 !important;
+    }
+
+    /*
+     * Only the first two children swap. A column may hold several blocks, in which case
+     * the rest keep their document order and the reversal is partial — reordering by
+     * column instead would mean matching on the host's inline grid-column, which ties
+     * this block to markup it does not own.
+     *
+     * Matched by type rather than position: the host wraps every child in a div, so the
+     * two are equivalent on the markup this ever sees, and emotion warns that
+     * :nth-child cannot be rendered safely server-side.
+     */
+    .${Q.root} > .${Q.gridReverse} > div:nth-of-type(1) {
+      order: 2;
+    }
+    .${Q.root} > .${Q.gridReverse} > div:nth-of-type(2) {
+      order: 1;
+    }
+  }
+`;
+function ka() {
+  return /* @__PURE__ */ i(Be, { styles: ya });
+}
+function wa({
+  children: e,
+  leftColumnWidth: t = Fe,
+  gapSpacing: r = "medium",
+  mobileStackingOrder: o = "left-first",
+  containerStyle: n = "none",
+  cornerStyle: a = "rounded",
+  backgroundColor: d = "none"
+}) {
+  const c = he(), { container: l, rootStyle: u } = ee(() => {
+    const { container: g, cssVariables: p } = va(
+      t,
+      r,
+      n,
+      a,
+      d,
+      c
+    );
+    return { container: g, rootStyle: { ...p, ...U } };
+  }, [t, r, n, a, d, c]), h = o === "right-first" ? `${Q.grid} ${Q.gridReverse}` : Q.grid;
+  return /* @__PURE__ */ w("div", { className: `bce-block ${Q.root}`, style: u, children: [
+    /* @__PURE__ */ i(ka, {}),
+    /* @__PURE__ */ i(v, { as: "div", className: h, ...l, children: e })
+  ] });
+}
+const sd = ie({
+  wireName: "TwoColumn",
+  component: wa,
+  schema: fa,
+  defaultProps: Co,
+  // Its stylesheet addresses the columns as `> div:nth-of-type(1|2)`.
+  wrapsChildrenInGridCells: !0
+}), ct = {
+  widgetBlockPlaceholder: "Add widget...",
+  widgetBlockLoading: "Loading widget...",
+  widgetBlockError: "Failed to load widget"
+};
+class xa extends Io {
+  constructor() {
+    super(...arguments), this.state = { hasError: !1 };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: !0 };
+  }
+  render() {
+    return this.state.hasError ? this.props.fallback : this.props.children;
+  }
+}
+function Ta({ widgetType: e = "", errorPlaceholder: t }) {
+  const r = le(), { translations: o } = Y(ct), { Component: n, isLoading: a, isError: d } = sn(e);
+  return e ? a ? /* @__PURE__ */ i(ce, { variant: "loading", text: o.widgetBlockLoading }) : d || !n ? t : /* @__PURE__ */ i("div", { style: U, children: /* @__PURE__ */ i(n, { widgetType: e }) }) : r ? /* @__PURE__ */ i(ce, { text: o.widgetBlockPlaceholder }) : null;
+}
+function Aa({ widgetType: e = "" }) {
+  const { translations: t } = Y(ct), r = /* @__PURE__ */ i(ce, { variant: "error", text: t.widgetBlockError });
+  return /* @__PURE__ */ i(v, { as: "div", className: "bce-block bce-block-widget", children: /* @__PURE__ */ i(xa, { fallback: r, children: /* @__PURE__ */ i(Ta, { widgetType: e, errorPlaceholder: r }) }, e) });
+}
+const Sa = s.object({
+  /**
+   * Opaque host widget identifier, resolved to a component via `useWidget`. Kept a
+   * free string on purpose: the widgets on offer belong to the host product, so a
+   * closed enum here would bind this package to one host's vocabulary. A host that
+   * wants its own set validated narrows this schema itself — see the block's
+   * `index.ts`. `''` means "not configured yet", as an empty `asset_id` does.
+   */
+  widgetType: s.string().default("").zodHidden()
+}), za = {
+  widgetType: ""
+}, Ra = ne(
+  Sa,
+  "WidgetBlock"
+), cd = ie({
+  wireName: "WidgetBlock",
+  component: Aa,
+  schema: Ra,
+  defaultProps: za,
+  english: ct
+});
+function ud(e) {
+  return e;
+}
+function Ia(e, t) {
+  return { ...e.props, ...t == null ? void 0 : t[e.id] };
+}
+function yo(e, t) {
+  return Object.prototype.hasOwnProperty.call(e, t) ? (
+    // The check above is the runtime proof that `component` is one of `R`'s keys, which a
+    // `string` parameter cannot carry in the type system.
+    e[t]
+  ) : void 0;
+}
+function ko(e, t, r = []) {
+  if (!Array.isArray(e)) return r;
+  for (const o of e)
+    !o || typeof o != "object" || (typeof o.component == "string" && typeof o.id == "string" && !yo(t, o.component) && r.push({
+      id: o.id,
+      component: o.component,
+      reason: kr(o.component)
+    }), ko(o.children, t, r));
+  return r;
+}
+function La({ nodes: e, templateData: t, registry: r }) {
+  return /* @__PURE__ */ i(ye, { children: e.map((o, n) => {
+    var l;
+    if (!o || typeof o != "object") return null;
+    const a = (l = o.props) == null ? void 0 : l.gridColumn, d = typeof a == "number" ? a : typeof a == "string" && /^\d+$/.test(a) ? Number(a) : NaN, c = Number.isInteger(d) && d >= 0 ? d + 1 : void 0;
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        style: c === void 0 ? void 0 : { gridColumn: c },
+        children: /* @__PURE__ */ i(wo, { node: o, templateData: t, registry: r })
+      },
+      o.id || `${o.component}-${n}`
+    );
+  }) });
+}
+function wo({
+  node: e,
+  templateData: t,
+  registry: r
+}) {
+  const o = yo(r, e.component), n = Array.isArray(e.children) ? e.children : void 0;
+  if (!o)
+    return n != null && n.length ? /* @__PURE__ */ i(Je, { nodes: n, templateData: t, registry: r }) : null;
+  const a = o.component, d = Ia(e, t);
+  return /* @__PURE__ */ i(a, { ...d, children: n != null && n.length ? o.wrapsChildrenInGridCells ? /* @__PURE__ */ i(La, { nodes: n, templateData: t, registry: r }) : /* @__PURE__ */ i(Je, { nodes: n, templateData: t, registry: r }) : void 0 });
+}
+function Je({ nodes: e, templateData: t, registry: r }) {
+  return /* @__PURE__ */ i(ye, { children: e.map(
+    (o, n) => o && typeof o == "object" ? /* @__PURE__ */ i(
+      wo,
+      {
+        node: o,
+        templateData: t,
+        registry: r
+      },
+      o.id || `${o.component}-${n}`
+    ) : null
+  ) });
+}
+function hd({
+  templateLayout: e,
+  templateData: t,
+  componentRegistry: r,
+  onUnresolvedBlock: o
+}) {
+  const n = ee(
+    () => ko(e, r),
+    [e, r]
+  ), a = re(/* @__PURE__ */ new Set());
+  return ve(() => {
+    if (o)
+      for (const d of n) {
+        const c = JSON.stringify([d.id, d.component]);
+        a.current.has(c) || (a.current.add(c), o(d));
+      }
+  }, [n, o]), !Array.isArray(e) || e.length === 0 ? null : /* @__PURE__ */ i(Je, { nodes: e, templateData: t, registry: r });
+}
 export {
-  vt as Accordion,
-  ae as AccordionDefaultProps,
-  Rt as Banner,
-  Ct as BannerDefaultProps,
-  se as BlockEditorApiContext,
-  _t as BlockEditorApiProvider,
-  Xe as BrandColorContext,
-  At as CodeBlock,
-  Ot as CodeBlockDefaultProps,
-  Qe as DesignerModeContext,
-  fo as FormFieldType,
-  Et as ImageBlock,
-  It as ImageBlockDefaultProps,
-  Tt as Quote,
-  wt as QuoteDefaultProps,
-  yt as RegisteredAccordionPropsSchema,
-  St as RegisteredBannerPropsSchema,
-  Nt as RegisteredCodeBlockPropsSchema,
-  Dt as RegisteredImageBlockPropsSchema,
-  Lt as RegisteredQuotePropsSchema,
-  zt as RegisteredTextPropsSchema,
-  Zt as RegisteredVideoBlockPropsSchema,
-  xt as Text,
-  kt as TextDefaultProps,
-  mt as TranslationsProvider,
-  Pt as VideoBlock,
-  Mt as VideoBlockDefaultProps,
-  Ht as VideoBlockDragPreview,
-  q as deriveFieldType,
-  bo as extractFieldMetadata,
-  ye as extractFormMetadata,
-  Te as extractValidationRules,
-  g as parseDescription,
-  I as registerComponentSchema,
-  de as unwrapZodType,
-  X as useBrandColor,
-  _ as useDesignerMode,
-  qo as useImageUrl,
-  E as useTranslations,
-  Go as useVideoUrl,
-  vo as validateComponentSchema
+  lr as Accordion,
+  _e as AccordionDefaultProps,
+  Ut as AccordionEnglish,
+  Wi as AnswerOrderSchema,
+  oo as BLOCK_CATALOGUE,
+  Hr as Banner,
+  Wr as BannerDefaultProps,
+  io as BannerEnglish,
+  oe as BlockCategory,
+  $e as BlockEditorApiContext,
+  td as BlockEditorApiProvider,
+  bt as BlockTranslationsProvider,
+  jo as BrandColorContext,
+  Qr as CodeBlock,
+  tn as CodeBlockDefaultProps,
+  so as CodeBlockEnglish,
+  Vo as DesignerModeContext,
+  si as FlashCards,
+  We as FlashCardsDefaultProps,
+  dt as FlashCardsEnglish,
+  sr as FormFieldType,
+  eo as HeaderStyleSchema,
+  fn as ImageBlock,
+  gn as ImageBlockDefaultProps,
+  co as ImageBlockEnglish,
+  $i as KnowledgeCheck,
+  ji as KnowledgeCheckAnswerSchema,
+  Ve as KnowledgeCheckDefaultProps,
+  st as KnowledgeCheckEnglish,
+  ta as LayoutContainer,
+  vo as LayoutContainerDefaultProps,
+  Si as MixAndMatch,
+  je as MixAndMatchDefaultProps,
+  lt as MixAndMatchEnglish,
+  Di as QuestionTypeSchema,
+  Gr as Quote,
+  Xr as QuoteDefaultProps,
+  lo as QuoteEnglish,
+  yr as RegisteredAccordionPropsSchema,
+  jr as RegisteredBannerPropsSchema,
+  on as RegisteredCodeBlockPropsSchema,
+  hi as RegisteredFlashCardsPropsSchema,
+  vn as RegisteredImageBlockPropsSchema,
+  Fi as RegisteredKnowledgeCheckPropsSchema,
+  la as RegisteredLayoutContainerPropsSchema,
+  Oi as RegisteredMixAndMatchPropsSchema,
+  Yr as RegisteredQuotePropsSchema,
+  Xn as RegisteredTabsBlockPropsSchema,
+  Pr as RegisteredTextPropsSchema,
+  fa as RegisteredTwoColumnPropsSchema,
+  Rn as RegisteredVideoBlockPropsSchema,
+  Ra as RegisteredWidgetBlockPropsSchema,
+  Do as RichTextRendererContext,
+  Hn as TabsBlock,
+  He as TabsBlockDefaultProps,
+  mo as TabsBlockEnglish,
+  Lr as Text,
+  Er as TextDefaultProps,
+  no as TextEnglish,
+  wa as TwoColumn,
+  Co as TwoColumnDefaultProps,
+  xn as VideoBlock,
+  zn as VideoBlockDefaultProps,
+  Tn as VideoBlockDragPreview,
+  uo as VideoBlockEnglish,
+  An as VideoSourceSchema,
+  hd as Viewer,
+  Aa as WidgetBlock,
+  za as WidgetBlockDefaultProps,
+  ct as WidgetBlockEnglish,
+  Sa as WidgetBlockPropsSchema,
+  Ya as createAccordionBlock,
+  Qa as createBannerBlock,
+  ed as createCodeBlock,
+  id as createFlashCardsBlock,
+  od as createImageBlock,
+  dd as createKnowledgeCheckBlock,
+  ld as createLayoutContainerBlock,
+  ad as createMixAndMatchBlock,
+  Ja as createQuoteBlock,
+  nd as createTabsBlock,
+  Ka as createTextBlock,
+  sd as createTwoColumnBlock,
+  rd as createVideoBlock,
+  cd as createWidgetBlock,
+  ie as defineBlock,
+  ud as defineRegistry,
+  Le as deriveFieldType,
+  ur as extractFieldMetadata,
+  Tt as extractFormMetadata,
+  Xt as extractValidationRules,
+  Ia as getMergedProps,
+  ro as isKnownBlock,
+  V as parseDescription,
+  ne as registerComponentSchema,
+  yo as resolveBlockEntry,
+  kr as unresolvedReason,
+  ot as unwrapZodType,
+  Y as useBlockTranslations,
+  he as useBrandColor,
+  le as useDesignerMode,
+  dn as useImageUrl,
+  Wo as useRichTextRenderer,
+  ln as useVideoUrl,
+  sn as useWidget,
+  mr as validateComponentSchema
 };