@nascentdigital/funnel-ui 4.6.7 → 5.0.2

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

@@ -1,18 +1,34 @@
 import { Schema } from '@nascentdigital/funnel-core';
-import { ComponentProps, JSXElementConstructor } from 'react';
-import { EmbeddedVideo } from '../../client/refs';
+import { ComponentProps } from 'react';
+import { Media } from '../fields';
 import { Block } from './Block';
-export declare function MediaLayout({ EmbeddedVideoElement, ...props }: MediaLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare function MediaLayout({ ...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'> & {
-        EmbeddedVideoElement?: JSXElementConstructor<EmbeddedVideo.Props>;
-    };
+    type Props = Omit<ComponentProps<typeof Component>, 'children'>;
 }

package/dist/server/blocks/MediaLayout.js

@@ -14,19 +14,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MediaLayout = MediaLayout;
 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 }) }) })));
+    var props = __rest(_a, []);
+    return (0, jsx_runtime_1.jsx)(MediaLayout.Component, Object.assign({}, props));
 }
 // extension
 (function (MediaLayout) {
@@ -38,19 +31,17 @@ function MediaLayout(_a) {
         version: 1,
         className: 'nd-MediaLayout',
         message: true,
-        list: funnel_core_1.Schema.Field.list({
-            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
-                })
-            },
-            min: 1,
-            max: 20
-        })
+        list: {
+            schema: funnel_core_1.Schema.Field.list({
+                name: 'Assets',
+                description: 'Add one or more assets and then configure the layout.',
+                itemTypes: {
+                    media: fields_1.Media.schema
+                },
+                min: 1,
+                max: 20
+            }),
+            renderItem: ({ 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 }) }))
+        }
     }), MediaLayout.Component = _a.Component, MediaLayout.schema = _a.schema;
 })(MediaLayout || (exports.MediaLayout = MediaLayout = {}));

package/dist/server/blocks/Message.js

@@ -19,14 +19,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
 const Block_1 = require("./Block");
-// component
+// block
 function Message(_a) {
     var _b;
     var { className } = _a, props = __rest(_a, ["className"]);
     // extract variant
     const variant = funnel_core_1.Schema.EnumField.Value.fromData((_b = props.model) === null || _b === void 0 ? void 0 : _b.config.variant);
     // render
-    return (0, jsx_runtime_1.jsx)(Message.Component, Object.assign({ className: (0, classnames_1.default)(className, 'nd-Message', Message.Variant.getClassName(variant)) }, props));
+    return ((0, jsx_runtime_1.jsx)(Message.Component, Object.assign({ className: (0, classnames_1.default)(className, 'nd-Message', Message.Variant.getClassName(variant)) }, props)));
 }
 // extension
 (function (Message) {

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/blocks/index.d.ts

@@ -1,5 +1,4 @@
 export * from './Block';
-export * from './Editorial';
 export * from './Form';
 export * from './FormMessage';
 export * from './MediaLayout';

package/dist/server/blocks/index.js

@@ -15,7 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Block"), exports);
-__exportStar(require("./Editorial"), exports);
 __exportStar(require("./Form"), exports);
 __exportStar(require("./FormMessage"), exports);
 __exportStar(require("./MediaLayout"), exports);

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

@@ -3,49 +3,77 @@ 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<{
+        const collection: 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>;
+        type Collection = typeof collection;
+        type Value = SchemaCore.Collection.Data<Collection>;
+        type LinkedValue = SchemaCore.Collection.LinkedData<Collection>;
     }
     namespace Video {
-        const schema: SchemaCore.Collection<{
-            video: SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.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 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>;
+        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.AssetField<SchemaCore.AssetField.LinkedValue.Video>;
-        cover: SchemaCore.Optional<SchemaCore.AssetField<SchemaCore.AssetField.LinkedValue.Image>>;
-    }> | SchemaCore.Collection<{
-        video: SchemaCore.EmbeddedVideoField;
+        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;
-    type Value = SchemaCore.Field.LinkedValue<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;
-        function isStreamingVideo(value: Value): value is StreamingVideo.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?: Value;
+        media?: LinkedValue;
         loading?: Visual.Loading;
+        controls?: boolean;
+        autoPlay?: boolean;
+        loop?: boolean;
+        mute?: boolean;
     };
 }

package/dist/server/fields/Media.js

@@ -18,7 +18,6 @@ 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) {
@@ -30,20 +29,16 @@ function Media(_a) {
     // or render image
     let mediaClassName = undefined;
     let content;
-    if (Media.Value.isImage(media)) {
+    if (Media.LinkedValue.isImage(media)) {
         mediaClassName = 'nd-Media-image';
         content = renderImage(Object.assign({ media }, props));
     }
     // or render video
-    else if (Media.Value.isVideo(media)) {
+    else if (Media.LinkedValue.isVideo(media)) {
+        // handle streaming video
         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;
@@ -56,69 +51,106 @@ function Media(_a) {
     // media types
     let Image;
     (function (Image) {
-        // schema
-        Image.schema = funnel_core_1.Schema.Collection.create({
+        // 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: funnel_core_1.Schema.Field.image({ name: 'Primary Image' }),
+                mobileImage: funnel_core_1.Schema.Field.image({ name: 'Mobile Image' }).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.schema = funnel_core_1.Schema.Collection.create({
+        Video.collection = funnel_core_1.Schema.Collection.create({
             type: '_nd-Media-video',
-            name: 'Background Video',
+            name: 'Video',
             description: 'Small, decorative background video content',
             version: 1,
             fields: {
-                video: funnel_core_1.Schema.Field.video({ name: 'Video' }),
+                video: Source.schema,
                 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]
+        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.schema.type;
+            return value.type === Image.collection.type;
         }
         Value.isImage = isImage;
         function isVideo(value) {
-            return value.type === Video.schema.type;
+            return value.type === Video.collection.type;
         }
         Value.isVideo = isVideo;
-        function isStreamingVideo(value) {
-            return value.type === StreamingVideo.schema.type;
-        }
-        Value.isStreamingVideo = isStreamingVideo;
     })(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
@@ -129,19 +161,14 @@ function renderImage({ media, loading }) {
     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 }) {
+function renderVideo({ media, loading, controls, autoPlay, loop, mute }) {
+    var _a, _b, _c, _d;
     // bind props
     const { video: videoRaw, cover: coverRaw } = media.fields;
-    const video = videoRaw === null || videoRaw === void 0 ? void 0 : videoRaw.value;
+    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)(refs_1.EmbeddedVideo, { className: "nd-Media-streamingVideo-player", video: video }));
+    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,12 +1,16 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { HTMLAttributes } from 'react';
-export declare function Visual({ className, visual, cover, 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, cover, loading = 'lazy' } = _a, props = __rest(_a, ["className", "visual", "cover", "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, poster: cover === null || cover === void 0 ? void 0 : cover.url, 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, poster: cover === null || cover === void 0 ? void 0 : cover.url })));
+        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/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;
+}