@nascentdigital/funnel-editor 4.5.3 → 4.5.4

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

@@ -1,9 +1,11 @@
 import { PropsWithChildren } from 'react';
-export declare function Note({ className, variant, children }: Note.Props): import("react/jsx-runtime").JSX.Element;
+import { FieldSize } from '../fields';
+export declare function Note({ className, variant, size, children }: Note.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Note {
     type Props = PropsWithChildren & {
         className?: string;
         variant: Variant;
+        size?: FieldSize;
     };
     type Variant = 'tip' | 'info' | 'success' | 'error' | 'warn';
 }

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

@@ -9,9 +9,12 @@ const funnel_ui_1 = require("@nascentdigital/funnel-ui");
 const classnames_1 = __importDefault(require("classnames"));
 const visuals_1 = require("../visuals");
 // component
-function Note({ className, variant, children }) {
+function Note({ className, variant, size = 'md', children }) {
     // render
-    return ((0, jsx_runtime_1.jsxs)("p", { className: (0, classnames_1.default)(className, 'flex flex-row gap-l4 items-center', 'body-sm p-l6 border border-solid rounded-md', {
+    return ((0, jsx_runtime_1.jsxs)("p", { className: (0, classnames_1.default)(className, 'flex flex-row gap-l4 items-center', 'p-l6 border border-solid rounded-md', {
+            'label-sm': size === 'md',
+            'label-xs': size === 'sm',
+            'label-xxs': size === 'xs',
             'text-info-content bg-info/tint0 border-info-content': variant === 'tip',
             'text-draft-content bg-draft/tint0 border-draft-content': variant === 'info',
             'text-success-content bg-success/tint0 border-success-content': variant === 'success',
@@ -25,7 +28,7 @@ function Note({ className, variant, children }) {
                             ? 'CircleCheckBig'
                             : variant === 'error'
                                 ? 'CircleAlert'
-                                : 'TriangleAlert' }), typeof children === 'string'
+                                : 'TriangleAlert', size: size }), typeof children === 'string'
                 ?
                     (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { markdown: children })
                 : children] }));

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

@@ -1,10 +1,12 @@
 import { Field, Schema } from '@nascentdigital/funnel-core';
 import { FieldLayout } from './FieldLayout';
-export declare function BooleanField({ className, field, variant }: BooleanField.Props): import("react/jsx-runtime").JSX.Element;
+import { FieldSize } from './FieldSize';
+export declare function BooleanField({ className, field, variant, size }: BooleanField.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace BooleanField {
     type Props = {
         className?: string;
         field: Field<Schema.BooleanField>;
         variant?: FieldLayout.Variant;
+        size?: FieldSize;
     };
 }

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

@@ -7,7 +7,7 @@ const hooks_1 = require("../../hooks");
 const interaction_1 = require("../interaction");
 const FieldLayout_1 = require("./FieldLayout");
 // component
-function BooleanField({ className, field, variant = 'minimal' }) {
+function BooleanField({ className, field, variant = 'minimal', size = 'md' }) {
     // bind toolbar
     const { id, name, value: data, schema } = field;
     const value = funnel_core_1.Schema.BooleanField.Value.fromData(data);
@@ -25,5 +25,5 @@ function BooleanField({ className, field, variant = 'minimal' }) {
             break;
     }
     // render
-    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: variant, children: component }));
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: variant, size: size, children: component }));
 }

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

@@ -1,10 +1,12 @@
 import { Field, Schema } from '@nascentdigital/funnel-core';
 import { FieldLayout } from './FieldLayout';
-export declare function DateField({ className, field, variant }: DateField.Props): import("react/jsx-runtime").JSX.Element;
+import { FieldSize } from './FieldSize';
+export declare function DateField({ className, field, variant, size }: DateField.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace DateField {
     type Props = {
         className?: string;
         field: Field<Schema.DateField>;
         variant?: FieldLayout.Variant;
+        size?: FieldSize;
     };
 }

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

@@ -7,12 +7,12 @@ const hooks_1 = require("../../hooks");
 const interaction_1 = require("../interaction");
 const FieldLayout_1 = require("./FieldLayout");
 // component
-function DateField({ className, field, variant }) {
+function DateField({ className, field, variant, size = 'md' }) {
     // bind toolbar
     const { id, name, value: data, schema } = field;
     const value = funnel_core_1.Schema.DateField.Value.fromData(data);
     // sync field
     (0, hooks_1.useField)(field);
     // render
-    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: variant, children: (0, jsx_runtime_1.jsx)(interaction_1.DatePicker, { minDate: schema.minDate, maxDate: schema.maxDate, selected: value, onChange: value => field.value = value && funnel_core_1.Schema.DateField.Value.toData(value) }) }));
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: variant, size: size, children: (0, jsx_runtime_1.jsx)(interaction_1.DatePicker, { minDate: schema.minDate, maxDate: schema.maxDate, selected: value, onChange: value => field.value = value && funnel_core_1.Schema.DateField.Value.toData(value) }) }));
 }

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

@@ -1,11 +1,13 @@
 import { Field, Schema } from '@nascentdigital/funnel-core';
 import { FieldLayout } from './FieldLayout';
-export declare function EnumField({ className, field, variant, disabled }: EnumField.Props): import("react/jsx-runtime").JSX.Element;
+import { FieldSize } from './FieldSize';
+export declare function EnumField({ className, field, variant, size, disabled }: EnumField.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace EnumField {
     type Props = {
         className?: string;
         field: Field<Schema.EnumField>;
         variant?: FieldLayout.Variant;
+        size?: FieldSize;
         disabled?: boolean;
     };
 }

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

@@ -11,7 +11,7 @@ const hooks_1 = require("../../hooks");
 const interaction_1 = require("../interaction");
 const FieldLayout_1 = require("./FieldLayout");
 // component
-function EnumField({ className, field, variant, disabled }) {
+function EnumField({ className, field, variant, size = 'md', disabled }) {
     // bind toolbar
     const { id, value: data, schema } = field;
     const value = funnel_core_1.Schema.EnumField.Value.fromData(data);
@@ -21,16 +21,16 @@ function EnumField({ className, field, variant, disabled }) {
     let picker;
     switch (schema.semantics) {
         case 'dropdown':
-            picker = ((0, jsx_runtime_1.jsx)(interaction_1.Combobox, { className: "w-full", id: id, options: getComboboxOptions(schema), selectedOption: value !== null && value !== void 0 ? value : schema.defaultOption, onSelect: value => field.value = funnel_core_1.Schema.EnumField.Value.toData(value), disabled: disabled }));
+            picker = ((0, jsx_runtime_1.jsx)(interaction_1.Combobox, { className: "w-full", id: id, size: size, options: getComboboxOptions(schema), selectedOption: value !== null && value !== void 0 ? value : schema.defaultOption, onSelect: value => field.value = funnel_core_1.Schema.EnumField.Value.toData(value), disabled: disabled }));
             break;
         case 'segmented':
-            picker = ((0, jsx_runtime_1.jsx)(interaction_1.SegmentedButton, { options: getSegmentedButtonOptions(schema), selected: value !== null && value !== void 0 ? value : schema.defaultOption, onSelectionChange: ([value]) => field.value = funnel_core_1.Schema.EnumField.Value.toData(value), disabled: disabled }));
+            picker = ((0, jsx_runtime_1.jsx)(interaction_1.SegmentedButton, { size: size, options: getSegmentedButtonOptions(schema), selected: value !== null && value !== void 0 ? value : schema.defaultOption, onSelectionChange: ([value]) => field.value = funnel_core_1.Schema.EnumField.Value.toData(value), disabled: disabled }));
             break;
         default:
             throw new funnel_core_1.NotImplementedError('No support for EnumField with "radio" semantics');
     }
     // render
-    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, 'w-full'), field: field, variant: variant, children: picker }));
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, 'w-full'), field: field, variant: variant, size: size, children: picker }));
 }
 // helper
 function getComboboxOptions(schema) {

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

@@ -1,11 +1,13 @@
 import { Callback, FieldModel } from '@nascentdigital/funnel-core';
 import { FieldLayout } from './FieldLayout';
-export declare function FieldEditor({ className, field, variant, standalone, autoFocus: autoFocusRaw, disabled, secured, onValidChanged }: FieldEditor.Props): import("react/jsx-runtime").JSX.Element;
+import { FieldSize } from './FieldSize';
+export declare function FieldEditor({ className, field, variant, size, standalone, autoFocus: autoFocusRaw, disabled, secured, onValidChanged }: FieldEditor.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace FieldEditor {
     type Props = {
         className?: string;
         field: FieldModel;
         variant?: FieldLayout.Variant;
+        size?: FieldSize;
         standalone?: boolean;
         autoFocus?: boolean;
         secured?: boolean;

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

@@ -17,7 +17,7 @@ const RichTextField_1 = require("./RichTextField");
 const TextField_1 = require("./TextField");
 const TimestampField_1 = require("./TimestampField");
 // component
-function FieldEditor({ className, field, variant, standalone = false, autoFocus: autoFocusRaw = false, disabled = false, secured = false, onValidChanged = funnel_core_1.Fn.NoOp }) {
+function FieldEditor({ className, field, variant, size = 'md', standalone = false, autoFocus: autoFocusRaw = false, disabled = false, secured = false, onValidChanged = funnel_core_1.Fn.NoOp }) {
     // bind state + hooks
     const wasValidRef = (0, react_1.useRef)(field.valid);
     const dialog = (0, feedback_1.useDialog)();
@@ -61,17 +61,17 @@ function FieldEditor({ className, field, variant, standalone = false, autoFocus:
     if (field instanceof funnel_core_1.Field) {
         switch (schema.type) {
             case 'text':
-                return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { className: className, field: field, variant: variant, autoFocus: autoFocus, disabled: disabled, secured: secured }));
+                return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { className: className, field: field, size: size, variant: variant, autoFocus: autoFocus, disabled: disabled, secured: secured }));
             case 'richtext':
-                return ((0, jsx_runtime_1.jsx)(RichTextField_1.RichTextField, { className: className, field: field, standalone: standalone, autoFocus: autoFocus, disabled: disabled }));
+                return ((0, jsx_runtime_1.jsx)(RichTextField_1.RichTextField, { className: className, field: field, autoFocus: autoFocus, disabled: disabled }));
             case 'enum':
-                return ((0, jsx_runtime_1.jsx)(EnumField_1.EnumField, { className: className, field: field, variant: variant, disabled: disabled }));
+                return ((0, jsx_runtime_1.jsx)(EnumField_1.EnumField, { className: className, field: field, size: size, variant: variant, disabled: disabled }));
             case 'boolean':
-                return ((0, jsx_runtime_1.jsx)(BooleanField_1.BooleanField, { className: className, field: field, variant: variant }));
+                return ((0, jsx_runtime_1.jsx)(BooleanField_1.BooleanField, { className: className, field: field, size: size, variant: variant }));
             case 'date':
-                return ((0, jsx_runtime_1.jsx)(DateField_1.DateField, { className: className, field: field, variant: variant }));
+                return ((0, jsx_runtime_1.jsx)(DateField_1.DateField, { className: className, field: field, size: size, variant: variant }));
             case 'timestamp':
-                return ((0, jsx_runtime_1.jsx)(TimestampField_1.TimestampField, { className: className, field: field, variant: variant, autoFocus: autoFocus, disabled: disabled, secured: secured }));
+                return ((0, jsx_runtime_1.jsx)(TimestampField_1.TimestampField, { className: className, field: field, size: size, variant: variant, autoFocus: autoFocus, disabled: disabled, secured: secured }));
             case 'link':
             case 'asset':
             case 'embedded.video':

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

@@ -1,8 +1,10 @@
 import { Callback } from '@nascentdigital/funnel-core';
-export declare function FieldHeader({ className, fieldId, label, tip, embedded, active: fieldActive, onDelete }: FieldHeader.Props): import("react/jsx-runtime").JSX.Element;
+import { FieldSize } from './FieldSize';
+export declare function FieldHeader({ className, size, fieldId, label, tip, embedded, active: fieldActive, onDelete }: FieldHeader.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace FieldHeader {
     type Props = {
         className?: string;
+        size?: FieldSize;
         fieldId?: string;
         label?: string;
         tip?: string;

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

@@ -12,7 +12,7 @@ const interaction_1 = require("../interaction");
 const visuals_1 = require("../visuals");
 const rxjs_1 = require("rxjs");
 // component
-function FieldHeader({ className, fieldId, label, tip, embedded = false, active: fieldActive = false, onDelete }) {
+function FieldHeader({ className, size = 'md', fieldId, label, tip, embedded = false, active: fieldActive = false, onDelete }) {
     // bind hooks
     const [tipAnchor, setTipAnchor] = (0, react_1.useState)();
     const [focused, setFocused] = (0, react_1.useState)(false);
@@ -47,16 +47,29 @@ function FieldHeader({ className, fieldId, label, tip, embedded = false, active:
         }
     }, [fieldActive, focused]);
     // render
-    const labelClassName = 'shrink-0 flex-1 label-md';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'h-24 flex items-center gap-l2', 'text-content-primary'), children: [fieldId && !embedded
+    const labelClassName = (0, classnames_1.default)('shrink-0 flex-1', {
+        'label-md': size === 'md',
+        'label-xs': size === 'sm',
+        'label-xxs': size === 'xs'
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex items-center text-content-secondary gap-l2', {
+            'h-32': size === 'md',
+            'h-20': size !== 'md'
+        }), 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)({
                                 '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: "sm" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-sm px-l5 py-l4 pointer-events-none', 'border border-solid border-border-l1 shadow-tooltip'), open: !!tipAnchor, anchor: tipAnchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTipAnchor(undefined), children: (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { className: "block body-sm text-content-primary text-pretty", markdown: tip }) })] }), onDelete &&
+                            }), 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', {
+                                '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', {
+                                    'body-sm': size === 'md',
+                                    'body-xs': size !== 'md'
+                                }), markdown: tip }) })] }), onDelete &&
                 (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { className: (0, classnames_1.default)({
                         'opacity-none pointer-events-none interpolate-fast': !active,
                         'opacity-full pointer-events-auto interpolate': active
-                    }), size: "xs", icon: "X", disabled: !active, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => onDelete() })] }));
+                    }), icon: "X", size: size === 'md' ? 'xs' : 'xxs', disabled: !active, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => onDelete() })] }));
 }

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

@@ -1,11 +1,13 @@
 import { Callback, Field } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
-export declare function FieldLayout({ field, className, label: rawLabel, variant, onActiveChanged, children }: FieldLayout.Props): import("react/jsx-runtime").JSX.Element;
+import { FieldSize } from './FieldSize';
+export declare function FieldLayout({ field, className, label: rawLabel, variant, size, onActiveChanged, children }: FieldLayout.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace FieldLayout {
     type Variant = 'default' | 'wide' | 'minimal';
     type Props = {
         field?: Field;
         variant?: Variant;
+        size?: FieldSize;
         className?: string;
         label?: string;
         secured?: boolean;

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

@@ -14,7 +14,7 @@ const FieldErrorController_1 = require("./FieldErrorController");
 const FieldHeader_1 = require("./FieldHeader");
 const classnames_1 = __importDefault(require("classnames"));
 // component
-function FieldLayout({ field, className, label: rawLabel, variant = 'default', onActiveChanged = funnel_core_1.Fn.NoOp, children }) {
+function FieldLayout({ field, className, label: rawLabel, variant = 'default', size = 'md', onActiveChanged = funnel_core_1.Fn.NoOp, children }) {
     var _a;
     // bind props + hook
     const { schema, name = 'Unknown', canOptOut = false } = field !== null && field !== void 0 ? field : {};
@@ -53,9 +53,22 @@ function FieldLayout({ field, className, label: rawLabel, variant = 'default', o
     };
     // render
     return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, {
-            'flex flex-col gap-m2': variant !== 'wide',
+            'flex flex-col gap-l2': variant !== 'wide',
             'grid grid-cols-subgrid items-center': variant === 'wide'
         }), onPointerEnter: onActive, onPointerLeave: onInactive, children: [!minimal &&
-                (0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { fieldId: field === null || field === void 0 ? void 0 : field.id, label: label, tip: description, active: active || (field === null || field === void 0 ? void 0 : field.editing) === true, onDelete: canOptOut ? onOptOut : undefined }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-[200px]", children: [children, !minimal && hasErrors &&
-                        (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-l2 mt-l3", "aria-live": "polite", children: errors.map((error, index) => (0, jsx_runtime_1.jsxs)("li", { className: "flex items-center gap-l2 text-destructive", children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "TriangleAlert", size: "sm" }), (0, jsx_runtime_1.jsx)("span", { className: "label-sm ellipsis", children: error.message })] }, `error_${index}`)) })] })] }));
+                (0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { fieldId: field === null || field === void 0 ? void 0 : field.id, size: size, label: label, tip: description, active: active || (field === null || field === void 0 ? void 0 : field.editing) === true, onDelete: canOptOut ? onOptOut : undefined }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)({
+                    'min-w-[200px]': size === 'md',
+                    'min-w-[180px]': size !== 'sm',
+                    'min-w-[120px]': size !== 'xs'
+                }), children: [children, !minimal && hasErrors &&
+                        (0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)('flex flex-col', {
+                                'gap-l2 mt-l3': size === 'md',
+                                'gap-l1 mt-l2': size !== 'md'
+                            }), "aria-live": "polite", children: errors.map((error, index) => (0, jsx_runtime_1.jsxs)("li", { className: (0, classnames_1.default)('flex items-center text-destructive', {
+                                    'gap-l2': size === 'md',
+                                    'gap-l1': size !== 'md'
+                                }), children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "TriangleAlert", size: size === 'md' ? 'sm' : 'xxs' }), (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('ellipsis', {
+                                            'label-sm': size === 'md',
+                                            'label-xxs': size !== 'md'
+                                        }), children: error.message })] }, `error_${index}`)) })] })] }));
 }

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

@@ -0,0 +1 @@
+export type FieldSize = 'md' | 'sm' | 'xs';

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -22,7 +22,7 @@ function FieldsPanel({ className, title, actions, fields, autoFocus = false }) {
                         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));
+                            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));
                         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':
@@ -55,11 +55,12 @@ function groupFields(fields) {
                     groupType = 'input';
                     break;
                 case 'richtext':
-                    switch (field.schema.size) {
-                        case 'sm':
+                    switch (field.schema.semantics) {
+                        case 'field':
                             groupType = 'input';
                             break;
-                        case 'md':
+                        case 'area':
+                        case 'mini-editor':
                             groupType = 'editor-sm';
                             break;
                         default:

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

@@ -1,15 +1,14 @@
 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 function RichTextEditor({ id, variant, className, placeholder, required, disabled, autoFocus, richText, options: optionsRaw, onChange, onFocus, onBlur }: RichTextEditor.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace RichTextEditor {
     type Props = {
         id?: string;
-        variant?: Variant;
+        variant?: Schema.RichTextField.Semantics;
         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>;

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

@@ -38,7 +38,7 @@ const lexical_1 = require("lexical");
 const react_1 = require("react");
 const richtext_1 = require("./richtext");
 // component
-function RichTextEditor({ id, variant = 'area', className, placeholder = DEFAULT_PLACEHOLDER, required = false, disabled = false, autoFocus = false, standalone = false, richText, options: optionsRaw, onChange = funnel_core_1.Fn.NoOp, onFocus = funnel_core_1.Fn.NoOp, onBlur = funnel_core_1.Fn.NoOp }) {
+function RichTextEditor({ id, variant = 'area', className, placeholder = DEFAULT_PLACEHOLDER, required = false, disabled = false, autoFocus = false, richText, options: optionsRaw, onChange = funnel_core_1.Fn.NoOp, onFocus = funnel_core_1.Fn.NoOp, onBlur = funnel_core_1.Fn.NoOp }) {
     // sync change callback/ref
     const latestRawOptions = (0, client_1.useLatestValue)(optionsRaw !== null && optionsRaw !== void 0 ? optionsRaw : {});
     const options = (0, react_1.useMemo)(() => funnel_core_1.Schema.RichTextField.Capabilities.parse(latestRawOptions), [latestRawOptions]);
@@ -160,21 +160,24 @@ function RichTextEditor({ id, variant = 'area', className, placeholder = DEFAULT
     // render
     const isField = variant === 'field';
     const isArea = variant === 'area';
-    const isEditor = variant === 'editor';
+    const isMiniEditor = variant === 'mini-editor';
+    const isFullEditor = variant === 'full-editor';
+    const isFixed = isMiniEditor || isFullEditor;
     return ((0, jsx_runtime_1.jsx)(LexicalComposer_1.LexicalComposer, { initialConfig: editorConfig, children: (0, jsx_runtime_1.jsxs)("div", { id: id, className: (0, classnames_1.default)(className, {
-                'h-full max-h-full grid grid-rows-[min-content_1fr] gap-l8 overflow-hidden': standalone,
-                'p-l8 border border-solid border-border-l1 rounded-lg': standalone,
-            }), children: [isEditor
+                'h-full max-h-full grid grid-rows-[min-content_1fr] gap-l6 p-l6 overflow-hidden': isFixed,
+                'border border-solid border-border-l1 rounded-lg': isFixed
+            }), children: [isFixed
                     ? (0, jsx_runtime_1.jsx)(richtext_1.Toolbar, { options: options })
                     : (0, jsx_runtime_1.jsx)(richtext_1.FloatingToolbarPlugin, { options: options }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('group relative', {
                         'p-l5 overflow-y-scroll appearance-none scrollbar-thin': !isField,
                         'field focus-within:field-focused rounded-lg': isArea,
                         'h-[80px] max-h-[80px]': isArea,
-                        'h-[400px] max-h-[400px]': isEditor && !standalone,
-                        'h-full max-h-ful overflow-y-scroll scrollbar-thin cursor-text interpolate': standalone,
-                        'bg-surface1 outline outline-1 outline-border-l1 rounded-lg': standalone,
-                        'hover:outline-ix-primary/[.35] focus-within:outline-ix-primary hover:focus-within:outline-ix-primary': standalone,
-                        'focus-within:ring-2 focus-within:ring-ix-primary/[0.35] focus-within:ring-offset-1': standalone
+                        'h-[120px] max-h-[120px]': isMiniEditor,
+                        'h-[400px] max-h-[400px]': isFullEditor,
+                        'max-h-full overflow-y-scroll scrollbar-thin cursor-text interpolate': isFixed,
+                        'bg-surface2 outline outline-1 outline-border-l1 rounded-md': isFixed,
+                        'hover:outline-ix-primary/[.35] focus-within:outline-ix-primary hover:focus-within:outline-ix-primary': isFixed,
+                        'focus-within:ring-2 focus-within:ring-ix-primary/[0.35] focus-within:ring-offset-1': isFixed
                     }), children: [(0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: (0, classnames_1.default)('min-h-full body-sm text-content-primary cursor-text', {
                                     'field focus-visible:field-focused text-nowrap overflow-x-scroll scrollbar-hide': isField,
                                     'h-40 flex items-center px-l5': isField,

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

@@ -1,10 +1,9 @@
 import { Field, Schema } from '@nascentdigital/funnel-core';
 import { RichTextEditor } from './RichTextEditor';
-export declare function RichTextField({ id, className, field, minimal, autoFocus, standalone, disabled }: RichTextField.Props): import("react/jsx-runtime").JSX.Element;
+export declare function RichTextField({ id, className, field, minimal, autoFocus, disabled }: RichTextField.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace RichTextField {
     type Props = Pick<RichTextEditor.Props, 'id' | 'className' | 'autoFocus' | 'disabled'> & {
         field: Field<Schema.RichTextField>;
-        standalone?: boolean;
         minimal?: boolean;
     };
 }

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

@@ -3,20 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextField = RichTextField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
-const react_1 = require("react");
 const hooks_1 = require("../../hooks");
 const FieldLayout_1 = require("./FieldLayout");
 const RichTextEditor_1 = require("./RichTextEditor");
 // component
-function RichTextField({ id, className, field, minimal = false, autoFocus = false, standalone = false, disabled = false }) {
+function RichTextField({ id, className, field, minimal = false, autoFocus = false, disabled = false }) {
     // bind props + state + hooks
     const { schema, required, value: data } = field;
-    const { capabilities, size } = schema;
-    const variant = (0, react_1.useMemo)(() => size === 'lg'
-        ? 'editor'
-        : size === 'md'
-            ? 'area'
-            : 'field', [size]);
+    const { capabilities, semantics } = schema;
     // bind field
     (0, hooks_1.useField)(field);
     // helpers
@@ -26,13 +20,7 @@ function RichTextField({ id, className, field, minimal = false, autoFocus = fals
         field.value = funnel_core_1.Schema.RichTextField.Value.toData(change.getData());
     };
     // create editor
-    const editor = ((0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { id: id, variant: variant, placeholder: schema.hint, required: required, disabled: disabled, autoFocus: autoFocus, standalone: standalone, richText: data === null || data === void 0 ? void 0 : data.value, options: capabilities, onChange: onChange }));
-    // render standalone
-    if (standalone) {
-        return editor;
-    }
+    const editor = ((0, jsx_runtime_1.jsx)(RichTextEditor_1.RichTextEditor, { id: id, variant: semantics, placeholder: schema.hint, required: required, disabled: disabled, autoFocus: autoFocus, richText: data === null || data === void 0 ? void 0 : data.value, options: capabilities, onChange: onChange }));
     // or within field
-    else {
-        return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: minimal ? 'minimal' : 'default', children: editor }));
-    }
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: minimal ? 'minimal' : 'default', children: editor }));
 }

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

@@ -1,21 +1,22 @@
 import { Field, Schema } from '@nascentdigital/funnel-core';
 import { HTMLAttributes, ReactNode } from 'react';
 import { FieldLayout } from './FieldLayout';
+import { FieldSize } from './FieldSize';
 export declare const TextField: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLInputElement>, "defaultValue" | "onFocus" | "onBlur" | "onChange"> & {
     field: Field<Schema.TextField>;
     variant?: FieldLayout.Variant;
+    size?: FieldSize;
     disabled?: boolean;
     secured?: boolean;
-    small?: boolean;
     controls?: ReactNode;
 } & import("react").RefAttributes<TextField.Ref>>;
 export declare namespace TextField {
     type Props = Omit<HTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'onFocus' | 'onBlur'> & {
         field: Field<Schema.TextField>;
         variant?: FieldLayout.Variant;
+        size?: FieldSize;
         disabled?: boolean;
         secured?: boolean;
-        small?: boolean;
         controls?: ReactNode;
     };
     interface Ref {

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

@@ -28,7 +28,7 @@ const FieldLayout_1 = require("./FieldLayout");
 // component
 exports.TextField = (0, react_1.forwardRef)(function TextField(_a, ref) {
     var _b, _c;
-    var { id: externalId, className, field, autoFocus = false, onKeyDown = funnel_core_1.Fn.NoOp, disabled = false, secured = false, variant, small = false, controls } = _a, props = __rest(_a, ["id", "className", "field", "autoFocus", "onKeyDown", "disabled", "secured", "variant", "small", "controls"]);
+    var { id: externalId, className, field, size = 'md', autoFocus = false, onKeyDown = funnel_core_1.Fn.NoOp, disabled = false, secured = false, variant, controls } = _a, props = __rest(_a, ["id", "className", "field", "size", "autoFocus", "onKeyDown", "disabled", "secured", "variant", "controls"]);
     // bind props + state + hooks
     const { schema } = field;
     const isPassword = schema.semantics === 'password' || schema.semantics === 'password-input';
@@ -44,11 +44,12 @@ exports.TextField = (0, react_1.forwardRef)(function TextField(_a, ref) {
     const errors = field.getErrors(errorLevel);
     const hasErrors = errors.length > 0;
     const inputClassNames = (0, react_1.useMemo)(() => (0, classnames_1.default)('field', 'w-full flex items-center gap-l5 px-l5', {
-        'h-40': !small,
-        'h-32': small,
+        'field-md h-40': size === 'md',
+        'field-sm h-32': size === 'sm',
+        'field-xs h-24': size === 'xs',
         'field-error': hasErrors,
         'field-disabled': disabled || locked
-    }), [small, disabled, locked, hasErrors]);
+    }), [size, disabled, locked, hasErrors]);
     // bind field
     (0, hooks_1.useField)(field);
     // bind ref
@@ -105,7 +106,7 @@ exports.TextField = (0, react_1.forwardRef)(function TextField(_a, ref) {
     // render
     return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, {
             'w-full': variant !== 'wide'
-        }), field: field, disabled: disabled, secured: secured, variant: variant, children: (0, jsx_runtime_1.jsxs)("div", { className: "w-full flex items-center gap-l5", children: [(0, jsx_runtime_1.jsxs)("div", { className: inputClassNames, children: [mask
+        }), field: field, size: size, disabled: disabled, secured: secured, variant: variant, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full flex items-center gap-l5'), children: [(0, jsx_runtime_1.jsxs)("div", { className: inputClassNames, children: [mask
                             ?
                                 (0, jsx_runtime_1.jsx)(client_1.MaskedInput, Object.assign({ ref: maskRef, id: id, className: "flex-1", name: `field-${field.id}`, placeholder: schema.hint, autoComplete: autoComplete, mask: mask, initialValue: (_b = funnel_core_1.Schema.TextField.Value.fromData(field.value)) !== null && _b !== void 0 ? _b : '', onValueChanged: value => field.value = funnel_core_1.Schema.TextField.Value.toData(value), onFocus: () => field.editing = true, onBlur: () => field.editing = false, onKeyDown: onKeyDown, disabled: disabled || locked }, props, (schema.semantics === 'password'
                                     ?
@@ -130,9 +131,9 @@ exports.TextField = (0, react_1.forwardRef)(function TextField(_a, ref) {
                     (locked
                         // unlock
                         ?
-                            (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "secondary", icon: locked ? 'LockOpen' : 'Lock', onClick: onSandbox })
+                            (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "secondary", icon: locked ? 'LockOpen' : 'Lock', size: size === 'md' ? 'md' : 'sm', onClick: onSandbox })
                         :
-                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "secondary", icon: "X", onClick: onRollback }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "primary", icon: "Check", disabled: !field.modified || !field.valid, onClick: onCommit })] }))] }) }));
+                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "secondary", icon: "X", size: size === 'md' ? 'md' : 'sm', onClick: onRollback }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "primary", icon: "Check", size: size === 'md' ? 'md' : 'sm', disabled: !field.modified || !field.valid, onClick: onCommit })] }))] }) }));
 });
 // helpers
 function getMask(schema) {

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

@@ -1,11 +1,13 @@
 import { Field, Schema } from '@nascentdigital/funnel-core';
 import { FieldLayout } from './FieldLayout';
-export declare function TimestampField({ className, field, variant, disabled, secured }: TimestampField.Props): import("react/jsx-runtime").JSX.Element;
+import { FieldSize } from './FieldSize';
+export declare function TimestampField({ className, field, variant, size, disabled, secured }: TimestampField.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace TimestampField {
     type Props = {
         className?: string;
         field: Field<Schema.TimestampField>;
         variant?: FieldLayout.Variant;
+        size?: FieldSize;
         autoFocus?: boolean;
         disabled?: boolean;
         secured?: boolean;

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

@@ -11,7 +11,7 @@ const hooks_1 = require("../../hooks");
 const interaction_1 = require("../interaction");
 const FieldLayout_1 = require("./FieldLayout");
 // component
-function TimestampField({ className, field, variant, disabled = false, secured = false }) {
+function TimestampField({ className, field, variant, size = 'md', disabled = false, secured = false }) {
     // bind state + hooks
     const { id, name, value: data, schema, required } = field;
     const { hint, minTime, maxTime, defaultHour } = schema;
@@ -36,7 +36,7 @@ function TimestampField({ className, field, variant, disabled = false, secured =
         field.rollback();
     };
     // render
-    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, 'TextField-root'), field: field, variant: variant, disabled: disabled, secured: secured, children: (0, jsx_runtime_1.jsxs)("div", { className: "FieldLayout-inputWrap TextField-inputWrap", children: [(0, jsx_runtime_1.jsx)(interaction_1.DateTimePicker, { className: "FieldLayout-input TextField-input", minTime: funnel_core_1.Timestamp.coerceToDate(minTime), maxTime: funnel_core_1.Timestamp.coerceToDate(maxTime), defaultHour: defaultHour, placeholder: hint !== null && hint !== void 0 ? hint : 'Please select a date', date: date, onChange: onDateChanged, disabled: disabled || locked }), !required &&
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: (0, classnames_1.default)(className, 'TextField-root'), field: field, variant: variant, size: size, disabled: disabled, secured: secured, children: (0, jsx_runtime_1.jsxs)("div", { className: "FieldLayout-inputWrap TextField-inputWrap", children: [(0, jsx_runtime_1.jsx)(interaction_1.DateTimePicker, { className: "FieldLayout-input TextField-input", minTime: funnel_core_1.Timestamp.coerceToDate(minTime), maxTime: funnel_core_1.Timestamp.coerceToDate(maxTime), defaultHour: defaultHour, placeholder: hint !== null && hint !== void 0 ? hint : 'Please select a date', date: date, onChange: onDateChanged, disabled: disabled || locked }), !required &&
                     (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "destructive", size: "sm", disabled: date === undefined || locked, onClick: () => field.value = undefined, children: "Clear" }), secured &&
                     (locked
                         // unlock

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

@@ -1,6 +1,8 @@
+export * from './asset/AssetPreview';
 export * from './DateField';
 export * from './FieldEditor';
 export * from './FieldErrorController';
+export * from './FieldSize';
 export * from './FieldsPanel';
 export * from './RichTextEditor';
 export * from './RichTextField';

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

@@ -14,9 +14,11 @@ 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("./asset/AssetPreview"), exports);
 __exportStar(require("./DateField"), exports);
 __exportStar(require("./FieldEditor"), exports);
 __exportStar(require("./FieldErrorController"), exports);
+__exportStar(require("./FieldSize"), exports);
 __exportStar(require("./FieldsPanel"), exports);
 __exportStar(require("./RichTextEditor"), exports);
 __exportStar(require("./RichTextField"), exports);