@nascentdigital/funnel-editor 4.4.18

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

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldsPanel = FieldsPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const FieldEditor_1 = require("./FieldEditor");
+const OptInField_1 = require("./OptInField");
+// component
+function FieldsPanel({ className, title, actions, fields, autoFocus = false }) {
+    // bind props
+    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)("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) => {
+                    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, { 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':
+                        case 'editor-lg':
+                        case 'list':
+                        case 'form':
+                            return fields.map((field, fieldIndex) => (0, jsx_runtime_1.jsx)(FieldEditor_1.FieldEditor, { className: "w-full", field: field, autoFocus: autoFocus && groupIndex === 0 && fieldIndex === 0 }, field.id));
+                        default:
+                            return null;
+                    }
+                }) })] }));
+}
+function groupFields(fields) {
+    // reduce fields, grouping addons (opt-ins that have no value)
+    const groups = [];
+    let group = undefined;
+    for (const field of fields) {
+        // determine group type for field
+        let groupType;
+        if (!field.required && !field.exists) {
+            groupType = 'opt-in';
+        }
+        else {
+            switch (field.schema.type) {
+                case 'text':
+                case 'boolean':
+                case 'timestamp':
+                case 'date':
+                case 'enum':
+                    groupType = 'input';
+                    break;
+                case 'richtext':
+                    switch (field.schema.size) {
+                        case 'sm':
+                            groupType = 'input';
+                            break;
+                        case 'md':
+                            groupType = 'editor-sm';
+                            break;
+                        default:
+                            groupType = 'editor-lg';
+                            break;
+                    }
+                    break;
+                case 'link':
+                case 'embedded.video':
+                case 'asset':
+                case 'page':
+                case 'collection':
+                case 'object':
+                    groupType = 'card';
+                    break;
+                case 'form':
+                    groupType = 'form';
+                    break;
+                case 'list':
+                case 'dynamic.pages':
+                    groupType = 'list';
+                    break;
+                default:
+                    console.warn('[FieldsPanel] unrecognized field:', field);
+                    continue;
+            }
+        }
+        // get group (or create one, or create a new one if it's different)
+        if (!group || group.type !== groupType) {
+            // create group
+            group = {
+                type: groupType,
+                id: '',
+                fields: []
+            };
+            // add it to the list
+            groups.push(group);
+        }
+        // add field to group
+        group.fields.push(field);
+        // update id
+        group.id += group.id.length > 0
+            ? `,${field.id}`
+            : field.id;
+    }
+    // return grouped fields
+    return groups;
+}

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

@@ -0,0 +1,8 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+export declare function FormEditor({ className, form }: FormEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FormEditor {
+    type Props = {
+        className?: string;
+        form: Field<Schema.FormField>;
+    };
+}

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

@@ -0,0 +1,139 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormEditor = FormEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const feedback_1 = require("../feedback");
+const interaction_1 = require("../interaction");
+const form_1 = require("./form");
+// component
+function FormEditor({ className, form }) {
+    // bind props + memos
+    const [reorderedOn, setReorderedOn] = (0, react_1.useState)(0);
+    const { schema } = form;
+    const formSchema = (0, react_1.useMemo)(() => funnel_core_1.Forms.current().configs[schema.formId], [schema]);
+    const { description } = schema;
+    const { editableFields, consentFields, sortedOn } = (0, react_1.useMemo)(() => createItems({ form, formSchema }), [form, formSchema]);
+    const editorRef = (0, react_1.useRef)(null);
+    const updating = reorderedOn > sortedOn;
+    // sync field
+    (0, hooks_1.useField)(form);
+    // helpers
+    const onEditField = async (e, item) => {
+        var _a;
+        // skip if updating
+        if (updating) {
+            return;
+        }
+        // skip if there's no editor (shouldn't happen)
+        const editor = editorRef.current;
+        if (!editor) {
+            return;
+        }
+        // open editor (skip if there's no change)
+        const initialValue = { id: item.id, value: item.initialValue };
+        const updatedValue = await editor.edit({
+            form,
+            schema: item.schema,
+            initialValue,
+            anchor: e.currentTarget
+        });
+        if (!updatedValue || funnel_core_1.Value.equals(updatedValue, initialValue)) {
+            return;
+        }
+        // otherwise update form
+        const { value: { fields = {} } = {} } = (_a = form.value) !== null && _a !== void 0 ? _a : {};
+        const formData = {
+            formId: schema.formId,
+            fields: Object.assign(Object.assign({}, fields), { [updatedValue.id]: updatedValue.value })
+        };
+        form.value = funnel_core_1.Schema.FormField.Value.toData(formData);
+    };
+    // break if mixed content is encountered
+    if (!formSchema) {
+        return ((0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: {
+                title: 'Invalid FormField schema',
+                message: `We couldn't load the "${schema.formId}" form.  Is it properly configured in your site?`
+            } }));
+    }
+    // helpers
+    const onFieldReorder = ({ items, item, fromIndex, toIndex }) => {
+        // ignore if updating
+        if (updating) {
+            return;
+        }
+        // move item
+        const newItems = items.filter(({ id }) => id !== item.id);
+        newItems.splice(toIndex, 0, item);
+        // update fields
+        let ordinal = funnel_core_1.Ordinal.new();
+        newItems.forEach(item => {
+            item.ordinal = ordinal;
+            ordinal = ordinal.next;
+        });
+        // re-sort fields (updates the visible list)
+        editableFields.sort((lhs, rhs) => lhs.ordinal.compareTo(rhs.ordinal));
+        consentFields.sort((lhs, rhs) => lhs.ordinal.compareTo(rhs.ordinal));
+        // mark reordered (locks list until updates are saved)
+        setReorderedOn(Date.now());
+        // update form (starts saving)
+        form.value = funnel_core_1.Schema.FormField.Value.toData({
+            formId: schema.formId,
+            fields: Object.assign(Object.assign({}, editableFields.reduce((fields, item) => {
+                var _a;
+                fields[item.id] = Object.assign(Object.assign({ name: item.schema.name }, ((_a = item.initialValue) !== null && _a !== void 0 ? _a : {})), { order: item.ordinal.order });
+                return fields;
+            }, {})), consentFields.reduce((fields, item) => {
+                var _a;
+                fields[item.id] = Object.assign(Object.assign({ name: item.schema.name }, ((_a = item.initialValue) !== null && _a !== void 0 ? _a : {})), { order: item.ordinal.order });
+                return fields;
+            }, {}))
+        });
+    };
+    // 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 })] }));
+}
+function createItems({ form, formSchema }) {
+    var _a, _b;
+    // helper
+    const { fields = {} } = (_a = funnel_core_1.Schema.FormField.Value.fromData(form.value)) !== null && _a !== void 0 ? _a : {};
+    let lastOrdinal = undefined;
+    const createItemData = ([id, schema]) => {
+        var _a;
+        // determine value + ordinal
+        const initialValue = fields[id];
+        const ordinal = initialValue
+            ? funnel_core_1.Ordinal.from(initialValue.order)
+            : (_a = lastOrdinal === null || lastOrdinal === void 0 ? void 0 : lastOrdinal.next) !== null && _a !== void 0 ? _a : funnel_core_1.Ordinal.new();
+        lastOrdinal = lastOrdinal && ordinal
+            ? lastOrdinal.compareTo(ordinal) > 0
+                ? lastOrdinal
+                : ordinal
+            : lastOrdinal !== null && lastOrdinal !== void 0 ? lastOrdinal : ordinal;
+        // return item data
+        return {
+            id,
+            schema,
+            initialValue,
+            ordinal
+        };
+    };
+    // create item entries
+    return {
+        editableFields: Object.entries(formSchema.schema.editableFields)
+            .map(createItemData)
+            .sort((lhs, rhs) => lhs.ordinal.compareTo(rhs.ordinal)),
+        consentFields: Object.entries((_b = formSchema.schema.consentFields) !== null && _b !== void 0 ? _b : {})
+            .map(createItemData)
+            .sort((lhs, rhs) => lhs.ordinal.compareTo(rhs.ordinal)),
+        sortedOn: Date.now()
+    };
+}

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

@@ -0,0 +1,8 @@
+import { FieldList } from '@nascentdigital/funnel-core';
+export declare function ListEditor({ className, list }: ListEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ListEditor {
+    type Props = {
+        className?: string;
+        list: FieldList;
+    };
+}

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

@@ -0,0 +1,152 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListEditor = ListEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const feedback_1 = require("../feedback");
+const interaction_1 = require("../interaction");
+const FieldCard_1 = require("./FieldCard");
+const list_1 = require("./list");
+// component
+function ListEditor({ className, list }) {
+    // bind props + memos
+    const { schema, composition, items } = list;
+    const { description, max } = schema;
+    const min = schema.required ? schema.min : 0;
+    const [editing, setEditing] = (0, react_1.useState)(false);
+    const dialog = (0, feedback_1.useDialog)();
+    const itemIds = (0, react_1.useMemo)(() => items.map(item => item.id), [items]);
+    const [multiSelectRef, multiSelect] = (0, interaction_1.useMultiSelectControls)();
+    const { selecting = false, selectedIds = [] } = multiSelect !== null && multiSelect !== void 0 ? multiSelect : {};
+    // sync field
+    (0, hooks_1.useField)(list);
+    // helpers
+    const onCreateItem = (schema, data) => {
+        // fail if data is list data (no nesting lists)
+        if (data.type === 'list') {
+            return;
+        }
+        // add list item
+        list.addItem(Object.assign({ schema, id: funnel_core_1.Value.uuid() }, data));
+    };
+    const onSortItems = (0, react_1.useCallback)(({ fromIndex, toIndex }) => list.moveItem(fromIndex, toIndex), [list]);
+    // break if mixed content is encountered
+    if (composition === 'mixed') {
+        return ((0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: {
+                title: 'Invalid ListField schema',
+                message: `Lists don't support combining simple/complex content: [${Object.entries(schema.itemTypes).map(([key, itemType]) => `${key}/${itemType.type}`).join(', ')}]`
+            } }));
+    }
+    // render
+    const itemCount = items.length;
+    const itemCountValid = itemCount >= min && itemCount <= max;
+    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.jsxs)("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.jsx)("span", { className: (0, classnames_1.default)({
+                            'text-info-content': itemCountValid,
+                            'text-destructive-content': !itemCountValid
+                        }), children: itemCount < min
+                            ? `(${min - itemCount} items still required)`
+                            : itemCount > max
+                                ? `(${itemCount - max} too many items)`
+                                : itemCount === max
+                                    ? `(maxed out)`
+                                    : `(${itemCount} of ${max} items)` })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l6 p-l6", children: [description &&
+                        (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), renderControls({
+                        list,
+                        dialog,
+                        itemIds,
+                        multiSelectRef,
+                        multiSelect,
+                        setEditing,
+                        onCreateItem
+                    }), itemCount === 0
+                        ?
+                            (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex justify-center items-center p-l6 select-none', 'label-md text-ix-disabled-content bg-ix-disabled rounded-md', {
+                                    'min-h-[200px]': composition !== 'simple'
+                                }), children: schema.required
+                                    ?
+                                        (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "No items to display" })
+                                    :
+                                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Having second thoughts?", (0, jsx_runtime_1.jsx)(interaction_1.Button, { className: "inline-block ml-l5 mr-l3", variant: "primary", size: "xs", onClick: () => list.optOut(), children: "Remove" }), "this list."] }) })
+                        :
+                            (0, jsx_runtime_1.jsx)(interaction_1.Sortable, { className: (0, classnames_1.default)('@container flex flex-wrap gap-l6'), itemClassName: "outline-none", enableItemClick: true, items: items, renderItem: (item) => renderItem({
+                                    list,
+                                    item,
+                                    multiSelect,
+                                    selecting,
+                                    selectedIds,
+                                    onEditing: setEditing
+                                }), onChange: onSortItems, disabled: editing || selecting })] })] }));
+}
+function renderControls({ list, dialog, itemIds, multiSelectRef, multiSelect, setEditing, onCreateItem }) {
+    // bind props
+    const { schema, items } = list;
+    const itemTypes = Object.entries(schema.itemTypes);
+    // helpers
+    const onDeleteSelected = async () => {
+        // skip if there's no selector
+        if (!multiSelect) {
+            return;
+        }
+        // confirm (bail if not confirmed)
+        const confirmed = await dialog.confirm({
+            title: 'Are you sure you want to delete these item?',
+            message: 'You might not be able to recover them later.',
+            confirmLabel: 'Delete',
+            destructive: true
+        });
+        if (!confirmed) {
+            return;
+        }
+        // delete items
+        list.removeItems(multiSelect.selectedIds);
+        // reset/close dialog
+        multiSelect.setSelectedIds([]);
+        multiSelect.setSelecting(false);
+    };
+    console.debug('[ListEditor] no list to render', { itemIds, composition: list.composition });
+    // handle homogeneous list
+    const itemCount = items.length;
+    const { selecting = false, selectedIds = [] } = multiSelect !== null && multiSelect !== void 0 ? multiSelect : {};
+    const selectedItemCount = selectedIds.length;
+    const canAddMore = itemCount < schema.max;
+    return ((0, jsx_runtime_1.jsxs)("nav", { className: "w-full flex flex-wrap items-center gap-l5 my-l5", children: [itemTypes.map(([itemSchemaId, itemSchema]) => (0, jsx_runtime_1.jsxs)(list_1.CreateFieldButton, { size: "sm", schema: itemSchema, onCreated: data => onCreateItem(itemSchemaId, data), onEditing: setEditing, disabled: !canAddMore || selecting, children: ["Add ", funnel_core_1.StringUtils.articleFor(itemSchema.name), " ", itemSchema.name] }, itemSchemaId)), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), itemIds.length > 0 && list.composition !== 'simple' &&
+                (0, jsx_runtime_1.jsx)(interaction_1.MultiSelectControls, { ref: multiSelectRef, ids: itemIds, actions: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "destructive", size: "sm", onClick: onDeleteSelected, disabled: selectedItemCount === 0, children: "Delete" }) })] }));
+}
+function renderItem({ list, item, multiSelect, selecting, selectedIds, onEditing }) {
+    var _a;
+    // special handling for simple types
+    const { id, field } = item;
+    if (list.composition === 'simple') {
+        const { schema } = field;
+        switch (schema.type) {
+            case 'text':
+                return ((0, jsx_runtime_1.jsx)(interaction_1.Chip, { label: (_a = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _a !== void 0 ? _a : 'Untitled', draggable: true, onDelete: () => list.removeItem(item.id) }, item.id));
+            default:
+                return ((0, jsx_runtime_1.jsxs)("span", { className: "label-sm destructive-content", children: ["No support for ", schema.type] }, item.id));
+        }
+    }
+    // return card if not selecting
+    const content = ((0, jsx_runtime_1.jsx)(FieldCard_1.FieldCard, { field: field, embedded: true, deletable: true, selecting: selecting, onEditing: onEditing }));
+    if (!selecting) {
+        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: content }, id));
+    }
+    // or wrap in overlay
+    else {
+        const selected = selectedIds.includes(item.id);
+        const onToggleSelection = () => {
+            multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.setSelectedIds(ids => selected
+                // remove if selected
+                ? ids.filter(itemId => itemId !== id)
+                // just add
+                : [...ids, id]);
+        };
+        console.debug('[ListEditor] rendering item', { itemId: item.id, selecting, selectedIds });
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "FieldCard relative w-[212px] h-[170px] overflow-hidden", onClick: onToggleSelection, children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute -inset-1 opacity-backdrop", children: content }), (0, jsx_runtime_1.jsx)(feedback_1.SelectionDecorator, { className: "absolute top-l4 right-l4 z-supersurface pointer-events-none", selected: selected })] }, id));
+    }
+}

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

@@ -0,0 +1,8 @@
+import { FieldModel } from '@nascentdigital/funnel-core';
+export declare function OptInField({ className, field }: OptInField.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace OptInField {
+    type Props = {
+        className?: string;
+        field: FieldModel;
+    };
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptInField = OptInField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../visuals");
+// component
+function OptInField({ className, field }) {
+    // helpers
+    const onOptIn = (e) => {
+        // consume event
+        e.preventDefault();
+        e.stopPropagation();
+        // toggle opt-in
+        field.optIn();
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)("button", { className: (0, classnames_1.default)(className, 'flex items-center gap-l2 pl-l1 pr-l2 overflow-hidden select-none appearance-none cursor-pointer interpolate', 'border-2 border-solid border-transparent rounded-full', 'outline outline-offset-1 outline-transparent', 'hover:border-ix-primary', 'focus-visible:border-ix-primary focus-visible:outline-ix-primary', 'active:scale-[.95] active:interpolate-fast'), onClick: onOptIn, onKeyDown: client_1.OnKey.enter(onOptIn), children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-ix-primary", variant: "CirclePlus", size: "sm" }), (0, jsx_runtime_1.jsxs)("span", { className: "label-sm label-strong text-content-primary", children: ["Add ", field.name] })] }));
+}

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

@@ -0,0 +1,24 @@
+import { Callback, Schema } from '@nascentdigital/funnel-core';
+export declare function RichTextEditor({ id, variant, className, placeholder, required, disabled, autoFocus, standalone, richText, options: optionsRaw, onChange, onFocus, onBlur }: RichTextEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace RichTextEditor {
+    type Props = {
+        id?: string;
+        variant?: Variant;
+        className?: string;
+        placeholder?: string;
+        required?: boolean;
+        disabled?: boolean;
+        autoFocus?: boolean;
+        standalone?: boolean;
+        richText?: Schema.RichTextField.Value;
+        options?: Partial<Schema.RichTextField.Capabilities.Options>;
+        onChange?: Callback<ChangeEvent>;
+        onBlur?: Callback<HTMLElement | null>;
+        onFocus?: Callback<HTMLElement | null>;
+    };
+    type Variant = 'field' | 'area' | 'editor';
+    interface ChangeEvent {
+        type: 'changed';
+        getData(): Schema.RichTextField.Value;
+    }
+}