@nascentdigital/funnel-ui 4.4.21 → 4.5.1

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

@@ -1,7 +1,7 @@
 import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
 import { Visual } from '../fields';
-import { Anchor, AspectRatio } from '../schema';
+import { Anchor, AspectRatio, ItemAlignment, ItemPosition, ItemSize } from '../schema';
 import { BlockPanel } from './BlockPanel';
 export declare function VisualPanel({ className, panel, visual, visualDecorator, visualLoading, aspect, anchor, alignX, alignY, size, fullbleed, mobileOrder }: VisualPanel.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace VisualPanel {
@@ -14,23 +14,56 @@ export declare namespace VisualPanel {
         aspect?: AspectRatio;
         anchor?: Anchor;
     };
+    namespace Props {
+        type Configuration = Pick<Props, 'className' | 'visualDecorator' | 'visualLoading'>;
+    }
     namespace Fields {
-        const visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
+        const visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+        const all: {
+            visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+        };
+    }
+    namespace VisualPosition {
+        const schema: Schema.EnumField<Schema.EnumField.Options<ItemPosition>>;
+        type Schema = typeof schema;
+    }
+    namespace Config {
+        type Key<TPrefix extends string = string> = Key.Aspect<TPrefix> | Key.Anchor<TPrefix> | Key.HorizontalAlign<TPrefix> | Key.Width<TPrefix>;
+        namespace Key {
+            type Aspect<TPrefix extends string> = `${TPrefix}Aspect`;
+            function aspect<TPrefix extends string>(prefix: TPrefix): Aspect<TPrefix>;
+            type Anchor<TPrefix extends string> = `${TPrefix}Anchor`;
+            function anchor<TPrefix extends string>(prefix: TPrefix): Anchor<TPrefix>;
+            type Width<TPrefix extends string> = `${TPrefix}Width`;
+            function width<TPrefix extends string>(prefix: TPrefix): Width<TPrefix>;
+            type HorizontalAlign<TPrefix extends string> = `${TPrefix}HorizontalAlign`;
+            function horizontalAlign<TPrefix extends string>(prefix: TPrefix): HorizontalAlign<TPrefix>;
+        }
+        type Keys<TPrefix extends string> = {
+            aspect: Key.Aspect<TPrefix>;
+            anchor: Key.Anchor<TPrefix>;
+            width: Key.Width<TPrefix>;
+            horizontalAlign: Key.HorizontalAlign<TPrefix>;
+        };
+        function getKeys<TPrefix extends string>(prefix: TPrefix): Keys<TPrefix>;
+        type Entries<TPrefix extends string> = Record<Key.Aspect<TPrefix>, AspectRatio.Schema> & Record<Key.Width<TPrefix>, ItemSize.Schema> & Record<Key.Anchor<TPrefix>, Anchor.Schema> & Record<Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema>;
     }
     namespace GetConfig {
-        type ConfigSchema<AspectKey extends string, AnchorKey extends string> = Record<AspectKey, AspectRatio.Schema> & Record<AnchorKey, Anchor.Schema>;
-        type ConfigData<AspectKey extends string, AnchorKey extends string> = Schema.Block.Data.ForConfig<ConfigSchema<AspectKey, AnchorKey>>;
-        type Args<AspectKey extends string, AnchorKey extends string> = {
+        type ConfigSchema<TPrefix extends string> = Record<Config.Key.Aspect<TPrefix>, AspectRatio.Schema> & Record<Config.Key.Anchor<TPrefix>, Anchor.Schema> & Record<Config.Key.Width<TPrefix>, ItemSize.Schema> & Record<Config.Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema>;
+        type ConfigData<TPrefix extends string> = Schema.Block.Data.ForConfig<ConfigSchema<TPrefix>>;
+        type Position = 'x' | 'y' | 'z';
+        type Args<TPrefix extends string> = {
+            visualKey: TPrefix;
             visual?: Schema.Field.Data<Schema.AssetField> | Schema.Field.LinkedData<Schema.AssetField>;
-            config?: Partial<ConfigData<AspectKey, AnchorKey>>;
-            aspectKey: AspectKey;
-            anchorKey: AnchorKey;
+            config?: Partial<ConfigData<TPrefix>>;
+            flexDirection?: BlockPanel.Slots.FlexDirection;
         };
-        type Result<AspectKey extends string, AnchorKey extends string> = {
-            configSchema: Partial<ConfigSchema<AspectKey, AnchorKey>>;
-            config: Partial<ConfigData<AspectKey, AnchorKey>>;
-            defaultConfig: Partial<ConfigData<AspectKey, AnchorKey>>;
+        type Result<TPrefix extends string> = {
+            configSchema: Partial<ConfigSchema<TPrefix>>;
+            config: Partial<ConfigData<TPrefix>>;
+            defaultConfig: Partial<ConfigData<TPrefix>>;
         };
     }
-    function getConfig<AspectKey extends string, AnchorKey extends string>({ visual: visualData, config, aspectKey, anchorKey }: GetConfig.Args<AspectKey, AnchorKey>): GetConfig.Result<AspectKey, AnchorKey>;
+    function getConfig<TPrefix extends string>({ visualKey, visual: visualData, config, flexDirection }: GetConfig.Args<TPrefix>): GetConfig.Result<TPrefix>;
+    function Placeholder(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/server/panels/VisualPanel.js

@@ -60,7 +60,11 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
             'nd-VisualPanel-anchor-bottom': anchor === 'bottom',
             'nd-VisualPanel-anchor-left': anchor === 'left',
             'nd-VisualPanel-anchor-right': anchor === 'right'
-        }), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-VisualPanel-content", children: [(0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-VisualPanel-visual", visual: visual, loading: visualLoading }), visualDecorator &&
+        }), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-VisualPanel-content", children: [visual
+                    ?
+                        (0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-VisualPanel-visual", visual: visual, loading: visualLoading })
+                    :
+                        (0, jsx_runtime_1.jsx)(VisualPanel.Placeholder, {}), visualDecorator &&
                     (0, jsx_runtime_1.jsx)("div", { className: "nd-VisualPanel-decorator", children: visualDecorator })] }) }));
 }
 // extension
@@ -68,23 +72,66 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
     // fields
     let Fields;
     (function (Fields) {
-        Fields.visual = fields_1.Visual.schema;
+        Fields.visual = fields_1.Visual.schema.optional();
+        Fields.all = {
+            visual: Fields.visual
+        };
     })(Fields = VisualPanel.Fields || (VisualPanel.Fields = {}));
-    function getConfig({ visual: visualData, config = {}, aspectKey, anchorKey }) {
-        var _a, _b, _c, _d, _e;
+    // visual position
+    let VisualPosition;
+    (function (VisualPosition) {
+        // schema
+        VisualPosition.schema = schema_1.ItemPosition.schema
+            .rename('Visual Position')
+            .updateOptions({ stacked: { name: 'Background', hint: 'Aligns the item as an overlay/background.' } })
+            .removeOptions('center')
+            .setDefault('left');
+    })(VisualPosition = VisualPanel.VisualPosition || (VisualPanel.VisualPosition = {}));
+    // config
+    let Config;
+    (function (Config) {
+        let Key;
+        (function (Key) {
+            function aspect(prefix) {
+                return `${prefix}Aspect`;
+            }
+            Key.aspect = aspect;
+            function anchor(prefix) {
+                return `${prefix}Anchor`;
+            }
+            Key.anchor = anchor;
+            function width(prefix) {
+                return `${prefix}Width`;
+            }
+            Key.width = width;
+            function horizontalAlign(prefix) {
+                return `${prefix}HorizontalAlign`;
+            }
+            Key.horizontalAlign = horizontalAlign;
+        })(Key = Config.Key || (Config.Key = {}));
+        function getKeys(prefix) {
+            return {
+                aspect: `${prefix}Aspect`,
+                anchor: `${prefix}Anchor`,
+                width: `${prefix}Width`,
+                horizontalAlign: `${prefix}HorizontalAlign`,
+            };
+        }
+        Config.getKeys = getKeys;
+    })(Config = VisualPanel.Config || (VisualPanel.Config = {}));
+    function getConfig({ visualKey, visual: visualData, config = {}, flexDirection }) {
+        var _a, _b, _c, _d, _e, _f, _g;
         // resolve values
+        const keys = Config.getKeys(visualKey);
         const defaultAspect = 'auto';
         const defaultAnchor = 'center';
-        let aspect = (_b = (_a = config[aspectKey]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultAspect;
-        let anchor = (_d = (_c = config[anchorKey]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultAnchor;
+        let aspect = (_b = (_a = config[keys.aspect]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultAspect;
+        let anchor = (_d = (_c = config[keys.anchor]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultAnchor;
         const visual = visualData === null || visualData === void 0 ? void 0 : visualData.value;
         // return immediately if there's no visual
         if (!visual || !funnel_core_1.Schema.AssetField.LinkedValue.Visual.filter(visual)) {
             return {
-                configSchema: {
-                    [aspectKey]: undefined,
-                    [anchorKey]: undefined
-                },
+                configSchema: {},
                 config: {},
                 defaultConfig: {}
             };
@@ -103,11 +150,15 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
         console.debug('[VisualPanel/getConfig] aspect calculation:', { width, height, sourceAspectRatio, matchedAspect });
         // create schema (drop matched aspect if we need to)
         const configSchema = {
-            [aspectKey]: matchedAspect
+            [keys.aspect]: matchedAspect
                 ? schema_1.AspectRatio.schema.removeOption(matchedAspect)
                 : schema_1.AspectRatio.schema,
-            [anchorKey]: aspect === 'auto' ? undefined : schema_1.Anchor.schema
+            [keys.anchor]: aspect === 'auto' ? undefined : schema_1.Anchor.schema,
+            [keys.horizontalAlign]: schema_1.ItemAlignment.Horizontal.schema,
+            [keys.width]: schema_1.ItemSize.schema
         };
+        const defaultPanelWidth = 'full';
+        let panelWidth = (_g = (_f = config[keys.width]) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : defaultPanelWidth;
         // reduce anchor to options that are allowed (vertical vs horizontal cropping)
         if (sourceAspectRatio && aspect !== 'auto') {
             // coerce anchor
@@ -120,24 +171,41 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
             else {
                 anchorSchema = anchorSchema.keepOptions('center', 'left', 'right');
             }
-            configSchema[anchorKey] = anchorSchema;
+            configSchema[keys.anchor] = anchorSchema;
             // update config
             if (!anchorSchema.isValidOption(anchor)) {
                 anchor = 'center';
             }
         }
+        if (flexDirection === 'none' || flexDirection === 'y' || panelWidth === 'full' || panelWidth === 'fullBleed') {
+            delete configSchema[keys.horizontalAlign];
+        }
+        // if there is no room to left or right, then only keep full and full-bleed options
+        if (flexDirection !== 'x') {
+            configSchema[keys.width] = schema_1.ItemSize.schema.keepOptions('full', 'fullBleed');
+            if (panelWidth !== 'full' && panelWidth !== 'fullBleed') {
+                panelWidth = 'full';
+            }
+        }
         // return result
         return {
             configSchema: configSchema,
             config: {
-                [aspectKey]: funnel_core_1.Schema.EnumField.Value.toData(aspect),
-                [anchorKey]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(anchor)
+                [keys.aspect]: funnel_core_1.Schema.EnumField.Value.toData(aspect),
+                [keys.anchor]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(anchor),
+                [keys.width]: funnel_core_1.Schema.EnumField.Value.toData(panelWidth),
             },
             defaultConfig: {
-                [aspectKey]: funnel_core_1.Schema.EnumField.Value.toData(defaultAspect),
-                [anchorKey]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(defaultAnchor)
+                [keys.aspect]: funnel_core_1.Schema.EnumField.Value.toData(defaultAspect),
+                [keys.anchor]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(defaultAnchor),
+                [keys.width]: funnel_core_1.Schema.EnumField.Value.toData(defaultPanelWidth),
             }
         };
     }
     VisualPanel.getConfig = getConfig;
+    // placeholder
+    function Placeholder() {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "nd-BlockPanel-placeholder nd-VisualPanel-placeholder", children: "No visual content" }));
+    }
+    VisualPanel.Placeholder = Placeholder;
 })(VisualPanel || (exports.VisualPanel = VisualPanel = {}));

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

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

package/dist/server/panels/index.js

@@ -15,5 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 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/BlockConfig.d.ts

@@ -35,11 +35,13 @@ export declare namespace BlockConfig {
         function getClassName(fullbleed?: boolean): string | undefined;
     }
     namespace Presets {
-        type ThemeOnly = Schema.Block.Data.ForConfig<typeof ThemeOnly.schema>;
+        type ThemeOnly = Schema.Block.Data.ForConfig<ThemeOnly.Schema>;
         namespace ThemeOnly {
+            const key: "theme";
             const schema: {
                 readonly theme: Schema.EnumField<Readonly<BlockThemes.Options>>;
             };
+            type Schema = typeof schema;
             function getClassName(config?: ThemeOnly): string;
         }
         type VisualAndCopy = Schema.Block.Data.ForConfig<typeof VisualAndCopy.schema>;

package/dist/server/schema/BlockConfig.js

@@ -162,8 +162,9 @@ var BlockConfig;
         let ThemeOnly;
         (function (ThemeOnly) {
             // schema
+            ThemeOnly.key = 'theme';
             ThemeOnly.schema = {
-                theme: Theme.schema
+                [ThemeOnly.key]: Theme.schema
             };
             // helpers
             function getClassName(config) {

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

@@ -4,9 +4,11 @@ export declare namespace ItemAlignment {
     namespace Horizontal {
         const options: Schema.EnumField.Options<ItemAlignment>;
         const schema: Schema.EnumField<Schema.EnumField.Options<ItemAlignment>>;
+        type Schema = typeof schema;
     }
     namespace Vertical {
         const options: Schema.EnumField.Options<ItemAlignment>;
         const schema: Schema.EnumField<Schema.EnumField.Options<ItemAlignment>>;
+        type Schema = typeof schema;
     }
 }

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

@@ -3,4 +3,5 @@ export type ItemPosition = 'top' | 'bottom' | 'left' | 'center' | 'right' | 'sta
 export declare namespace ItemPosition {
     const options: Schema.EnumField.Options<ItemPosition>;
     const schema: Schema.EnumField<Schema.EnumField.Options<ItemPosition>>;
+    type Schema = typeof schema;
 }

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

@@ -1,6 +1,7 @@
 import { Schema } from '@nascentdigital/funnel-core';
-export type ItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+export type ItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'full' | 'fullBleed';
 export declare namespace ItemSize {
     const options: Schema.EnumField.Options<ItemSize>;
     const schema: Schema.EnumField<Schema.EnumField.Options<ItemSize>>;
+    type Schema = typeof schema;
 }

package/dist/server/schema/ItemSize.js

@@ -11,7 +11,8 @@ var ItemSize;
         sm: { name: 'Small', hint: 'Small' },
         md: { name: 'Medium', hint: 'Medium' },
         lg: { name: 'Large', hint: 'Large' },
-        full: { name: 'Full', hint: 'Full' }
+        full: { name: 'Full', hint: 'Full' },
+        fullBleed: { name: 'Full Bleed', hint: 'Full Bleed' }
     };
     ItemSize.schema = funnel_core_1.Schema.Field.enumeration({
         name: 'Size',

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

@@ -0,0 +1,34 @@
+import { Schema } from '@nascentdigital/funnel-core';
+import { ItemAlignment } from './ItemAlignment';
+export type ListPanelLayout = keyof ListPanelLayout.Configs;
+export declare namespace ListPanelLayout {
+    const options: Schema.EnumField.Options<ListPanelLayout>;
+    const schema: Schema.EnumField<Schema.EnumField.Options<keyof Configs>>;
+    type Schema = typeof schema;
+    type Brick = {
+        flipped: boolean;
+    };
+    type Card = {
+        itemSize: 'sm' | 'md';
+    };
+    type FlexWrap = {
+        allowSingleItemRows: boolean;
+        itemAlignment: ItemAlignment;
+    };
+    type Grid = {
+        columns: number;
+    };
+    type Stack = {
+        direction: 'horizontal' | 'vertical';
+        itemDistribution: 'equal' | 'even' | 'none';
+    };
+    type Configs = {
+        brick: Omit<Brick, 'flipped'>;
+        brickFlipped: Omit<Brick, 'flipped'>;
+        card: Card;
+        flexWrap: FlexWrap;
+        grid: Grid;
+        horizontalStack: Omit<Stack, 'direction'>;
+        verticalStack: Omit<Stack, 'direction'>;
+    };
+}

package/dist/server/schema/ListPanelLayout.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListPanelLayout = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+var ListPanelLayout;
+(function (ListPanelLayout) {
+    // schema
+    ListPanelLayout.options = {
+        brick: { name: 'Brick' },
+        brickFlipped: { name: 'Brick flipped' },
+        card: { name: 'Card' },
+        flexWrap: { name: 'Flex wrap' },
+        horizontalStack: { name: 'Horizontal stack' },
+        verticalStack: { name: 'Vertical stack' },
+        grid: { name: 'Grid' },
+    };
+    ListPanelLayout.schema = funnel_core_1.Schema.Field.enumeration({
+        name: 'Layout',
+        semantics: 'dropdown',
+        hint: 'Set how items of the list is laid out',
+        options: ListPanelLayout.options,
+        defaultOption: 'card'
+    });
+})(ListPanelLayout || (exports.ListPanelLayout = ListPanelLayout = {}));

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

@@ -0,0 +1,14 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export type PanelLayout = 'solo' | 'stack.v' | 'stack.h' | 'brick.v' | 'brick.t' | 'brick.r' | 'brick.b' | 'brick.l' | 'nested' | 'nested.h' | 'nested.v' | 'nested.t' | 'nested.r' | 'nested.b' | 'nested.l';
+export declare namespace PanelLayout {
+    const Enum: Schema.EnumField.Options<PanelLayout>;
+    const schema: Schema.EnumField<Schema.EnumField.Options<PanelLayout>>;
+    type Schema = typeof schema;
+    type ForPanelsArgs = {
+        message: boolean;
+        visual: boolean;
+        list: boolean;
+    };
+    function schemaForPanels({ message, visual, list }: ForPanelsArgs): PanelLayout.Schema;
+    function isNested(layout: PanelLayout): boolean;
+}

package/dist/server/schema/PanelLayout.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelLayout = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+var PanelLayout;
+(function (PanelLayout) {
+    // schema
+    PanelLayout.Enum = {
+        solo: { name: 'Standalone' },
+        'stack.v': { name: 'Stack: Vertical' },
+        'stack.h': { name: 'Stack: Horizontal' },
+        'brick.v': { name: 'Brick: Vertical' },
+        'brick.t': { name: 'Brick: Top' },
+        'brick.r': { name: 'Brick: Right' },
+        'brick.b': { name: 'Brick: Bottom' },
+        'brick.l': { name: 'Brick: Left' },
+        'nested': { name: 'Nested' },
+        'nested.v': { name: 'Nested: Vertical' },
+        'nested.h': { name: 'Nested: Horizontal' },
+        'nested.t': { name: 'Nested: Top' },
+        'nested.r': { name: 'Nested: Right' },
+        'nested.b': { name: 'Nested: Bottom' },
+        'nested.l': { name: 'Nested: Left' }
+    };
+    PanelLayout.schema = funnel_core_1.Schema.Field.enumeration({
+        name: 'Panel Layout',
+        semantics: 'dropdown',
+        hint: 'Choose your layout',
+        description: 'Control the positioning of panels in a block.',
+        options: PanelLayout.Enum,
+        defaultOption: 'solo'
+    });
+    function schemaForPanels({ message, visual, list }) {
+        // drop layout options if there's no visual
+        if (!visual) {
+            return message && list
+                // message AND list
+                ? PanelLayout.schema
+                    .keepOptions('stack.h', 'stack.v')
+                    .setDefault('stack.h')
+                // only message OR list
+                : PanelLayout.schema
+                    .keepOptions('solo')
+                    .setDefault('solo');
+        }
+        // or handle case where there's just a visual + message/list
+        else if (!message || !list) {
+            return message || list
+                // visual AND message/list
+                ? PanelLayout.schema
+                    .keepOptions('stack.h', 'stack.v', 'nested')
+                    .setDefault('stack.h')
+                // only visual
+                : PanelLayout.schema
+                    .keepOptions('solo')
+                    .setDefault('solo');
+        }
+        // we have everything
+        else {
+            return PanelLayout.schema
+                .removeOptions('solo', 'stack.h', 'stack.v', 'nested')
+                .setDefault('brick.t');
+        }
+    }
+    PanelLayout.schemaForPanels = schemaForPanels;
+    function isNested(layout) {
+        return layout.startsWith('nested');
+    }
+    PanelLayout.isNested = isNested;
+})(PanelLayout || (exports.PanelLayout = PanelLayout = {}));

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

@@ -0,0 +1,9 @@
+import { Schema } from '@nascentdigital/funnel-core';
+import { PanelLayout } from './PanelLayout';
+export type SlotVariation = 'v1' | 'v2' | 'v3' | 'v4' | 'v5' | 'v6';
+export declare namespace SlotVariation {
+    const Enum: Schema.EnumField.Options<SlotVariation>;
+    const schema: Schema.EnumField<Schema.EnumField.Options<SlotVariation>>;
+    type Schema = typeof schema;
+    function schemaForLayout(layout: PanelLayout): Schema.EnumField<Schema.EnumField.Options<SlotVariation>>;
+}

package/dist/server/schema/SlotVariation.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlotVariation = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+var SlotVariation;
+(function (SlotVariation) {
+    // schema
+    SlotVariation.Enum = {
+        v1: { name: 'Variation 1' },
+        v2: { name: 'Variation 2' },
+        v3: { name: 'Variation 3' },
+        v4: { name: 'Variation 4' },
+        v5: { name: 'Variation 5' },
+        v6: { name: 'Variation 6' }
+    };
+    SlotVariation.schema = funnel_core_1.Schema.Field.enumeration({
+        name: 'Slot Variation',
+        semantics: 'dropdown',
+        hint: 'Choose the slot order',
+        description: 'Changes the position of panels in layout slots.',
+        options: SlotVariation.Enum,
+        defaultOption: 'v1'
+    });
+    // helpers
+    function schemaForLayout(layout) {
+        switch (layout) {
+            case 'solo':
+            case 'nested':
+                return SlotVariation.schema.keepOptions('v1');
+            case 'stack.h':
+            case 'stack.v':
+            case 'nested.h':
+            case 'nested.v':
+            case 'nested.t':
+            case 'nested.b':
+            case 'nested.l':
+            case 'nested.r':
+                return SlotVariation.schema.keepOptions('v1', 'v2');
+            case 'brick.v':
+            case 'brick.t':
+            case 'brick.b':
+            case 'brick.l':
+            case 'brick.r':
+                return SlotVariation.schema;
+        }
+    }
+    SlotVariation.schemaForLayout = schemaForLayout;
+})(SlotVariation || (exports.SlotVariation = SlotVariation = {}));

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

@@ -3,4 +3,5 @@ export type TextAlignment = 'left' | 'center' | 'right';
 export declare namespace TextAlignment {
     const options: Schema.EnumField.Options<TextAlignment>;
     const schema: Schema.EnumField<Schema.EnumField.Options<TextAlignment>>;
+    type Schema = typeof schema;
 }

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

@@ -5,4 +5,7 @@ export * from './CollectionSchema';
 export * from './ItemAlignment';
 export * from './ItemPosition';
 export * from './ItemSize';
+export * from './ListPanelLayout';
+export * from './PanelLayout';
+export * from './SlotVariation';
 export * from './TextAlignment';

package/dist/server/schema/index.js

@@ -21,4 +21,7 @@ __exportStar(require("./CollectionSchema"), exports);
 __exportStar(require("./ItemAlignment"), exports);
 __exportStar(require("./ItemPosition"), exports);
 __exportStar(require("./ItemSize"), exports);
+__exportStar(require("./ListPanelLayout"), exports);
+__exportStar(require("./PanelLayout"), exports);
+__exportStar(require("./SlotVariation"), exports);
 __exportStar(require("./TextAlignment"), exports);

package/dist/styles/blocks/Clients.css

@@ -1,7 +1,6 @@
 @layer components {
 
     :root {
-        --nd-clients-copy-gap: theme('spacing.l8');
     }
 
     /* base */