@nascentdigital/funnel-ui 4.5.6 → 4.6.0

package/dist/client/fields/LazyVideo.js

@@ -92,8 +92,8 @@ function LazyVideo(_a) {
             'nd-LazyVideo-loading': videoVisible && !videoReady,
             'nd-LazyVideo-ready': videoReady
         }), 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.jsxs)("div", { className: "nd-LazyVideo-content", children: [blurHash &&
                     (0, jsx_runtime_1.jsx)("canvas", { ref: blurCanvasRef, className: "nd-LazyVideo-blurHash", width: 32, height: 32, draggable: false }), (0, jsx_runtime_1.jsxs)("video", { ref: videoRef, className: (0, classnames_1.default)('nd-LazyVideo-video'), preload: "none", autoPlay: true, muted: true, loop: true, playsInline: true, children: [state !== 'uninitialized' &&
                             (0, jsx_runtime_1.jsx)("source", { src: url, type: type }), "Your browser does not support the video content."] })] }) })));

package/dist/client/hooks/index.d.ts

@@ -22,5 +22,6 @@ export * from './useResponsiveValue';
 export * from './useRouter';
 export * from './useSafeLayoutEffect';
 export * from './useTouch';
+export * from './useTrackedValue';
 export * from './useViewportSize';
 export * from './useWindowScrolled';

package/dist/client/hooks/index.js

@@ -38,5 +38,6 @@ __exportStar(require("./useResponsiveValue"), exports);
 __exportStar(require("./useRouter"), exports);
 __exportStar(require("./useSafeLayoutEffect"), exports);
 __exportStar(require("./useTouch"), exports);
+__exportStar(require("./useTrackedValue"), exports);
 __exportStar(require("./useViewportSize"), exports);
 __exportStar(require("./useWindowScrolled"), exports);

package/dist/client/hooks/useTrackedValue.d.ts

@@ -0,0 +1,2 @@
+import { TrackedValue } from '@nascentdigital/funnel-core';
+export declare function useTrackedValue<TValue>(value: TValue): TrackedValue<TValue>;

package/dist/client/hooks/useTrackedValue.js

@@ -0,0 +1,23 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTrackedValue = useTrackedValue;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+// hook
+function useTrackedValue(value) {
+    // fetch prev value
+    const prevValueRef = (0, react_1.useRef)(value);
+    const prevValue = prevValueRef.current;
+    // determine if changed (replace if it did)
+    const changed = !(value === prevValue || funnel_core_1.Value.equals(value, prevValue));
+    if (changed) {
+        prevValueRef.current = value;
+    }
+    // return update
+    return {
+        changed,
+        previous: prevValue,
+        current: changed ? value : prevValue
+    };
+}

package/dist/client/interaction/Carousel.js

@@ -36,6 +36,19 @@ function Carousel({ className, spacing = 0, infinite = false, autoplay = false,
     const uiLock = (0, hooks_1.useUILock)(container);
     const playButtonFocused = !!playButton && keyboardFocusElement === playButton;
     const childCount = children.length;
+    const gap = (0, react_2.useMemo)(() => {
+        if (!container) {
+            return;
+        }
+        const rawValue = getComputedStyle(container).getPropertyValue('--nd-carousel-gap');
+        if (rawValue.endsWith('px')) {
+            return Number.parseInt(rawValue.substring(0, rawValue.length - 2));
+        }
+        else {
+            return undefined;
+        }
+    }, [container]);
+    console.debug('>>> carousel', gap);
     const appConfig = (0, app_1.useAppConfig)();
     const autoplayInterval = (0, react_2.useMemo)(() => { var _a; return funnel_core_1.Duration.toMilliseconds((_a = autoplayIntervalRaw !== null && autoplayIntervalRaw !== void 0 ? autoplayIntervalRaw : appConfig.ui.carouselInterval) !== null && _a !== void 0 ? _a : '1s'); }, [autoplayIntervalRaw, appConfig]);
     const reduceMotion = (0, react_1.useReducedMotion)();

package/dist/server/HTMLContainer.d.ts

@@ -0,0 +1,289 @@
+import { HTMLAttributes } from 'react';
+import { HTMLElements } from '../types';
+export declare function HTMLContainer<TTag extends HTMLContainer.Tag>({ tag, children, ...props }: HTMLContainer.Props<TTag>): import("react").DetailedReactHTMLElement<{
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    slot?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
+    style?: import("react").CSSProperties | undefined;
+    tabIndex?: number | undefined;
+    title?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: import("react").AriaRole | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    inert?: boolean | undefined;
+    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+    is?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: import("react").ClipboardEventHandler<HTMLElements[TTag]> | undefined;
+    onCopyCapture?: import("react").ClipboardEventHandler<HTMLElements[TTag]> | undefined;
+    onCut?: import("react").ClipboardEventHandler<HTMLElements[TTag]> | undefined;
+    onCutCapture?: import("react").ClipboardEventHandler<HTMLElements[TTag]> | undefined;
+    onPaste?: import("react").ClipboardEventHandler<HTMLElements[TTag]> | undefined;
+    onPasteCapture?: import("react").ClipboardEventHandler<HTMLElements[TTag]> | undefined;
+    onCompositionEnd?: import("react").CompositionEventHandler<HTMLElements[TTag]> | undefined;
+    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLElements[TTag]> | undefined;
+    onCompositionStart?: import("react").CompositionEventHandler<HTMLElements[TTag]> | undefined;
+    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLElements[TTag]> | undefined;
+    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLElements[TTag]> | undefined;
+    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLElements[TTag]> | undefined;
+    onFocus?: import("react").FocusEventHandler<HTMLElements[TTag]> | undefined;
+    onFocusCapture?: import("react").FocusEventHandler<HTMLElements[TTag]> | undefined;
+    onBlur?: import("react").FocusEventHandler<HTMLElements[TTag]> | undefined;
+    onBlurCapture?: import("react").FocusEventHandler<HTMLElements[TTag]> | undefined;
+    onChange?: import("react").ChangeEventHandler<HTMLElements[TTag], Element> | undefined;
+    onChangeCapture?: import("react").ChangeEventHandler<HTMLElements[TTag], Element> | undefined;
+    onBeforeInput?: import("react").InputEventHandler<HTMLElements[TTag]> | undefined;
+    onBeforeInputCapture?: import("react").InputEventHandler<HTMLElements[TTag]> | undefined;
+    onInput?: import("react").InputEventHandler<HTMLElements[TTag]> | undefined;
+    onInputCapture?: import("react").InputEventHandler<HTMLElements[TTag]> | undefined;
+    onReset?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onResetCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onSubmit?: import("react").SubmitEventHandler<HTMLElements[TTag]> | undefined;
+    onSubmitCapture?: import("react").SubmitEventHandler<HTMLElements[TTag]> | undefined;
+    onInvalid?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onInvalidCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onLoad?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onLoadCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onError?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onErrorCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLElements[TTag]> | undefined;
+    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLElements[TTag]> | undefined;
+    onKeyPress?: import("react").KeyboardEventHandler<HTMLElements[TTag]> | undefined;
+    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLElements[TTag]> | undefined;
+    onKeyUp?: import("react").KeyboardEventHandler<HTMLElements[TTag]> | undefined;
+    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLElements[TTag]> | undefined;
+    onAbort?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onAbortCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onCanPlay?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onCanPlayCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onCanPlayThrough?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onDurationChange?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onEmptied?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onEmptiedCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onEncrypted?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onEncryptedCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onEnded?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onEndedCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onLoadedData?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onLoadedMetadata?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onLoadStart?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onLoadStartCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onPause?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onPauseCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onPlay?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onPlayCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onPlaying?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onPlayingCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onProgress?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onProgressCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onRateChange?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onRateChangeCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onSeeked?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onSeekedCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onSeeking?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onSeekingCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onStalled?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onStalledCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onSuspend?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onSuspendCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onTimeUpdate?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onVolumeChange?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onWaiting?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onWaitingCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onAuxClick?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onAuxClickCapture?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onClick?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onClickCapture?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onContextMenu?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onContextMenuCapture?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onDoubleClick?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onDrag?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragCapture?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragEnd?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragEndCapture?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragEnter?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragEnterCapture?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragExit?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragExitCapture?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragLeave?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragLeaveCapture?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragOver?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragOverCapture?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragStart?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDragStartCapture?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDrop?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onDropCapture?: import("react").DragEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseDown?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseDownCapture?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseEnter?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseLeave?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseMove?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseOut?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseOutCapture?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseOver?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseOverCapture?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseUp?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onMouseUpCapture?: import("react").MouseEventHandler<HTMLElements[TTag]> | undefined;
+    onSelect?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onSelectCapture?: import("react").ReactEventHandler<HTMLElements[TTag]> | undefined;
+    onTouchCancel?: import("react").TouchEventHandler<HTMLElements[TTag]> | undefined;
+    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLElements[TTag]> | undefined;
+    onTouchEnd?: import("react").TouchEventHandler<HTMLElements[TTag]> | undefined;
+    onTouchEndCapture?: import("react").TouchEventHandler<HTMLElements[TTag]> | undefined;
+    onTouchMove?: import("react").TouchEventHandler<HTMLElements[TTag]> | undefined;
+    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLElements[TTag]> | undefined;
+    onTouchStart?: import("react").TouchEventHandler<HTMLElements[TTag]> | undefined;
+    onTouchStartCapture?: import("react").TouchEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerDown?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerDownCapture?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerMove?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerUp?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerUpCapture?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerCancel?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerEnter?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerLeave?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerOver?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerOverCapture?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerOut?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onPointerOutCapture?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onGotPointerCapture?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onLostPointerCapture?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElements[TTag]> | undefined;
+    onScroll?: import("react").UIEventHandler<HTMLElements[TTag]> | undefined;
+    onScrollCapture?: import("react").UIEventHandler<HTMLElements[TTag]> | undefined;
+    onScrollEnd?: import("react").UIEventHandler<HTMLElements[TTag]> | undefined;
+    onScrollEndCapture?: import("react").UIEventHandler<HTMLElements[TTag]> | undefined;
+    onWheel?: import("react").WheelEventHandler<HTMLElements[TTag]> | undefined;
+    onWheelCapture?: import("react").WheelEventHandler<HTMLElements[TTag]> | undefined;
+    onAnimationStart?: import("react").AnimationEventHandler<HTMLElements[TTag]> | undefined;
+    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLElements[TTag]> | undefined;
+    onAnimationEnd?: import("react").AnimationEventHandler<HTMLElements[TTag]> | undefined;
+    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLElements[TTag]> | undefined;
+    onAnimationIteration?: import("react").AnimationEventHandler<HTMLElements[TTag]> | undefined;
+    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElements[TTag]> | undefined;
+    onToggle?: import("react").ToggleEventHandler<HTMLElements[TTag]> | undefined;
+    onBeforeToggle?: import("react").ToggleEventHandler<HTMLElements[TTag]> | undefined;
+    onTransitionCancel?: import("react").TransitionEventHandler<HTMLElements[TTag]> | undefined;
+    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLElements[TTag]> | undefined;
+    onTransitionEnd?: import("react").TransitionEventHandler<HTMLElements[TTag]> | undefined;
+    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElements[TTag]> | undefined;
+    onTransitionRun?: import("react").TransitionEventHandler<HTMLElements[TTag]> | undefined;
+    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLElements[TTag]> | undefined;
+    onTransitionStart?: import("react").TransitionEventHandler<HTMLElements[TTag]> | undefined;
+    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLElements[TTag]> | undefined;
+}, HTMLElement>;
+export declare namespace HTMLContainer {
+    type Tag = HTMLElements.Standard.Container;
+    type Props<TTag extends Tag = 'div'> = HTMLAttributes<HTMLElements[TTag]> & {
+        tag: TTag;
+    };
+}

package/dist/server/HTMLContainer.js

@@ -0,0 +1,20 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLContainer = HTMLContainer;
+const react_1 = require("react");
+// component
+function HTMLContainer(_a) {
+    var { tag, children } = _a, props = __rest(_a, ["tag", "children"]);
+    return (0, react_1.createElement)(tag, props, children);
+}

package/dist/server/Page.js

@@ -14,7 +14,7 @@ function Page({ className, children }) {
     const blocks = react_1.Children.toArray(children)
         .flatMap(element => element);
     const groupedBlocks = groupBlocks(blocks);
-    console.debug('[Page] children', { groupedBlocks, blocks, children });
+    // console.debug('[Page] children', {groupedBlocks, blocks, children})
     // render
     return ((0, jsx_runtime_1.jsx)("main", { className: (0, classnames_1.default)(className, 'nd-Page'), children: groupedBlocks.map((blockGroup, index) => {
             var _a, _b, _c;

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

@@ -2,7 +2,7 @@ import { BlockLayout, Schema, Transform } from '@nascentdigital/funnel-core';
 import { FunctionComponent, ReactElement, ReactNode } from 'react';
 import { HTMLBlockElement } from '../../types';
 import { BlockPanel, ListPanel, MessagePanel, VisualPanel } from '../panels';
-import { BlockConfig } from '../schema';
+import { BlockConfig, ListPanelLayout } from '../schema';
 export declare function Block({ className, config, layout, renderPanel, ...props }: Block.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace Block {
     type Props = HTMLBlockElement<'div'> & {
@@ -24,14 +24,11 @@ export declare namespace Block {
             className?: string;
             message?: TMessage;
             visual?: TVisual;
-            list?: {
-                schema: TList;
-                itemRenderer: TList extends Schema.ListField<infer TContent> ? (item: Schema.ListField.LinkedValue.ForItem<TContent>, itemProps: TItemProps) => ReactNode : never;
-            };
+            list?: TList;
             extendConfigSchema?: TExtend;
         };
         type Result<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
-            Component: FunctionComponent<Result.Component<TBlockId, TMessage, TVisual, TList, TExtend, TItemProps>>;
+            Component: FunctionComponent<Result.ComponentProps<TBlockId, TMessage, TVisual, TList, TExtend, TItemProps>>;
             schema: Result.Schema<TBlockId, TMessage, TVisual, TList, TExtend>;
         };
         namespace Result {
@@ -40,7 +37,7 @@ export declare namespace Block {
             } : {}));
             type ConfigSchema<TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TFields extends FieldsSchema<TMessage, TVisual, TList> = FieldsSchema<TMessage, TVisual, TList>> = BlockPanel.GetConfigSchema.Result<TFields, TMessage extends true ? 'message' : undefined, TVisual extends true ? 'visual' extends Schema.Fields.AssetFields.Keys<TFields> ? 'visual' : undefined : undefined, TList extends Schema.ListField ? 'list' extends Schema.Fields.ListFields.Keys<TFields> ? 'list' : undefined : undefined, TExtend>;
             type Schema<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config> = Schema.Block<TBlockId, FieldsSchema<TMessage, TVisual, TList>, ConfigSchema<TMessage, TVisual, TList, TExtend>>;
-            type Component<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
+            type ComponentProps<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
                 className?: string;
                 model: Schema.Block.LinkedData<Schema<TBlockId, TMessage, TVisual, TList, TExtend>>;
             } & ((TMessage extends true ? {
@@ -49,9 +46,21 @@ export declare namespace Block {
                 visualPanelProps?: VisualPanel.Props.Configuration;
             } : {}) & (TList extends Schema.ListField ? {
                 listPanelProps?: ListPanel.Props.Configuration & {
-                    itemProps: TItemProps;
+                    itemProps?: TItemProps;
                 };
+                children: TList extends Schema.ListField<infer TContent> ? (args: ComponentProps.RenderItemArgs<TContent, TItemProps>) => ReactNode : never;
             } : {})) & HTMLBlockElement<'div'>;
+            namespace ComponentProps {
+                type ForMessage = ComponentProps<string, true, undefined, undefined, {}, unknown>;
+                type ForVisual = ComponentProps<string, undefined, true, undefined, {}, unknown>;
+                type ForList = ComponentProps<string, undefined, undefined, Schema.ListField, {}, any>;
+                type RenderItemArgs<TItem extends Schema.ListField.Content, TItemProps> = {
+                    item: Schema.ListField.LinkedValue.ForItem<TItem>;
+                    itemProps: TItemProps;
+                    listLayout: ListPanelLayout;
+                    blockLayout: BlockLayout;
+                };
+            }
         }
     }
     function filterNode(node: ReactNode): node is ReactElement<Props>;

package/dist/server/blocks/Block.js

@@ -63,7 +63,7 @@ function Block(_a) {
             panelKeyMapping.visualKey = 'visual';
         }
         if (list) {
-            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), { list: list.schema });
+            fieldsSchema = Object.assign(Object.assign({}, fieldsSchema), { list });
             panelKeyMapping.listKey = 'list';
         }
         // create config schema
@@ -89,44 +89,41 @@ function Block(_a) {
         // create schema
         const { schema, panelKeyMapping } = createSchema(args);
         // component
-        const Component = (_a) => {
-            var _b, _c;
-            var { className, model } = _a, props = __rest(_a, ["className", "model"]);
+        const Component = (props) => {
+            var _a, _b;
             // skip if no model
-            if (!model) {
+            if (!props.model) {
                 console.warn('[Block] attempted to render block without model');
                 return null;
             }
-            // destructure
-            const config = (_b = model.config) !== null && _b !== void 0 ? _b : {};
-            const fields = (_c = model.fields) !== null && _c !== void 0 ? _c : {};
-            // panel layout
-            const layout = panels_1.BlockPanel.getLayout(Object.assign({ args: { fields, config } }, panelKeyMapping));
-            // FIXME: internal typing of fields, props, and config need some work
+            // layout
+            const blockLayout = panels_1.BlockPanel.getLayout(Object.assign({ args: {
+                    fields: (_a = props.model.fields) !== null && _a !== void 0 ? _a : {},
+                    config: (_b = props.model.config) !== null && _b !== void 0 ? _b : {}
+                } }, panelKeyMapping));
             const getPanel = ({ className, panel }) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                var _a, _b, _c, _d, _e, _f, _g, _h;
                 switch (panel.type) {
                     case 'message': {
-                        const messagePanelFields = fields;
-                        const _m = (_a = props === null || props === void 0 ? void 0 : props.messagePanelProps) !== null && _a !== void 0 ? _a : {}, { className: messagePanelClassname } = _m, messagePanelProps = __rest(_m, ["className"]);
-                        return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, Object.assign({ className: (0, classnames_1.default)(className, messagePanelClassname), panel: panel, title: (_b = messagePanelFields.title) === null || _b === void 0 ? void 0 : _b.value, headline: (_c = messagePanelFields.headline) === null || _c === void 0 ? void 0 : _c.value, caption: (_d = messagePanelFields.caption) === null || _d === void 0 ? void 0 : _d.value, ctas: (_e = messagePanelFields.ctas) === null || _e === void 0 ? void 0 : _e.value }, messagePanelProps)));
+                        const { model: { fields }, messagePanelProps } = props;
+                        const _j = messagePanelProps !== null && messagePanelProps !== void 0 ? messagePanelProps : {}, { className: panelClassName } = _j, panelProps = __rest(_j, ["className"]);
+                        return ((0, jsx_runtime_1.jsx)(panels_1.MessagePanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, title: (_a = fields === null || fields === void 0 ? void 0 : fields.title) === null || _a === void 0 ? void 0 : _a.value, headline: (_b = fields === null || fields === void 0 ? void 0 : fields.headline) === null || _b === void 0 ? void 0 : _b.value, caption: (_c = fields === null || fields === void 0 ? void 0 : fields.caption) === null || _c === void 0 ? void 0 : _c.value, ctas: (_d = fields === null || fields === void 0 ? void 0 : fields.ctas) === null || _d === void 0 ? void 0 : _d.value }, panelProps)));
                     }
                     case 'visual': {
-                        const visualPanelFields = fields;
-                        const visualPanelConfig = config;
-                        const _o = (_f = props === null || props === void 0 ? void 0 : props.visualPanelProps) !== null && _f !== void 0 ? _f : {}, { className: visualPanelClassname } = _o, visualPanelProps = __rest(_o, ["className"]);
-                        return ((0, jsx_runtime_1.jsx)(panels_1.VisualPanel, Object.assign({ className: (0, classnames_1.default)(className, visualPanelClassname), panel: panel, visual: (_g = visualPanelFields.visual) === null || _g === void 0 ? void 0 : _g.value, anchor: (_h = funnel_core_1.Schema.EnumField.Value.fromData(visualPanelConfig.visualAnchor)) !== null && _h !== void 0 ? _h : 'center' }, visualPanelProps)));
+                        const { model: { fields, config }, visualPanelProps } = props;
+                        const _k = visualPanelProps !== null && visualPanelProps !== void 0 ? visualPanelProps : {}, { className: panelClassName } = _k, panelProps = __rest(_k, ["className"]);
+                        return ((0, jsx_runtime_1.jsx)(panels_1.VisualPanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, visual: (_e = fields === null || fields === void 0 ? void 0 : fields.visual) === null || _e === void 0 ? void 0 : _e.value, anchor: (_f = funnel_core_1.Schema.EnumField.Value.fromData(config === null || config === void 0 ? void 0 : config.visualAnchor)) !== null && _f !== void 0 ? _f : 'center' }, panelProps)));
                     }
                     case 'list': {
-                        const listPanelFields = fields;
-                        const listPanelConfig = config;
-                        const _p = (_j = props === null || props === void 0 ? void 0 : props.listPanelProps) !== null && _j !== void 0 ? _j : {}, { className: listPanelClassname, itemProps } = _p, listPanelProps = __rest(_p, ["className", "itemProps"]);
-                        return ((0, jsx_runtime_1.jsx)(panels_1.ListPanel, Object.assign({ className: (0, classnames_1.default)(className, listPanelClassname), panel: panel, layout: ((_k = funnel_core_1.Schema.EnumField.Value.fromData(listPanelConfig.listLayout)) !== null && _k !== void 0 ? _k : 'card'), items: (_l = listPanelFields.list) === null || _l === void 0 ? void 0 : _l.value }, listPanelProps, { children: item => { var _a; return (_a = args.list) === null || _a === void 0 ? void 0 : _a.itemRenderer(item, itemProps); } })));
+                        const { model: { fields, config }, listPanelProps, children } = props;
+                        const _l = listPanelProps !== null && listPanelProps !== void 0 ? listPanelProps : {}, { className: panelClassName, itemProps } = _l, panelProps = __rest(_l, ["className", "itemProps"]);
+                        const listLayout = (_g = funnel_core_1.Schema.EnumField.Value.fromData(config === null || config === void 0 ? void 0 : config.listLayout)) !== null && _g !== void 0 ? _g : 'card';
+                        return ((0, jsx_runtime_1.jsx)(panels_1.ListPanel, Object.assign({ className: (0, classnames_1.default)(className, panelClassName), panel: panel, layout: listLayout, items: (_h = fields === null || fields === void 0 ? void 0 : fields.list) === null || _h === void 0 ? void 0 : _h.value }, panelProps, { children: item => children({ item, itemProps, listLayout, blockLayout }) })));
                     }
                 }
             };
             // render block
-            return ((0, jsx_runtime_1.jsx)(Block, { id: props.id, className: (0, classnames_1.default)(className, args.className), config: config, layout: layout, renderPanel: getPanel }));
+            return ((0, jsx_runtime_1.jsx)(Block, { id: props.id, className: (0, classnames_1.default)(props.className, args.className), config: props.model.config, layout: blockLayout, renderPanel: getPanel }));
         };
         // return
         return {

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

@@ -2,17 +2,17 @@ import { Schema } from '@nascentdigital/funnel-core';
 import { ComponentProps, JSXElementConstructor } from 'react';
 import { EmbeddedVideo } from '../../client/refs';
 import { Block } from './Block';
-export declare function MediaLayout({ EmbeddedVideoElement, listPanelProps, ...props }: MediaLayout.Props): import("react/jsx-runtime").JSX.Element;
+export declare function MediaLayout({ EmbeddedVideoElement, ...props }: MediaLayout.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace MediaLayout {
-    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-mediaLayout", true, undefined, Schema.ListField<{
+    const Component: import("react").FunctionComponent<Block.Create.Result.ComponentProps<"_nd-mediaLayout", true, undefined, Schema.ListField<{
         visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
         embedded: Schema.EmbeddedVideoField;
     }>, Schema.Block.Config, any>>, schema: Block.Create.Result.Schema<"_nd-mediaLayout", true, undefined, Schema.ListField<{
         visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
         embedded: Schema.EmbeddedVideoField;
     }>, Schema.Block.Config>;
-    type Props = ComponentProps<typeof Component> & {
+    type Model = Schema.Block.LinkedData<typeof schema>;
+    type Props = Omit<ComponentProps<typeof Component>, 'children'> & {
         EmbeddedVideoElement?: JSXElementConstructor<EmbeddedVideo.Props>;
     };
-    type Model = Schema.Block.LinkedData<typeof schema>;
 }