@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/feedback/EmptyState.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyState = EmptyState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../visuals");
+// component
+function EmptyState({ className, variant = 'missing', size = 'md', children }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'w-full h-full flex flex-col items-center justify-center', {
+            'gap-l9': size === 'md',
+            'gap-l4': size === 'sm'
+        }), children: [(0, jsx_runtime_1.jsx)(visuals_1.Illustration, { variant: variant }), typeof children === 'string'
+                ?
+                    (0, jsx_runtime_1.jsx)("h4", { className: (0, classnames_1.default)('text-content-primary text-center', {
+                            'display-xs': size === 'md',
+                            'heading-md': size === 'sm'
+                        }), children: children })
+                : children] }));
+}

package/dist/core/components/feedback/ErrorMessage.d.ts

@@ -0,0 +1,15 @@
+export declare function ErrorMessage({ className, error }: ErrorMessage.Props): import("react/jsx-runtime").JSX.Element | null;
+type JavascriptError = Error;
+export declare namespace ErrorMessage {
+    type Props = {
+        className?: string;
+        error?: Error | undefined;
+    };
+    type Error = {
+        title?: string;
+        message: string;
+    };
+    function getGenericError(e: JavascriptError): Error | undefined;
+    function coerce(e: JavascriptError): Error;
+}
+export {};

package/dist/core/components/feedback/ErrorMessage.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = ErrorMessage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../visuals");
+// component
+function ErrorMessage({ className, error }) {
+    // skip if there's no error
+    if (!error) {
+        return null;
+    }
+    // render
+    const { title, message } = error;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex items-center gap-l4 p-l6', 'bg-surface1 border border-solid border-border-l1 rounded-sm'), children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "shrink-0 text-destructive-content", variant: "CircleAlert", size: "sm" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [title &&
+                        (0, jsx_runtime_1.jsx)("h2", { className: "heading-xs text-content-primary", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary", children: message })] })] }));
+}
+(function (ErrorMessage) {
+    // generic handling
+    function getGenericError(e) {
+        // network
+        if (e instanceof funnel_core_1.OfflineError) {
+            return {
+                title: 'Check your internet connection!',
+                message: 'We\'re having trouble connecting to our server, which probably means you\'re offline.'
+            };
+        }
+        // authentication
+        else if (e instanceof funnel_core_1.NotAuthenticatedError) {
+            return {
+                title: 'Oops!',
+                message: 'It looks like you might need to login again.'
+            };
+        }
+        // authorized
+        else if (e instanceof funnel_core_1.NotAuthorizedError) {
+            return {
+                title: 'Sorry, you don\'t have access to do this!',
+                message: e.message
+            };
+        }
+        // not found
+        else if (e instanceof funnel_core_1.NotFoundError) {
+            return {
+                title: 'This item is unavailable',
+                message: 'It seems the item has been removed from our system.'
+            };
+        }
+        // invalid operation
+        else if (e instanceof funnel_core_1.InvalidOperationError) {
+            return {
+                title: 'Sorry, we couldn\'t complete the operation!',
+                message: e.message
+            };
+        }
+        // generic
+        else if (e instanceof funnel_core_1.ServerError) {
+            return {
+                title: 'Oops!',
+                message: 'Something unexpected happened on our end.  Try waiting a few minutes, then refreshing your browser and trying again.'
+            };
+        }
+        // otherwise don't handle
+        else {
+            return undefined;
+        }
+    }
+    ErrorMessage.getGenericError = getGenericError;
+    function coerce(e) {
+        var _a;
+        return (_a = getGenericError(e)) !== null && _a !== void 0 ? _a : {
+            title: 'Oops!',
+            message: 'Something strange just happened during your editing.  Please contact our team so we can investigate this issue.'
+        };
+    }
+    ErrorMessage.coerce = coerce;
+})(ErrorMessage || (exports.ErrorMessage = ErrorMessage = {}));

package/dist/core/components/feedback/Note.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+export declare function Note({ className, variant, children }: Note.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Note {
+    type Props = PropsWithChildren & {
+        className?: string;
+        variant: Variant;
+    };
+    type Variant = 'tip' | 'info' | 'success' | 'error' | 'warn';
+}

package/dist/core/components/feedback/Note.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Note = Note;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../visuals");
+// component
+function Note({ className, variant, children }) {
+    // render
+    return ((0, jsx_runtime_1.jsxs)("p", { className: (0, classnames_1.default)(className, 'flex flex-row gap-l4 items-center', 'body-sm p-l6 border border-solid rounded-md', {
+            'text-info-content bg-info/tint0 border-info-content': variant === 'tip',
+            'text-draft-content bg-draft/tint0 border-draft-content': variant === 'info',
+            'text-success-content bg-success/tint0 border-success-content': variant === 'success',
+            'text-destructive-content bg-destructive/tint0 border-destructive-content': variant === 'error',
+            'text-warn-content bg-warn/tint0 border-warn-content': variant === 'warn'
+        }), children: [(0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "shrink-0", variant: variant === 'tip'
+                    ? 'Info'
+                    : variant === 'info'
+                        ? 'CircleQuestionMark'
+                        : variant === 'success'
+                            ? 'CircleCheckBig'
+                            : variant === 'error'
+                                ? 'CircleAlert'
+                                : 'TriangleAlert' }), typeof children === 'string'
+                ?
+                    (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { markdown: children })
+                : children] }));
+}

package/dist/core/components/feedback/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from 'react';
+export declare function ProgressBar({ className, title, percent, ...props }: ProgressBar.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ProgressBar {
+    type Props = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+        title?: string;
+        percent: number;
+    };
+}

package/dist/core/components/feedback/ProgressBar.js

@@ -0,0 +1,23 @@
+"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.ProgressBar = ProgressBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("motion/react");
+// component
+function ProgressBar(_a) {
+    var { className, title, percent } = _a, props = __rest(_a, ["className", "title", "percent"]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, props, { children: [(0, jsx_runtime_1.jsx)("div", { className: "shrink-0 relative h-6 bg-content-tertiary/tint1 rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)(react_1.motion.div, { className: "absolute inset-y-0 left-0 bg-ix-primary rounded-full", animate: { width: `${percent}%` } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center label-sm text-content-primary mt-l4", children: [title &&
+                        (0, jsx_runtime_1.jsx)("span", { children: title }), (0, jsx_runtime_1.jsxs)("span", { children: [Math.round(percent), "%"] })] })] })));
+}

package/dist/core/components/feedback/SelectionDecorator.d.ts

@@ -0,0 +1,7 @@
+export declare function SelectionDecorator({ className, selected }: SelectionDecorator.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace SelectionDecorator {
+    type Props = {
+        className?: string;
+        selected?: boolean;
+    };
+}

package/dist/core/components/feedback/SelectionDecorator.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionDecorator = SelectionDecorator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../visuals");
+// component
+function SelectionDecorator({ className, selected = false }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'w-20 h-20 flex justify-center items-center interpolate', 'border border-solid rounded-full', {
+            'bg-ix-secondary border-border-l1': !selected,
+            'bg-ix-primary border-ix-primary': selected
+        }), children: (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: (0, classnames_1.default)('text-ix-secondary interpolate', {
+                'opacity-none': !selected,
+                'opacity-full': selected
+            }), variant: "Check", size: "xs" }) }));
+}

package/dist/core/components/feedback/StatusBadge.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export declare function StatusBadge({ className, color, label, variant, onClick, ...props }: StatusBadge.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace StatusBadge {
+    type Props = HTMLAttributes<HTMLSpanElement> & {
+        variant?: Variant;
+        label: string;
+    };
+    type Variant = 'default' | 'info' | 'success' | 'warn' | 'error';
+}

package/dist/core/components/feedback/StatusBadge.js

@@ -0,0 +1,31 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusBadge = StatusBadge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function StatusBadge(_a) {
+    var { className, color, label, variant = 'default', onClick } = _a, props = __rest(_a, ["className", "color", "label", "variant", "onClick"]);
+    // render
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, classnames_1.default)(className, 'h-20 inline-flex items-center px-10 whitespace-nowrap', 'label-xs label-strong uppercase', 'border border-solid rounded-full', {
+            'text-draft-content bg-draft/tint1 border-draft/tint3': variant === 'default',
+            'text-info-content bg-info/tint1 border-info/tint3': variant === 'info',
+            'text-success-content bg-success/tint1 border-success/tint3': variant === 'success',
+            'text-warn-content bg-warn/tint1 border-warn/tint3': variant === 'warn',
+            'text-destructive-content bg-destructive/tint1 border-destructive/tint3': variant === 'error',
+        }), tabIndex: onClick ? 0 : -1, onClick: onClick }, props, { children: label })));
+}

package/dist/core/components/feedback/StatusChip.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export declare function StatusChip({ className, variant, onClick, children, ...props }: StatusChip.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace StatusChip {
+    type Props = HTMLAttributes<HTMLSpanElement> & {
+        variant: Variant;
+    };
+    type Variant = 'info' | 'success' | 'warn' | 'error';
+    type Size = 'lg' | 'md';
+}

package/dist/core/components/feedback/StatusChip.js

@@ -0,0 +1,33 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusChip = StatusChip;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function StatusChip(_a) {
+    var { className, variant, onClick, children } = _a, props = __rest(_a, ["className", "variant", "onClick", "children"]);
+    // render
+    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: (0, classnames_1.default)(className, 'h-25 inline-flex justify-center items-center gap-l3 px-l4 select-none interpolate', 'border border-solid border-border-l1 rounded-full', 'label-sm text-content-primary bg-surface1 text-nowrap', 'hover:border-ix-primary-hover', {
+            'cursor-pointer': !!onClick,
+            'pointer-events-none': !onClick
+        }), onClick: onClick }, props, { children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classnames_1.default)('w-6 h-6 rounded-full shrink-0', {
+                    'bg-info-content': variant === 'info',
+                    'bg-success-content': variant === 'success',
+                    'bg-destructive-content': variant === 'error',
+                    'bg-warn-content': variant === 'warn',
+                }) }), (0, jsx_runtime_1.jsx)("span", { children: children })] })));
+}

package/dist/core/components/feedback/StatusIcon.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+export declare function StatusIcon({ className, variant, size, ...props }: StatusIcon.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace StatusIcon {
+    type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+        variant: Variant;
+        size?: Size;
+    };
+    type Variant = 'info' | 'success' | 'warn' | 'error';
+    type Size = 'lg' | 'md';
+}

package/dist/core/components/feedback/StatusIcon.js

@@ -0,0 +1,53 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusIcon = StatusIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../visuals");
+// component
+function StatusIcon(_a) {
+    var { className, variant, size = 'md' } = _a, props = __rest(_a, ["className", "variant", "size"]);
+    // render icon
+    const iconSize = size === 'lg'
+        ? { size: 32 }
+        : { size: 24 };
+    let icon;
+    let variantClassName;
+    switch (variant) {
+        case 'success':
+            icon = ((0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Check", size: iconSize }));
+            variantClassName = 'text-success-content bg-success/tint0';
+            break;
+        case 'info':
+            icon = ((0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "Info", size: iconSize }));
+            variantClassName = 'text-ix-primary bg-info/tint0';
+            break;
+        case 'warn':
+            icon = ((0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "TriangleAlert", size: iconSize }));
+            variantClassName = 'text-warn-content bg-warn/tint0';
+            break;
+        case 'error':
+            icon = ((0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: "CircleAlert", size: iconSize }));
+            variantClassName = 'text-destructive-content bg-destructive/tint0';
+            break;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, classnames_1.default)(className, variantClassName, 'inline-flex justify-center items-center rounded-full', {
+            'w-58 h-58': size === 'lg',
+            'w-44 h-44': size === 'md'
+        }) }, props, { children: icon })));
+}

package/dist/core/components/feedback/dialog/Confirm.d.ts

@@ -0,0 +1,32 @@
+import { Callback, Provider } from '@nascentdigital/funnel-core';
+import { Dispatch, FunctionComponent, ReactNode, SetStateAction } from 'react';
+import { DialogContext } from './DialogContext';
+export declare function Confirm({ options }: Confirm.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Confirm {
+    type Props = {
+        options: Options;
+    };
+    type Options = {
+        type: 'confirm';
+        title: string;
+        message?: ReactNode;
+        executingLabel?: string;
+        confirmationCode?: string;
+        destructive?: boolean;
+        confirmLabel?: string;
+        CustomConfirm?: FunctionComponent<CustomConfirmProps>;
+        callback: Callback<boolean>;
+        asyncTask?: Provider.Async<TaskResult>;
+    };
+    namespace Options {
+        function guard(options: DialogContext.Options): options is Options;
+    }
+    type CustomConfirmProps = {
+        confirmed: boolean;
+        setConfirmed: Dispatch<SetStateAction<boolean>>;
+    };
+    type TaskResult = {
+        success: boolean;
+        error?: Error;
+    };
+}

package/dist/core/components/feedback/dialog/Confirm.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Confirm = Confirm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const fields_1 = require("../../fields");
+const Button_1 = require("../../interaction/Button");
+const ErrorMessage_1 = require("../ErrorMessage");
+const StatusIcon_1 = require("../StatusIcon");
+const DialogLayout_1 = require("./DialogLayout");
+// component
+function Confirm({ options }) {
+    // bind data + state
+    const { title, message, confirmationCode, executingLabel, destructive = false, confirmLabel = 'Confirm', CustomConfirm, callback, asyncTask } = options;
+    const [executingTask, setExecutingTask] = (0, react_1.useState)(false);
+    const [confirmed, setConfirmed] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)();
+    const [errorLevel, setErrorLevel] = (0, react_1.useState)(confirmationCode ? 'all' : 'none');
+    const { confirmField } = (0, hooks_1.useTempFields)({
+        confirmField: funnel_core_1.Schema.Field.exactText({
+            name: 'Confirmation',
+            hint: 'Please confirm to proceed',
+            exact: confirmationCode !== null && confirmationCode !== void 0 ? confirmationCode : '',
+            required: true
+        })
+    });
+    const isConfirmed = CustomConfirm
+        ? confirmed
+        : !confirmationCode || confirmField.valid;
+    // helpers
+    const onSubmit = async () => {
+        // show errors
+        setErrorLevel('all');
+        // skip if not confirmed OR already executing
+        if (!isConfirmed || executingTask) {
+            return;
+        }
+        // or callback immediately if there's no task
+        else if (!asyncTask) {
+            return callback(true);
+        }
+        // otherwise, execute task before callback
+        try {
+            // clear errors
+            setError(undefined);
+            // set as executing
+            setExecutingTask(true);
+            // execute task
+            const { success, error } = await asyncTask();
+            // callback if there's success
+            if (success) {
+                callback(true);
+            }
+            // otherwise, show error
+            else {
+                console.debug('[Confirm] setting error no failed AsyncTask', error);
+                setError(ErrorMessage_1.ErrorMessage.getGenericError(error !== null && error !== void 0 ? error : new funnel_core_1.ServerError()));
+            }
+        }
+        catch (e) {
+            console.debug('[Confirm] failed to handle error AsyncTask', e);
+            setError(ErrorMessage_1.ErrorMessage.getGenericError((e instanceof Error) ? e : new funnel_core_1.ServerError()));
+        }
+        finally {
+            // clear execution
+            setExecutingTask(false);
+        }
+    };
+    // render content
+    return ((0, jsx_runtime_1.jsxs)(DialogLayout_1.DialogLayout, { className: "px-l8", containerClassName: "flex flex-col gap-l8", actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", disabled: executingTask, autoFocus: !confirmationCode, onClick: () => callback(false), children: "Cancel" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: destructive ? 'destructive' : 'primary', loading: executingTask, disabled: !isConfirmed, onClick: onSubmit, children: executingTask && executingLabel ? executingLabel : confirmLabel })] }), children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex items-center gap-l6", children: [(0, jsx_runtime_1.jsx)(StatusIcon_1.StatusIcon, { variant: destructive ? 'error' : 'warn', size: "lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-md text-content-primary", children: title }), typeof message === 'string'
+                                ?
+                                    (0, jsx_runtime_1.jsx)("span", { className: "body-sm text-content-secondary text-pretty", children: message })
+                                : message] })] }), CustomConfirm
+                ?
+                    (0, jsx_runtime_1.jsx)(CustomConfirm, { confirmed: confirmed, setConfirmed: setConfirmed })
+                : confirmationCode
+                    ?
+                        (0, jsx_runtime_1.jsx)(fields_1.FieldErrorController, { errorLevel: errorLevel, children: (0, jsx_runtime_1.jsx)(fields_1.TextField, { field: confirmField, autoFocus: true, onKeyDown: client_1.OnKey.enter(onSubmit) }) })
+                    :
+                        undefined, (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { error: error })] }));
+}
+// extension
+(function (Confirm) {
+    let Options;
+    (function (Options) {
+        function guard(options) {
+            return options.type === 'confirm';
+        }
+        Options.guard = guard;
+    })(Options = Confirm.Options || (Confirm.Options = {}));
+})(Confirm || (exports.Confirm = Confirm = {}));
+// helpers
+function createField(options) {
+    // skip if there's no need for confirmation
+    if (!options.confirmationCode) {
+        return undefined;
+    }
+    // TODO: create field
+    throw new funnel_core_1.NotImplementedError();
+}

package/dist/core/components/feedback/dialog/Custom.d.ts

@@ -0,0 +1,15 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+export declare function Custom({ options }: Custom.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Custom {
+    type Props = {
+        options: Options;
+    };
+    type Options = {
+        type: 'custom';
+        title: string;
+        message?: ReactNode;
+        content: ReactNode;
+        callback: Callback.Void;
+    };
+}

package/dist/core/components/feedback/dialog/Custom.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Custom = Custom;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DialogLayout_1 = require("./DialogLayout");
+// component
+function Custom({ options }) {
+    // render
+    const { title, message, content, callback } = options;
+    return ((0, jsx_runtime_1.jsx)(DialogLayout_1.DialogLayout, { title: title, onClose: callback, children: (0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-l8 px-l8", children: [message && typeof message === 'string'
+                    ?
+                        (0, jsx_runtime_1.jsx)("span", { className: "body-sm text-content-secondary", children: message })
+                    : message, content] }) }));
+}

package/dist/core/components/feedback/dialog/DialogContainer.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export declare function DialogContainer({ children }: DialogContainer.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogContainer {
+    type Props = {
+        children: ReactNode;
+    };
+}

package/dist/core/components/feedback/dialog/DialogContainer.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContainer = DialogContainer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const Popup_1 = require("../../interaction/Popup");
+const Confirm_1 = require("./Confirm");
+const Custom_1 = require("./Custom");
+const DialogContext_1 = require("./DialogContext");
+const Notify_1 = require("./Notify");
+// component
+function DialogContainer({ children }) {
+    // bind context
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [options, setOptions] = (0, react_1.useState)();
+    const context = (0, react_1.useMemo)(() => ({
+        eventBus: new rxjs_1.Subject()
+    }), []);
+    // monitor context updates
+    (0, react_1.useEffect)(() => {
+        // update context when options change
+        const { eventBus } = context;
+        const subscription = eventBus.subscribe(options => {
+            // hide dialog on close
+            if (!options) {
+                setOpen(false);
+            }
+            // or show with new options
+            else {
+                setOptions(options);
+                setOpen(true);
+            }
+        });
+        // close subscription on unmount
+        return () => subscription.unsubscribe();
+    }, [context]);
+    // helpers
+    const onClose = () => {
+        setOpen(false);
+    };
+    // render
+    const dismissible = !!options
+        && options.type !== 'notify'
+        && options.type !== 'confirm';
+    return ((0, jsx_runtime_1.jsxs)(DialogContext_1.DialogContext.Provider, { value: context, children: [children, (0, jsx_runtime_1.jsx)(Popup_1.Popup, { open: open, onClose: onClose, disableDismiss: !dismissible, backdrop: "glass", children: renderDialog(options) })] }));
+}
+// helpers
+function renderDialog(options) {
+    // skip if there's no content
+    if (!options) {
+        return null;
+    }
+    // render based on type
+    switch (options.type) {
+        case 'notify':
+            return (0, jsx_runtime_1.jsx)(Notify_1.Notify, { options: options });
+        case 'confirm':
+            return (0, jsx_runtime_1.jsx)(Confirm_1.Confirm, { options: options });
+        case 'custom':
+            return (0, jsx_runtime_1.jsx)(Custom_1.Custom, { options: options });
+        default:
+            return null;
+    }
+}

package/dist/core/components/feedback/dialog/DialogContext.d.ts

@@ -0,0 +1,11 @@
+import { Subject } from 'rxjs';
+import { Confirm } from './Confirm';
+import { Custom } from './Custom';
+import { Notify } from './Notify';
+export declare const DialogContext: import("react").Context<DialogContext.Data>;
+export declare namespace DialogContext {
+    type Data = {
+        eventBus: Subject<Options | undefined>;
+    };
+    type Options = Notify.Options | Confirm.Options | Custom.Options;
+}

package/dist/core/components/feedback/dialog/DialogContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContext = void 0;
+const react_1 = require("react");
+// context
+exports.DialogContext = (0, react_1.createContext)({});