@nascentdigital/funnel-editor 4.5.6 → 4.6.0

package/dist/collection/hooks/CollectionController.d.ts

@@ -15,7 +15,7 @@ export declare class CollectionController {
     private set state(value);
     get ready(): boolean;
     get target(): CollectionTarget;
-    get languages(): ("id" | "is" | "tw" | "cy" | "fr" | "fy" | "to" | "br" | "hr" | "li" | "th" | "tr" | "no" | "aa" | "ab" | "ae" | "af" | "ak" | "am" | "an" | "ar" | "as" | "av" | "ay" | "az" | "ba" | "be" | "bg" | "bh" | "bi" | "bm" | "bn" | "bo" | "bs" | "ca" | "ce" | "ch" | "co" | "cr" | "cs" | "cu" | "cv" | "da" | "de" | "dv" | "dz" | "ee" | "el" | "en" | "eo" | "es" | "et" | "eu" | "fa" | "ff" | "fi" | "fj" | "fo" | "ga" | "gd" | "gl" | "gn" | "gu" | "gv" | "ha" | "he" | "hi" | "ho" | "ht" | "hu" | "hy" | "hz" | "ia" | "ie" | "ig" | "ii" | "ik" | "io" | "it" | "iu" | "ja" | "jv" | "ka" | "kg" | "ki" | "kj" | "kk" | "kl" | "km" | "kn" | "ko" | "kr" | "ks" | "ku" | "kv" | "kw" | "ky" | "la" | "lb" | "lg" | "ln" | "lo" | "lt" | "lu" | "lv" | "mg" | "mh" | "mi" | "mk" | "ml" | "mn" | "mr" | "ms" | "mt" | "my" | "na" | "nb" | "nd" | "ne" | "ng" | "nl" | "nn" | "nr" | "nv" | "ny" | "oc" | "oj" | "om" | "or" | "os" | "pa" | "pi" | "pl" | "ps" | "pt" | "qu" | "rm" | "rn" | "ro" | "ru" | "rw" | "sa" | "sc" | "sd" | "se" | "sg" | "si" | "sk" | "sl" | "sm" | "sn" | "so" | "sq" | "sr" | "ss" | "st" | "su" | "sv" | "sw" | "ta" | "te" | "tg" | "ti" | "tk" | "tl" | "tn" | "ts" | "tt" | "ty" | "ug" | "uk" | "ur" | "uz" | "ve" | "vi" | "vo" | "wa" | "wo" | "xh" | "yi" | "yo" | "za" | "zh" | "zu")[];
+    get languages(): ("cy" | "fr" | "fy" | "to" | "br" | "hr" | "li" | "th" | "tr" | "id" | "is" | "tw" | "no" | "aa" | "ab" | "ae" | "af" | "ak" | "am" | "an" | "ar" | "as" | "av" | "ay" | "az" | "ba" | "be" | "bg" | "bh" | "bi" | "bm" | "bn" | "bo" | "bs" | "ca" | "ce" | "ch" | "co" | "cr" | "cs" | "cu" | "cv" | "da" | "de" | "dv" | "dz" | "ee" | "el" | "en" | "eo" | "es" | "et" | "eu" | "fa" | "ff" | "fi" | "fj" | "fo" | "ga" | "gd" | "gl" | "gn" | "gu" | "gv" | "ha" | "he" | "hi" | "ho" | "ht" | "hu" | "hy" | "hz" | "ia" | "ie" | "ig" | "ii" | "ik" | "io" | "it" | "iu" | "ja" | "jv" | "ka" | "kg" | "ki" | "kj" | "kk" | "kl" | "km" | "kn" | "ko" | "kr" | "ks" | "ku" | "kv" | "kw" | "ky" | "la" | "lb" | "lg" | "ln" | "lo" | "lt" | "lu" | "lv" | "mg" | "mh" | "mi" | "mk" | "ml" | "mn" | "mr" | "ms" | "mt" | "my" | "na" | "nb" | "nd" | "ne" | "ng" | "nl" | "nn" | "nr" | "nv" | "ny" | "oc" | "oj" | "om" | "or" | "os" | "pa" | "pi" | "pl" | "ps" | "pt" | "qu" | "rm" | "rn" | "ro" | "ru" | "rw" | "sa" | "sc" | "sd" | "se" | "sg" | "si" | "sk" | "sl" | "sm" | "sn" | "so" | "sq" | "sr" | "ss" | "st" | "su" | "sv" | "sw" | "ta" | "te" | "tg" | "ti" | "tk" | "tl" | "tn" | "ts" | "tt" | "ty" | "ug" | "uk" | "ur" | "uz" | "ve" | "vi" | "vo" | "wa" | "wo" | "xh" | "yi" | "yo" | "za" | "zh" | "zu")[];
     get collectionGroup(): CollectionGroup | undefined;
     private set collectionGroup(value);
     get collection(): Collection | undefined;

package/dist/core/components/ColorModeToggle.js

@@ -2,11 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorModeToggle = ColorModeToggle;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const settings_1 = require("../settings");
 const interaction_1 = require("./interaction");
 // component
-function ColorModeToggle({ className, popupPlacement = 'top' }) {
+function ColorModeToggle({ className, popupPlacement = 'bottom' }) {
     // bind color mode
+    const id = (0, react_1.useId)();
     const settings = (0, settings_1.useSettings)();
     const { colorMode } = settings;
     const icon = colorMode === 'light'
@@ -16,11 +18,11 @@ function ColorModeToggle({ className, popupPlacement = 'top' }) {
             : 'MonitorCog';
     const menu = (0, interaction_1.useMenuController)(colorOptions);
     // helpers
-    const onOpenMenu = (anchor) => {
+    const onOpenMenu = () => {
         // set selected item to current color
         menu.selectedItem = settings.colorMode;
         // open menu
-        menu.open(anchor);
+        menu.open(id);
     };
     const onColorModeSelect = (colorMode) => {
         // set mode
@@ -30,7 +32,7 @@ function ColorModeToggle({ className, popupPlacement = 'top' }) {
         menu.close();
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { className: className, variant: "util", icon: icon, onClick: e => onOpenMenu(e.currentTarget) }), (0, jsx_runtime_1.jsx)(interaction_1.Menu, { controller: menu, placement: popupPlacement, onItemClick: onColorModeSelect })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { anchorId: id, className: className, variant: "util", icon: icon, onClick: e => onOpenMenu() }), (0, jsx_runtime_1.jsx)(interaction_1.Menu, { controller: menu, placement: popupPlacement, onItemClick: onColorModeSelect })] }));
 }
 // helpers
 const colorOptions = [

package/dist/core/components/Header.js

@@ -23,6 +23,7 @@ function Header({ className, title, breadcrumbs: breadcrumbsRaw, highlightBreadc
     const brand = funnel_core_1.AppConfig.brandConfig();
     const breadcrumbs = breadcrumbsRaw !== null && breadcrumbsRaw !== void 0 ? breadcrumbsRaw : [];
     const breadcrumbsEndIndex = breadcrumbs.length - 1;
+    const anchorId = (0, react_2.useId)();
     const authenticator = (0, auth_1.useAuthenticator)();
     const menu = (0, interaction_1.useMenuController)(menuOptions);
     const userEditorRef = (0, react_2.useRef)(null);
@@ -30,7 +31,7 @@ function Header({ className, title, breadcrumbs: breadcrumbsRaw, highlightBreadc
     // helpers
     const onMenuOpen = (e) => {
         menu.selectedItem = undefined;
-        menu.open(e.currentTarget);
+        menu.open(anchorId);
     };
     const onMenuClick = (id) => {
         var _a, _b;
@@ -60,7 +61,7 @@ function Header({ className, title, breadcrumbs: breadcrumbsRaw, highlightBreadc
                                             (0, jsx_runtime_1.jsx)("span", { children: breadcrumb })
                                         :
                                             (0, jsx_runtime_1.jsx)(link_1.default, { href: breadcrumb.url, children: breadcrumb.label }) })] }, index)) }), (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex items-center gap-l6", children: [!hideControls && children, (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: !hideControls &&
-                                    (0, jsx_runtime_1.jsxs)(transitions_1.FadeIn, { className: "h-full flex items-center gap-l6", children: [(0, jsx_runtime_1.jsx)(interaction_1.AvatarButton, { user: user, onClick: onMenuOpen }), (0, jsx_runtime_1.jsx)(interaction_1.Menu, { label: user.email, title: user.username, placement: "bottom", controller: menu, onItemClick: onMenuClick }), (0, jsx_runtime_1.jsx)(ColorModeToggle_1.ColorModeToggle, {})] }) })] })] }), (0, jsx_runtime_1.jsx)(UserEditor_1.UserEditor, { ref: userEditorRef })] }));
+                                    (0, jsx_runtime_1.jsxs)(transitions_1.FadeIn, { className: "h-full flex items-center gap-l6", children: [(0, jsx_runtime_1.jsx)(interaction_1.AvatarButton, { anchorId: anchorId, user: user, onClick: onMenuOpen }), (0, jsx_runtime_1.jsx)(interaction_1.Menu, { label: user.email, title: user.username, placement: "bottom", controller: menu, onItemClick: onMenuClick }), (0, jsx_runtime_1.jsx)(ColorModeToggle_1.ColorModeToggle, {})] }) })] })] }), (0, jsx_runtime_1.jsx)(UserEditor_1.UserEditor, { ref: userEditorRef })] }));
 }
 const menuOptions = [
     { id: 'profile', label: 'Edit Profile' },

package/dist/core/components/UserEditor.d.ts

@@ -1,5 +1,5 @@
 import { User } from '@nascentdigital/funnel-cms';
-import { Rect } from '@nascentdigital/funnel-core';
+import { Popup } from './interaction';
 export declare const UserEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<UserEditor.Ref>>;
 export declare namespace UserEditor {
     type Props = {};
@@ -9,6 +9,6 @@ export declare namespace UserEditor {
     }
     type EditOptions = {
         user?: User;
-        anchor?: HTMLElement | Rect;
+        anchor?: Popup.Anchor;
     };
 }

package/dist/core/components/feedback/Badge.d.ts

@@ -1,8 +1,9 @@
 import { HTMLAttributes } from 'react';
 import { Icon } from '../visuals';
-export declare function Badge({ className, variant, status, icon, label, onClick, ...props }: Badge.Props): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ anchorId, className, style, variant, status, icon, label, onClick, ...props }: Badge.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Badge {
     type Props = HTMLAttributes<HTMLSpanElement> & {
+        anchorId?: string;
         variant?: Variant;
         status?: Status;
         icon?: Icon.Variant;

package/dist/core/components/feedback/Badge.js

@@ -17,10 +17,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = Badge;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
+const Popup_1 = require("../interaction/Popup");
 const visuals_1 = require("../visuals");
 // component
 function Badge(_a) {
-    var { className, variant = 'default', status = 'info', icon, label, onClick } = _a, props = __rest(_a, ["className", "variant", "status", "icon", "label", "onClick"]);
+    var { anchorId, className, style, variant = 'default', status = 'info', icon, label, onClick } = _a, props = __rest(_a, ["anchorId", "className", "style", "variant", "status", "icon", "label", "onClick"]);
     // fail if trying to render icon when badge is small
     const hasIcon = !!icon;
     if (hasIcon && variant === 'tiny') {
@@ -31,7 +32,7 @@ function Badge(_a) {
     const outlined = variant === 'outlined' || variant === 'outlinedTiny';
     const dotted = variant === 'dotted' || variant === 'dottedTiny';
     const tiny = variant === 'tiny' || variant === 'outlinedTiny' || variant === 'dottedTiny';
-    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: (0, classnames_1.default)(className, 'inline-flex items-center whitespace-nowrap', getStatusClassName(status), {
+    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: (0, classnames_1.default)(className, 'inline-flex items-center whitespace-nowrap', anchorId ? Popup_1.Popup.anchorClassName : undefined, getStatusClassName(status), {
             'h-20 label-xs label-strong leading-[20px] px-l3 rounded-full': tiny,
             'h-25 label-sm label-strong leading-[25px] rounded-full': !tiny,
             'pl-l4 pr-l5 gap-l2': hasIcon,
@@ -41,7 +42,7 @@ function Badge(_a) {
             'border-2': (outlined || dotted) && !tiny,
             'border': (outlined || dotted) && tiny,
             'cursor-pointer': onClick
-        }), tabIndex: onClick ? 0 : undefined, onClick: onClick }, props, { children: [icon &&
+        }), style: anchorId ? Popup_1.Popup.getAnchorStyle(anchorId, style) : style, tabIndex: onClick ? 0 : undefined, onClick: onClick }, props, { children: [icon &&
                 (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: icon, size: "md" }), label] })));
 }
 // helpers

package/dist/core/components/fields/DynamicPagesEditor.js

@@ -77,7 +77,8 @@ function DynamicPagesEditor({ className, dynamicPages }) {
         // set initial value
         dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData({
             types: schema.types === 'all' ? undefined : schema.types,
-            sort: 'latest'
+            sort: 'latest',
+            schema: schema.meta
         });
     }, [dynamicPages, schema]);
     // helpers
@@ -103,7 +104,7 @@ function DynamicPagesEditor({ className, dynamicPages }) {
         }));
         // update field value
         const { value } = (_b = dynamicPages.value) !== null && _b !== void 0 ? _b : {};
-        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: [...(_c = value === null || value === void 0 ? void 0 : value.staticPages) !== null && _c !== void 0 ? _c : [], newPageItem] }));
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: [...(_c = value === null || value === void 0 ? void 0 : value.staticPages) !== null && _c !== void 0 ? _c : [], newPageItem], schema: schema.meta }));
     };
     const onPagePriorityChange = async () => {
         var _a, _b;
@@ -116,7 +117,7 @@ function DynamicPagesEditor({ className, dynamicPages }) {
         }
         // update field value
         const { value } = (_b = dynamicPages.value) !== null && _b !== void 0 ? _b : {};
-        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { sort: result.length > 0 ? result : 'latest' }));
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { sort: result.length > 0 ? result : 'latest', schema: schema.meta }));
     };
     const onPageReorder = ({ items, fromIndex, toIndex }) => {
         var _a;
@@ -137,7 +138,7 @@ function DynamicPagesEditor({ className, dynamicPages }) {
         setReorderedOn(Date.now());
         // update field value
         const { value } = (_a = dynamicPages.value) !== null && _a !== void 0 ? _a : {};
-        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: updatedItems }));
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: updatedItems, schema: schema.meta }));
     };
     const onSelectPageCard = (id) => {
         // add/remove page id
@@ -172,7 +173,7 @@ function DynamicPagesEditor({ className, dynamicPages }) {
         const staticPages = (_c = value === null || value === void 0 ? void 0 : value.staticPages) !== null && _c !== void 0 ? _c : [];
         const replaceIndex = staticPages.findIndex(page => page.value.id === id);
         const updatedStaticPages = staticPages.with(replaceIndex, newPageItem);
-        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: updatedStaticPages }));
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: updatedStaticPages, schema: schema.meta }));
     };
     const onDeleteSelected = async () => {
         var _a, _b;
@@ -193,7 +194,7 @@ function DynamicPagesEditor({ className, dynamicPages }) {
         // delete items
         const { value } = (_a = dynamicPages.value) !== null && _a !== void 0 ? _a : {};
         const updatedStaticPages = (_b = value === null || value === void 0 ? void 0 : value.staticPages) === null || _b === void 0 ? void 0 : _b.filter(page => !multiSelect.selectedIds.includes(page.value.id));
-        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: updatedStaticPages }));
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: updatedStaticPages, schema: schema.meta }));
         // reset/close dialog
         multiSelect.setSelectedIds([]);
         multiSelect.setSelecting(false);

package/dist/core/components/fields/EmptyFieldCard.js

@@ -9,15 +9,15 @@ const funnel_core_1 = require("@nascentdigital/funnel-core");
 const client_1 = require("@nascentdigital/funnel-ui/client");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
+const interaction_1 = require("../interaction");
 const visuals_1 = require("../visuals");
 const factories_1 = require("./factories");
 // component
 function EmptyFieldCard({ className, schema, field, onClick, onCreated = funnel_core_1.Fn.NoOp, onEditing = funnel_core_1.Fn.NoOp }) {
     // bind props + state
+    const id = (0, react_1.useId)();
     const { name } = schema;
     const [creating, setCreating] = (0, react_1.useState)(false);
-    const rootElementRef = (0, react_1.useRef)(null);
-    const rootElement = rootElementRef.current;
     const onCreatedRef = (0, react_1.useRef)(onCreated);
     onCreatedRef.current = onCreated;
     // helpers
@@ -47,6 +47,6 @@ function EmptyFieldCard({ className, schema, field, onClick, onCreated = funnel_
         onCreatedRef.current(data);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("section", { ref: rootElementRef, className: (0, classnames_1.default)(className, 'h-full outline outline-1 outline-transparent overflow-hidden cursor-pointer interpolate', 'bg-surface1 border border-dashed border-border-l1 rounded-md', 'hover:bg-ix-primary-hover/tint0 hover:border-ix-primary hover:border-solid', 'focus-visible:bg-ix-primary-hover/tint0 focus-visible:border-ix-primary focus-visible:border-solid focus-visible:outline-ix-primary', 'active:scale-[.97] active:interpolate-fast'), onClick: onCreateStart, onKeyDown: client_1.OnKey.enter(onCreateStart), tabIndex: 0, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full flex flex-col justify-center items-center pointer-events-none interpolate", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-l5 p-l5", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-l5 text-ix-secondary bg-ix-primary rounded-full", children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Plus", size: "sm" }) }), (0, jsx_runtime_1.jsxs)("span", { className: "block label-md text-content-primary text-center", children: ["Select ", name] })] }) }) }), !onClick && creating && rootElement &&
-                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { anchor: rootElement, itemSchema: schema, field: field, onCommit: onCreateComplete, onCancel: onCreateCancel })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Popup.AnchorElement, { tag: "section", anchorId: id, className: (0, classnames_1.default)(className, 'h-full outline outline-1 outline-transparent overflow-hidden cursor-pointer interpolate', 'bg-surface1 border border-dashed border-border-l1 rounded-md', 'hover:bg-ix-primary-hover/tint0 hover:border-ix-primary hover:border-solid', 'focus-visible:bg-ix-primary-hover/tint0 focus-visible:border-ix-primary focus-visible:border-solid focus-visible:outline-ix-primary', 'active:scale-[.97] active:interpolate-fast'), onClick: onCreateStart, onKeyDown: client_1.OnKey.enter(onCreateStart), tabIndex: 0, children: (0, jsx_runtime_1.jsx)("div", { className: "h-full flex flex-col justify-center items-center pointer-events-none interpolate", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-l5 p-l5", children: [(0, jsx_runtime_1.jsx)("div", { className: "p-l5 text-ix-secondary bg-ix-primary rounded-full", children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Plus", size: "sm" }) }), (0, jsx_runtime_1.jsxs)("span", { className: "block label-md text-content-primary text-center", children: ["Select ", name] })] }) }) }), !onClick && creating &&
+                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { anchor: id, itemSchema: schema, field: field, onCommit: onCreateComplete, onCancel: onCreateCancel })] }));
 }

package/dist/core/components/fields/FieldCardLayout.js

@@ -10,6 +10,7 @@ const client_1 = require("@nascentdigital/funnel-ui/client");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const hooks_1 = require("../../hooks");
+const index_1 = require("../../index");
 const factories_1 = require("./factories");
 const FieldHeader_1 = require("./FieldHeader");
 // component
@@ -19,8 +20,7 @@ function FieldCardLayout({ className, tip, field, empty, deletable = false, embe
     const [hovering, setHovering] = (0, react_1.useState)(false);
     const [focused, setFocused] = (0, react_1.useState)(false);
     const [editing, setEditing] = (0, react_1.useState)(false);
-    const rootElementRef = (0, react_1.useRef)(null);
-    const rootElement = rootElementRef.current;
+    const id = (0, react_1.useId)();
     const active = hovering || focused;
     const onActiveChangedRef = (0, react_1.useRef)(onActiveChanged);
     onActiveChangedRef.current = onActiveChanged;
@@ -56,9 +56,9 @@ function FieldCardLayout({ className, tip, field, empty, deletable = false, embe
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'relative w-[212px] flex flex-col'), onPointerEnter: () => setHovering(true), onPointerLeave: () => setHovering(false), children: [!embedded &&
                         (0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { className: "w-full", label: schema.name, tip: tip !== null && tip !== void 0 ? tip : schema.description, active: active, onDelete: deletable
                                 ? () => onDelete(field)
-                                : undefined }), (0, jsx_runtime_1.jsx)("div", { ref: rootElementRef, className: (0, classnames_1.default)('FieldCard h-[170px]', {
+                                : undefined }), (0, jsx_runtime_1.jsx)(index_1.Popup.AnchorElement, { tag: "div", anchorId: id, className: (0, classnames_1.default)('FieldCard h-[170px]', {
                             'pointer-events-none': selecting,
                             'FieldCard-empty': empty !== null && empty !== void 0 ? empty : !field.hasValue
-                        }), onClick: selecting ? undefined : onEdit, onKeyDown: selecting ? undefined : client_1.OnKey.enter(onEdit), tabIndex: selecting ? -1 : 0, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: children })] }), editing && rootElement &&
-                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { itemSchema: schema, field: field, anchor: rootElement, onCommit: onEdited, onCancel: onCancel })] }));
+                        }), onClick: selecting ? undefined : onEdit, onKeyDown: selecting ? undefined : client_1.OnKey.enter(onEdit), tabIndex: selecting ? -1 : 0, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: children })] }), editing &&
+                (0, jsx_runtime_1.jsx)(factories_1.FieldValueFactory, { itemSchema: schema, field: field, anchor: id, onCommit: onEdited, onCancel: onCancel })] }));
 }

package/dist/core/components/fields/FieldHeader.js

@@ -17,6 +17,7 @@ function FieldHeader({ className, size = 'md', fieldId, label, tip, embedded = f
     const [tipAnchor, setTipAnchor] = (0, react_1.useState)();
     const [focused, setFocused] = (0, react_1.useState)(false);
     const [active, setActive] = (0, react_1.useState)(fieldActive || focused);
+    const id = (0, react_1.useId)();
     const activeRef = (0, react_1.useRef)(active);
     activeRef.current = active;
     // update active (with delay if deactivating)
@@ -58,10 +59,10 @@ function FieldHeader({ className, size = 'md', fieldId, label, tip, embedded = f
         }), children: [fieldId && !embedded
                 ? (0, jsx_runtime_1.jsx)("label", { className: labelClassName, htmlFor: fieldId, children: label })
                 : (0, jsx_runtime_1.jsx)("span", { className: labelClassName, children: embedded ? '' : label }), tip && !embedded &&
-                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)({
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Popup.AnchorElement, { tag: "div", anchorId: id, className: (0, classnames_1.default)({
                                 'opacity-none pointer-events-none interpolate-fast': !active,
                                 'opacity-full pointer-events-auto interpolate': active
-                            }), onPointerEnter: e => setTipAnchor(e.currentTarget), onPointerLeave: () => setTipAnchor(undefined), children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Info", size: size === 'md' ? 'sm' : 'xs' }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 pointer-events-none', 'border border-solid border-border-l1 rounded-sm shadow-tooltip', {
+                            }), onPointerEnter: e => setTipAnchor(id), onPointerLeave: () => setTipAnchor(undefined), children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Info", size: size === 'md' ? 'sm' : 'xs' }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 pointer-events-none', 'border border-solid border-border-l1 rounded-sm shadow-tooltip', {
                                 'px-l5 py-l4': size === 'md',
                                 'px-l4 py-l3': size !== 'md'
                             }), open: !!tipAnchor, anchor: tipAnchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTipAnchor(undefined), children: (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { className: (0, classnames_1.default)('block text-content-primary text-pretty', {

package/dist/core/components/fields/FieldsPanel.js

@@ -14,15 +14,15 @@ function FieldsPanel({ className, title, actions, fields, autoFocus = false }) {
     const fieldGroups = groupFields(fields);
     // create header
     const header = (title || actions) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [title &&
-                (0, jsx_runtime_1.jsx)("h2", { className: "heading-lg flex-1", children: title }), actions &&
+                (0, jsx_runtime_1.jsx)("h3", { className: "heading-md flex-1", children: title }), actions &&
                 (0, jsx_runtime_1.jsx)("div", { className: "shrink-0 flex items-center gap-l5", children: actions })] }));
-    // or rending a list of items
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, '@container flex flex-col gap-l8 shrink-0 overflow-y-scroll scrollbar-thin'), children: [header, (0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)('flex flex-col gap-l9', 'p-l8 bg-surface1 rounded-xxl'), children: fieldGroups.map(({ type, id, fields }, groupIndex) => {
+    // render panel
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-col gap-l9 p-l9 shrink-0', 'bg-surface1 rounded-xxl'), children: [header, (0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)('@container flex flex-col gap-l8'), children: fieldGroups.map(({ type, id, fields }, groupIndex) => {
                     switch (type) {
                         case 'opt-in':
                             return ((0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)('', 'flex flex-wrap items-center gap-l8'), children: fields.map(field => (0, jsx_runtime_1.jsx)(OptInField_1.OptInField, { field: field }, field.id)) }, id));
                         case 'input':
-                            return ((0, jsx_runtime_1.jsx)("section", { className: "flex flex-wrap items-center gap-l6", children: fields.map((field, fieldIndex) => (0, jsx_runtime_1.jsx)("div", { className: "w-full @fieldPanel2:w-[440px] flex justify-start", children: (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { className: "max-w-full", field: field, autoFocus: autoFocus && groupIndex === 0 && fieldIndex === 0 }) }, field.id)) }, id));
+                            return ((0, jsx_runtime_1.jsx)("section", { className: "flex flex-wrap items-center gap-l6", children: fields.map((field, fieldIndex) => (0, jsx_runtime_1.jsx)("div", { className: "w-full @fieldPanel2:w-[440px] flex justify-start", children: (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { className: "w-full max-w-full", field: field, autoFocus: autoFocus && groupIndex === 0 && fieldIndex === 0 }) }, field.id)) }, id));
                         case 'card':
                             return ((0, jsx_runtime_1.jsx)("section", { className: "flex flex-wrap items-center gap-l6", children: fields.map((field, fieldIndex) => (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { field: field }, field.id)) }, id));
                         case 'editor-sm':

package/dist/core/components/fields/FormEditor.js

@@ -16,6 +16,7 @@ const form_1 = require("./form");
 function FormEditor({ className, form }) {
     // bind props + memos
     const [reorderedOn, setReorderedOn] = (0, react_1.useState)(0);
+    const id = (0, react_1.useId)();
     const { schema } = form;
     const formSchema = (0, react_1.useMemo)(() => funnel_core_1.Forms.current().configs[schema.formId], [schema]);
     const { description } = schema;
@@ -25,7 +26,7 @@ function FormEditor({ className, form }) {
     // sync field
     (0, hooks_1.useField)(form);
     // helpers
-    const onEditField = async (e, item) => {
+    const onEditField = async (e, item, anchorId) => {
         var _a;
         // skip if updating
         if (updating) {
@@ -42,7 +43,7 @@ function FormEditor({ className, form }) {
             form,
             schema: item.schema,
             initialValue,
-            anchor: e.currentTarget
+            anchor: anchorId
         });
         if (!updatedValue || funnel_core_1.Value.equals(updatedValue, initialValue)) {
             return;
@@ -98,8 +99,8 @@ function FormEditor({ className, form }) {
     };
     // render
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-col overflow-hidden', 'border border-solid border-border-l1 rounded-lg'), children: [(0, jsx_runtime_1.jsx)("header", { className: "flex items-center gap-l4 p-l5 label-md bg-surface2", children: (0, jsx_runtime_1.jsx)("span", { className: "text-content-primary", children: schema.name }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l6 py-l6", children: [description &&
-                        (0, jsx_runtime_1.jsx)(feedback_1.Note, { className: "mx-l6", variant: "tip", children: description }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-[10px]", children: [(0, jsx_runtime_1.jsx)("h4", { className: "label-sm label-strong text-content-secondary mx-l6", children: "Form Fields" }), (0, jsx_runtime_1.jsx)(interaction_1.Sortable, { className: "grid grid-cols-1 grid-rows-[1fr] gap-[10px] mx-l6", items: editableFields, renderItem: item => (0, jsx_runtime_1.jsx)(form_1.FormFieldItem, { id: item.id, form: form, formSchema: formSchema, schema: item.schema, value: item.initialValue, onClick: e => onEditField(e, item), disabled: updating }, item.id), onChange: onFieldReorder, enableItemClick: true, disabled: updating }), (0, jsx_runtime_1.jsx)("hr", { className: "divider my-l4 bg-border-l1" }), consentFields.length > 0 &&
-                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h4", { className: "label-sm label-strong text-content-secondary mx-l6", children: "Consent Fields" }), (0, jsx_runtime_1.jsx)(interaction_1.Sortable, { className: "grid grid-cols-1 grid-rows-[1fr] gap-[10px] mx-l6", items: consentFields, renderItem: item => (0, jsx_runtime_1.jsx)(form_1.FormFieldItem, { id: item.id, form: form, formSchema: formSchema, schema: item.schema, value: item.initialValue, onClick: e => onEditField(e, item), disabled: updating }, item.id), onChange: onFieldReorder, enableItemClick: true, disabled: updating })] })] })] }), (0, jsx_runtime_1.jsx)(form_1.FormFieldEditor, { ref: editorRef })] }));
+                        (0, jsx_runtime_1.jsx)(feedback_1.Note, { className: "mx-l6", variant: "tip", children: description }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-[10px]", children: [(0, jsx_runtime_1.jsx)("h4", { className: "label-sm label-strong text-content-secondary mx-l6", children: "Form Fields" }), (0, jsx_runtime_1.jsx)(interaction_1.Sortable, { className: "grid grid-cols-1 grid-rows-[1fr] gap-[10px] mx-l6", items: editableFields, renderItem: item => (0, jsx_runtime_1.jsx)(interaction_1.Popup.AnchorElement, { tag: "div", id: item.id, anchorId: `formItem-anchor-${item.id}`, children: (0, jsx_runtime_1.jsx)(form_1.FormFieldItem, { id: item.id, form: form, formSchema: formSchema, schema: item.schema, value: item.initialValue, onClick: e => onEditField(e, item, `formItem-anchor-${item.id}`), disabled: updating }) }, item.id), onChange: onFieldReorder, enableItemClick: true, disabled: updating }), (0, jsx_runtime_1.jsx)("hr", { className: "divider my-l4 bg-border-l1" }), consentFields.length > 0 &&
+                                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h4", { className: "label-sm label-strong text-content-secondary mx-l6", children: "Consent Fields" }), (0, jsx_runtime_1.jsx)(interaction_1.Sortable, { className: "grid grid-cols-1 grid-rows-[1fr] gap-[10px] mx-l6", items: consentFields, renderItem: item => (0, jsx_runtime_1.jsx)(interaction_1.Popup.AnchorElement, { tag: "div", id: item.id, anchorId: `formConsent-anchor-${item.id}`, children: (0, jsx_runtime_1.jsx)(form_1.FormFieldItem, { id: item.id, form: form, formSchema: formSchema, schema: item.schema, value: item.initialValue, onClick: e => onEditField(e, item, `formConsent-anchor-${item.id}`), disabled: updating }) }, item.id), onChange: onFieldReorder, enableItemClick: true, disabled: updating })] })] })] }), (0, jsx_runtime_1.jsx)(form_1.FormFieldEditor, { ref: editorRef })] }));
 }
 function createItems({ form, formSchema }) {
     var _a, _b;

package/dist/core/components/fields/asset/AssetEditor.d.ts

@@ -1,4 +1,5 @@
-import { Rect, Schema } from '@nascentdigital/funnel-core';
+import { Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
 export declare const AssetEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<AssetEditor.Ref>>;
 export declare namespace AssetEditor {
     type Props = {};
@@ -8,6 +9,6 @@ export declare namespace AssetEditor {
     type Options = {
         schema: Schema.AssetField;
         asset: Schema.AssetField.LinkedValue;
-        anchor: HTMLElement | Rect;
+        anchor: Popup.Anchor;
     };
 }

package/dist/core/components/fields/asset/AssetEditor.js

@@ -132,7 +132,7 @@ exports.AssetEditor = (0, react_2.forwardRef)(function AssetEditor(_, ref) {
         deferral.resolve(result !== null && result !== void 0 ? result : undefined);
     };
     // skip if we don't have any params
-    if (!deferral || !schema) {
+    if (!deferral || !schema || !anchor) {
         return null;
     }
     // render

package/dist/core/components/fields/asset/AssetUploader.d.ts

@@ -1,4 +1,5 @@
-import { Rect, Schema } from '@nascentdigital/funnel-core';
+import { Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
 export declare const AssetUploader: import("react").ForwardRefExoticComponent<import("react").RefAttributes<AssetUploader.Ref>>;
 export declare namespace AssetUploader {
     type Props = {};
@@ -7,7 +8,7 @@ export declare namespace AssetUploader {
     }
     type Options = {
         schema: Schema.AssetField;
-        anchor: HTMLElement | Rect;
+        anchor: Popup.Anchor;
     };
     type Result = Schema.Field.LinkedData<Schema.AssetField> | 'pick' | undefined;
 }

package/dist/core/components/fields/asset/AssetUploader.js

@@ -129,7 +129,7 @@ exports.AssetUploader = (0, react_2.forwardRef)(function AssetUploader(_, ref) {
         deferral.resolve(result !== null && result !== void 0 ? result : undefined);
     };
     // skip if we don't have any params
-    if (!deferral || !schema) {
+    if (!deferral || !schema || !anchor) {
         return null;
     }
     // render

package/dist/core/components/fields/collection/CollectionCard.js

@@ -14,7 +14,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollectionCard = CollectionCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
-const funnel_ui_1 = require("@nascentdigital/funnel-ui");
 const hooks_1 = require("../../../hooks");
 const feedback_1 = require("../../feedback");
 const interaction_1 = require("../../interaction");
@@ -47,16 +46,7 @@ function CollectionCard(_a) {
     }
     // create preview
     else {
-        switch (collection.type) {
-            // client
-            case funnel_ui_1.Client.schema.type:
-                content = ((0, jsx_runtime_1.jsx)(previews_1.ClientPreview, { schema: schema, client: collection }));
-                break;
-            // generic
-            default:
-                content = ((0, jsx_runtime_1.jsx)(previews_1.GenericPreview, { schema: schema, collection: collection }));
-                break;
-        }
+        content = ((0, jsx_runtime_1.jsx)(previews_1.GenericPreview, { schema: schema, collection: collection }));
     }
     // render
     return ((0, jsx_runtime_1.jsx)(FieldCardLayout_1.FieldCardLayout, Object.assign({}, props, { className: className, field: field, tip: (_b = schema.description) !== null && _b !== void 0 ? _b : collectionSchema === null || collectionSchema === void 0 ? void 0 : collectionSchema.description, children: content })));

package/dist/core/components/fields/collection/CollectionPicker.js

@@ -154,7 +154,7 @@ exports.CollectionPicker = (0, react_1.forwardRef)(function CollectionPicker({ l
             return;
         }
         // add collection
-        collectionStore.addCollection(collection);
+        collectionStore.addCollection(collection.data);
         // set result (triggers picker to close)
         setResult(collectionRef);
     };
@@ -241,11 +241,12 @@ function renderCollectionRef({ language, template, ref, onPick, setTagTooltip })
         }
     };
     // render
+    const anchorId = `col-pick-tip-${ref.id}`;
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex items-center px-l7 py-l4 select-none interpolate', 'even:bg-modal-background rounded-md', {
             'hover:bg-modal-surface2/tint2 cursor-pointer': !disabled,
             'cursor-default': disabled
         }), onClick: onClick, tabIndex: disabled ? undefined : 0, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full flex items-center gap-l8 select-none interpolate', {
                 'opacity-disabled': disabled
             }), onClick: onClick, children: [(0, jsx_runtime_1.jsx)("h3", { className: "flex-1 label-sm text-content-primary ellipsis", children: title }), tags.length > 0 &&
-                    (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l4", children: [visibleTags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)), tooltipTags.length > 0 && ((0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: `+${tooltipTags.length}`, onPointerEnter: e => setTagTooltip({ anchor: e.currentTarget, tags: tooltipTags }), onPointerLeave: () => setTagTooltip(undefined) }))] })] }) }, ref.id));
+                    (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l4", children: [visibleTags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)), tooltipTags.length > 0 && ((0, jsx_runtime_1.jsx)(feedback_1.Badge, { anchorId: anchorId, variant: "outlinedTiny", status: "draft", label: `+${tooltipTags.length}`, onPointerEnter: e => setTagTooltip({ anchor: anchorId, tags: tooltipTags }), onPointerLeave: () => setTagTooltip(undefined) }))] })] }) }, ref.id));
 }

package/dist/core/components/fields/collection/previews/index.d.ts

@@ -1,2 +1 @@
-export * from './ClientPreview';
 export * from './GenericPreview';

package/dist/core/components/fields/collection/previews/index.js

@@ -14,5 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ClientPreview"), exports);
 __exportStar(require("./GenericPreview"), exports);

package/dist/core/components/fields/embed/EmbeddedVideoEditor.d.ts

@@ -1,4 +1,4 @@
-import { Language, Rect, Schema } from '@nascentdigital/funnel-core';
+import { Language, Schema } from '@nascentdigital/funnel-core';
 export declare const EmbeddedVideoEditor: import("react").ForwardRefExoticComponent<EmbeddedVideoEditor.Props & import("react").RefAttributes<EmbeddedVideoEditor.Ref>>;
 export declare namespace EmbeddedVideoEditor {
     type Props = {
@@ -10,6 +10,6 @@ export declare namespace EmbeddedVideoEditor {
     type Options = {
         schema: Schema.EmbeddedVideoField;
         initialValue?: Schema.Field.Data<Schema.EmbeddedVideoField>;
-        anchor: HTMLElement | Rect;
+        anchor: string;
     };
 }

package/dist/core/components/fields/factories/AssetFactory.d.ts

@@ -4,7 +4,7 @@ export declare namespace AssetFactory {
     type Props = {
         schema: Schema.AssetField;
         assetId?: Schema.Asset.Id;
-        anchor: HTMLElement;
+        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.AssetField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/CollectionFactory.d.ts

@@ -5,7 +5,7 @@ export declare namespace CollectionFactory {
         schema: Schema.CollectionField;
         language: Language;
         collection?: Schema.CollectionField.Value;
-        anchor: HTMLElement;
+        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.CollectionField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/EmbeddedVideoFactory.d.ts

@@ -1,11 +1,11 @@
-import { Callback, Language, Rect, Schema } from '@nascentdigital/funnel-core';
+import { Callback, Language, Schema } from '@nascentdigital/funnel-core';
 export declare function EmbeddedVideoFactory({ schema, initialValue, language, anchor, onCommit, onCancel }: EmbeddedVideoFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace EmbeddedVideoFactory {
     type Props = {
         schema: Schema.EmbeddedVideoField;
         initialValue?: Schema.Field.Data<Schema.EmbeddedVideoField>;
         language: Language;
-        anchor: HTMLElement | Rect;
+        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.EmbeddedVideoField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/FieldValueFactory.d.ts

@@ -2,7 +2,7 @@ import { Callback, Field, ObjectField, Schema } from '@nascentdigital/funnel-cor
 export declare function FieldValueFactory<T extends Schema.Field.Type>({ anchor, itemSchema, field, onCommit, onCancel }: FieldValueFactory.Props<T>): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace FieldValueFactory {
     type Props<T extends Schema.Field.Type = Schema.Field.Type> = {
-        anchor: HTMLElement;
+        anchor: string;
         itemSchema: T;
         field?: Field<T> | ObjectField;
         onCommit?: Callback<Schema.Field.Data<T>>;

package/dist/core/components/fields/factories/FieldValueFactory.js

@@ -11,13 +11,13 @@ const LinkFactory_1 = require("./LinkFactory");
 const ObjectFactory_1 = require("./ObjectFactory");
 const PageFactory_1 = require("./PageFactory");
 const TextFactory_1 = require("./TextFactory");
+// factory
 function FieldValueFactory({ anchor, itemSchema, field, onCommit = funnel_core_1.Fn.NoOp, onCancel = funnel_core_1.Fn.NoOp }) {
     var _a, _b, _c, _d, _e, _f;
     // bind language
     const brandConfig = funnel_core_1.AppConfig.brandConfig();
     const page = (0, hooks_1.usePossiblePage)();
     const collection = (0, hooks_1.usePossibleCollection)();
-    const store = collection !== null && collection !== void 0 ? collection : page;
     const region = (_a = page === null || page === void 0 ? void 0 : page.region) !== null && _a !== void 0 ? _a : funnel_core_1.RegionsConfig.getDefaultRegion(brandConfig.regionalization);
     const language = (_c = (_b = page === null || page === void 0 ? void 0 : page.language) !== null && _b !== void 0 ? _b : collection === null || collection === void 0 ? void 0 : collection.language) !== null && _c !== void 0 ? _c : funnel_core_1.RegionsConfig.getDefaultLanguage(brandConfig.regionalization);
     const commit = (item) => {

package/dist/core/components/fields/factories/LinkFactory.d.ts

@@ -1,4 +1,4 @@
-import { Callback, Language, Rect, Schema } from '@nascentdigital/funnel-core';
+import { Callback, Language, Schema } from '@nascentdigital/funnel-core';
 export declare function LinkFactory({ schema, initialValue, region, language, anchor, onCommit, onCancel }: LinkFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace LinkFactory {
     type Props = {
@@ -6,7 +6,7 @@ export declare namespace LinkFactory {
         initialValue?: Schema.Field.Data<Schema.LinkField>;
         region: string;
         language: Language;
-        anchor: HTMLElement | Rect;
+        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.LinkField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/TextFactory.d.ts

@@ -1,10 +1,10 @@
-import { Callback, Rect, Schema } from '@nascentdigital/funnel-core';
+import { Callback, Schema } from '@nascentdigital/funnel-core';
 export declare function TextFactory({ schema, initialValue, anchor, onCommit, onCancel }: TextFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace TextFactory {
     type Props = {
         schema: Schema.TextField;
         initialValue?: Schema.Field.Data<Schema.TextField>;
-        anchor: HTMLElement | Rect;
+        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.TextField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/form/FormFieldEditor.d.ts

@@ -1,4 +1,5 @@
-import { Field, PartialBy, Rect, Schema } from '@nascentdigital/funnel-core';
+import { Field, PartialBy, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
 export declare const FormFieldEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<FormFieldEditor.Ref>>;
 export declare namespace FormFieldEditor {
     type Data = {
@@ -13,6 +14,6 @@ export declare namespace FormFieldEditor {
         form: Field<Schema.FormField>;
         schema: Schema.Field.Type;
         initialValue: PartialBy<Data, 'value'>;
-        anchor: HTMLElement | Rect;
+        anchor: Popup.Anchor;
     };
 }

package/dist/core/components/fields/index.d.ts

@@ -2,6 +2,7 @@ export * from './asset/AssetPreview';
 export * from './DateField';
 export * from './FieldEditor';
 export * from './FieldErrorController';
+export * from './FieldHeader';
 export * from './FieldSize';
 export * from './FieldsPanel';
 export * from './RichTextEditor';