@nascentdigital/funnel-ui 4.4.18

package/dist/server/blocks/Message.js

@@ -0,0 +1,352 @@
+"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.Message = Message;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const fields_1 = require("../fields");
+const panels_1 = require("../panels");
+const schema_1 = require("../schema");
+const Block_1 = require("./Block");
+// block
+function Message(_a) {
+    var _b, _c, _d, _e;
+    var { className, titleTag = 'span', headlineTag = 'h2', captionTag = 'div', message, visualDecorator, visualLoading = 'eager' } = _a, props = __rest(_a, ["className", "titleTag", "headlineTag", "captionTag", "message", "visualDecorator", "visualLoading"]);
+    // don't render if missing model
+    if (!message) {
+        console.warn('[Message] attempted to render without message model');
+        return null;
+    }
+    // destructure props
+    const config = (_b = message.config) !== null && _b !== void 0 ? _b : {};
+    const fields = (_c = message.fields) !== null && _c !== void 0 ? _c : {};
+    const { visual: visualRaw, title: titleRaw, headline: headlineRaw, caption: captionRaw, ctas: ctasRaw } = fields;
+    const visual = visualRaw === null || visualRaw === void 0 ? void 0 : visualRaw.value;
+    const title = titleRaw === null || titleRaw === void 0 ? void 0 : titleRaw.value;
+    const headline = headlineRaw === null || headlineRaw === void 0 ? void 0 : headlineRaw.value;
+    const caption = captionRaw === null || captionRaw === void 0 ? void 0 : captionRaw.value;
+    const ctas = (_d = ctasRaw === null || ctasRaw === void 0 ? void 0 : ctasRaw.value) !== null && _d !== void 0 ? _d : [];
+    // panel layout
+    const layout = getMessageLayout({ fields, config });
+    const getPanel = ({ className, panel }) => {
+        var _a;
+        switch (panel.type) {
+            case 'message':
+                return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, { className: (0, classnames_1.default)(className, 'nd-Message-message'), panel: panel, title: title, titleTag: titleTag, headline: headline, headlineTag: headlineTag, caption: caption, captionTag: captionTag, ctas: ctas }));
+            case 'visual':
+                return visual
+                    ?
+                        (0, jsx_runtime_1.jsx)(panels_1.VisualPanel, { className: (0, classnames_1.default)(className, 'nd-Message-visual'), panel: panel, visual: visual, anchor: (_a = funnel_core_1.Schema.EnumField.Value.fromData(config.visualAnchor)) !== null && _a !== void 0 ? _a : 'center', visualLoading: visualLoading, visualDecorator: visualDecorator })
+                    : undefined;
+            default:
+                return undefined;
+        }
+    };
+    // render block
+    return ((0, jsx_runtime_1.jsx)(Block_1.Block, Object.assign({ className: (0, classnames_1.default)(className, 'nd-Message', Message.Variant.getClassName((_e = config === null || config === void 0 ? void 0 : config.variant) === null || _e === void 0 ? void 0 : _e.value)), config: config, layout: layout, renderPanel: getPanel }, props)));
+}
+// extension
+(function (Message) {
+    let Variant;
+    (function (Variant) {
+        // enum
+        Variant.Enum = {
+            featured: { name: 'Featured', hint: 'Prominent messaging encouraging engagement.' },
+            branding: { name: 'Statement', hint: 'Establishes branding.  Typically more visual with larger copy.' },
+            action: { name: 'CTA', hint: 'Encourages users to move forward in the funnel.' }
+        };
+        // schema
+        Variant.schema = funnel_core_1.Schema.Field.enumeration({
+            name: 'Presentation Type',
+            hint: 'Select a type',
+            description: 'Determine how the message will be presented.',
+            options: Variant.Enum
+        });
+        // helpers
+        function getClassName(variant) {
+            switch (variant) {
+                case 'featured':
+                    return 'nd-Message-featured';
+                case 'branding':
+                    return 'nd-Message-branding';
+                case 'action':
+                    return 'nd-Message-action';
+                default:
+                    console.warn('[Message] unrecognized message variant:', variant);
+                    return 'nd-Message-featured';
+            }
+        }
+        Variant.getClassName = getClassName;
+    })(Variant = Message.Variant || (Message.Variant = {}));
+    let VisualWidth;
+    (function (VisualWidth) {
+        // schema
+        VisualWidth.Enum = {
+            contained: { name: 'Contained' },
+            fullBleed: { name: 'Full Bleed' },
+        };
+        VisualWidth.schema = funnel_core_1.Schema.Field.enumeration({
+            name: 'Visual Width',
+            semantics: 'segmented',
+            hint: 'Set width',
+            description: 'Control the width of the visual',
+            options: VisualWidth.Enum,
+            defaultOption: 'contained'
+        });
+        // helpers
+        function getClassName(width) {
+            switch (width) {
+                case 'contained':
+                    return 'nd-Block-visual-width-contained';
+                case 'fullBleed':
+                    return 'nd-Block-visual-width-full-bleed';
+                default:
+                    console.warn('[Message] unrecognized visual width: ', width);
+                    return 'nd-Block-visual-width-contained';
+            }
+        }
+        VisualWidth.getClassName = getClassName;
+    })(VisualWidth = Message.VisualWidth || (Message.VisualWidth = {}));
+    // schema
+    const configSchema = Object.assign(Object.assign({}, schema_1.BlockConfig.Presets.ThemeOnly.schema), { variant: Variant.schema, messageTextAlignment: schema_1.TextAlignment.schema.rename('Message Text Alignment').optional(), messageHorizontalPosition: schema_1.ItemAlignment.Horizontal.schema.rename('Message Horizontal Position').optional(), messageVerticalPosition: schema_1.ItemAlignment.Vertical.schema.rename('Message Vertical Position').optional(), messageWidth: schema_1.ItemSize.schema
+            .modify({ semantics: 'segmented', name: 'Message Width' })
+            .keepOptions('sm', 'md', 'lg', 'full')
+            .setDefault('md')
+            .optional(), visualPosition: schema_1.ItemPosition.schema
+            .rename('Visual Position')
+            .updateOptions({ stacked: { name: 'Background', hint: 'Aligns the item as an overlay/background.' } })
+            .removeOptions('center')
+            .setDefault('left')
+            .optional(), visualAspect: schema_1.AspectRatio.schema
+            .rename('Visual Aspect')
+            .optional(), visualAnchor: schema_1.Anchor.schema
+            .rename('Visual Anchor')
+            .optional(), visualWidth: VisualWidth.schema.optional(), contentAlignment: schema_1.ItemAlignment.Vertical.schema.rename('Content Alignment').optional() });
+    const fieldsSchema = {
+        visual: fields_1.Visual.schema.modify({ tags: 'hero' }).optional(),
+        title: fields_1.Title.schema.modify({ description: 'A short intro or heading for the message' }).optional(),
+        headline: fields_1.Headline.schema,
+        caption: fields_1.Caption.schema.optional(),
+        ctas: funnel_core_1.Schema.Field.list({
+            name: 'CTAs',
+            description: 'Add your call-to-actions in the order you\'d like them to appear *(these are optional)*.',
+            itemTypes: {
+                cta: funnel_core_1.Schema.Field.link({ name: 'Call to Action' })
+            },
+            min: 1,
+            max: 2
+        }).optional()
+    };
+    Message.schema = funnel_core_1.Schema.Block.create({
+        id: '_nd-message',
+        name: 'Message',
+        version: 1,
+        config: configSchema,
+        fields: fieldsSchema,
+        getConfig: getMessageConfig,
+        getLayout: getMessageLayout
+    });
+})(Message || (exports.Message = Message = {}));
+//helpers
+function getMessageConfig(args) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    // parse args
+    const { configSchema, config, fields } = args;
+    // current config helpers
+    const visual = fields === null || fields === void 0 ? void 0 : fields.visual;
+    const hasVisual = ((_a = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _a === void 0 ? void 0 : _a.value) !== undefined;
+    const visualConfig = panels_1.VisualPanel.getConfig({ visual, config, aspectKey: 'visualAspect', anchorKey: 'visualAnchor' });
+    // default config
+    const defaultConfig = Object.assign(Object.assign(Object.assign(Object.assign({}, config), { theme: funnel_core_1.Schema.EnumField.Value.toData('default'), messageTextAlignment: funnel_core_1.Schema.EnumField.Value.toData('left'), messageHorizontalPosition: funnel_core_1.Schema.EnumField.Value.toData('start'), messageVerticalPosition: funnel_core_1.Schema.EnumField.Value.toData('start'), messageWidth: funnel_core_1.Schema.EnumField.Value.toData('md'), visualPosition: funnel_core_1.Schema.EnumField.Value.toData('left') }), visualConfig.defaultConfig), { visualWidth: funnel_core_1.Schema.EnumField.Value.toData('contained'), contentAlignment: funnel_core_1.Schema.EnumField.Value.toData('start') });
+    // current values or fallback to a valid value
+    const messageTextAlignment = (_b = funnel_core_1.Schema.EnumField.Value.fromData(config.messageTextAlignment)) !== null && _b !== void 0 ? _b : (_c = defaultConfig.messageTextAlignment) === null || _c === void 0 ? void 0 : _c.value;
+    const messageHorizontalPosition = (_d = funnel_core_1.Schema.EnumField.Value.fromData(config.messageHorizontalPosition)) !== null && _d !== void 0 ? _d : (_e = defaultConfig.messageHorizontalPosition) === null || _e === void 0 ? void 0 : _e.value;
+    const messageVerticalPosition = (_f = funnel_core_1.Schema.EnumField.Value.fromData(config.messageVerticalPosition)) !== null && _f !== void 0 ? _f : (_g = defaultConfig.messageVerticalPosition) === null || _g === void 0 ? void 0 : _g.value;
+    const messageWidth = (_h = funnel_core_1.Schema.EnumField.Value.fromData(config.messageWidth)) !== null && _h !== void 0 ? _h : (_j = defaultConfig.messageWidth) === null || _j === void 0 ? void 0 : _j.value;
+    const visualPosition = (_k = funnel_core_1.Schema.EnumField.Value.fromData(config.visualPosition)) !== null && _k !== void 0 ? _k : (_l = defaultConfig.visualPosition) === null || _l === void 0 ? void 0 : _l.value;
+    const visualWidth = (_m = funnel_core_1.Schema.EnumField.Value.fromData(config.visualWidth)) !== null && _m !== void 0 ? _m : (_o = defaultConfig.visualWidth) === null || _o === void 0 ? void 0 : _o.value;
+    const contentAlignment = (_p = funnel_core_1.Schema.EnumField.Value.fromData(config.contentAlignment)) !== null && _p !== void 0 ? _p : (_q = defaultConfig.contentAlignment) === null || _q === void 0 ? void 0 : _q.value;
+    const updatedConfig = Object.assign(Object.assign(Object.assign(Object.assign({}, config), { messageTextAlignment: funnel_core_1.Schema.EnumField.Value.toData(messageTextAlignment), messageHorizontalPosition: funnel_core_1.Schema.EnumField.Value.toData(messageHorizontalPosition), messageVerticalPosition: funnel_core_1.Schema.EnumField.Value.toData(messageVerticalPosition), messageWidth: funnel_core_1.Schema.EnumField.Value.toData(messageWidth), visualPosition: funnel_core_1.Schema.EnumField.Value.toData(visualPosition) }), visualConfig.config), { visualWidth: funnel_core_1.Schema.EnumField.Value.toData(visualWidth), contentAlignment: funnel_core_1.Schema.EnumField.Value.toData(contentAlignment) });
+    // has visual and message
+    if (hasVisual) {
+        const updatedConfigSchema = Object.assign(Object.assign({}, configSchema), visualConfig.configSchema);
+        // if visual is stacked
+        if (visualPosition === 'stacked') {
+            // update message width options to small and medium
+            updatedConfigSchema.messageWidth = configSchema.messageWidth.keepOptions('sm', 'md');
+            // set message width value to small if it was initially undefined or not valid
+            if (!config.messageWidth || !updatedConfigSchema.messageWidth.isValidOption((_r = updatedConfig.messageWidth) === null || _r === void 0 ? void 0 : _r.value)) {
+                updatedConfig.messageWidth = funnel_core_1.Schema.EnumField.Value.toData('sm');
+            }
+            // drop content alignment
+            delete updatedConfigSchema.contentAlignment;
+            return {
+                updatedConfigSchema,
+                updatedConfig,
+                defaultConfig
+            };
+        }
+        // otherwise, visual not in background
+        // update message width options
+        updatedConfigSchema.messageWidth = configSchema.messageWidth.keepOptions('md', 'lg', 'full');
+        // update config if not valid
+        if (!updatedConfigSchema.messageWidth.isValidOption((_s = updatedConfig.messageWidth) === null || _s === void 0 ? void 0 : _s.value)) {
+            updatedConfig.messageWidth = funnel_core_1.Schema.EnumField.Value.toData('md');
+        }
+        if (messageWidth === 'full') {
+            delete updatedConfigSchema.messageHorizontalPosition;
+        }
+        // visual above or below
+        if (visualPosition === 'top' || visualPosition === 'bottom') {
+            delete updatedConfigSchema.messageVerticalPosition;
+            delete updatedConfigSchema.contentAlignment;
+        }
+        // visual not above or below
+        else {
+            delete updatedConfigSchema.messageHorizontalPosition;
+            delete updatedConfigSchema.messageVerticalPosition;
+            delete updatedConfigSchema.messageTextAlignment;
+            delete updatedConfigSchema.messageWidth;
+        }
+        return {
+            updatedConfigSchema,
+            updatedConfig,
+            defaultConfig
+        };
+    }
+    // has message only
+    const messageWidthSchema = configSchema.messageWidth.keepOptions('md', 'lg', 'full');
+    return {
+        updatedConfigSchema: {
+            theme: configSchema.theme,
+            variant: configSchema.variant,
+            messageHorizontalPosition: messageWidth === 'full'
+                ? undefined
+                : configSchema.messageHorizontalPosition,
+            messageTextAlignment: configSchema.messageTextAlignment,
+            messageWidth: messageWidthSchema
+        },
+        updatedConfig: Object.assign(Object.assign({}, updatedConfig), { messageWidth: messageWidthSchema.isValidOption((_t = updatedConfig.messageWidth) === null || _t === void 0 ? void 0 : _t.value) ?
+                updatedConfig.messageWidth : funnel_core_1.Schema.EnumField.Value.toData('md') }),
+        defaultConfig
+    };
+}
+function getMessageLayout(args) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    // parse args
+    const { config, fields } = args;
+    const hasVisual = ((_a = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _a === void 0 ? void 0 : _a.value) !== undefined;
+    const messageTextAlignment = (_b = funnel_core_1.Schema.EnumField.Value.fromData(config.messageTextAlignment)) !== null && _b !== void 0 ? _b : 'left';
+    const messageHorizontalPosition = (_c = funnel_core_1.Schema.EnumField.Value.fromData(config.messageHorizontalPosition)) !== null && _c !== void 0 ? _c : 'start';
+    const messageVerticalPosition = (_d = funnel_core_1.Schema.EnumField.Value.fromData(config.messageVerticalPosition)) !== null && _d !== void 0 ? _d : 'start';
+    const messageWidth = (_e = funnel_core_1.Schema.EnumField.Value.fromData(config.messageWidth)) !== null && _e !== void 0 ? _e : 'md';
+    const visualPosition = (_f = funnel_core_1.Schema.EnumField.Value.fromData(config.visualPosition)) !== null && _f !== void 0 ? _f : 'left';
+    const visualAspect = (_g = funnel_core_1.Schema.EnumField.Value.fromData(config.visualAspect)) !== null && _g !== void 0 ? _g : 'auto';
+    const visualWidth = (_h = funnel_core_1.Schema.EnumField.Value.fromData(config.visualWidth)) !== null && _h !== void 0 ? _h : 'contained';
+    const contentAlign = (_j = funnel_core_1.Schema.EnumField.Value.fromData(config.contentAlignment)) !== null && _j !== void 0 ? _j : 'start';
+    const fullBleedVisual = visualWidth === 'fullBleed' ? 'true' : 'false';
+    let layout;
+    if (hasVisual) {
+        layout = visualPosition === 'left'
+            // language=XML (visual left)
+            ? `
+        <block 
+          xmlns="nd:block"
+          name="Visual-Left"
+          tightDesktop="${fullBleedVisual === 'true' ? 'both' : 'none'}"
+          tightMobile="${fullBleedVisual === 'true' ? 'above' : 'none'}"
+        >
+          <row alignY="${contentAlign}">
+            <visual aspect="${visualAspect}" alignY="center" fullBleed="${fullBleedVisual}" />
+            <message textAlign="${messageTextAlignment}" />
+          </row>
+        </block>
+      `
+            : visualPosition === 'right'
+                // language=XML (visual right)
+                ? `
+        <block 
+          xmlns="nd:block"
+          name="Visual-Right"
+          tightDesktop="${fullBleedVisual === 'true' ? 'both' : 'none'}"
+          tightMobile="${fullBleedVisual === 'true' ? 'above' : 'none'}"
+        >
+          <row alignY="${contentAlign}" >
+            <message textAlign="${messageTextAlignment}"/>
+            <visual aspect="${visualAspect}" alignY="center" fullBleed="${fullBleedVisual}" />
+          </row>
+        </block>
+        `
+                : visualPosition === 'top'
+                    // language=XML (visual top)
+                    ? `
+          <block xmlns="nd:block" name="Visual-Top" tight="${fullBleedVisual === 'true' ? 'above' : 'none'}">
+           <col>         
+             <visual aspect="${visualAspect}" alignY="center" fullBleed="${fullBleedVisual}"/>
+              <message 
+                textAlign="${messageTextAlignment}"
+                alignX="${messageHorizontalPosition}"
+                size="${messageWidth}"
+              />
+            </col>
+          </block>
+          ` : visualPosition === 'bottom'
+                    // language=XML (visual bottom)
+                    ? `
+             <block xmlns="nd:block" name="Visual-Bottom" tight="${fullBleedVisual === 'true' ? 'below' : 'none'}">
+               <col>      
+                 <message
+                   textAlign="${messageTextAlignment}"
+                   alignX="${messageHorizontalPosition}"
+                   size="${messageWidth}"
+                 />   
+                 <visual aspect="${visualAspect}" alignY="center" fullBleed="${fullBleedVisual}"/>
+                </col>
+            </block>
+          `
+                    // language=XML (visual stacked)
+                    : `
+         <block xmlns="nd:block" name="Visual-Stacked" tight="${fullBleedVisual === 'true' ? 'both' : 'none'}">
+            <stack>
+               <message
+                 textAlign="${messageTextAlignment}"
+                 alignX="${messageHorizontalPosition}"
+                 alignY="${messageVerticalPosition}"
+                 size="${messageWidth}"
+               />  
+              <visual aspect="${visualAspect}" alignY="center" fullBleed="${fullBleedVisual}"/>
+            </stack>
+        </block>
+        `;
+    }
+    else {
+        // language=XML
+        layout = `
+        <block xmlns="nd:block" name="No-Visual">
+          <col>
+            <message
+              textAlign="${messageTextAlignment}"
+              alignX="${messageHorizontalPosition}"
+              size="${messageWidth}"
+            />
+          </col>
+        </block>
+    `;
+    }
+    // return skeleton
+    return funnel_core_1.BlockLayout.parse(layout);
+}

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

@@ -0,0 +1,84 @@
+import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
+import { HTMLBlockElement, HTMLElements } from '../../types';
+import { Caption, Headline, Title, Visual } from '../fields';
+import { Anchor, ItemAlignment, ItemPosition, ItemSize, TextAlignment } from '../schema';
+import { OutcomeDetail } from './OutcomeDetail';
+export declare function Outcome({ className, titleTag, headlineTag, captionTag, detailsTag, detailTag, outcome, visualLoading, ...props }: Outcome.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace Outcome {
+    export type IntroPosition = 'inline' | 'left' | 'center' | 'right';
+    export namespace IntroPosition {
+        const Enum: Schema.EnumField.Options<IntroPosition>;
+        const schema: Schema.EnumField<Schema.EnumField.Options<IntroPosition>>;
+        function getClassName(position?: IntroPosition): string;
+    }
+    export const configSchema: {
+        introPosition: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<IntroPosition>>>;
+        introTextAlignment: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<TextAlignment>>>;
+        introWidth: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<ItemSize>>>;
+        detailsWidth: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<ItemSize>>>;
+        detailsPosition: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<ItemAlignment>>>;
+        visualPosition: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<ItemPosition>>>;
+        visualAspect: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<BlockLayout.AspectRatio>>>;
+        visualAnchor: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<Anchor>>>;
+        contentAlignment: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<ItemAlignment>>>;
+        theme: Schema.EnumField<Readonly<import("@nascentdigital/funnel-core").BlockThemes.Options>>;
+    };
+    const fieldsSchema: {
+        visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+        title: Schema.Optional<Schema.TextField>;
+        headline: Schema.RichTextField;
+        caption: Schema.Optional<Schema.RichTextField>;
+        link: Schema.Optional<Schema.LinkField>;
+        details: Schema.Optional<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>;
+            }>;
+        }>>;
+    };
+    export const schema: Schema.Block<"_nd-outcome", {
+        visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+        title: Schema.Optional<Schema.TextField>;
+        headline: Schema.RichTextField;
+        caption: Schema.Optional<Schema.RichTextField>;
+        link: Schema.Optional<Schema.LinkField>;
+        details: Schema.Optional<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>;
+            }>;
+        }>>;
+    }, {
+        introPosition: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<IntroPosition>>>;
+        introTextAlignment: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<TextAlignment>>>;
+        introWidth: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<ItemSize>>>;
+        detailsWidth: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<ItemSize>>>;
+        detailsPosition: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<ItemAlignment>>>;
+        visualPosition: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<ItemPosition>>>;
+        visualAspect: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<BlockLayout.AspectRatio>>>;
+        visualAnchor: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<Anchor>>>;
+        contentAlignment: Schema.Optional<Schema.EnumField<Schema.EnumField.Options<ItemAlignment>>>;
+        theme: Schema.EnumField<Readonly<import("@nascentdigital/funnel-core").BlockThemes.Options>>;
+    }>;
+    export type Props = HTMLBlockElement<'div'> & {
+        titleTag?: Title.Tag;
+        headlineTag?: Headline.Tag;
+        captionTag?: Caption.Tag;
+        detailsTag?: HTMLElements.Standard.Container;
+        detailTag?: OutcomeDetail.Tag;
+        outcome: Model;
+        visualLoading?: Visual.Loading;
+    };
+    export type GetConfigArgs = Schema.Block.GetConfig.Args<typeof configSchema, typeof fieldsSchema>;
+    export type GetConfigResult = Schema.Block.GetConfig.Result<typeof configSchema>;
+    export type GetLayoutArgs = Schema.Block.GetLayout.Args<typeof configSchema, typeof fieldsSchema>;
+    export type Model = Schema.Block.LinkedData<typeof schema>;
+    export type DetailModel = Schema.ListField.LinkedValue<Schema.Optional.InnerType<typeof schema['fields']['details']>>[number];
+    export {};
+}