@nascentdigital/funnel-ui 4.6.0 → 4.6.7

package/dist/client/fields/LazyVideo.d.ts

@@ -1,8 +1,9 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { HTMLAttributes } from 'react';
-export declare function LazyVideo({ className, video: asset, ...props }: LazyVideo.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function LazyVideo({ className, video: asset, poster, ...props }: LazyVideo.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace LazyVideo {
     type Props = Omit<HTMLAttributes<HTMLImageElement> & HTMLAttributes<HTMLVideoElement>, 'children'> & {
         video?: Schema.AssetField.LinkedValue.Video;
+        poster?: string;
     };
 }

package/dist/client/fields/LazyVideo.js

@@ -23,7 +23,7 @@ const react_2 = require("react");
 const hooks_1 = require("../hooks");
 // component
 function LazyVideo(_a) {
-    var { className, video: asset } = _a, props = __rest(_a, ["className", "video"]);
+    var { className, video: asset, poster } = _a, props = __rest(_a, ["className", "video", "poster"]);
     // bind state + refs
     const { type, url, metadata: { crop, dimensions: { width, height } = {}, blurHash } = {} } = asset !== null && asset !== void 0 ? asset : {};
     const [state, setState] = (0, react_2.useState)('uninitialized');
@@ -95,6 +95,6 @@ function LazyVideo(_a) {
             '--_nd-visual-native-width': width ? `${width}` : '1',
             '--_nd-visual-native-height': height ? `${height}` : '1'
         }, children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-LazyVideo-content", children: [blurHash &&
-                    (0, jsx_runtime_1.jsx)("canvas", { ref: blurCanvasRef, className: "nd-LazyVideo-blurHash", width: 32, height: 32, draggable: false }), (0, jsx_runtime_1.jsxs)("video", { ref: videoRef, className: (0, classnames_1.default)('nd-LazyVideo-video'), preload: "none", autoPlay: true, muted: true, loop: true, playsInline: true, children: [state !== 'uninitialized' &&
+                    (0, jsx_runtime_1.jsx)("canvas", { ref: blurCanvasRef, className: "nd-LazyVideo-blurHash", width: 32, height: 32, draggable: false }), (0, jsx_runtime_1.jsxs)("video", { ref: videoRef, className: (0, classnames_1.default)('nd-LazyVideo-video'), preload: "none", autoPlay: true, muted: true, loop: true, playsInline: true, poster: poster, children: [state !== 'uninitialized' &&
                             (0, jsx_runtime_1.jsx)("source", { src: url, type: type }), "Your browser does not support the video content."] })] }) })));
 }

package/dist/client/interaction/Carousel.d.ts

@@ -1,6 +1,6 @@
 import { Callback, Duration, Transform } from '@nascentdigital/funnel-core';
 import { HTMLAttributes, ReactElement, ReactNode } from 'react';
-export declare function Carousel({ className, spacing, infinite, autoplay, autoplayInterval: autoplayIntervalRaw, disableClipping, renderIndicator, renderNavButton, renderPlayButton, onPageDrag, onPageChange, children }: Carousel.Props): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ className, spacing: spacingRaw, infinite, autoplay, autoplayInterval: autoplayIntervalRaw, disableClipping, renderIndicator, renderNavButton, renderPlayButton, onPageDrag, onPageChange, children }: Carousel.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Carousel {
     export type State = 'initializing' | 'disabled' | 'ready' | 'dragging' | 'animating';
     export type Props = {

package/dist/client/interaction/Carousel.js

@@ -14,7 +14,7 @@ const rxjs_1 = require("rxjs");
 const app_1 = require("../app");
 const hooks_1 = require("../hooks");
 // component
-function Carousel({ className, spacing = 0, infinite = false, autoplay = false, autoplayInterval: autoplayIntervalRaw, disableClipping = false, renderIndicator, renderNavButton, renderPlayButton, onPageDrag = funnel_core_1.Fn.NoOp, onPageChange = funnel_core_1.Fn.NoOp, children = [] }) {
+function Carousel({ className, spacing: spacingRaw, infinite = false, autoplay = false, autoplayInterval: autoplayIntervalRaw, disableClipping = false, renderIndicator, renderNavButton, renderPlayButton, onPageDrag = funnel_core_1.Fn.NoOp, onPageChange = funnel_core_1.Fn.NoOp, children = [] }) {
     var _a;
     // bind props + state + hooks
     const [state, setState] = (0, react_2.useState)('initializing');
@@ -37,18 +37,21 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
     const playButtonFocused = !!playButton && keyboardFocusElement === playButton;
     const childCount = children.length;
     const gap = (0, react_2.useMemo)(() => {
+        // zero if no container
         if (!container) {
-            return;
+            return 0;
         }
+        // get gap pixel value from css variable
         const rawValue = getComputedStyle(container).getPropertyValue('--nd-carousel-gap');
         if (rawValue.endsWith('px')) {
             return Number.parseInt(rawValue.substring(0, rawValue.length - 2));
         }
+        // otherwise zero
         else {
-            return undefined;
+            return 0;
         }
     }, [container]);
-    console.debug('>>> carousel', gap);
+    const spacing = spacingRaw !== null && spacingRaw !== void 0 ? spacingRaw : (gap / 2);
     const appConfig = (0, app_1.useAppConfig)();
     const autoplayInterval = (0, react_2.useMemo)(() => { var _a; return funnel_core_1.Duration.toMilliseconds((_a = autoplayIntervalRaw !== null && autoplayIntervalRaw !== void 0 ? autoplayIntervalRaw : appConfig.ui.carouselInterval) !== null && _a !== void 0 ? _a : '1s'); }, [autoplayIntervalRaw, appConfig]);
     const reduceMotion = (0, react_1.useReducedMotion)();

package/dist/server/blocks/Block.js

@@ -144,10 +144,11 @@ function renderLayout({ renderPanel, layout }) {
     const { root } = layout;
     const { items } = root;
     const siblingCount = items.length;
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('nd-Block-root', getContainerClasses(root)), children: items.map((item, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({ renderPanel, parent: root.type, item, siblingCount }) }, `${item.type}.${index}`)) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "nd-Block-rootContainerWrap", children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('nd-Block-rootContainer', getContainerClasses(root)), children: items.map((item, index) => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: renderItem({ renderPanel, parent: root.type, item, siblingCount }) }, `${item.type}.${index}`)) }) }));
 }
-function getContainerClasses({ type, alignX, alignY, items }) {
+function getContainerClasses(container) {
     var _a;
+    const { type, alignX, alignY, items } = container;
     const itemCount = (_a = items.length) !== null && _a !== void 0 ? _a : 0;
     return (0, classnames_1.default)({
         'nd-Block-row': type === 'row',

package/dist/server/blocks/RelatedPages.d.ts

@@ -26,6 +26,7 @@ export declare namespace RelatedPages {
         slotVariation: import("..").SlotVariation.Schema;
     } & Record<"messageTextAlign", Schema.EnumField<Schema.EnumField.Options<import("..").TextAlignment>>> & Record<"messageWidth", Schema.EnumField<Schema.EnumField.Options<import("..").ItemSize>>> & Record<"messageHorizontalAlign", Schema.EnumField<Schema.EnumField.Options<import("..").ItemAlignment>>> & Record<"messageVerticalAlign", Schema.EnumField<Schema.EnumField.Options<import("..").ItemAlignment>>> & {
         contentAlign: import("..").ItemAlignment.Vertical.Schema;
+        contentSplit: import("..").RowRatio.Schema;
     } & Schema.Block.Config) | ({
         readonly theme: Schema.EnumField<Readonly<import("@nascentdigital/funnel-core").BlockThemes.Options>>;
     } & {
@@ -40,6 +41,7 @@ export declare namespace RelatedPages {
         slotVariation: import("..").SlotVariation.Schema;
     } & Record<"messageTextAlign", Schema.EnumField<Schema.EnumField.Options<import("..").TextAlignment>>> & Record<"messageWidth", Schema.EnumField<Schema.EnumField.Options<import("..").ItemSize>>> & Record<"messageHorizontalAlign", Schema.EnumField<Schema.EnumField.Options<import("..").ItemAlignment>>> & Record<"messageVerticalAlign", Schema.EnumField<Schema.EnumField.Options<import("..").ItemAlignment>>> & Record<`${any}Layout`, Schema.EnumField<Schema.EnumField.Options<keyof import("..").ListPanelLayout.Configs>>> & Record<`${any}Width`, Schema.EnumField<Schema.EnumField.Options<import("..").ItemSize>>> & Record<`${any}HorizontalAlign`, Schema.EnumField<Schema.EnumField.Options<import("..").ItemAlignment>>> & Record<`${any}VerticalAlign`, Schema.EnumField<Schema.EnumField.Options<import("..").ItemAlignment>>> & {
         contentAlign: import("..").ItemAlignment.Vertical.Schema;
+        contentSplit: import("..").RowRatio.Schema;
     } & Schema.Block.Config)>;
     namespace schema {
         type Args = {

package/dist/server/fields/Media.d.ts

@@ -0,0 +1,51 @@
+import { Schema as SchemaCore } from '@nascentdigital/funnel-core';
+import { Visual } from './Visual';
+export declare function Media({ className, media, ...props }: Media.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Media {
+    namespace Image {
+        const schema: SchemaCore.Collection<{
+            image: SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>;
+            mobileImage: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>>;
+        }>;
+        type Schema = typeof schema;
+        type Value = SchemaCore.Collection.LinkedData<Schema>;
+    }
+    namespace Video {
+        const schema: SchemaCore.Collection<{
+            video: SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Video>;
+            cover: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>>;
+        }>;
+        type Schema = typeof schema;
+        type Value = SchemaCore.Collection.LinkedData<Schema>;
+    }
+    namespace StreamingVideo {
+        const schema: SchemaCore.Collection<{
+            video: SchemaCore.EmbeddedVideoField;
+            cover: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>>;
+        }>;
+        type Schema = typeof schema;
+        type Value = SchemaCore.Collection.LinkedData<Schema>;
+    }
+    const schema: SchemaCore.CollectionField<SchemaCore.Collection<{
+        image: SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>;
+        mobileImage: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>>;
+    }> | SchemaCore.Collection<{
+        video: SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Video>;
+        cover: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>>;
+    }> | SchemaCore.Collection<{
+        video: SchemaCore.EmbeddedVideoField;
+        cover: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>>;
+    }>>;
+    type Schema = typeof schema;
+    type Value = SchemaCore.Field.LinkedValue<Schema>;
+    namespace Value {
+        function isImage(value: Value): value is Image.Value;
+        function isVideo(value: Value): value is Video.Value;
+        function isStreamingVideo(value: Value): value is StreamingVideo.Value;
+    }
+    type Props = {
+        className?: string;
+        media?: Value;
+        loading?: Visual.Loading;
+    };
+}

package/dist/server/fields/Media.js

@@ -0,0 +1,147 @@
+"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.Media = Media;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const refs_1 = require("../../client/refs");
+const Visual_1 = require("./Visual");
+// component
+function Media(_a) {
+    var { className, media } = _a, props = __rest(_a, ["className", "media"]);
+    // skip if there's no media
+    if (!media) {
+        return null;
+    }
+    // or render image
+    let mediaClassName = undefined;
+    let content;
+    if (Media.Value.isImage(media)) {
+        mediaClassName = 'nd-Media-image';
+        content = renderImage(Object.assign({ media }, props));
+    }
+    // or render video
+    else if (Media.Value.isVideo(media)) {
+        mediaClassName = 'nd-Media-video';
+        content = renderVideo(Object.assign({ media }, props));
+    }
+    // or render streaming video
+    else if (Media.Value.isStreamingVideo(media)) {
+        mediaClassName = 'nd-Media-streamingVideo';
+        content = renderStreamingVideo(Object.assign({ media }, props));
+    }
+    // or indicate error
+    else {
+        content = null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('nd-Media', mediaClassName, className), children: content }));
+}
+// extension
+(function (Media) {
+    // media types
+    let Image;
+    (function (Image) {
+        // schema
+        Image.schema = funnel_core_1.Schema.Collection.create({
+            type: '_nd-Media-image',
+            name: 'Image',
+            description: 'Image content for your website',
+            version: 1,
+            fields: {
+                image: funnel_core_1.Schema.Field.image({ name: 'Primary' }),
+                mobileImage: funnel_core_1.Schema.Field.image({ name: 'Mobile Optimized' }).optional()
+            }
+        });
+    })(Image = Media.Image || (Media.Image = {}));
+    let Video;
+    (function (Video) {
+        // schema
+        Video.schema = funnel_core_1.Schema.Collection.create({
+            type: '_nd-Media-video',
+            name: 'Background Video',
+            description: 'Small, decorative background video content',
+            version: 1,
+            fields: {
+                video: funnel_core_1.Schema.Field.video({ name: 'Video' }),
+                cover: funnel_core_1.Schema.Field.image({ name: 'Cover' }).optional()
+            }
+        });
+    })(Video = Media.Video || (Media.Video = {}));
+    let StreamingVideo;
+    (function (StreamingVideo) {
+        // schema
+        StreamingVideo.schema = funnel_core_1.Schema.Collection.create({
+            type: '_nd-Media-streamingVideo',
+            name: 'Remote Video',
+            description: 'Remove streaming video content (Youtube and Vimeo)',
+            version: 1,
+            fields: {
+                video: funnel_core_1.Schema.Field.embeddedVideo({ name: 'Video' }),
+                cover: funnel_core_1.Schema.Field.image({ name: 'Cover' }).optional()
+            }
+        });
+    })(StreamingVideo = Media.StreamingVideo || (Media.StreamingVideo = {}));
+    // schema
+    Media.schema = funnel_core_1.Schema.Field.collection({
+        name: 'Media',
+        description: 'Image, video, or streaming video content',
+        hint: 'Add and configure a local media file or connect to a remote straming video',
+        collections: [Image.schema, Video.schema, StreamingVideo.schema]
+    });
+    let Value;
+    (function (Value) {
+        // helpers
+        function isImage(value) {
+            return value.type === Image.schema.type;
+        }
+        Value.isImage = isImage;
+        function isVideo(value) {
+            return value.type === Video.schema.type;
+        }
+        Value.isVideo = isVideo;
+        function isStreamingVideo(value) {
+            return value.type === StreamingVideo.schema.type;
+        }
+        Value.isStreamingVideo = isStreamingVideo;
+    })(Value = Media.Value || (Media.Value = {}));
+})(Media || (exports.Media = Media = {}));
+function renderImage({ media, loading }) {
+    // bind props
+    const { image: imageRaw, mobileImage: mobileImageRaw } = media.fields;
+    const image = imageRaw === null || imageRaw === void 0 ? void 0 : imageRaw.value;
+    const mobileImage = mobileImageRaw === null || mobileImageRaw === void 0 ? void 0 : mobileImageRaw.value;
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Visual_1.Visual, { className: "nd-Media-image-desktop", visual: image, loading: loading }), mobileImage &&
+                (0, jsx_runtime_1.jsx)(Visual_1.Visual, { className: "nd-Media-image-mobile", visual: mobileImage, loading: loading })] }));
+}
+function renderVideo({ media, loading }) {
+    // bind props
+    const { video: videoRaw, cover: coverRaw } = media.fields;
+    const video = videoRaw === null || videoRaw === void 0 ? void 0 : videoRaw.value;
+    const cover = coverRaw === null || coverRaw === void 0 ? void 0 : coverRaw.value;
+    // render
+    return ((0, jsx_runtime_1.jsx)(Visual_1.Visual, { className: "nd-Media-video-player", visual: video, loading: loading, cover: cover }));
+}
+function renderStreamingVideo({ media, loading }) {
+    // bind props
+    const { video: videoRaw, cover: coverRaw } = media.fields;
+    const video = videoRaw === null || videoRaw === void 0 ? void 0 : videoRaw.value;
+    const cover = coverRaw === null || coverRaw === void 0 ? void 0 : coverRaw.value;
+    // render
+    return ((0, jsx_runtime_1.jsx)(refs_1.EmbeddedVideo, { className: "nd-Media-streamingVideo-player", video: video }));
+}

package/dist/server/fields/Visual.d.ts

@@ -1,10 +1,11 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { HTMLAttributes } from 'react';
-export declare function Visual({ className, visual, loading, ...props }: Visual.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function Visual({ className, visual, cover, loading, ...props }: Visual.Props): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Visual {
     const schema: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
     type Props = Omit<HTMLAttributes<HTMLImageElement> & HTMLAttributes<HTMLVideoElement>, 'children'> & {
         visual?: Model;
+        cover?: Schema.AssetField.LinkedValue.Image;
         loading?: Loading;
     };
     type Model = Schema.Field.LinkedValue<typeof schema>;

package/dist/server/fields/Visual.js

@@ -22,7 +22,7 @@ const image_1 = __importDefault(require("next/image"));
 const refs_1 = require("../../client/refs");
 // component
 function Visual(_a) {
-    var { className, visual, loading = 'lazy' } = _a, props = __rest(_a, ["className", "visual", "loading"]);
+    var { className, visual, cover, loading = 'lazy' } = _a, props = __rest(_a, ["className", "visual", "cover", "loading"]);
     // skip if not set
     if (!visual) {
         return null;
@@ -44,14 +44,14 @@ function Visual(_a) {
     else if (loading === 'eager') {
         const { type, url, metadata: { crop = 'center', dimensions } = {} } = visual !== null && visual !== void 0 ? visual : {};
         const { width, height } = dimensions !== null && dimensions !== void 0 ? dimensions : {};
-        return ((0, jsx_runtime_1.jsx)("video", Object.assign({}, props, { className: (0, classnames_1.default)(className, 'nd-Visual nd-Visual-video'), autoPlay: true, muted: true, loop: true, playsInline: true, style: {
+        return ((0, jsx_runtime_1.jsx)("video", Object.assign({}, props, { className: (0, classnames_1.default)(className, 'nd-Visual nd-Visual-video'), autoPlay: true, muted: true, loop: true, playsInline: true, poster: cover === null || cover === void 0 ? void 0 : cover.url, style: {
                 '--_nd-visual-native-width': width ? `${width}` : '1',
                 '--_nd-visual-native-height': height ? `${height}` : '1'
             }, children: (0, jsx_runtime_1.jsx)("source", { src: url, type: type }) })));
     }
     // or render image
     else {
-        return ((0, jsx_runtime_1.jsx)(refs_1.LazyVideo, Object.assign({}, props, { className: (0, classnames_1.default)(className, 'nd-Visual nd-Visual-video'), video: visual })));
+        return ((0, jsx_runtime_1.jsx)(refs_1.LazyVideo, Object.assign({}, props, { className: (0, classnames_1.default)(className, 'nd-Visual nd-Visual-video'), video: visual, poster: cover === null || cover === void 0 ? void 0 : cover.url })));
     }
 }
 // extension

package/dist/server/fields/index.d.ts

@@ -5,6 +5,7 @@ export * from './FreeFormContent';
 export * from './Headline';
 export * from './Icon';
 export * from './Link';
+export * from './Media';
 export * from './Quote';
 export * from './RichText';
 export * from './Title';

package/dist/server/fields/index.js

@@ -21,6 +21,7 @@ __exportStar(require("./FreeFormContent"), exports);
 __exportStar(require("./Headline"), exports);
 __exportStar(require("./Icon"), exports);
 __exportStar(require("./Link"), exports);
+__exportStar(require("./Media"), exports);
 __exportStar(require("./Quote"), exports);
 __exportStar(require("./RichText"), exports);
 __exportStar(require("./Title"), exports);

package/dist/server/panels/BlockPanel.d.ts

@@ -1,5 +1,5 @@
 import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
-import { BlockConfig, ItemAlignment, PanelLayout, SlotVariation } from '../schema';
+import { BlockConfig, ItemAlignment, PanelLayout, RowRatio, SlotVariation } from '../schema';
 import { ListPanel } from './ListPanel';
 import { MessagePanel } from './MessagePanel';
 import { VisualPanel } from './VisualPanel';
@@ -67,10 +67,13 @@ export declare namespace BlockPanel {
             slotVariation: SlotVariation.Schema;
         } & (TMessageKey extends string ? MessagePanel.Config.Entries<TMessageKey> : {}) & (TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> ? VisualPanel.Config.Entries<TVisualKey> : {}) & (TListKey extends Schema.Fields.ListFields.Keys<TFields> ? ListPanel.Config.Entries<TListKey> : {}) & (TMessageKey extends string ? TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> ? ({
             contentAlign: ItemAlignment.Vertical.Schema;
+            contentSplit: RowRatio.Schema;
         }) : TListKey extends Schema.Fields.ListFields.Keys<TFields> ? ({
             contentAlign: ItemAlignment.Vertical.Schema;
+            contentSplit: RowRatio.Schema;
         }) : {} : TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> ? TListKey extends Schema.Fields.ListFields.Keys<TFields> ? ({
             contentAlign: ItemAlignment.Vertical.Schema;
+            contentSplit: RowRatio.Schema;
         }) : {} : {})) & TConfigExtended;
     }
     function getConfigSchema<TFields extends Schema.Fields, TMessageKey extends string | undefined = undefined, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields> | undefined = undefined, TListKey extends Schema.Fields.ListFields.Keys<TFields> | undefined = undefined, TConfigExtended extends Schema.Block.Config = Schema.Block.Config>({ extend, messageKey: messageKeyRaw, visualKey: visualKeyRaw, listKey: listKeyRaw }: GetConfigSchema.Args<TFields, TMessageKey, TVisualKey, TListKey, TConfigExtended>): GetConfigSchema.Result<TFields, TMessageKey, TVisualKey, TListKey, TConfigExtended>;

package/dist/server/panels/BlockPanel.js

@@ -329,16 +329,17 @@ var BlockPanel;
                     .Horizontal.schema.rename(`${visualLabel} ${schema_1.ItemAlignment.Horizontal.schema.name}`)
                     .optional();
         }
-        // add content alignment if there are more than 2 panels
+        // add content alignment/split if there are more than 2 panels
         if (panelCount > 1) {
             configSchema['contentAlign'] = schema_1.ItemAlignment.Vertical.schema.rename('Content Alignment').optional();
+            configSchema['contentSplit'] = schema_1.RowRatio.schema.rename('Content Split').optional();
         }
         // return
         return configSchema;
     }
     BlockPanel.getConfigSchema = getConfigSchema;
     function getConfig({ args, messageFieldKeys, messageKey, visualKey, listKey }) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
         // throw if there are not enough panels
         const panelCount = [messageKey, visualKey, listKey].filter(funnel_core_1.Value.isDefined).length;
         if (panelCount === 0) {
@@ -418,7 +419,7 @@ var BlockPanel;
                 flexDirection: flexDirections.L
             });
         }
-        // create new schema (drop content alignment if it's not applicable)
+        // create new schema
         const updatedConfigSchema = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Object.entries(configSchema)
             .reduce((configSchema, [key, fieldSchema]) => {
             // add the config back if it's not in the panel config keys
@@ -428,17 +429,21 @@ var BlockPanel;
             // keep reducing
             return configSchema;
         }, {})), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.configSchema), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.configSchema), listConfig === null || listConfig === void 0 ? void 0 : listConfig.configSchema), { layout: layoutSchema, slotVariation: slotVariationSchema });
+        // drop content alignment if it's not applicable
         if (!BlockPanel.Slots.contentAlignmentExists(layout)) {
             delete updatedConfigSchema.contentAlign;
         }
+        // drop layout/content split if not applicable
         if (panelCount < 2) {
             delete updatedConfigSchema.layout;
+            delete updatedConfigSchema.contentSplit;
         }
         // create default config
-        const defaultConfig = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, config), { theme: funnel_core_1.Schema.EnumField.Value.toData('default'), contentAlign: funnel_core_1.Schema.EnumField.Value.toData('start') }), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.defaultConfig), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.defaultConfig), listConfig === null || listConfig === void 0 ? void 0 : listConfig.defaultConfig), { layout: funnel_core_1.Schema.EnumField.Value.toData((_e = layoutSchema.defaultOption) !== null && _e !== void 0 ? _e : 'solo'), slotVariation: funnel_core_1.Schema.EnumField.Value.toData((_f = slotVariationSchema.defaultOption) !== null && _f !== void 0 ? _f : 'v1') });
+        const defaultConfig = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, config), { theme: funnel_core_1.Schema.EnumField.Value.toData('default'), contentAlign: funnel_core_1.Schema.EnumField.Value.toData('start'), contentSplit: funnel_core_1.Schema.EnumField.Value.toData('1/1') }), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.defaultConfig), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.defaultConfig), listConfig === null || listConfig === void 0 ? void 0 : listConfig.defaultConfig), { layout: funnel_core_1.Schema.EnumField.Value.toData((_e = layoutSchema.defaultOption) !== null && _e !== void 0 ? _e : 'solo'), slotVariation: funnel_core_1.Schema.EnumField.Value.toData((_f = slotVariationSchema.defaultOption) !== null && _f !== void 0 ? _f : 'v1') });
         const contentAlign = ((_h = (_g = config.contentAlign) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : 'start');
+        const contentSplit = ((_k = (_j = config.contentSplit) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : '1/1');
         // create new config
-        const updatedConfig = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, config), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.config), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.config), listConfig === null || listConfig === void 0 ? void 0 : listConfig.config), { layout: funnel_core_1.Schema.EnumField.Value.toData(layout), slotVariation: funnel_core_1.Schema.EnumField.Value.toData(slotVariation), contentAlign: funnel_core_1.Schema.EnumField.Value.toData(contentAlign) });
+        const updatedConfig = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, config), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.config), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.config), listConfig === null || listConfig === void 0 ? void 0 : listConfig.config), { layout: funnel_core_1.Schema.EnumField.Value.toData(layout), slotVariation: funnel_core_1.Schema.EnumField.Value.toData(slotVariation), contentAlign: funnel_core_1.Schema.EnumField.Value.toData(contentAlign), contentSplit: funnel_core_1.Schema.EnumField.Value.toData(contentSplit) });
         // return config
         return {
             updatedConfigSchema: updatedConfigSchema,
@@ -448,7 +453,7 @@ var BlockPanel;
     }
     BlockPanel.getConfig = getConfig;
     function getLayout({ args, messageFieldKeys, messageKey, visualKey, listKey }) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
         // throw if there are not enough panels
         const panelCount = [messageKey, visualKey, listKey].filter(funnel_core_1.Value.isDefined).length;
         if (panelCount === 0) {
@@ -456,7 +461,6 @@ var BlockPanel;
         }
         // resolve props
         const config = args.config;
-        const fields = args.fields;
         const messageKeys = messageKey
             ? MessagePanel_1.MessagePanel.Config.getKeys(messageKey)
             : {};
@@ -481,26 +485,27 @@ var BlockPanel;
             layout,
             variation: slotVariation
         });
-        // compute content alignment config
+        // compute content alignment/split config
         const contentAlign = (_f = (_e = config.contentAlign) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : 'start';
+        const contentSplit = ((_h = (_g = config.contentSplit) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : '1/1');
         // compute message config
-        const messageWidthRaw = (_g = config[messageKeys.width]) === null || _g === void 0 ? void 0 : _g.value;
+        const messageWidthRaw = (_j = config[messageKeys.width]) === null || _j === void 0 ? void 0 : _j.value;
         const isMessageFullBleed = messageWidthRaw === 'fullBleed';
-        const messageWidth = isMessageFullBleed ? 'full' : (_j = (_h = config[messageKeys.width]) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : 'full';
-        const messageTextAlign = (_l = (_k = config[messageKeys.textAlign]) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : 'left';
-        const messageHorizontalAlign = (_o = (_m = config[messageKeys.horizontalAlign]) === null || _m === void 0 ? void 0 : _m.value) !== null && _o !== void 0 ? _o : 'start';
-        const messageVerticalAlign = (_q = (_p = config[messageKeys.verticalAlign]) === null || _p === void 0 ? void 0 : _p.value) !== null && _q !== void 0 ? _q : 'start';
+        const messageWidth = isMessageFullBleed ? 'full' : (_l = (_k = config[messageKeys.width]) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : 'full';
+        const messageTextAlign = (_o = (_m = config[messageKeys.textAlign]) === null || _m === void 0 ? void 0 : _m.value) !== null && _o !== void 0 ? _o : 'left';
+        const messageHorizontalAlign = (_q = (_p = config[messageKeys.horizontalAlign]) === null || _p === void 0 ? void 0 : _p.value) !== null && _q !== void 0 ? _q : 'start';
+        const messageVerticalAlign = (_s = (_r = config[messageKeys.verticalAlign]) === null || _r === void 0 ? void 0 : _r.value) !== null && _s !== void 0 ? _s : 'start';
         // compute visual config
-        const visualAspect = (_s = (_r = config[visualKeys.aspect]) === null || _r === void 0 ? void 0 : _r.value) !== null && _s !== void 0 ? _s : 'auto';
-        const visualWidth = ((_u = (_t = config[visualKeys.width]) === null || _t === void 0 ? void 0 : _t.value) !== null && _u !== void 0 ? _u : 'full');
-        const visualHorizontalAlign = (_w = (_v = config[visualKeys.horizontalAlign]) === null || _v === void 0 ? void 0 : _v.value) !== null && _w !== void 0 ? _w : 'start';
+        const visualAspect = (_u = (_t = config[visualKeys.aspect]) === null || _t === void 0 ? void 0 : _t.value) !== null && _u !== void 0 ? _u : 'auto';
+        const visualWidth = ((_w = (_v = config[visualKeys.width]) === null || _v === void 0 ? void 0 : _v.value) !== null && _w !== void 0 ? _w : 'full');
+        const visualHorizontalAlign = (_y = (_x = config[visualKeys.horizontalAlign]) === null || _x === void 0 ? void 0 : _x.value) !== null && _y !== void 0 ? _y : 'start';
         const isVisualFullBleed = visualWidth === 'fullBleed';
         // compute list config
-        const listWidthRaw = (_x = config[listKeys.width]) === null || _x === void 0 ? void 0 : _x.value;
+        const listWidthRaw = (_z = config[listKeys.width]) === null || _z === void 0 ? void 0 : _z.value;
         const isListFullBleed = listWidthRaw === 'fullBleed';
-        const listWidth = isListFullBleed ? 'full' : (_z = (_y = config[listKeys.width]) === null || _y === void 0 ? void 0 : _y.value) !== null && _z !== void 0 ? _z : 'full';
-        const listHorizontalAlign = (_1 = (_0 = config[listKeys.horizontalAlign]) === null || _0 === void 0 ? void 0 : _0.value) !== null && _1 !== void 0 ? _1 : 'start';
-        const listVerticalAlign = (_3 = (_2 = config[listKeys.verticalAlign]) === null || _2 === void 0 ? void 0 : _2.value) !== null && _3 !== void 0 ? _3 : 'start';
+        const listWidth = isListFullBleed ? 'full' : (_1 = (_0 = config[listKeys.width]) === null || _0 === void 0 ? void 0 : _0.value) !== null && _1 !== void 0 ? _1 : 'full';
+        const listHorizontalAlign = (_3 = (_2 = config[listKeys.horizontalAlign]) === null || _2 === void 0 ? void 0 : _2.value) !== null && _3 !== void 0 ? _3 : 'start';
+        const listVerticalAlign = (_5 = (_4 = config[listKeys.verticalAlign]) === null || _4 === void 0 ? void 0 : _4.value) !== null && _5 !== void 0 ? _5 : 'start';
         // create visual if we have one
         let visualSlot = undefined;
         if (items.includes('V') || schema_1.PanelLayout.isNested(layout)) {
@@ -580,7 +585,7 @@ var BlockPanel;
             tightDesktop="${tightDesktop}"
             tightMobile="${tightMobile}"
           >
-            <row alignY="${contentAlign}">
+            <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
               ${slots[0]}
               ${slots[1]}
             </row>
@@ -618,7 +623,7 @@ var BlockPanel;
           <block xmlns="nd:block" name="Nested: Horizontal">
             <stack>
               ${visualSlot}
-              <row alignY="${contentAlign}">
+              <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
                 ${slots[0]}
                 ${slots[1]}
               </row>
@@ -658,7 +663,7 @@ var BlockPanel;
                 // language=XML
                 blockLayout = `
           <block xmlns="nd:block" name="Nested: Right">
-            <row alignY="${contentAlign}">
+            <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
               ${slots[0]}
               <stack>
                 ${visualSlot}
@@ -686,7 +691,7 @@ var BlockPanel;
                 // language=XML
                 blockLayout = `
           <block xmlns="nd:block" name="Nested: Left">
-            <row alignY="${contentAlign}">
+            <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
               <stack>
                 ${visualSlot}
                 ${slots[0]}
@@ -751,7 +756,7 @@ var BlockPanel;
             >
               <col>
                 ${slots[0]}
-                <row alignY="${contentAlign}">
+                <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
                   ${slots[1]}
                   ${slots[2]}
                 </row>
@@ -786,7 +791,7 @@ var BlockPanel;
               tightDesktop="${tightDesktop}"
               tightMobile="${tightMobile}"
             >
-                <row alignY="${contentAlign}">
+                <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
                     <col>
                         ${slots[0]}
                         ${slots[2]}
@@ -824,7 +829,7 @@ var BlockPanel;
               tightMobile="${tightMobile}"
             >
               <col>
-                <row alignY="${contentAlign}">
+                <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
                   ${slots[0]}
                   ${slots[1]}
                 </row>
@@ -854,20 +859,20 @@ var BlockPanel;
                 }
                 // language=XML
                 blockLayout = `
-            <block
-              xmlns="nd:block"
-              name="Brick: Left"
-              tightDesktop="${tightDesktop}"
-              tightMobile="${tightMobile}"
-            >
-                <row alignY="${contentAlign}">
-                    ${slots[0]}
-                    <col>
-                        ${slots[1]}
-                        ${slots[2]}
-                    </col>
-                </row>
-            </block>
+          <block
+            xmlns="nd:block"
+            name="Brick: Left"
+            tightDesktop="${tightDesktop}"
+            tightMobile="${tightMobile}"
+          >
+            <row alignY="${contentAlign}" ratioDesktop="${contentSplit}">
+                ${slots[0]}
+                <col>
+                    ${slots[1]}
+                    ${slots[2]}
+                </col>
+            </row>
+          </block>
         `;
                 break;
             }

package/dist/server/schema/RowRatio.d.ts

@@ -0,0 +1,7 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export type RowRatio = '3/1' | '2/1' | '3/2' | '1/1' | '2/3' | '1/2' | '1/3';
+export declare namespace RowRatio {
+    const options: Schema.EnumField.Options<RowRatio>;
+    const schema: Schema.EnumField<Schema.EnumField.Options<RowRatio>>;
+    type Schema = typeof schema;
+}

package/dist/server/schema/RowRatio.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowRatio = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+// extension
+var RowRatio;
+(function (RowRatio) {
+    // schema
+    RowRatio.options = {
+        '3/1': { name: '3/1' },
+        '2/1': { name: '2/1' },
+        '3/2': { name: '3/2' },
+        '1/1': { name: '1/1' },
+        '2/3': { name: '2/3' },
+        '1/2': { name: '1/2' },
+        '1/3': { name: '1/3' }
+    };
+    RowRatio.schema = funnel_core_1.Schema.Field.enumeration({
+        name: 'Row Ratio',
+        semantics: 'dropdown',
+        hint: 'Set row ratio',
+        description: 'Determines how row spacing is distributed.',
+        options: RowRatio.options,
+        defaultOption: '1/1'
+    });
+})(RowRatio || (exports.RowRatio = RowRatio = {}));

package/dist/server/schema/index.d.ts

@@ -6,5 +6,6 @@ export * from './ItemPosition';
 export * from './ItemSize';
 export * from './ListPanelLayout';
 export * from './PanelLayout';
+export * from './RowRatio';
 export * from './SlotVariation';
 export * from './TextAlignment';

package/dist/server/schema/index.js

@@ -22,5 +22,6 @@ __exportStar(require("./ItemPosition"), exports);
 __exportStar(require("./ItemSize"), exports);
 __exportStar(require("./ListPanelLayout"), exports);
 __exportStar(require("./PanelLayout"), exports);
+__exportStar(require("./RowRatio"), exports);
 __exportStar(require("./SlotVariation"), exports);
 __exportStar(require("./TextAlignment"), exports);

package/dist/styles/blocks/Block-layout.css

@@ -28,31 +28,71 @@
     .nd-Block {
         min-height: var(--nd-block-height-min);
     }
-    .nd-Block-root {
-    }
+    .nd-Block-rootContainerWrap {
 
-    /* container/fullbleed */
-    ._nd-Block-containable {
+        /* for row (always on) */
+        &:has(> .nd-Block-row) {
+            @apply container-p;
+        }
+        > .nd-Block-rootContainer > .nd-Block-row {
+            @media screen and (max-width: theme('screens.md')) {
+                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-mobile)) {
+                    @apply container-p;
+                }
+            }
+            @media screen(md) {
+                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet)) {
+                    @apply container-p;
+                }
+            }
+            @media screen(lg) {
+                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop)) {
+                    @apply container-p;
+                }
+            }
+        }
 
-        /* container */
-        &.nd-Block-root > .nd-BlockPanel {
+        /* for column/stack (apply container to panels if not fullbleed) */
+        &:has(> :is(.nd-Block-column, .nd-Block-stack)) {
             @media screen and (max-width: theme('screens.md')) {
-                &:not(.nd-BlockPanel-fullbleed):not(.nd-BlockPanel-fullbleed-mobile) {
+                &:not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-mobile))) {
                     @apply container-p;
                 }
+                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-mobile)) {
+
+                    > .nd-Block-rootContainer > *:not(:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-mobile)):not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-mobile))) {
+                        @apply container-p;
+                    }
+                }
             }
             @media screen(md) {
-                &:not(.nd-BlockPanel-fullbleed):not(.nd-BlockPanel-fullbleed-tablet) {
+                &:not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet))) {
                     @apply container-p;
                 }
+                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet)) {
+
+                    > .nd-Block-rootContainer > *:not(:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet)):not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-tablet))) {
+                        @apply container-p;
+                    }
+                }
             }
             @media screen(lg) {
-                &:not(.nd-BlockPanel-fullbleed):not(.nd-BlockPanel-fullbleed-desktop) {
+                &:not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop))) {
                     @apply container-p;
                 }
+                &:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop)) {
+
+                    > .nd-Block-rootContainer > *:not(:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop)):not(:has(.nd-BlockPanel:is(.nd-BlockPanel-fullbleed,.nd-BlockPanel-fullbleed-desktop))) {
+                        @apply container-p;
+                    }
+                }
             }
         }
     }
+    .nd-Block-rootContainer {
+    }
+
+    /* container/fullbleed */
     ._nd-Block-fullbleed-left {
         margin-left: calc((100dvw - 100cqw) / -2);
     }
@@ -63,11 +103,11 @@
 
     /* row layout */
     ._nd-Block-row-mobile {
-        @apply container-p flex flex-col gap-[var(--nd-block-layout-gap-y)];
+        @apply flex flex-col gap-[var(--nd-block-layout-gap-y)];
         container-type: inline-size;
 
         /* fullbleed (l1 only) */
-        &.nd-Block-root > .nd-BlockPanel {
+        &.nd-Block-rootContainer > .nd-BlockPanel {
             &.nd-BlockPanel-fullbleed {
                 @apply _nd-Block-fullbleed-left _nd-Block-fullbleed-right;
             }
@@ -77,7 +117,7 @@
         }
     }
     ._nd-Block-row-desktop {
-        @apply container-p grid auto-cols-fr gap-[var(--nd-block-layout-gap-x)];
+        @apply grid auto-cols-fr gap-[var(--nd-block-layout-gap-x)];
         container-type: inline-size;
 
         /* row widths */
@@ -105,8 +145,8 @@
             @apply items-end;
         }
 
-        /* fullbleed (l1 only) */
-        &.nd-Block-root > .nd-BlockPanel {
+        /* fullbleed (l1 OR l2) */
+        & > .nd-BlockPanel {
             &.nd-BlockPanel-fullbleed {
                 &:first-child {
                     @apply _nd-Block-fullbleed-left;
@@ -149,12 +189,12 @@
         @apply grid grid-cols-1 grid-flow-row gap-[var(--nd-block-layout-gap-y)];
     }
     .nd-Block-column {
-        @apply w-full max-md:_nd-Block-column-mobile md:_nd-Block-column-desktop _nd-Block-containable;
+        @apply w-full max-md:_nd-Block-column-mobile md:_nd-Block-column-desktop;
     }
 
     /* column layout  */
     .nd-Block-stack {
-        @apply stacked _nd-Block-containable;
+        @apply stacked;
 
         /* z-indexing */
         > *:nth-child(1) {

package/dist/styles/components/embed/YoutubePlayer.css

@@ -8,7 +8,7 @@
             @apply flex flex-col justify-center;
 
             .nd-YoutubePlayer-thumbnail {
-                @apply absolute inset-0 z-supersurface;
+                @apply absolute inset-0 w-full h-full object-cover z-supersurface;
             }
 
             iframe {

package/dist/styles/fields/Media.css

@@ -0,0 +1,37 @@
+@layer components {
+
+    /* variables */
+    :root {
+    }
+
+
+    /* base */
+    .nd-Media {
+    }
+
+    /* image */
+    .nd-Media-image {
+        @apply stacked;
+
+        /* desktop (hide if mobile is enabled) */
+        &:has(.nd-Media-image-mobile) > .nd-Media-image-desktop {
+            @apply hidden md:block;
+        }
+
+        /* mobile */
+        .nd-Media-image-mobile {
+            @apply block md:hidden;
+        }
+    }
+
+    /* video */
+    .nd-Media-video {
+    }
+
+    /* streaming video (youtube/vimeo) */
+    .nd-Media-streamingVideo {
+    }
+    .nd-Media-streamingVideo-player {
+        @apply w-full h-full;
+    }
+}

package/dist/styles/fields/Visual.css

@@ -25,4 +25,9 @@
             object-position: var(--nd-visual-anchor);
         }
     }
+
+    img.nd-Visual-image {
+        object-fit: var(--nd-visual-object-fit, cover);
+        object-position: var(--nd-visual-anchor);
+    }
 }

package/dist/styles/fields/_index.css

@@ -5,6 +5,7 @@
 @import "./Icon.css";
 @import "./LazyVideo.css";
 @import "./Link.css";
+@import "./Media.css";
 @import "./Quote.css";
 @import "./RichText.css";
 @import "./Title.css";

package/dist/styles/panels/VisualPanel.css

@@ -10,6 +10,7 @@
     /* aspect ratios */
     .nd-VisualPanel-aspect-auto {
         --nd-visual-aspect: theme(aspectRatio.auto);
+        --nd-visual-height: auto;
     }
     .nd-VisualPanel-aspect-square {
         --nd-visual-aspect: theme(aspectRatio.square);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nascentdigital/funnel-ui",
   "description": "UI components for funnel",
-  "version": "4.6.0",
+  "version": "4.6.7",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -69,5 +69,5 @@
     "react-dom": "^19",
     "ts-jest": "^29.3.2"
   },
-  "gitHead": "7fba18243bc79f94b3bd665db21f37bc7f3afd4c"
+  "gitHead": "b17e33b4400391b3984e61225c572f097c4c26c9"
 }