@nascentdigital/funnel-ui 4.6.1 → 5.0.1

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

@@ -1,15 +1,34 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { ComponentProps, JSXElementConstructor } from 'react';
 import { EmbeddedVideo } from '../../client/refs';
+import { Media } from '../fields';
 import { Block } from './Block';
 export declare function MediaLayout({ EmbeddedVideoElement, ...props }: MediaLayout.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace MediaLayout {
     const Component: import("react").FunctionComponent<Block.Create.Result.ComponentProps<"_nd-mediaLayout", true, undefined, Schema.ListField<{
-        visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
-        embedded: Schema.EmbeddedVideoField;
+        media: Schema.CollectionField<Schema.Collection<{
+            image: Schema.AssetField<Schema.AssetField.LinkedValue.Image>;
+            mobileImage: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+        }> | Schema.Collection<{
+            video: Schema.ObjectField<{
+                type: Schema.EnumField<Schema.EnumField.Options<Media.Video.Source.Type>>;
+                local: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Video>>;
+                remote: Schema.Optional<Schema.EmbeddedVideoField>;
+            }>;
+            cover: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+        }>>;
     }>, Schema.Block.Config, any>>, schema: Block.Create.Result.Schema<"_nd-mediaLayout", true, undefined, Schema.ListField<{
-        visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
-        embedded: Schema.EmbeddedVideoField;
+        media: Schema.CollectionField<Schema.Collection<{
+            image: Schema.AssetField<Schema.AssetField.LinkedValue.Image>;
+            mobileImage: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+        }> | Schema.Collection<{
+            video: Schema.ObjectField<{
+                type: Schema.EnumField<Schema.EnumField.Options<Media.Video.Source.Type>>;
+                local: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Video>>;
+                remote: Schema.Optional<Schema.EmbeddedVideoField>;
+            }>;
+            cover: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+        }>>;
     }>, Schema.Block.Config>;
     type Model = Schema.Block.LinkedData<typeof schema>;
     type Props = Omit<ComponentProps<typeof Component>, 'children'> & {

package/dist/server/blocks/MediaLayout.js

@@ -16,17 +16,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const refs_1 = require("../../client/refs");
 const fields_1 = require("../fields");
-const panels_1 = require("../panels");
 const Block_1 = require("./Block");
 // block
 function MediaLayout(_a) {
     var { EmbeddedVideoElement = refs_1.EmbeddedVideo } = _a, props = __rest(_a, ["EmbeddedVideoElement"]);
     // render
-    return ((0, jsx_runtime_1.jsx)(MediaLayout.Component, Object.assign({}, props, { children: ({ item }) => (0, jsx_runtime_1.jsx)("div", { className: "nd-MediaLayout-itemWrap", children: funnel_core_1.Schema.EmbeddedVideoField.Value.filter(item.value)
-                ?
-                    (0, jsx_runtime_1.jsx)(EmbeddedVideoElement, { className: "nd-MediaLayout-item", video: item.value })
-                :
-                    (0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-MediaLayout-item", visual: item.value }) }) })));
+    return ((0, jsx_runtime_1.jsx)(MediaLayout.Component, Object.assign({}, props, { children: ({ item }) => (0, jsx_runtime_1.jsx)("div", { className: "nd-MediaLayout-itemWrap", children: (0, jsx_runtime_1.jsx)(fields_1.Media, { className: "nd-MediaLayout-item", media: item.value }) }) })));
 }
 // extension
 (function (MediaLayout) {
@@ -42,12 +37,7 @@ function MediaLayout(_a) {
             name: 'Assets',
             description: 'Add one or more assets and then configure the layout.',
             itemTypes: {
-                visual: panels_1.VisualPanel.Fields.visual.unwrap(),
-                embedded: funnel_core_1.Schema.Field.embeddedVideo({
-                    name: 'Embedded Video',
-                    description: 'A remote streaming video (e.g. YouTube)',
-                    allowMuting: true
-                })
+                media: fields_1.Media.schema
             },
             min: 1,
             max: 20

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/blocks/RelatedPages.js

@@ -39,7 +39,7 @@ function RelatedPages(_a) {
     const ctas = ctasRaw === null || ctasRaw === void 0 ? void 0 : ctasRaw.value;
     const pages = (_e = (_d = listRaw === null || listRaw === void 0 ? void 0 : listRaw.value) === null || _d === void 0 ? void 0 : _d.pages) !== null && _e !== void 0 ? _e : [];
     // panel layout
-    const layout = panels_1.BlockPanel.getLayout({
+    const layout = Block_1.Block.getLayout({
         args: { fields, config },
         messageKey: 'message',
         listKey: 'list'
@@ -69,7 +69,7 @@ function RelatedPages(_a) {
                 size
             }) });
     }
-    const configSchema = panels_1.BlockPanel.getConfigSchema({
+    const configSchema = Block_1.Block.getConfigSchema({
         fields: fieldsSchema({ pageType: 'any', size: 0 }),
         messageKey: 'message',
         listKey: 'list'
@@ -81,12 +81,12 @@ function RelatedPages(_a) {
             version: 1,
             fields: fieldsSchema(args),
             config: configSchema,
-            getConfig: args => panels_1.BlockPanel.getConfig({
+            getConfig: args => Block_1.Block.getConfig({
                 args,
                 messageKey: 'message',
                 listKey: 'list'
             }),
-            getLayout: args => panels_1.BlockPanel.getLayout({
+            getLayout: args => Block_1.Block.getLayout({
                 args,
                 messageKey: 'message',
                 listKey: 'list'

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

@@ -0,0 +1,79 @@
+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 collection: SchemaCore.Collection<{
+            image: SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>;
+            mobileImage: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>>;
+        }>;
+        type Collection = typeof collection;
+        type Value = SchemaCore.Collection.Data<Collection>;
+        type LinkedValue = SchemaCore.Collection.LinkedData<Collection>;
+    }
+    namespace Video {
+        namespace Source {
+            type Type = 'local' | 'remote';
+            const schema: SchemaCore.ObjectField<{
+                type: SchemaCore.EnumField<SchemaCore.EnumField.Options<Type>>;
+                local: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Video>>;
+                remote: SchemaCore.Optional<SchemaCore.EmbeddedVideoField>;
+            }>;
+            type Schema = typeof schema;
+            type Value = SchemaCore.Field.Value<Schema>;
+            type LinkedValue = SchemaCore.Field.LinkedValue<Schema>;
+            type LocalSchema = SchemaCore.Optional.InnerType<Schema['content']['local']>;
+            type RemoteSchema = SchemaCore.Optional.InnerType<Schema['content']['remote']>;
+        }
+        const collection: SchemaCore.Collection<{
+            video: SchemaCore.ObjectField<{
+                type: SchemaCore.EnumField<SchemaCore.EnumField.Options<Source.Type>>;
+                local: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Video>>;
+                remote: SchemaCore.Optional<SchemaCore.EmbeddedVideoField>;
+            }>;
+            cover: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>>;
+        }>;
+        type Collection = typeof collection;
+        type Value = SchemaCore.Collection.Data<Collection>;
+        type LinkedValue = SchemaCore.Collection.LinkedData<Collection>;
+    }
+    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.ObjectField<{
+            type: SchemaCore.EnumField<SchemaCore.EnumField.Options<Video.Source.Type>>;
+            local: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Video>>;
+            remote: SchemaCore.Optional<SchemaCore.EmbeddedVideoField>;
+        }>;
+        cover: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>>;
+    }>>;
+    type Schema = typeof schema;
+    namespace Schema {
+        function filter(value: SchemaCore.CollectionField): value is Media.Schema;
+    }
+    type Collection = Image.Collection | Video.Collection;
+    type Data = SchemaCore.Field.Data<Schema>;
+    type Value = Data['value'];
+    namespace Value {
+        function filter(value: any): value is Value;
+        function isImage(value: Value): value is Image.Value;
+        function isVideo(value: Value): value is Video.Value;
+    }
+    type LinkedData = SchemaCore.Field.LinkedData<Schema>;
+    type LinkedValue = LinkedData['value'];
+    namespace LinkedValue {
+        function filter(value: any): value is LinkedValue;
+        function isImage(value: LinkedValue): value is Image.LinkedValue;
+        function isVideo(value: LinkedValue): value is Video.LinkedValue;
+    }
+    type Props = {
+        className?: string;
+        media?: LinkedValue;
+        loading?: Visual.Loading;
+        controls?: boolean;
+        autoPlay?: boolean;
+        loop?: boolean;
+        mute?: boolean;
+    };
+}

package/dist/server/fields/Media.js

@@ -0,0 +1,174 @@
+"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 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.LinkedValue.isImage(media)) {
+        mediaClassName = 'nd-Media-image';
+        content = renderImage(Object.assign({ media }, props));
+    }
+    // or render video
+    else if (Media.LinkedValue.isVideo(media)) {
+        // handle streaming video
+        mediaClassName = 'nd-Media-video';
+        content = renderVideo(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) {
+        // collection
+        Image.collection = 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) {
+        // source
+        let Source;
+        (function (Source) {
+            // schema
+            Source.schema = funnel_core_1.Schema.Field.object({
+                name: 'Video Source',
+                description: 'Represents local/remote video source',
+                preview: { title: 'type' },
+                content: {
+                    type: funnel_core_1.Schema.Field.enumeration({
+                        name: 'Type',
+                        options: {
+                            local: { name: 'Local' },
+                            remote: { name: 'Remote' }
+                        }
+                    }),
+                    local: funnel_core_1.Schema.Field.video({ name: 'Local Video' }).optional(),
+                    remote: funnel_core_1.Schema.Field.embeddedVideo({ name: 'Remote Video' }).optional()
+                }
+            });
+        })(Source = Video.Source || (Video.Source = {}));
+        // schema
+        Video.collection = funnel_core_1.Schema.Collection.create({
+            type: '_nd-Media-video',
+            name: 'Video',
+            description: 'Small, decorative background video content',
+            version: 1,
+            fields: {
+                video: Source.schema,
+                cover: funnel_core_1.Schema.Field.image({ name: 'Cover' }).optional()
+            }
+        });
+    })(Video = Media.Video || (Media.Video = {}));
+    // schema
+    Media.schema = funnel_core_1.Schema.Field.collection({
+        name: 'Media',
+        description: 'Image, video, or streaming video content',
+        hint: 'Add and configure an image or video',
+        collections: [Image.collection, Video.collection]
+    });
+    let Schema;
+    (function (Schema) {
+        function filter(value) {
+            return value.type === 'collection'
+                && value.collections.every(schema => schema.type === Image.collection.type || schema.type === Video.collection.type);
+        }
+        Schema.filter = filter;
+    })(Schema = Media.Schema || (Media.Schema = {}));
+    let Value;
+    (function (Value) {
+        // helpers
+        function filter(value) {
+            return !!value
+                && typeof value === 'object' && !Array.isArray(value)
+                && 'type' in value && typeof value.type === 'string'
+                && (value.type === Image.collection.type || value.type === Video.collection.type);
+        }
+        Value.filter = filter;
+        function isImage(value) {
+            return value.type === Image.collection.type;
+        }
+        Value.isImage = isImage;
+        function isVideo(value) {
+            return value.type === Video.collection.type;
+        }
+        Value.isVideo = isVideo;
+    })(Value = Media.Value || (Media.Value = {}));
+    let LinkedValue;
+    (function (LinkedValue) {
+        // helpers
+        function filter(value) {
+            return !!value
+                && typeof value === 'object' && !Array.isArray(value)
+                && 'type' in value && typeof value.type === 'string'
+                && (value.type === Image.collection.type || value.type === Video.collection.type);
+        }
+        LinkedValue.filter = filter;
+        function isImage(value) {
+            return value.type === Image.collection.type;
+        }
+        LinkedValue.isImage = isImage;
+        function isVideo(value) {
+            return value.type === Video.collection.type;
+        }
+        LinkedValue.isVideo = isVideo;
+    })(LinkedValue = Media.LinkedValue || (Media.LinkedValue = {}));
+})(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, controls, autoPlay, loop, mute }) {
+    var _a, _b, _c, _d;
+    // bind props
+    const { video: videoRaw, cover: coverRaw } = media.fields;
+    const { value: video } = (_d = (_b = (_a = videoRaw === null || videoRaw === void 0 ? void 0 : videoRaw.value) === null || _a === void 0 ? void 0 : _a.local) !== null && _b !== void 0 ? _b : (_c = videoRaw === null || videoRaw === void 0 ? void 0 : videoRaw.value) === null || _c === void 0 ? void 0 : _c.remote) !== null && _d !== void 0 ? _d : {};
+    const cover = coverRaw === null || coverRaw === void 0 ? void 0 : coverRaw.value;
+    // render
+    return ((0, jsx_runtime_1.jsx)(Visual_1.Visual, { className: (0, classnames_1.default)('nd-Media-video-player', {
+            '': media.type === ''
+        }), visual: video, loading: loading, cover: cover, controls: controls, autoPlay: autoPlay, loop: loop, muted: mute }));
+}

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

@@ -1,11 +1,16 @@
 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, controls, autoPlay, loop, muted, ...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;
+        visual?: Model | Schema.EmbeddedVideoField.Value;
+        cover?: Schema.AssetField.LinkedValue.Image;
         loading?: Loading;
+        controls?: boolean;
+        autoPlay?: boolean;
+        loop?: boolean;
+        muted?: boolean;
     };
     type Model = Schema.Field.LinkedValue<typeof schema>;
     type Loading = 'eager' | 'lazy';

package/dist/server/fields/Visual.js

@@ -22,18 +22,22 @@ 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', controls = true, autoPlay = false, loop = false, muted = false } = _a, props = __rest(_a, ["className", "visual", "cover", "loading", "controls", "autoPlay", "loop", "muted"]);
     // skip if not set
     if (!visual) {
         return null;
     }
+    // handle embedded videos
+    else if (funnel_core_1.Schema.EmbeddedVideoField.Value.filter(visual)) {
+        return ((0, jsx_runtime_1.jsx)(refs_1.EmbeddedVideo, { className: (0, classnames_1.default)(className, 'nd-Visual nd-Visual-video'), video: visual, controls: controls, autoPlay: autoPlay, muted: muted }));
+    }
     // or error if not a visual
     else if (!funnel_core_1.Schema.AssetField.LinkedValue.Visual.filter(visual)) {
         return ((0, jsx_runtime_1.jsx)("span", { children: "Invalid media!" }));
     }
     // or render image
     else if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(visual)) {
-        const { url, description = '', metadata: { crop = 'center', dimensions } = {} } = visual !== null && visual !== void 0 ? visual : {};
+        const { url, description = '', metadata: { dimensions } = {} } = visual !== null && visual !== void 0 ? visual : {};
         const { width, height } = dimensions !== null && dimensions !== void 0 ? dimensions : {};
         return ((0, jsx_runtime_1.jsx)(image_1.default, Object.assign({}, props, { className: (0, classnames_1.default)(className, 'nd-Visual nd-Visual-image'), src: url, alt: description !== null && description !== void 0 ? description : '', width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width, height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height, loading: loading, draggable: false, style: {
                 '--_nd-visual-native-width': width ? `${width}` : '1',
@@ -42,16 +46,16 @@ function Visual(_a) {
     }
     // or render lazy
     else if (loading === 'eager') {
-        const { type, url, metadata: { crop = 'center', dimensions } = {} } = visual !== null && visual !== void 0 ? visual : {};
+        const { type, url, metadata: { 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'), controls: controls, autoPlay: autoPlay, muted: muted, loop: loop, 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'), controls: controls, autoPlay: autoPlay, muted: muted, loop: loop, 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/index.d.ts

@@ -2,6 +2,7 @@ export * from './atomic';
 export * from './blocks';
 export * from './data';
 export * from './fields';
+export * from './layouts';
 export * from './panels';
 export * from './schema';
 export * from './sections';

package/dist/server/index.js

@@ -18,6 +18,7 @@ __exportStar(require("./atomic"), exports);
 __exportStar(require("./blocks"), exports);
 __exportStar(require("./data"), exports);
 __exportStar(require("./fields"), exports);
+__exportStar(require("./layouts"), exports);
 __exportStar(require("./panels"), exports);
 __exportStar(require("./schema"), exports);
 __exportStar(require("./sections"), exports);

package/dist/server/layouts/accordion/Accordion.d.ts

@@ -0,0 +1,21 @@
+import { Tagged } from 'type-fest';
+import { AccordionOptions } from './AccordionOptions';
+export declare class Accordion {
+    private readonly _expanded$;
+    private readonly _focused$;
+    readonly multiExpand: boolean;
+    constructor({ multiExpand }?: Accordion.ConstructorArgs);
+    get expanded$(): import("rxjs").Observable<readonly Accordion.Id[]>;
+    get expanded(): readonly Accordion.Id[];
+    get focused$(): import("rxjs").Observable<Accordion.Id | undefined>;
+    get focused(): Accordion.Id | undefined;
+    isExpanded(accordionId: Accordion.Id): boolean;
+    onExpand(accordionId: Accordion.Id): void;
+    onCollapse(accordionId: Accordion.Id): void;
+    onFocus(accordionId: Accordion.Id): void;
+    onBlur(accordionId: Accordion.Id): void;
+}
+export declare namespace Accordion {
+    type Id = Tagged<string, 'Accordion.Id'>;
+    type ConstructorArgs = Partial<AccordionOptions>;
+}

package/dist/server/layouts/accordion/Accordion.js

@@ -0,0 +1,66 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const rxjs_1 = require("rxjs");
+// class
+class Accordion {
+    constructor({ multiExpand = false } = {}) {
+        // initialize instance variables
+        this._expanded$ = new rxjs_1.BehaviorSubject([]);
+        this._focused$ = new rxjs_1.BehaviorSubject(undefined);
+        this.multiExpand = multiExpand;
+    }
+    get expanded$() {
+        return this._expanded$.asObservable();
+    }
+    get expanded() {
+        return this._expanded$.value;
+    }
+    get focused$() {
+        return this._focused$.asObservable();
+    }
+    get focused() {
+        return this._focused$.value;
+    }
+    isExpanded(accordionId) {
+        return this.expanded.includes(accordionId);
+    }
+    onExpand(accordionId) {
+        // skip if already expanded
+        const { expanded, multiExpand } = this;
+        if (expanded.includes(accordionId)) {
+            return;
+        }
+        // add to expanded if multi-expand is enabled
+        if (multiExpand) {
+            this._expanded$.next([...expanded, accordionId]);
+        }
+        // otherwise, replace
+        else {
+            this._expanded$.next([accordionId]);
+        }
+    }
+    onCollapse(accordionId) {
+        // skip if not expanded
+        const { expanded, multiExpand } = this;
+        if (!expanded.includes(accordionId)) {
+            return;
+        }
+        // update by stripping out id from list
+        this._expanded$.next(expanded.filter(id => id !== accordionId));
+    }
+    onFocus(accordionId) {
+        // update if not already focused
+        if (this.focused !== accordionId) {
+            this._focused$.next(accordionId);
+        }
+    }
+    onBlur(accordionId) {
+        // update if id was in focus
+        if (this.focused === accordionId) {
+            this._focused$.next(undefined);
+        }
+    }
+}
+exports.Accordion = Accordion;

package/dist/server/layouts/accordion/AccordionContainer.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export declare function AccordionContainer({ children }: AccordionContainer.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AccordionContainer {
+    type Props = PropsWithChildren;
+}

package/dist/server/layouts/accordion/AccordionContainer.js

@@ -0,0 +1,18 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionContainer = AccordionContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const Accordion_1 = require("./Accordion");
+const AccordionContext_1 = require("./AccordionContext");
+// component
+function AccordionContainer({ children }) {
+    // bind context
+    const context = (0, react_2.useMemo)(() => ({
+        accordion: new Accordion_1.Accordion()
+    }), []);
+    // render
+    return ((0, jsx_runtime_1.jsx)(AccordionContext_1.AccordionContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(react_1.MotionConfig, { transition: { duration: 0.3 }, children: children }) }));
+}

package/dist/server/layouts/accordion/AccordionContext.d.ts

@@ -0,0 +1,7 @@
+import { Accordion } from './Accordion';
+export declare const AccordionContext: import("react").Context<AccordionContext.Data>;
+export declare namespace AccordionContext {
+    type Data = {
+        accordion?: Accordion;
+    };
+}

package/dist/server/layouts/accordion/AccordionContext.js

@@ -0,0 +1,7 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionContext = void 0;
+const react_1 = require("react");
+// context
+exports.AccordionContext = (0, react_1.createContext)({});

package/dist/server/layouts/accordion/AccordionExpander.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare function AccordionExpander({ className, header, content, ...props }: AccordionExpander.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AccordionExpander {
+    type Props = {
+        className?: string;
+        header: ReactNode;
+        content: ReactNode;
+    };
+}