@nascentdigital/funnel-editor 4.5.6 → 4.5.7

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

@@ -5,6 +5,7 @@ export declare const QuickPicker: import("react").ForwardRefExoticComponent<Quic
 export declare namespace QuickPicker {
     type Item<TId extends string> = {
         id: TId;
+        label: string;
     };
     type ItemVariant = 'card';
     type Props<TId extends string, TItem extends Item<TId>> = {

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

@@ -104,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-[72px] h-[55px]', {
-            'FieldCard-selected': selected
-        }), onClick: () => onSelect(item.id), children: content }, item.id));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-l2 shrink-0", children: [(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 }), (0, jsx_runtime_1.jsx)("span", { className: "label-xxs text-content-tertiary cursor-default", children: item.label })] }, item.id));
 }

package/dist/core/domain/BlockConfiguration.d.ts

@@ -20,7 +20,7 @@ export declare class BlockConfiguration {
     get blocksFields(): FieldModel.Config[];
     get blockFieldData(): Schema.Block.Data.ForFields<Schema.Fields>;
     get desktopFields(): FieldModel.Config[];
-    get mobileFields(): never[];
+    get mobileFields(): FieldModel.Config[];
     get nameField(): FieldModel.Config | undefined;
     get themeField(): FieldModel.Config | undefined;
     get layoutField(): Field<Schema.EnumField<Schema.EnumField.Options<PanelLayout>>> | undefined;
@@ -30,6 +30,7 @@ export declare class BlockConfiguration {
     get messageFields(): Record<keyof MessagePanel.Config.Keys<'message'>, FieldModel.Config | undefined>;
     get listFields(): Record<keyof ListPanel.Config.Keys<'list'>, FieldModel.Config | undefined>;
     get visualFields(): Record<keyof VisualPanel.Config.Keys<'visual'>, FieldModel.Config | undefined>;
+    get extendedFields(): Record<string, FieldModel.Config>;
     get layout(): BlockLayout | undefined;
     get events$(): import("rxjs").Observable<EventBus.Event<string, string>>;
     get valid(): boolean;

package/dist/core/domain/BlockConfiguration.js

@@ -76,11 +76,14 @@ class BlockConfiguration {
     }
     get desktopFields() {
         return [
-            this.getEditableField('contentAlign')
+            ...Object.values(this.extendedFields),
+            this.getEditableField('contentAlign'),
         ].filter(funnel_core_1.Value.isDefined);
     }
     get mobileFields() {
-        return [].filter(funnel_core_1.Value.isDefined);
+        return [
+            ...Object.values(this.extendedFields)
+        ].filter(funnel_core_1.Value.isDefined);
     }
     get nameField() {
         const { block, sectionBlock } = this;
@@ -154,6 +157,29 @@ class BlockConfiguration {
             horizontalAlign: this.getEditableField(keys.horizontalAlign)
         };
     }
+    get extendedFields() {
+        // get all top-level keys
+        const { block, _editableFields } = this;
+        const coreKeys = [
+            block.nameField.id,
+            funnel_ui_1.BlockConfig.Presets.ThemeOnly.key,
+            'layout',
+            'slotVariation',
+            'contentAlign',
+            ...Object.values(funnel_ui_1.MessagePanel.Config.getKeys('message')),
+            ...Object.values(funnel_ui_1.ListPanel.Config.getKeys('list')),
+            ...Object.values(funnel_ui_1.VisualPanel.Config.getKeys('visual'))
+        ];
+        // return all editable fields, minus the core keys
+        return _editableFields.reduce((fields, field) => {
+            // add field if not core
+            if (!coreKeys.includes(field.id)) {
+                fields[field.id] = field;
+            }
+            // keep reducing
+            return fields;
+        }, {});
+    }
     get layout() {
         return this._layout;
     }

package/dist/page/components/config/BlockConfigEditor.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockConfigEditor = BlockConfigEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("motion/react");
 const react_2 = require("react");
 const rxjs_1 = require("rxjs");
@@ -17,7 +21,7 @@ function BlockConfigEditor({ configuration, onClose }) {
     const [blockView, setBlockView] = (0, react_2.useState)('desktop');
     const pageController = (0, hooks_1.usePageController)();
     const panelLayoutPickerRef = (0, react_2.useRef)(null);
-    const { modified = false, valid = false, blocksFields = [], desktopFields = [], mobileFields = [] } = configuration !== null && configuration !== void 0 ? configuration : {};
+    const { layoutField, modified = false, valid = false, blocksFields = [], desktopFields = [], mobileFields = [] } = configuration !== null && configuration !== void 0 ? configuration : {};
     const settingsFields = blockView === 'desktop' ? desktopFields : mobileFields;
     // sync w/ configuration
     (0, core_1.useBlockConfiguration)(configuration);
@@ -39,7 +43,6 @@ function BlockConfigEditor({ configuration, onClose }) {
     const onChangePanelLayout = async (e) => {
         var _a;
         // skip if there's no layout field (shouldn't happen)
-        const { layoutField } = configuration !== null && configuration !== void 0 ? configuration : {};
         if (!layoutField) {
             return;
         }
@@ -63,7 +66,8 @@ function BlockConfigEditor({ configuration, onClose }) {
     // render
     const { options: slotOptions = [], currentIndex: slotIndex = 0 } = (_a = configuration === null || configuration === void 0 ? void 0 : configuration.slotState) !== null && _a !== void 0 ? _a : {};
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.SideSheet, { title: "Block Configuration", size: "xs", backdrop: "glass", open: !!configuration, onSave: onSave, onClose: onClose, disableDismiss: modified, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration === null || configuration === void 0 ? void 0 : configuration.isConfigInDefault, onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.reset(), children: "Reset to Default" }), children: (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex flex-col gap-l6", children: [(0, jsx_runtime_1.jsxs)("section", { className: "grid grid-cols-2 gap-x-l5 gap-y-l4", children: [blocksFields.length > 0 &&
-                                    (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-full", field: field, size: "xs" }, field.id)) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { label: "Layout", size: "xs" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: "LayoutTemplate", onClick: onChangePanelLayout, children: "Change" })] }), slotOptions.length > 1 &&
+                                    (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-full", field: field, size: "xs" }, field.id)) }), layoutField && layoutField.schema.enum.length > 1 &&
+                                    (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { label: "Layout", size: "xs" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: "LayoutTemplate", onClick: onChangePanelLayout, children: "Change" })] }), slotOptions.length > 1 &&
                                     (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)(FieldHeader_1.FieldHeader, { label: "Arrangement", size: "xs" }), slotOptions.length === 2
                                                 ?
                                                     (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "xs", iconLeft: "ArrowLeftRight", onClick: () => configuration === null || configuration === void 0 ? void 0 : configuration.gotToNextSlot(), children: "Swap" })
@@ -73,37 +77,48 @@ function BlockConfigEditor({ configuration, onClose }) {
                             (0, jsx_runtime_1.jsx)("section", { className: "grid grid-cols-2 auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: settingsFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, size: "xs" }, field.id)) }) })] }) }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: panelLayoutPickerRef, variant: "card", title: "Pick Block Layout", description: "Select an available layout for this block.", renderItem: (item) => renderPanelLayoutItem(item) })] }));
 }
 function renderPanelLayoutItem(item) {
+    const panel = (className = 'flex-1') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder rounded-[2px]', className) }));
+    const panelPaddedX = 'px-l4';
+    const panelPaddedY = 'py-l4';
+    const panelPadded = (0, classnames_1.default)(panelPaddedX, panelPaddedY);
+    const panelGap = 'gap-l1';
+    const nestedPanel = (config = {}) => {
+        // unpack config
+        const { panelClassName, nestedPanelClassName, multipleItems = false } = config;
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full bg-surface-placeholder rounded-[2px]', panelClassName, panelGap, { 'p-l2': multipleItems }), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex-1 bg-surface-placeholder-raised rounded-[2px]', nestedPanelClassName, { 'm-l2': !multipleItems }) }), multipleItems &&
+                    (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex-1 bg-surface-placeholder-raised rounded-[2px]', nestedPanelClassName) })] }));
+    };
     switch (item.id) {
         case 'solo':
-            return ((0, jsx_runtime_1.jsx)("div", { className: "p-l4 size-full", children: (0, jsx_runtime_1.jsx)("div", { className: "size-full bg-surface-placeholder" }) }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: panel('size-full') }));
         case 'stack.v':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col p-l4 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [panel(), panel()] }));
         case 'stack.h':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full p-l4 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel(), panel()] }));
         case 'brick.v':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col p-l4 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel(), panel(), panel()] }));
         case 'brick.t':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col p-l4 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full h-[20px] bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]r" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" })] })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [panel('flex-1 w-full h-[20px]'), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-1', panelGap), children: [panel(), panel()] })] }));
         case 'brick.r':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full p-l4 gap-l1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-1 flex-col gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-full w-[30px] bg-surface-placeholder rounded-[2px]" })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full', panelPadded, panelGap), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full flex-1 flex-col', panelGap), children: [panel(), panel()] }), panel('h-full w-[30px]')] }));
         case 'brick.b':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col p-l4 gap-l1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full h-[20px] bg-surface-placeholder rounded-[2px]" })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex flex-col h-full", panelPadded, panelGap), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex flex-1', panelGap), children: [panel(), panel()] }), panel('flex-1 w-full h-[20px]')] }));
         case 'brick.l':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full p-l4 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-full w-[30px] bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-1 flex-col gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder rounded-[2px]" })] })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full', panelPadded, panelGap), children: [panel('h-full w-[30px]'), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex h-full flex-1 flex-col', panelGap), children: [panel(), panel()] })] }));
         case 'nested':
-            return ((0, jsx_runtime_1.jsx)("div", { className: "p-l4 size-full", children: (0, jsx_runtime_1.jsx)("div", { className: "flex h-full px-l5 py-l2 bg-surface-placeholder rounded-[2px]", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-surface-placeholder-raised rounded-[2px]" }) }) }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel() }));
         case 'nested.v':
-            return ((0, jsx_runtime_1.jsx)("div", { className: "h-full w-full p-l4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col px-l4 py-l2 gap-l1 bg-surface-placeholder rounded-[2px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder-raised rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder-raised rounded-[2px]" })] }) }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel({ panelClassName: 'flex-col', multipleItems: true }) }));
         case 'nested.h':
-            return ((0, jsx_runtime_1.jsx)("div", { className: "h-full w-full p-l4", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex h-full px-l4 py-l3 gap-l1 bg-surface-placeholder rounded-[2px]", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder-raised rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder-raised rounded-[2px]" })] }) }));
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('size-full', panelPadded), children: nestedPanel({ multipleItems: true }) }));
         case 'nested.t':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col p-l4 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface-placeholder rounded-[2px]", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full w-7/12 bg-surface-placeholder-raised rounded-[2px]" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface-placeholder rounded-[2px]" })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full flex-col", panelPadded, panelGap), children: [nestedPanel({ panelClassName: 'flex-1' }), panel()] }));
         case 'nested.r':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full p-l4 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col p-l2 bg-surface-placeholder rounded-[2px]", children: (0, jsx_runtime_1.jsx)("div", { className: "w-full h-[60%] bg-surface-placeholder-raised rounded-[2px]" }) })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [panel(), nestedPanel({ panelClassName: 'flex-1' })] }));
         case 'nested.b':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full flex-col p-l4 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface-placeholder rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface-placeholder rounded-[2px]", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full w-7/12 bg-surface-placeholder-raised rounded-[2px]" }) })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full flex-col", panelPadded, panelGap), children: [panel(), nestedPanel({ panelClassName: 'flex-1' })] }));
         case 'nested.l':
-            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-full p-l4 gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 flex-col p-l2 bg-surface-placeholder rounded-[2px]", children: (0, jsx_runtime_1.jsx)("div", { className: "w-full h-[60%] bg-surface-placeholder-raised rounded-[2px]" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l2 bg-surface-placeholder rounded-[2px]" })] }));
+            return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)("flex h-full", panelPadded, panelGap), children: [nestedPanel({ panelClassName: 'flex-1' }), panel()] }));
         default:
             return ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
     }

package/dist/page/components/config/ListPanelEditor.js

@@ -57,7 +57,7 @@ function ListPanelEditor({ className, anchor, open, onClose, configuration }) {
 }
 function renderListLayoutItem(item) {
     // panel
-    const panel = (className = 'w-full') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder rounded-[3px]', className) }));
+    const panel = (className = 'w-full') => ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('bg-surface-placeholder-raised rounded-[2px]', className) }));
     // get content
     const panelClassName = 'w-full h-full';
     const panelPaddedX = 'px-10';
@@ -65,9 +65,13 @@ function renderListLayoutItem(item) {
     const panelPadded = (0, classnames_1.default)(panelPaddedX, panelPaddedY);
     let content;
     switch (item.id) {
+        case 'card':
         case 'grid':
             content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-cols-3 auto-cols-fr gap-x-l3 gap-y-l2 '), children: [panel(), panel(), panel(), panel(), panel()] }));
             break;
+        case 'flexWrap':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'flex flex-wrap justify-center items-center gap-l3'), children: [panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12'), panel('w-12 h-12')] }));
+            break;
         case 'verticalStack':
             content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid grid-cols-1 auto-rows-fr gap-y-l2 '), children: [panel(), panel(), panel()] }));
             break;
@@ -80,6 +84,15 @@ function renderListLayoutItem(item) {
         case 'bento':
             content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPadded, 'grid auto-rows-auto auto-cols-auto gap-l3'), children: [panel('w-20 row-start-1 row-span-2 col-start-1'), panel('w-28 row-start-1 col-start-2'), panel('w-18 row-start-2 col-start-2')] }));
             break;
+        case 'brick':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-2 gap-l3 pt-10'), children: [panel('h-12 row-start-1 col-span-full'), panel('h-12 row-start-2 col-start-1'), panel('h-12 row-start-2 col-start-2'), panel('h-12 row-start-3 col-span-full')] }));
+            break;
+        case 'brickFlipped':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, panelPaddedX, 'grid grid-cols-2 gap-l3 pt-10'), children: [panel('h-12 row-start-1 col-start-1'), panel('h-12 row-start-1 col-start-2'), panel('h-12 row-start-2 col-span-full'), panel('h-12 row-start-3 col-start-1'), panel('h-12 row-start-3 col-start-2')] }));
+            break;
+        case 'carousel':
+            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(panelClassName, 'flex flex-col gap-l2 pt-10 pb-l3'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-stretch gap-l3", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-8 bg-surface-placeholder rounded-r-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 bg-surface-placeholder-raised rounded-[2px]" }), (0, jsx_runtime_1.jsx)("div", { className: "w-8 bg-surface-placeholder rounded-l-[2px]" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center items-center gap-l1", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" }), (0, jsx_runtime_1.jsx)("div", { className: "w-4 h-4 bg-surface-placeholder-raised rounded-full" })] })] }));
+            break;
         default:
             content = ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
             break;

package/dist/styles/index.css

@@ -4409,6 +4409,12 @@ video {
 .row-start-2{
     grid-row-start: 2;
 }
+.row-start-3{
+    grid-row-start: 3;
+}
+.m-l2{
+    margin: 4px;
+}
 .m-l6{
     margin: 16px;
 }
@@ -4566,6 +4572,9 @@ video {
 .h-10{
     height: 10px;
 }
+.h-12{
+    height: 12px;
+}
 .h-14{
     height: 14px;
 }
@@ -4635,9 +4644,6 @@ video {
 .h-\[55px\]{
     height: 55px;
 }
-.h-\[60\%\]{
-    height: 60%;
-}
 .h-\[80px\]{
     height: 80px;
 }
@@ -4725,6 +4731,9 @@ video {
 .w-11\/12{
     width: 91.666667%;
 }
+.w-12{
+    width: 12px;
+}
 .w-14{
     width: 14px;
 }
@@ -4764,8 +4773,8 @@ video {
 .w-6{
     width: 6px;
 }
-.w-7\/12{
-    width: 58.333333%;
+.w-8{
+    width: 8px;
 }
 .w-8\/12{
     width: 66.666667%;
@@ -5140,9 +5149,6 @@ video {
 .rounded-\[2px\]{
     border-radius: 2px;
 }
-.rounded-\[3px\]{
-    border-radius: 3px;
-}
 .rounded-full{
     border-radius: 9999px;
 }
@@ -5167,6 +5173,14 @@ video {
 .rounded-xxs{
     border-radius: 2px;
 }
+.rounded-l-\[2px\]{
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+}
+.rounded-r-\[2px\]{
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+}
 .rounded-t-lg{
     border-top-left-radius: 18px;
     border-top-right-radius: 18px;
@@ -5577,10 +5591,6 @@ video {
     padding-top: 72px;
     padding-bottom: 72px;
 }
-.py-l2{
-    padding-top: 4px;
-    padding-bottom: 4px;
-}
 .py-l3{
     padding-top: 6px;
     padding-bottom: 6px;
@@ -5601,6 +5611,9 @@ video {
     padding-top: 24px;
     padding-bottom: 24px;
 }
+.pb-l3{
+    padding-bottom: 6px;
+}
 .pb-l4{
     padding-bottom: 8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nascentdigital/funnel-editor",
-  "version": "4.5.6",
+  "version": "4.5.7",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -89,5 +89,5 @@
     "ts-jest": "^29",
     "type-fest": "^4"
   },
-  "gitHead": "e5899ba807b2c7241f493c850a98c1607df6771b"
+  "gitHead": "aa14b53e99044a968b850c4f426e40d312a9306a"
 }