@nascentdigital/funnel-editor 4.5.2 → 4.5.4

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

@@ -6,11 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollectionPicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
-const client_1 = require("@nascentdigital/funnel-ui/client");
 const classnames_1 = __importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
 const react_1 = require("react");
-const client_2 = require("../../../client");
+const client_1 = require("../../../client");
 const hooks_1 = require("../../../hooks");
 const feedback_1 = require("../../feedback");
 const interaction_1 = require("../../interaction");
@@ -29,7 +28,7 @@ exports.CollectionPicker = (0, react_1.forwardRef)(function CollectionPicker({ l
     const [tagTooltip, setTagTooltip] = (0, react_1.useState)();
     const [fetching, setFetching] = (0, react_1.useState)(false);
     const [error, setError] = (0, react_1.useState)();
-    const editorApi = (0, client_2.useEditorApi)();
+    const editorApi = (0, client_1.useEditorApi)();
     const siteCollections = (0, hooks_1.useCollections)();
     const collectionStore = (0, hooks_1.useCollectionStore)();
     // export service
@@ -174,7 +173,7 @@ exports.CollectionPicker = (0, react_1.forwardRef)(function CollectionPicker({ l
         deferral.resolve(result !== null && result !== void 0 ? result : undefined);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, disableDismiss: fetching, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Collection" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Collections", options: collectionGroups, selectedOptions: collectionGroup && [collectionGroup], onToggle: (collectionGroup, selected) => selected && setCollectionGroup(collectionGroup), renderLabel: collectionGroup => collectionGroup.template.name, disabled: fetching })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ language, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, disabled: fetching, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(client_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), level: "l2", open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, disableDismiss: fetching, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Collection" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Collections", options: collectionGroups, selectedOptions: collectionGroup && [collectionGroup], onToggle: (collectionGroup, selected) => selected && setCollectionGroup(collectionGroup), renderLabel: collectionGroup => collectionGroup.template.name, disabled: fetching })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ language, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, disabled: fetching, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
 });
 function renderPicker({ language, schema, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) {
     // show error if we have one

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);

package/dist/core/components/fields/page/PagePicker.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PagePicker = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
-const client_1 = require("@nascentdigital/funnel-ui/client");
 const classnames_1 = __importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
 const react_1 = require("react");
@@ -206,7 +205,7 @@ exports.PagePicker = (0, react_1.forwardRef)(function PagePicker({ language }, r
                             ? 'Primary'
                             : filter.template.name }), tagOptions === null || tagOptions === void 0 ? void 0 : tagOptions.map(({ group, tags: groupTags }) => (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: group.name, multiselect: true, options: groupTags.values().toArray(), selectedOptions: tagFilters.filter(tag => groupTags.has(tag)), onToggle: (tag, selected) => setTagFilters(tags => selected
                             ? [...tags, tag]
-                            : tags.filter(t => t !== tag)), onToggleAll: () => setTagFilters(tags => tags.filter(tag => !groupTags.has(tag))), renderLabel: tag => tag.name }, group.id))] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(client_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), level: "l2", open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
+                            : tags.filter(t => t !== tag)), onToggleAll: () => setTagFilters(tags => tags.filter(tag => !groupTags.has(tag))), renderLabel: tag => tag.name }, group.id))] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
 });
 function renderPicker({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) {
     // show error if we have one
@@ -265,7 +264,7 @@ function renderPageRef({ language, template, disabledIds, ref, onPick, setTagToo
     const visibleTags = tags.slice(0, Math.min(tags.length, 2));
     const tooltipTags = tags.length > 2
         ? tags.slice(2)
-        : [];
+        : [...Object.values(funnel_core_1.Schema.AssetField.Tags.image.tags)];
     const disabled = !ref || ref.language !== language || disabledIds.includes(ref.id);
     // helpers
     const onClick = () => {

package/dist/core/components/fields/richtext/Theme.d.ts

@@ -1,6 +1,5 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { EditorThemeClasses } from 'lexical';
-import { RichTextEditor } from '../RichTextEditor';
 export declare const listClassname: string;
 export declare const listItemClassname: string;
-export declare function getTheme(variant: RichTextEditor.Variant, options: Schema.RichTextField.Capabilities.Options): EditorThemeClasses;
+export declare function getTheme(variant: Schema.RichTextField.Semantics, options: Schema.RichTextField.Capabilities.Options): EditorThemeClasses;

package/dist/core/components/fields/richtext/Theme.js

@@ -24,8 +24,8 @@ function getTheme(variant, options) {
         },
         // text
         paragraph: (0, classnames_1.default)('block min-h-body-sm last:mb-0', {
-            'mb-l5': variant === 'area',
-            'mb-l8': variant === 'editor',
+            'mb-l5': variant === 'area' || variant === 'mini-editor',
+            'mb-l8': variant === 'full-editor',
         }),
         quote: 'block pl-l6 mb-l8 last:mb-0 border-l-3 border-solid border-border-l1',
         text: {

package/dist/core/components/interaction/Animate.d.ts

@@ -9,5 +9,5 @@ export declare namespace Animate {
         layout?: boolean;
         effect?: Effect;
     };
-    type Effect = 'fade';
+    type Effect = 'fade' | 'slideFromLeft' | 'slideFromBottom';
 }

package/dist/core/components/interaction/Animate.js

@@ -18,8 +18,18 @@ function Animate({ className, present = false, layout = false, effect = 'fade',
     Animate.Variants = {
         fade: {
             initial: { opacity: 0, transition: { when: 'beforeChildren' } },
-            animate: { opacity: 1, transition: { ease: "easeIn", when: 'beforeChildren' } },
-            exit: { opacity: 0, transition: { ease: "easeOut", when: 'afterChildren' } }
+            animate: { opacity: 1, transition: { duration: 0.4, ease: "easeIn", when: 'beforeChildren' } },
+            exit: { opacity: 0, transition: { duration: 0.3, ease: "easeOut", when: 'afterChildren' } }
+        },
+        slideFromLeft: {
+            initial: { x: '100%', transition: { when: 'beforeChildren' } },
+            animate: { x: 0, transition: { duration: 0.3, ease: "easeIn", when: 'beforeChildren' } },
+            exit: { x: '100%', transition: { duration: 0.3, ease: "easeOut", when: 'afterChildren' } }
+        },
+        slideFromBottom: {
+            initial: { y: '100%', transition: { when: 'beforeChildren' } },
+            animate: { y: 0, transition: { duration: 0.3, ease: "easeIn", when: 'beforeChildren' } },
+            exit: { y: '100%', transition: { duration: 0.3, ease: "easeOut", when: 'afterChildren' } }
         }
     };
 })(Animate || (exports.Animate = Animate = {}));

package/dist/core/components/interaction/Button.js

@@ -26,9 +26,9 @@ exports.Button = (0, react_1.forwardRef)(function Button(_a, ref) {
     var { className, variant = 'primary', size = 'md', iconLeft, iconRight, loading = false, disabled = false, children } = _a, props = __rest(_a, ["className", "variant", "size", "iconLeft", "iconRight", "loading", "disabled", "children"]);
     // render
     return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ ref: ref, className: (0, classnames_1.default)(className, getButtonClassnames({ variant, size, loading, disabled })), type: "button", disabled: disabled || loading }, props, { children: [loading &&
-                (0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "sm" }), iconLeft && !loading && size !== 'xs' &&
-                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconLeft, size: size === 'md' ? 'md' : 'sm' }), children, iconRight && size !== 'xs' &&
-                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconRight, size: size === 'md' ? 'md' : 'sm' })] })));
+                (0, jsx_runtime_1.jsx)(Loader_1.Loader, { size: "sm" }), iconLeft && !loading &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconLeft, size: size }), children, iconRight &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: iconRight, size: size })] })));
 });
 function getButtonClassnames({ variant, size, loading, disabled }) {
     return (0, classnames_1.default)('button', {

package/dist/core/components/interaction/Combobox.d.ts

@@ -1,11 +1,13 @@
 import { Callback, Transform } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
+import { FieldSize } from '../fields';
 import { Icon } from '../visuals';
-export declare function Combobox<TOptionId extends string>({ id: externalId, className, maxRows, rowHeight, disabled, options, noSelectionText, selectedOption: selectedOptionId, onSelect, renderSelection: renderSelectionRaw, renderOption, }: Combobox.Props<TOptionId>): import("react/jsx-runtime").JSX.Element;
+export declare function Combobox<TOptionId extends string>({ id: externalId, className, size, maxRows, rowHeight: rowHeightRaw, disabled, options, noSelectionText, selectedOption: selectedOptionId, onSelect, renderSelection: renderSelectionRaw, renderOption, }: Combobox.Props<TOptionId>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Combobox {
     type Props<TOptionId extends string> = {
         id?: string;
         className?: string;
+        size?: FieldSize;
         maxRows?: number;
         rowHeight?: number;
         disabled?: boolean;
@@ -16,6 +18,10 @@ export declare namespace Combobox {
         renderSelection?: Transform<Option<TOptionId> | undefined, ReactNode>;
         renderOption?: Transform<RenderOptionArgs<TOptionId>, ReactNode>;
     };
+    type RenderSelectionArgs<TOptionId extends string> = {
+        option?: Option<TOptionId>;
+        size: FieldSize;
+    };
     type Option<TOptionId extends string = string> = Option.Standard<TOptionId> | Option.WithIcon<TOptionId>;
     namespace Option {
         type Standard<TOptionId extends string> = {
@@ -30,6 +36,7 @@ export declare namespace Combobox {
     type RenderOptionArgs<TOptionId extends string = string> = {
         option: Option<TOptionId>;
         selected: boolean;
+        size: FieldSize;
     };
     interface Service {
     }

package/dist/core/components/interaction/Combobox.js

@@ -12,7 +12,7 @@ const react_1 = require("react");
 const visuals_1 = require("../visuals");
 const Popup_1 = require("./Popup");
 // component
-function Combobox({ id: externalId, className, maxRows = 6, rowHeight = 36, disabled = false, options, noSelectionText = 'Make a selection', selectedOption: selectedOptionId, onSelect = funnel_core_1.Fn.NoOp, renderSelection: renderSelectionRaw, renderOption = onRenderOption, }) {
+function Combobox({ id: externalId, className, size = 'md', maxRows = 6, rowHeight: rowHeightRaw, disabled = false, options, noSelectionText = 'Make a selection', selectedOption: selectedOptionId, onSelect = funnel_core_1.Fn.NoOp, renderSelection: renderSelectionRaw, renderOption = onRenderOption, }) {
     // bind state
     const [open, setOpen] = (0, react_1.useState)(false);
     const buttonRef = (0, react_1.useRef)(null);
@@ -24,7 +24,19 @@ function Combobox({ id: externalId, className, maxRows = 6, rowHeight = 36, disa
         && options.find(option => option.id === selectedOptionId);
     const renderSelection = (0, react_1.useMemo)(() => renderSelectionRaw
         ? renderSelectionRaw :
-        (option) => onRenderSelection(option, noSelectionText), [renderSelectionRaw, noSelectionText]);
+        (option) => onRenderSelection({ option, size }, noSelectionText), [renderSelectionRaw, size, noSelectionText]);
+    const rowHeight = rowHeightRaw
+        ? rowHeightRaw
+        : size === 'md'
+            ? 36
+            : size === 'sm'
+                ? 32
+                : 24;
+    const rowPaddingY = size === 'md'
+        ? 8
+        : size === 'sm'
+            ? 6
+            : 3;
     // helpers
     const onOpen = (e) => {
         // stop propagation
@@ -47,21 +59,30 @@ function Combobox({ id: externalId, className, maxRows = 6, rowHeight = 36, disa
         setOpen(false);
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, id: id, className: (0, classnames_1.default)(className, 'min-w-[180px] h-40 flex items-center justify-between gap-l5 px-l5', 'bg-surface1 border border-solid border-border-l1 rounded-full select-none appearance-none', 'disabled:opacity-disabled', {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: buttonRef, id: id, className: (0, classnames_1.default)(className, 'flex items-center justify-between gap-l5 px-l5', 'bg-surface1 border border-solid border-border-l1 rounded-full select-none appearance-none', 'disabled:opacity-disabled', {
+                    'min-w-[200px] h-40': size === 'md',
+                    'min-w-[180px] h-32': size === 'sm',
+                    'min-w-[120px] h-24': size === 'xs',
                     'pointer-events-none': open
-                }), type: "button", disabled: disabled, role: "combobox", "aria-expanded": open, "aria-controls": popupId, "aria-owns": popupId, onClick: onOpen, onKeyDown: client_1.OnKey.enter(onOpen), children: [renderSelection(selectedOption), (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-primary", variant: "ChevronDown" })] }), (0, jsx_runtime_1.jsx)(Popup_1.Popup, { open: open, anchor: button, anchorOffset: 2, placement: "bottom", onClose: onOptionsClose, children: (0, jsx_runtime_1.jsx)("div", { id: popupId, className: (0, classnames_1.default)('flex flex-col py-l4 bg-surface2 rounded-lg shadow-popup overflow-y-scroll'), style: {
+                }), type: "button", disabled: disabled, role: "combobox", "aria-expanded": open, "aria-controls": popupId, "aria-owns": popupId, onClick: onOpen, onKeyDown: client_1.OnKey.enter(onOpen), children: [renderSelection(selectedOption), (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-content-primary", variant: "ChevronDown" })] }), (0, jsx_runtime_1.jsx)(Popup_1.Popup, { open: open, anchor: button, anchorOffset: 2, placement: "bottom", onClose: onOptionsClose, children: (0, jsx_runtime_1.jsx)("div", { id: popupId, className: (0, classnames_1.default)('flex flex-col bg-surface2 shadow-popup overflow-y-scroll', {
+                        'py-l4 rounded-lg': size === 'md',
+                        'py-l3 rounded-md': size !== 'md'
+                    }), style: {
                         minWidth: button ? `${button.offsetWidth}px` : 'auto',
-                        maxHeight: maxRows * rowHeight + 16
+                        maxHeight: maxRows * rowHeight + (rowPaddingY * 2)
                     }, role: "listbox", children: options.map((option, index) => {
                         // render
                         const optionKey = getOptionId(id, option);
                         const selected = option.id === selectedOptionId;
-                        return ((0, jsx_runtime_1.jsx)("button", { id: optionKey, style: { height: `${rowHeight}px` }, role: "option", "aria-selected": selected, autoFocus: (index === 0 && !selected) || (index === 1 && options[0].id === selectedOptionId), disabled: selected, onClick: e => onOptionSelect(e, option), onKeyDown: client_1.OnKey.enter(e => onOptionSelect(e, option)), children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('h-full flex items-center justify-between gap-l4 px-l6 appearance-none select-none outline-none interpolate', {
+                        return ((0, jsx_runtime_1.jsx)("button", { id: optionKey, style: { height: `${rowHeight}px` }, role: "option", "aria-selected": selected, autoFocus: (index === 0 && !selected) || (index === 1 && options[0].id === selectedOptionId), disabled: selected, onClick: e => onOptionSelect(e, option), onKeyDown: client_1.OnKey.enter(e => onOptionSelect(e, option)), children: (0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('h-full flex items-center justify-between appearance-none select-none outline-none interpolate', {
+                                    'gap-l4 px-l6': size === 'md',
+                                    'gap-l3 px-l5': size === 'sm',
+                                    'gap-l2 px-l4': size === 'xs',
                                     'text-content-link-highlight': selected,
                                     'text-content-primary hover:bg-ix-util-hover/tint1 active:bg-ix-util-press/tint2': !selected && !disabled,
                                     'focus-visible:bg-interactive focus-visible:border-border-l1': !selected && !disabled,
                                     'text-ix-disabled-content': disabled
-                                }), children: renderOption({ option, selected }) }) }, optionKey));
+                                }), children: renderOption({ option, selected, size }) }) }, optionKey));
                     }) }) })] }));
 }
 // extension
@@ -79,16 +100,22 @@ function Combobox({ id: externalId, className, maxRows = 6, rowHeight = 36, disa
 function getOptionId(comboboxId, option) {
     return `${comboboxId}::option::${option.id}`;
 }
-function onRenderSelection(option, noSelectionText) {
+function onRenderSelection({ option, size }, noSelectionText) {
     var _a;
-    return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block body-sm', {
+    return ((0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block', {
+            'body-sm': size === 'md',
+            'label-sm': size === 'sm',
+            'label-xs': size === 'xs',
             'text-content-primary': !!option,
             'text-ix-disabled-content': !option
         }), children: (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : noSelectionText }));
 }
-function onRenderOption({ option, selected }) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block label-md', {
+function onRenderOption({ option, selected, size }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('inline-block', {
+                    'label-md': size === 'md',
+                    'label-sm': size === 'sm',
+                    'label-xs': size === 'xs',
                     'label-strong': selected
                 }), children: option.label }), selected &&
-                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Check" })] }));
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Check", size: size })] }));
 }

package/dist/core/components/interaction/IconButton.d.ts

@@ -3,7 +3,7 @@ import { Icon } from '../visuals';
 export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLButtonElement>, "children"> & {
     variant?: IconButton.Variant;
     icon: Icon.Variant;
-    size?: Extract<Icon.Size, "md" | "sm" | "xs">;
+    size?: Extract<Icon.Size, "md" | "sm" | "xs" | "xxs">;
     active?: boolean;
     disabled?: boolean;
 } & import("react").RefAttributes<HTMLButtonElement>>;
@@ -11,7 +11,7 @@ export declare namespace IconButton {
     type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
         variant?: Variant;
         icon: Icon.Variant;
-        size?: Extract<Icon.Size, 'md' | 'sm' | 'xs'>;
+        size?: Extract<Icon.Size, 'md' | 'sm' | 'xs' | 'xxs'>;
         active?: boolean;
         disabled?: boolean;
     };

package/dist/core/components/interaction/IconButton.js

@@ -36,6 +36,7 @@ function getIconButtonClassnames({ variant, size, active, disabled }) {
         'iconbutton-disabled': disabled,
         'iconbutton-md': size === 'md',
         'iconbutton-sm': size === 'sm',
-        'iconbutton-xs': size === 'xs'
+        'iconbutton-xs': size === 'xs',
+        'iconbutton-xxs': size === 'xxs'
     });
 }

package/dist/core/components/interaction/QuickEditor.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { Popup } from './Popup';
+export declare function QuickEditor({ className, title, tip, size, open, onClose, children, ...props }: QuickEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace QuickEditor {
+    type Props = Popup.Props & {
+        title: ReactNode;
+        tip?: string;
+        size?: Size;
+    };
+    type Size = 'md' | 'sm';
+}

package/dist/core/components/interaction/QuickEditor.js

@@ -0,0 +1,33 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickEditor = QuickEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const classnames_1 = __importDefault(require("classnames"));
+const feedback_1 = require("../feedback");
+const IconButton_1 = require("./IconButton");
+const Popup_1 = require("./Popup");
+// component
+function QuickEditor(_a) {
+    var { className, title, tip, size = 'md', open = false, onClose, children } = _a, props = __rest(_a, ["className", "title", "tip", "size", "open", "onClose", "children"]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, props, { className: (0, classnames_1.default)(className, 'flex flex-col', 'bg-surface1 border-solid border-border-l1 shadow-miniEditor', 'border border-solid border-border-l1 rounded-md overflow-hidden', {
+            'w-[320px]': size === 'md',
+            'w-[288px]': size === 'sm'
+        }), open: open, onClose: onClose, children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-content-primary flex justify-between items-center gap-l8 px-l8 pt-l8 pb-l4", children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-sm text-pretty", children: title }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: "shrink-0", icon: "X", size: "xs", onClick: onClose })] }), tip &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { className: "mt-l2 mb-l4 mx-l8", variant: "tip", size: size === 'md' ? 'sm' : 'xs', children: (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { markdown: `**Tip:** ${tip}` }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 px-l8 pt-l4 pb-l8 overflow-y-scroll", children: children })] })));
+}

package/dist/core/components/interaction/QuickInput.js

@@ -140,7 +140,7 @@ function renderInput({ field, onKeyDown }) {
     const { schema } = field;
     switch (schema.type) {
         case 'text':
-            return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { className: "flex-1", field: field, variant: "minimal", small: true, autoFocus: true, onKeyDown: onKeyDown }));
+            return ((0, jsx_runtime_1.jsx)(TextField_1.TextField, { className: "flex-1", field: field, variant: "minimal", size: "sm", autoFocus: true, onKeyDown: onKeyDown }));
         case 'richtext':
             return ((0, jsx_runtime_1.jsx)(fields_1.RichTextField, { className: "flex-1", field: field, minimal: true, autoFocus: true }));
         default:

package/dist/core/components/interaction/QuickPicker.js

@@ -88,12 +88,14 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, ti
         }
     };
     // render
-    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, (popupProps !== null && popupProps !== void 0 ? popupProps : {}), { className: (0, classnames_1.default)('glass-overlay w-[420px] max-w-full flex flex-col gap-l8 pt-l8 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-md', {
+    return ((0, jsx_runtime_1.jsxs)(Popup_1.Popup, Object.assign({}, (popupProps !== null && popupProps !== void 0 ? popupProps : {}), { className: (0, classnames_1.default)('glass-overlay max-w-[380px] flex flex-col gap-l8 pt-l8 interpolate', 'border border-solid border-glass-stroke-l1/tint5 rounded-md', {
             'opacity-none': !opened,
             'opacity-full': opened
         }), animation: "out", open: !!deferral, onOpened: () => setOpened(true), onClose: onClose, onClosed: () => setOpened(false), children: [(0, jsx_runtime_1.jsxs)("section", { className: "px-l8", children: [(0, jsx_runtime_1.jsx)("h3", { className: "heading-sm text-content-primary", children: title }), description &&
                         (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary", children: description })] }), (0, jsx_runtime_1.jsx)("section", { className: (0, classnames_1.default)({
-                    'flex flex-wrap items-center gap-l5 max-h-[240px] px-l8 pb-l8 overflow-y-scroll': variant === 'card'
+                    'flex flex-wrap gap-l5 items-center px-l8 pb-l8 overflow-y-scroll': variant === 'card',
+                    'w-[288px]': variant === 'card' && items.length < 4,
+                    'w-[372px] max-h-[213px]': variant === 'card' && items.length >= 4
                 }), children: items.map(item => renderCard({
                     item,
                     content: renderItem(item),
@@ -102,7 +104,7 @@ exports.QuickPicker = (0, react_1.forwardRef)(function QuickPicker({ variant, ti
                 })) })] })));
 });
 function renderCard({ item, content, selected, onSelect }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('FieldCard w-[116px] h-[88px]', {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('FieldCard w-[72px] h-[55px]', {
             'FieldCard-selected': selected
         }), onClick: () => onSelect(item.id), children: content }, item.id));
 }

package/dist/core/components/interaction/SegmentedButton.d.ts

@@ -1,10 +1,12 @@
 import { Callback } from '@nascentdigital/funnel-core';
+import { FieldSize } from '../fields';
 import { Icon } from '../visuals';
-export declare function SegmentedButton<TOption extends SegmentedButton.OptionType>({ className, options, selected, allowEmpty, multiSelect, autoFocus, disabled, onSelectionChange, onBlur }: SegmentedButton.Props<TOption>): import("react/jsx-runtime").JSX.Element;
+export declare function SegmentedButton<TOption extends SegmentedButton.OptionType>({ className, size, options, selected, allowEmpty, multiSelect, autoFocus, disabled, onSelectionChange, onBlur }: SegmentedButton.Props<TOption>): import("react/jsx-runtime").JSX.Element;
 export declare namespace SegmentedButton {
     type OptionType = string | number;
     type Props<TOption extends OptionType> = {
         className?: string;
+        size?: FieldSize;
         options: ReadonlyArray<Option<TOption>>;
         selected?: TOption | ReadonlyArray<TOption>;
         allowEmpty?: boolean;

package/dist/core/components/interaction/SegmentedButton.js

@@ -11,7 +11,7 @@ const ms_1 = __importDefault(require("ms"));
 const react_1 = require("react");
 const visuals_1 = require("../visuals");
 // component
-function SegmentedButton({ className, options, selected = [], allowEmpty = false, multiSelect = false, autoFocus = false, disabled = false, onSelectionChange, onBlur = funnel_core_1.Fn.NoOp }) {
+function SegmentedButton({ className, size = 'md', options, selected = [], allowEmpty = false, multiSelect = false, autoFocus = false, disabled = false, onSelectionChange, onBlur = funnel_core_1.Fn.NoOp }) {
     // bind ref data
     const blurTimeoutRef = (0, react_1.useRef)(undefined);
     const selectedOptions = Array.isArray(selected)
@@ -68,6 +68,9 @@ function SegmentedButton({ className, options, selected = [], allowEmpty = false
         }), children: options.map(({ id, value, label, icon }) => {
             const active = selectedOptions.includes(value);
             return ((0, jsx_runtime_1.jsxs)("button", { type: "button", disabled: disabled, className: (0, classnames_1.default)('segmented-button', {
+                    'segmented-button-md': size === 'md',
+                    'segmented-button-sm': size === 'sm',
+                    'segmented-button-xs': size === 'xs',
                     'segmented-button-selected': active
                 }), onClick: () => onSelect(value), onFocus: onSegmentFocus, onBlur: onSegmentBlur, children: [icon &&
                         (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "segmented-button-icon", variant: icon, size: "nav" }), (0, jsx_runtime_1.jsx)("span", { className: "segmented-button-label", children: label })] }, id));

package/dist/core/components/interaction/SideSheet.d.ts

@@ -1,11 +1,11 @@
 import { Callback, Provider, Transform } from '@nascentdigital/funnel-core';
-import { HTMLMotionProps, Variants } from 'framer-motion';
+import { HTMLMotionProps } from 'framer-motion';
 import { PropsWithChildren, ReactNode } from 'react';
-export declare function SideSheet({ className, title, wide, backdrop, disabled, disableDismiss, disableOverlay, disableSave, canSave, renderSaveLabel, onSave: onSaveRaw, open, onOpened: onOpenedRaw, onClose: onCloseRaw, onClosed: onClosedRaw, onKeyDown: onKeyDownRaw, customActions, children, ...props }: SideSheet.Props): import("react").ReactPortal | null;
+export declare function SideSheet({ className, title, size, backdrop, disabled, disableDismiss, disableOverlay, disableSave, canSave, renderSaveLabel, onSave: onSaveRaw, open, onOpened: onOpenedRaw, onClose: onCloseRaw, onClosed: onClosedRaw, onKeyDown: onKeyDownRaw, customActions, children, ...props }: SideSheet.Props): import("react").ReactPortal | null;
 export declare namespace SideSheet {
     type Props = Omit<HTMLMotionProps<'div'>, 'children'> & PropsWithChildren & {
         title: ReactNode;
-        wide?: boolean;
+        size?: Size;
         backdrop?: Backdrop;
         disabled?: boolean;
         disableDismiss?: boolean;
@@ -20,7 +20,7 @@ export declare namespace SideSheet {
         onClose?: Callback.Void;
         onClosed?: Callback.Void;
     };
-    type State = 'editing' | 'validating' | 'saving' | 'error' | 'saved';
+    type Size = 'xs' | 'sm' | 'md' | 'lg';
     type Backdrop = 'none' | 'glass';
+    type State = 'editing' | 'validating' | 'saving' | 'error' | 'saved';
 }
-export declare const Animations: Record<'background' | 'slideRight', Variants>;

package/dist/core/components/interaction/SideSheet.js

@@ -14,22 +14,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Animations = void 0;
 exports.SideSheet = SideSheet;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("@nascentdigital/funnel-ui/hooks");
 const classnames_1 = __importDefault(require("classnames"));
 const framer_motion_1 = require("framer-motion");
 const react_1 = require("motion/react");
 const react_2 = require("react");
 const react_dom_1 = require("react-dom");
+const Animate_1 = require("./Animate");
 const Button_1 = require("./Button");
 // component
 function SideSheet(_a) {
-    var { className, title, wide, backdrop = 'none', disabled = false, disableDismiss = false, disableOverlay = false, disableSave = false, canSave = funnel_core_1.Fn.True, renderSaveLabel = onRenderSaveLabel, onSave: onSaveRaw = funnel_core_1.Fn.NoOp, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose: onCloseRaw = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, onKeyDown: onKeyDownRaw, customActions, children } = _a, props = __rest(_a, ["className", "title", "wide", "backdrop", "disabled", "disableDismiss", "disableOverlay", "disableSave", "canSave", "renderSaveLabel", "onSave", "open", "onOpened", "onClose", "onClosed", "onKeyDown", "customActions", "children"]);
-    // bind state + hooksb= + refs
+    var _b;
+    var { className, title, size = 'md', backdrop = 'none', disabled = false, disableDismiss = false, disableOverlay = false, disableSave = false, canSave = funnel_core_1.Fn.True, renderSaveLabel = onRenderSaveLabel, onSave: onSaveRaw = funnel_core_1.Fn.NoOp, open = false, onOpened: onOpenedRaw = funnel_core_1.Fn.NoOp, onClose: onCloseRaw = funnel_core_1.Fn.NoOp, onClosed: onClosedRaw = funnel_core_1.Fn.NoOp, onKeyDown: onKeyDownRaw, customActions, children } = _a, props = __rest(_a, ["className", "title", "size", "backdrop", "disabled", "disableDismiss", "disableOverlay", "disableSave", "canSave", "renderSaveLabel", "onSave", "open", "onOpened", "onClose", "onClosed", "onKeyDown", "customActions", "children"]);
+    // bind state + hooks + refs
     const [state, setState] = (0, react_2.useState)('editing');
     const locked = disabled || state === 'validating' || state === 'saving' || state === 'saved';
+    const breakpoint = (_b = (0, hooks_1.useCurrentBreakpoint)()) !== null && _b !== void 0 ? _b : 'xs';
     const id = (0, react_2.useId)();
     const openRef = (0, react_2.useRef)(open);
     openRef.current = open;
@@ -141,51 +144,20 @@ function SideSheet(_a) {
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: open &&
             (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('fixed inset-0 z-popup', {
                     'pointer-events-none': disableOverlay
-                }), variants: exports.Animations.background, initial: "initial", animate: "animate", exit: "exit", onAnimationComplete: definition => onAnimationComplete(definition), onClick: disableDismiss || locked ? undefined : onBackdropClick, layout: true, children: [backdrop !== 'none' &&
+                }), onClick: disableDismiss || locked ? undefined : onBackdropClick, layout: true, children: [backdrop !== 'none' &&
                         (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { className: (0, classnames_1.default)('fixed inset-0 z-backdrop pointer-events-none', {
                                 'backdrop-blur-[9px] bg-glass/backdrop will-change-[backdrop-filter]': backdrop === 'glass'
-                            }) }, "backdrop"), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({}, props, { className: (0, classnames_1.default)(className, 'fixed right-0 inset-y-0 pointer-events-none', {
-                            'w-full sm:w-[380px]': !wide,
-                            'w-full md:w-screen-sm': wide,
-                        }), variants: exports.Animations.slideRight, initial: "initial", animate: "animate", exit: "exit", onKeyDown: onKeyDown, tabIndex: -1, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'w-full h-full max-h-full pointer-events-auto', 'flex flex-col', 'bg-background border-l border-solid border-border-l1 rounded-tl-md rounded-bl-md'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-md text-content-primary p-l8", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-scroll", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end items-center gap-l4 p-l8", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
+                            }), variants: Animate_1.Animate.Variants.fade, initial: "initial", animate: "animate", exit: "exit" }, "backdrop"), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({}, props, { className: (0, classnames_1.default)(className, 'fixed max-md:inset-x-0 max-md:bottom-0 max-md:top-[40px] md:right-0 md:inset-y-0 z-sheet pointer-events-none', {
+                            'w-full md:w-[320px]': size === 'xs',
+                            'w-full md:w-[380px]': size === 'sm',
+                            'w-full md:w-[480px]': size === 'md',
+                            'w-full md:w-screen-sm': size === 'lg'
+                        }), variants: breakpoint === 'xs' || breakpoint === 'sm'
+                            ? Animate_1.Animate.Variants.slideFromBottom
+                            : Animate_1.Animate.Variants.slideFromLeft, initial: "initial", animate: "animate", exit: "exit", onAnimationComplete: definition => onAnimationComplete(definition), onKeyDown: onKeyDown, tabIndex: -1, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'w-full h-full max-h-full pointer-events-auto', 'flex flex-col', 'bg-background border-solid border-border-l1', 'max-md:border-t max-md:rounded-tl-md max-md:rounded-tr-md', 'md:border-l md:rounded-tl-md md:rounded-bl-md'), children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-sm text-content-primary px-l8 pt-l8 pb-l4", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 px-l8 pt-l4 pb-l8 overflow-y-scroll", children: children }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex justify-end items-center gap-l4 p-l8', 'border-t border-solid border-border-l1'), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", size: "sm", disabled: locked, onClick: onClose, children: "Cancel" }), customActions &&
                                             (0, jsx_runtime_1.jsx)("div", { className: "flex-1 flex justify-end items-center gap-l4", children: customActions }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "primary", size: "sm", loading: state === 'saving', disabled: disableSave || locked, onClick: onSave, children: renderSaveLabel(state) })] })] }) }))] }, id) }), document.body);
 }
 // helpers
-exports.Animations = {
-    background: {
-        hidden: {
-            opacity: 0
-        },
-        visible: {
-            opacity: 1,
-            transition: {
-                ease: 'easeIn',
-                duration: 0.3,
-                when: 'beforeChildren'
-            }
-        },
-        exit: {
-            opacity: 0,
-            transition: {
-                ease: 'easeIn',
-                duration: 0.15,
-                bounce: 0,
-                when: 'afterChildren'
-            }
-        }
-    },
-    slideRight: {
-        initial: {
-            x: '100%'
-        },
-        animate: {
-            x: '0'
-        },
-        exit: {
-            x: '100%'
-        }
-    }
-};
 function onRenderSaveLabel(state) {
     switch (state) {
         case 'editing':

package/dist/core/components/interaction/centersheet/CenterSheet.js

@@ -96,7 +96,7 @@ exports.CenterSheet = (0, react_2.forwardRef)(function CenterSheet({ className,
     }
     // render
     return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: open &&
-            (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('absolute inset-0 z-popup-l1 pointer-events-auto', 'flex flex-col justify-stretch items-center pt-l12 px-l6 md:px-l10 lg:px-l15'), variants: Animations.container, onAnimationComplete: definition => onAnimationComplete(definition), initial: "hidden", animate: "visible", exit: "exit", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'relative h-full w-full max-w-[1000px] max-h-full overflow-hidden', 'text-onSurface bg-background rounded-t-lg shadow-objectEditor'), children: children })] }, id) }), anchor);
+            (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { id: id, className: (0, classnames_1.default)('absolute inset-0 z-popup pointer-events-auto', 'flex flex-col justify-stretch items-center pt-l12 px-l6 md:px-l10 lg:px-l15'), variants: Animations.container, onAnimationComplete: definition => onAnimationComplete(definition), initial: "hidden", animate: "visible", exit: "exit", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0", onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'relative h-full w-full max-w-[1000px] max-h-full overflow-hidden', 'text-onSurface bg-background rounded-t-lg shadow-objectEditor'), children: children })] }, id) }), anchor);
 });
 // animations
 var Animations;

package/dist/core/components/interaction/centersheet/CenterSheetContainer.js

@@ -58,7 +58,7 @@ function CenterSheetContainer({ children }) {
     // render
     const { sheets } = context;
     const active = sheets.length > 0;
-    return ((0, jsx_runtime_1.jsxs)(CenterSheetContext_1.CenterSheetContext.Provider, { value: context, children: [children, (0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 pointer-events-none", children: (0, jsx_runtime_1.jsx)("div", { id: anchorId, className: "relative w-full h-full", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-backdrop-l1 interpolate will-change-[backdrop-filter,opacity]', 'backdrop-blur-[9px] bg-glass-fill-l1', {
+    return ((0, jsx_runtime_1.jsxs)(CenterSheetContext_1.CenterSheetContext.Provider, { value: context, children: [children, (0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 pointer-events-none", children: (0, jsx_runtime_1.jsx)("div", { id: anchorId, className: "relative w-full h-full", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('absolute inset-0 z-backdrop interpolate will-change-[backdrop-filter,opacity]', 'backdrop-blur-[9px] bg-glass-fill-l1', {
                             'pointer-events-none opacity-none': !active,
                             'pointer-events-auto opacity-full': active
                         }) }, "backdrop") }) })] }));

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

@@ -22,6 +22,7 @@ export * from './NavButton';
 export * from './Picker';
 export * from './Popup';
 export * from './Profile';
+export * from './QuickEditor';
 export * from './QuickInput';
 export * from './QuickPicker';
 export * from './SegmentedButton';