@nascentdigital/funnel-ui 4.5.7 → 4.6.1

package/dist/server/blocks/MediaLayout.js

@@ -20,9 +20,13 @@ const panels_1 = require("../panels");
 const Block_1 = require("./Block");
 // block
 function MediaLayout(_a) {
-    var { EmbeddedVideoElement = refs_1.EmbeddedVideo, listPanelProps } = _a, props = __rest(_a, ["EmbeddedVideoElement", "listPanelProps"]);
+    var { EmbeddedVideoElement = refs_1.EmbeddedVideo } = _a, props = __rest(_a, ["EmbeddedVideoElement"]);
     // render
-    return ((0, jsx_runtime_1.jsx)(MediaLayout.Component, Object.assign({ listPanelProps: Object.assign(Object.assign({}, listPanelProps), { itemProps: { EmbeddedVideoElement } }) }, props)));
+    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 }) }) })));
 }
 // extension
 (function (MediaLayout) {
@@ -34,26 +38,19 @@ function MediaLayout(_a) {
         version: 1,
         className: 'nd-MediaLayout',
         message: true,
-        list: {
-            schema: 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
-            }),
-            itemRenderer: (item, { EmbeddedVideoElement }) => ((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 }) }))
-        }
+        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
+        })
     }), MediaLayout.Component = _a.Component, MediaLayout.schema = _a.schema;
 })(MediaLayout || (exports.MediaLayout = MediaLayout = {}));

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

@@ -9,7 +9,7 @@ export declare namespace Message {
         const schema: Schema.EnumField<Schema.EnumField.Options<Variant>>;
         function getClassName(variant?: Variant): string;
     }
-    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-message", true, true, undefined, {
+    const Component: import("react").FunctionComponent<Block.Create.Result.ComponentProps<"_nd-message", true, true, undefined, {
         variant: Schema.EnumField<Schema.EnumField.Options<Variant>>;
     }, any>>, schema: Block.Create.Result.Schema<"_nd-message", true, true, undefined, {
         variant: Schema.EnumField<Schema.EnumField.Options<Variant>>;

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

@@ -32,13 +32,13 @@ export declare namespace RelatedPages {
         layout: import("..").PanelLayout.Schema;
     } & {
         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}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>>> & Schema.Block.Config) | ({
+    } & 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>>> & Schema.Block.Config) | ({
         readonly theme: Schema.EnumField<Readonly<import("@nascentdigital/funnel-core").BlockThemes.Options>>;
     } & {
         layout: import("..").PanelLayout.Schema;
     } & {
         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}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>>> & {
+    } & 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;
     } & Schema.Block.Config)>;
     namespace schema {
@@ -49,7 +49,7 @@ export declare namespace RelatedPages {
     }
     type Props<TPage extends Schema.Page> = HTMLBlockElement<'div'> & {
         model: Model;
-        children?: Transform<Schema.Page.LinkedData.AsPreview<TPage>, ReactNode>;
+        children: Transform<Schema.Page.LinkedData.AsPreview<TPage>, ReactNode>;
         titleTag?: Title.Tag;
         headlineTag?: Headline.Tag;
         captionTag?: Caption.Tag;

package/dist/server/blocks/RelatedPages.js

@@ -18,12 +18,11 @@ exports.RelatedPages = RelatedPages;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
-const entities_1 = require("../entities");
 const panels_1 = require("../panels");
 const Block_1 = require("./Block");
 // component
 function RelatedPages(_a) {
-    var _b, _c, _d, _e, _f;
+    var _b, _c, _d, _e;
     var { className, model, children, titleTag = 'span', headlineTag = 'h2', captionTag = 'div' } = _a, props = __rest(_a, ["className", "model", "children", "titleTag", "headlineTag", "captionTag"]);
     // don't render if missing model
     if (!model) {
@@ -39,7 +38,6 @@ function RelatedPages(_a) {
     const caption = captionRaw === null || captionRaw === void 0 ? void 0 : captionRaw.value;
     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 : [];
-    const schema = (_f = listRaw === null || listRaw === void 0 ? void 0 : listRaw.value.__schema) !== null && _f !== void 0 ? _f : {};
     // panel layout
     const layout = panels_1.BlockPanel.getLayout({
         args: { fields, config },
@@ -53,7 +51,7 @@ function RelatedPages(_a) {
                 return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, { panel: panel, title: title, headline: headline, caption: caption, ctas: ctas }));
             case 'list': {
                 const listPanelConfig = config;
-                return ((0, jsx_runtime_1.jsx)(panels_1.ListPanel, { panel: panel, items: pages, layout: ((_a = funnel_core_1.Schema.EnumField.Value.fromData(listPanelConfig.listLayout)) !== null && _a !== void 0 ? _a : 'card'), children: page => { var _a; return (_a = children === null || children === void 0 ? void 0 : children(page)) !== null && _a !== void 0 ? _a : (0, jsx_runtime_1.jsx)(entities_1.PagePreview, { page: page }); } }));
+                return ((0, jsx_runtime_1.jsx)(panels_1.ListPanel, { panel: panel, items: pages, layout: ((_a = funnel_core_1.Schema.EnumField.Value.fromData(listPanelConfig.listLayout)) !== null && _a !== void 0 ? _a : 'card'), children: page => children(page) }));
             }
         }
     };

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

@@ -1,16 +1,7 @@
 export * from './Block';
-export * from './Clients';
 export * from './Editorial';
 export * from './Form';
 export * from './FormMessage';
 export * from './MediaLayout';
 export * from './Message';
-export * from './Outcome';
-export * from './Projects';
 export * from './RelatedPages';
-export * from './Stat';
-export * from './Stats';
-export * from './Testimonial';
-export * from './Testimonials';
-export * from './ValueProp';
-export * from './summary';

package/dist/server/blocks/index.js

@@ -15,18 +15,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Block"), exports);
-__exportStar(require("./Clients"), exports);
 __exportStar(require("./Editorial"), exports);
 __exportStar(require("./Form"), exports);
 __exportStar(require("./FormMessage"), exports);
 __exportStar(require("./MediaLayout"), exports);
 __exportStar(require("./Message"), exports);
-__exportStar(require("./Outcome"), exports);
-__exportStar(require("./Projects"), exports);
 __exportStar(require("./RelatedPages"), exports);
-__exportStar(require("./Stat"), exports);
-__exportStar(require("./Stats"), exports);
-__exportStar(require("./Testimonial"), exports);
-__exportStar(require("./Testimonials"), exports);
-__exportStar(require("./ValueProp"), exports);
-__exportStar(require("./summary"), exports);

package/dist/server/fields/Visual.js

@@ -34,15 +34,19 @@ function Visual(_a) {
     // 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 : {};
-        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 })));
+        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',
+                '--_nd-visual-native-height': height ? `${height}` : '1'
+            } })));
     }
     // or render lazy
     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: {
-                '--nd-visual-width': width ? `${width}` : '1',
-                '--nd-visual-height': height ? `${height}` : '1'
+                '--_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

package/dist/server/index.d.ts

@@ -1,11 +1,11 @@
 export * from './atomic';
 export * from './blocks';
 export * from './data';
-export * from './entities';
 export * from './fields';
 export * from './panels';
 export * from './schema';
 export * from './sections';
 export * from './transitions';
 export * from './utils';
+export * from './HTMLContainer';
 export * from './Page';

package/dist/server/index.js

@@ -17,11 +17,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./atomic"), exports);
 __exportStar(require("./blocks"), exports);
 __exportStar(require("./data"), exports);
-__exportStar(require("./entities"), exports);
 __exportStar(require("./fields"), exports);
 __exportStar(require("./panels"), exports);
 __exportStar(require("./schema"), exports);
 __exportStar(require("./sections"), exports);
 __exportStar(require("./transitions"), exports);
 __exportStar(require("./utils"), exports);
+__exportStar(require("./HTMLContainer"), exports);
 __exportStar(require("./Page"), exports);

package/dist/server/panels/BlockPanel.js

@@ -338,7 +338,7 @@ var BlockPanel;
     }
     BlockPanel.getConfigSchema = getConfigSchema;
     function getConfig({ args, messageFieldKeys, messageKey, visualKey, listKey }) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         // throw if there are not enough panels
         const panelCount = [messageKey, visualKey, listKey].filter(funnel_core_1.Value.isDefined).length;
         if (panelCount === 0) {
@@ -435,9 +435,10 @@ var BlockPanel;
             delete updatedConfigSchema.layout;
         }
         // create default config
-        const defaultConfig = Object.assign(Object.assign(Object.assign(Object.assign({ 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: layoutSchema.defaultOption, slotVariation: slotVariationSchema.defaultOption });
+        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 contentAlign = ((_h = (_g = config.contentAlign) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : 'start');
         // 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) });
+        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) });
         // return config
         return {
             updatedConfigSchema: updatedConfigSchema,

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

@@ -24,7 +24,7 @@ export declare namespace ListPanel {
             verticalAlign: Key.VerticalAlign<TPrefix>;
         };
         function getKeys<TPrefix extends string>(prefix: TPrefix): Keys<TPrefix>;
-        type Entries<TPrefix extends string> = Record<Key.Width<TPrefix>, ItemSize.Schema> & Record<Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema> & Record<Key.VerticalAlign<TPrefix>, ItemAlignment.Vertical.Schema>;
+        type Entries<TPrefix extends string> = Record<Key.Layout<TPrefix>, ListPanelLayout.Schema> & Record<Key.Width<TPrefix>, ItemSize.Schema> & Record<Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema> & Record<Key.VerticalAlign<TPrefix>, ItemAlignment.Vertical.Schema>;
     }
     type Item = {
         id: string;

package/dist/server/panels/ListPanel.js

@@ -107,7 +107,7 @@ function ListPanel({ as = 'ul', className, panel, layout, items, layoutConfigs =
         // resolve values
         const defaultLayout = 'card';
         const layout = (_b = (_a = config[keys.layout]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultLayout;
-        const defaultWidth = 'md';
+        const defaultWidth = 'full';
         let width = (_d = (_c = config[keys.width]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultWidth;
         const defaultHorizontalAlign = 'start';
         const horizontalAlign = (_f = (_e = config[keys.horizontalAlign]) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : defaultHorizontalAlign;

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

@@ -1,5 +1,4 @@
 export * from './BlockPanel';
 export * from './ListPanel';
 export * from './MessagePanel';
-export * from './TestimonialPanel';
 export * from './VisualPanel';

package/dist/server/panels/index.js

@@ -17,5 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./BlockPanel"), exports);
 __exportStar(require("./ListPanel"), exports);
 __exportStar(require("./MessagePanel"), exports);
-__exportStar(require("./TestimonialPanel"), exports);
 __exportStar(require("./VisualPanel"), exports);

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

@@ -1,7 +1,6 @@
 export * from './Anchor';
 export * from './AspectRatio';
 export * from './BlockConfig';
-export * from './CollectionSchema';
 export * from './ItemAlignment';
 export * from './ItemPosition';
 export * from './ItemSize';

package/dist/server/schema/index.js

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./Anchor"), exports);
 __exportStar(require("./AspectRatio"), exports);
 __exportStar(require("./BlockConfig"), exports);
-__exportStar(require("./CollectionSchema"), exports);
 __exportStar(require("./ItemAlignment"), exports);
 __exportStar(require("./ItemPosition"), exports);
 __exportStar(require("./ItemSize"), exports);

package/dist/styles/blocks/_index.css

@@ -1,15 +1,7 @@
 @import "./Block-layout.css";
 @import "./Block-spacing.css";
 @import "./Block-theming.css";
-@import "./Clients.css";
 @import "./Editorial.css";
 @import "./Form.css";
 @import "./MediaLayout.css";
-@import "./Message.css";
-@import "./Outcome.css";
-@import "./Projects.css";
-@import "./Stat.css";
-@import "./Stats.css";
-@import "./Summary.css";
-@import "./Testimonial.css";
-@import "./ValueProp.css";
+@import "./Message.css";

package/dist/styles/components/Carousel.css

@@ -1,6 +1,7 @@
 @layer components {
 
     :root {
+        --nd-carousel-gap: theme('spacing.l8');
         --nd-carousel-prev-content: "Prev";
         --nd-carousel-next-content: "Next";
         --nd-carousel-controls-gap: 0px;

package/dist/styles/entities/_index.css

@@ -1,5 +1 @@
-@import "./Client.css";
-@import "./ClientBadge.css";
-@import "./Person.css";
-@import "./Project.css";
-@import "./UniqueSellingPoint.css";
+@import "./Client.css";

package/dist/styles/fields/Visual.css

@@ -3,25 +3,31 @@
     :root {
         --nd-visual-width: unset;
         --nd-visual-height: unset;
+        --nd-visual-max-width: unset;
+        --nd-visual-max-height: unset;
         --nd-visual-anchor: center;
+        --nd-visual-aspect: unset;
+        --nd-visual-object-fit: unset;
     }
-    .nd-Visual-image {
-        @apply object-cover;
-        object-position: var(--nd-visual-anchor);
 
-        img {
-            @apply object-cover;
+    .nd-Visual-image,
+    .nd-Visual-video
+    {
+        aspect-ratio: var(--nd-visual-aspect, var(--_nd-visual-native-width) / var(--_nd-visual-native-height));
+        max-width: var(--nd-visual-max-width, 100%);
+        max-height: var(--nd-visual-max-height, 100%);
+        width: var(--nd-visual-width, calc(var(--_nd-visual-native-width) * 1px));
+        height: var(--nd-visual-height, calc(var(--_nd-visual-native-height) * 1px));
+
+        img, video {
+            @apply size-full;
+            object-fit: var(--nd-visual-object-fit, cover);
             object-position: var(--nd-visual-anchor);
         }
     }
-    .nd-Visual-video {
-        @apply object-cover;
-        aspect-ratio: var(--nd-visual-width) / var(--nd-visual-height);
-        object-position: var(--nd-visual-anchor);
 
-        video {
-            @apply object-cover;
-            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/layouts/Layout.css

@@ -0,0 +1,8 @@
+@layer components {
+
+    :root {
+        --nd-layout-gap: theme('spacing.l8');
+        --nd-layout-gap-x: var(--nd-layout-gap);
+        --nd-layout-gap-y: var(--nd-layout-gap);
+    }
+}

package/dist/styles/layouts/MasonryLayout.css

@@ -2,16 +2,8 @@
 
     /* variables */
     :root {
-        --nd-masonry-gap-x: theme('spacing.l8');
-        --nd-masonry-gap-y: theme('spacing.l8');
-        @media screen(md) {
-            --nd-masonry-gap-x: theme('spacing.l8');
-            --nd-masonry-gap-y-gap-x: theme('spacing.l8');
-        }
-        @media screen(lg) {
-            --nd-masonry-gap-x: theme('spacing.l10');
-            --nd-masonry-gap-y: theme('spacing.l10');
-        }
+        --nd-masonry-gap-x: var(--nd-layout-gap-x);
+        --nd-masonry-gap-y: var(--nd-layout-gap-y);
     }
 
     /* base */

package/dist/styles/layouts/_index.css

@@ -1,3 +1,4 @@
+@import "./Layout.css";
 @import "./BentoLayout.css";
 @import "./CardLayout.css";
 @import "./BrickLayout.css";

package/dist/styles/panels/VisualPanel.css

@@ -5,38 +5,37 @@
     }
 
     /* base */
-    .nd-VisualPanel {
-
-        &:not(.nd-VisualPanel-aspect-auto) {
-
-            > .nd-VisualPanel-content {
-                @apply w-full h-full;
-            }
-
-            img, video {
-                @apply w-full h-full object-cover;
-            }
-        }
-    }
+    .nd-VisualPanel {}
 
     /* aspect ratios */
     .nd-VisualPanel-aspect-auto {
-        @apply aspect-auto;
+        --nd-visual-aspect: theme(aspectRatio.auto);
+        --nd-visual-height: auto;
     }
     .nd-VisualPanel-aspect-square {
-        @apply aspect-square;
+        --nd-visual-aspect: theme(aspectRatio.square);
+        --nd-visual-width: 100%;
+        --nd-visual-height: 100%;
     }
     .nd-VisualPanel-aspect-phone {
-        @apply aspect-phone;
+        --nd-visual-aspect: theme(aspectRatio.phone);
+        --nd-visual-width: 100%;
+        --nd-visual-height: 100%;
     }
     .nd-VisualPanel-aspect-tv {
-        @apply aspect-tv;
+        --nd-visual-aspect: theme(aspectRatio.tv);
+        --nd-visual-height: 100%;
+        --nd-visual-width: 100%;
     }
     .nd-VisualPanel-aspect-widescreen {
-        @apply aspect-widescreen;
+        --nd-visual-aspect: theme(aspectRatio.widescreen);
+        --nd-visual-height: 100%;
+        --nd-visual-width: 100%;
     }
     .nd-VisualPanel-aspect-cinema {
-        @apply aspect-cinema;
+        --nd-visual-aspect: theme(aspectRatio.cinema);
+        --nd-visual-height: 100%;
+        --nd-visual-width: 100%;
     }
 
     /* anchor */

package/dist/styles/panels/_index.css

@@ -1,4 +1,3 @@
 @import "./ListPanel.css";
 @import "./MessagePanel.css";
-@import "./TestimonialPanel.css";
 @import "./VisualPanel.css";

package/package.json

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

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

@@ -1,25 +0,0 @@
-import { Schema } from '@nascentdigital/funnel-core';
-import { ComponentProps } from 'react';
-import { Client } from '../entities';
-import { Block } from './Block';
-export declare function Clients(props: ComponentProps<typeof Clients.Component>): import("react/jsx-runtime").JSX.Element;
-export declare namespace Clients {
-    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-clients", true, undefined, Schema.ListField<{
-        item: Schema.CollectionField<Schema.Collection<{
-            division: Schema.Optional<Schema.TextField>;
-            location: Schema.Optional<Schema.TextField>;
-            logo: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
-            badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
-            badgeText: Schema.Optional<Schema.TextField>;
-        }>>;
-    }>, Schema.Block.Config, Client.Props.Configuration>>, schema: Block.Create.Result.Schema<"_nd-clients", true, undefined, Schema.ListField<{
-        item: Schema.CollectionField<Schema.Collection<{
-            division: Schema.Optional<Schema.TextField>;
-            location: Schema.Optional<Schema.TextField>;
-            logo: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
-            badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
-            badgeText: Schema.Optional<Schema.TextField>;
-        }>>;
-    }>, Schema.Block.Config>;
-    type Model = Schema.Block.LinkedData<typeof schema>;
-}

package/dist/server/blocks/Clients.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Clients = Clients;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const entities_1 = require("../entities");
-const Block_1 = require("./Block");
-// component
-function Clients(props) {
-    return (0, jsx_runtime_1.jsx)(Clients.Component, Object.assign({}, props));
-}
-// extension
-(function (Clients) {
-    var _a;
-    // factory
-    _a = Block_1.Block.create({
-        id: '_nd-clients',
-        name: 'Clients',
-        version: 1,
-        className: 'nd-Clients',
-        message: true,
-        list: {
-            schema: funnel_core_1.Schema.Field.list({
-                name: 'Clients',
-                description: 'Client brands will be displayed in the order you present them.',
-                itemTypes: {
-                    item: funnel_core_1.Schema.Field.collection({
-                        name: 'Client',
-                        collections: [entities_1.Client.schema]
-                    })
-                },
-                min: 3,
-                max: 20
-            }),
-            itemRenderer: (item, itemProps) => ((0, jsx_runtime_1.jsx)(entities_1.Client, Object.assign({ as: "li", className: "nd-Clients-client", client: item.value }, itemProps)))
-        }
-    }), Clients.Component = _a.Component, Clients.schema = _a.schema;
-})(Clients || (exports.Clients = Clients = {}));

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

@@ -1,25 +0,0 @@
-import { Schema } from '@nascentdigital/funnel-core';
-import { ComponentProps } from 'react';
-import { Block } from './Block';
-import { OutcomeDetail } from './OutcomeDetail';
-export declare function Outcome(props: ComponentProps<typeof Outcome.Component>): import("react/jsx-runtime").JSX.Element;
-export declare namespace Outcome {
-    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-outcome", true, true, Schema.ListField<{
-        detail: Schema.ObjectField<{
-            title: Schema.Optional<Schema.TextField>;
-            headline: Schema.RichTextField;
-            caption: Schema.RichTextField;
-            icon: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
-            link: Schema.Optional<Schema.LinkField>;
-        }>;
-    }>, Schema.Block.Config, OutcomeDetail.Props.Configuration>>, schema: Block.Create.Result.Schema<"_nd-outcome", true, true, Schema.ListField<{
-        detail: Schema.ObjectField<{
-            title: Schema.Optional<Schema.TextField>;
-            headline: Schema.RichTextField;
-            caption: Schema.RichTextField;
-            icon: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
-            link: Schema.Optional<Schema.LinkField>;
-        }>;
-    }>, Schema.Block.Config>;
-    type Model = Schema.Block.LinkedData<typeof schema>;
-}

package/dist/server/blocks/Outcome.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Outcome = Outcome;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const Block_1 = require("./Block");
-const OutcomeDetail_1 = require("./OutcomeDetail");
-// component
-function Outcome(props) {
-    return (0, jsx_runtime_1.jsx)(Outcome.Component, Object.assign({}, props));
-}
-// extension
-(function (Outcome) {
-    var _a;
-    // factory
-    _a = Block_1.Block.create({
-        id: '_nd-outcome',
-        name: 'Outcome',
-        version: 1,
-        className: 'nd-Outcome',
-        message: true,
-        visual: true,
-        list: {
-            schema: funnel_core_1.Schema.Field.list({
-                name: 'Outcome Details',
-                itemTypes: {
-                    detail: OutcomeDetail_1.OutcomeDetail.schema
-                },
-                min: 1,
-                max: 3
-            }),
-            itemRenderer: (item, itemProps) => ((0, jsx_runtime_1.jsx)(OutcomeDetail_1.OutcomeDetail, Object.assign({ as: "li", className: "nd-Outcome-detail", detail: item }, itemProps)))
-        }
-    }), Outcome.Component = _a.Component, Outcome.schema = _a.schema;
-})(Outcome || (exports.Outcome = Outcome = {}));