@nascentdigital/funnel-ui 4.4.21 → 4.5.0

package/dist/server/blocks/Message.js

@@ -18,49 +18,18 @@ 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
+// component
 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)));
+    var { className } = _a, props = __rest(_a, ["className"]);
+    // extract variant
+    const variant = funnel_core_1.Schema.EnumField.Value.fromData(props.model.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));
 }
 // extension
 (function (Message) {
+    var _a;
     let Variant;
     (function (Variant) {
         // enum
@@ -92,261 +61,15 @@ function Message(_a) {
         }
         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({
+    // factory
+    _a = Block_1.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;
+        message: true,
+        visual: true,
+        extendConfigSchema: {
+            variant: Message.Variant.schema
         }
-        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);
-}
+    }), Message.Component = _a.Component, Message.schema = _a.schema;
+})(Message || (exports.Message = Message = {}));

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

@@ -1,84 +1,24 @@
-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;
+import { Schema } from '@nascentdigital/funnel-core';
+import { ComponentProps } from 'react';
+import { Block } from './Block';
+export declare function Outcome(props: ComponentProps<typeof Outcome.Component>): import("react/jsx-runtime").JSX.Element;
 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 {};
+    const Component: import("react").FunctionComponent<Block.Create.Result.Component<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>>, schema: Block.Create.Result.Schema<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>;
 }