@nascentdigital/funnel-editor 4.4.18

package/dist/core/client/useEditorApi.d.ts

@@ -0,0 +1,2 @@
+import { EditorApiClient } from './EditorApiClient';
+export declare function useEditorApi(): EditorApiClient;

package/dist/core/client/useEditorApi.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorApi = useEditorApi;
+const react_1 = require("react");
+const EditorApiContext_1 = require("./EditorApiContext");
+// hook
+function useEditorApi() {
+    // bind context
+    const { client } = (0, react_1.useContext)(EditorApiContext_1.EditorApiContext);
+    // return client
+    return client;
+}

package/dist/core/components/AutoSave.d.ts

@@ -0,0 +1,9 @@
+export declare function AutoSave({ className, status, lastSaved }: AutoSave.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AutoSave {
+    type Props = {
+        className?: string;
+        status: Status;
+        lastSaved?: number;
+    };
+    type Status = 'saved' | 'changed' | 'saving' | 'error';
+}

package/dist/core/components/AutoSave.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoSave = AutoSave;
+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 AutoSave({ className, status, lastSaved }) {
+    // determine status
+    let icon;
+    let label;
+    switch (status) {
+        case 'saving':
+            icon = ((0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-info-content animate-spin-slow", variant: "RefreshCw", size: "xs" }));
+            label = 'Syncing...';
+            break;
+        case 'changed':
+            icon = ((0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-info-content animate-bounce", variant: "Pencil", size: "xs" }));
+            label = 'Editing...';
+            break;
+        case 'saved':
+            icon = ((0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-success-content", variant: "CircleCheck", size: "xs" }));
+            label = lastSaved
+                ? `Auto-saved ${funnel_core_1.DateUtils.formatAge(lastSaved, 'minute').toLowerCase()}`
+                : 'Unsaved';
+            break;
+        case 'error':
+            icon = ((0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: "text-destructive-content", variant: "CircleAlert", size: "xs" }));
+            label = 'Failed to sync!';
+            break;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)("section", { className: (0, classnames_1.default)(className, 'flex items-center gap-l2'), children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "body-sm text-content-secondary", children: label })] }));
+}

package/dist/core/components/ColorModeToggle.d.ts

@@ -0,0 +1,8 @@
+import { Popup } from '@nascentdigital/funnel-ui/client';
+export declare function ColorModeToggle({ className, popupPlacement }: ColorModeToggle.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ColorModeToggle {
+    type Props = {
+        className?: string;
+        popupPlacement?: Popup.Placement;
+    };
+}

package/dist/core/components/ColorModeToggle.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorModeToggle = ColorModeToggle;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const settings_1 = require("../settings");
+const interaction_1 = require("./interaction");
+// component
+function ColorModeToggle({ className, popupPlacement = 'top' }) {
+    // bind color mode
+    const settings = (0, settings_1.useSettings)();
+    const { colorMode } = settings;
+    const icon = colorMode === 'light'
+        ? 'Sun'
+        : colorMode === 'dark'
+            ? 'Moon'
+            : 'MonitorCog';
+    const menu = (0, interaction_1.useMenuController)(colorOptions);
+    // helpers
+    const onOpenMenu = (anchor) => {
+        // set selected item to current color
+        menu.selectedItem = settings.colorMode;
+        // open menu
+        menu.open(anchor);
+    };
+    const onColorModeSelect = (colorMode) => {
+        // set mode
+        settings.colorMode = colorMode;
+        // close menu
+        menu.selectedItem = colorMode;
+        menu.close();
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { className: className, variant: "util", icon: icon, onClick: e => onOpenMenu(e.currentTarget) }), (0, jsx_runtime_1.jsx)(interaction_1.Menu, { controller: menu, placement: popupPlacement, onItemClick: onColorModeSelect })] }));
+}
+// helpers
+const colorOptions = [
+    { id: 'light', label: 'Light Mode' },
+    { id: 'dark', label: 'Dark Mode' },
+    { id: 'system', label: 'System' }
+];

package/dist/core/components/Header.d.ts

@@ -0,0 +1,26 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { PropsWithChildren } from 'react';
+export declare function Header({ className, title, breadcrumbs: breadcrumbsRaw, highlightBreadcrumb, back, onBack, disableBack, hideControls, children }: Header.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Header {
+    type Breadcrumb = Breadcrumb.Label | Breadcrumb.Link;
+    namespace Breadcrumb {
+        type Label = string;
+        type Link = {
+            label: string;
+            url: string;
+        };
+    }
+    type Props = PropsWithChildren & {
+        className?: string;
+        title?: string;
+        subtitle?: string;
+        label?: string;
+        breadcrumbs?: ReadonlyArray<Breadcrumb>;
+        highlightBreadcrumb?: boolean;
+        back: BackVariant;
+        onBack?: Callback.Void;
+        disableBack?: boolean;
+        hideControls?: boolean;
+    };
+    type BackVariant = 'back' | 'close' | 'none';
+}

package/dist/core/components/Header.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = Header;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("motion/react");
+const head_1 = __importDefault(require("next/head"));
+const link_1 = __importDefault(require("next/link"));
+const react_2 = require("react");
+const auth_1 = require("../auth");
+const ColorModeToggle_1 = require("./ColorModeToggle");
+const interaction_1 = require("./interaction");
+const transitions_1 = require("./transitions");
+const UserEditor_1 = require("./UserEditor");
+const visuals_1 = require("./visuals");
+// component
+function Header({ className, title, breadcrumbs: breadcrumbsRaw, highlightBreadcrumb = false, back, onBack = funnel_core_1.Fn.NoOp, disableBack = false, hideControls, children }) {
+    // bind props + hooks
+    const brand = funnel_core_1.AppConfig.brandConfig();
+    const breadcrumbs = breadcrumbsRaw !== null && breadcrumbsRaw !== void 0 ? breadcrumbsRaw : [];
+    const breadcrumbsEndIndex = breadcrumbs.length - 1;
+    const authenticator = (0, auth_1.useAuthenticator)();
+    const menu = (0, interaction_1.useMenuController)(menuOptions);
+    const userEditorRef = (0, react_2.useRef)(null);
+    const { user } = authenticator;
+    // helpers
+    const onMenuOpen = (e) => {
+        menu.selectedItem = undefined;
+        menu.open(e.currentTarget);
+    };
+    const onMenuClick = (id) => {
+        var _a, _b;
+        switch (id) {
+            case 'profile':
+                (_a = userEditorRef.current) === null || _a === void 0 ? void 0 : _a.edit({ user });
+                break;
+            case 'reset-password':
+                (_b = userEditorRef.current) === null || _b === void 0 ? void 0 : _b.resetPassword(user);
+                break;
+            case 'logout':
+                authenticator.logout();
+                break;
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title &&
+                (0, jsx_runtime_1.jsx)(head_1.default, { children: (0, jsx_runtime_1.jsxs)("title", { children: [title, " - ", brand.name, " CMS"] }) }), (0, jsx_runtime_1.jsxs)("nav", { className: (0, classnames_1.default)(className, 'h-48 flex items-center gap-l4 px-l8', 'label-sm text-content-primary bg-background border-b border-solid border-border-l1'), children: [back === 'none'
+                        // logo
+                        ?
+                            (0, jsx_runtime_1.jsx)("span", { className: "w-36 h-36 flex justify-center items-center", children: (0, jsx_runtime_1.jsx)(visuals_1.Logo, { size: 28 }) })
+                        // back/close
+                        :
+                            (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: back === 'back' ? 'ArrowLeft' : 'X', onClick: onBack, disabled: disableBack }), (0, jsx_runtime_1.jsx)("ul", { className: "flex-1 flex items-center gap-l5", children: breadcrumbs.map((breadcrumb, index) => (0, jsx_runtime_1.jsxs)(react_2.Fragment, { children: [index > 0 &&
+                                    (0, jsx_runtime_1.jsx)("li", { children: "/" }), (0, jsx_runtime_1.jsx)("li", { className: (0, classnames_1.default)({ 'label-sm label-strong': highlightBreadcrumb && index === breadcrumbsEndIndex }), children: typeof breadcrumb === 'string'
+                                        ?
+                                            (0, jsx_runtime_1.jsx)("span", { children: breadcrumb })
+                                        :
+                                            (0, jsx_runtime_1.jsx)(link_1.default, { href: breadcrumb.url, children: breadcrumb.label }) })] }, index)) }), (0, jsx_runtime_1.jsxs)("div", { className: "h-full flex items-center gap-l6", children: [!hideControls && children, (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { initial: false, children: !hideControls &&
+                                    (0, jsx_runtime_1.jsxs)(transitions_1.FadeIn, { className: "h-full flex items-center gap-l6", children: [(0, jsx_runtime_1.jsx)(interaction_1.AvatarButton, { user: user, onClick: onMenuOpen }), (0, jsx_runtime_1.jsx)(interaction_1.Menu, { label: user.email, title: user.username, placement: "bottom", controller: menu, onItemClick: onMenuClick }), (0, jsx_runtime_1.jsx)(ColorModeToggle_1.ColorModeToggle, {})] }) })] })] }), (0, jsx_runtime_1.jsx)(UserEditor_1.UserEditor, { ref: userEditorRef })] }));
+}
+const menuOptions = [
+    { id: 'profile', label: 'Edit Profile' },
+    { id: 'reset-password', label: 'Reset Password' },
+    { id: 'logout', label: 'Logout' }
+];

package/dist/core/components/TagEditor.d.ts

@@ -0,0 +1,8 @@
+import { ITagged } from '../domain';
+export declare function TagEditor({ className, tagged }: TagEditor.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace TagEditor {
+    type Props = {
+        className?: string;
+        tagged: ITagged;
+    };
+}

package/dist/core/components/TagEditor.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagEditor = TagEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const interaction_1 = require("./interaction");
+// component
+function TagEditor({ className, tagged }) {
+    // bind props
+    const { tagGroups, tags } = tagged;
+    // skip if the item has not tag options
+    if (tagGroups.length === 0) {
+        return null;
+    }
+    // helpers
+    // render editor
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'flex flex-col gap-l8'), children: tagGroups.map(tagGroup => (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "label-md text-content-primary mb-l6", children: tagGroup.name }), (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-wrap items-center gap-l5", children: tagGroup.map(tag => {
+                        const active = tags.has(tag);
+                        return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: active ? 'primary' : 'secondary', size: "xs", onClick: () => active
+                                    ? tagged.removeTag(tag)
+                                    : tagged.addTag(tag), children: tag.name }) }, tag.id));
+                    }) })] }, tagGroup.id)) }));
+}

package/dist/core/components/UserEditor.d.ts

@@ -0,0 +1,14 @@
+import { User } from '@nascentdigital/funnel-cms';
+import { Rect } from '@nascentdigital/funnel-core';
+export declare const UserEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<UserEditor.Ref>>;
+export declare namespace UserEditor {
+    type Props = {};
+    interface Ref {
+        edit(options: EditOptions): Promise<User | undefined>;
+        resetPassword(user: User): Promise<void>;
+    }
+    type EditOptions = {
+        user?: User;
+        anchor?: HTMLElement | Rect;
+    };
+}

package/dist/core/components/UserEditor.js

@@ -0,0 +1,241 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_cms_1 = require("@nascentdigital/funnel-cms");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const auth_1 = require("../auth");
+const client_1 = require("../client");
+const domain_1 = require("../domain");
+const hooks_1 = require("../hooks");
+const feedback_1 = require("./feedback");
+const fields_1 = require("./fields");
+const interaction_1 = require("./interaction");
+// component
+exports.UserEditor = (0, react_2.forwardRef)(function UserEditor(_, ref) {
+    // bind state + hooks
+    const [deferral, setDeferral] = (0, react_2.useState)(undefined);
+    const [result, setResult] = (0, react_2.useState)(undefined);
+    const [initialUser, setInitialUser] = (0, react_2.useState)(undefined);
+    const [anchor, setAnchor] = (0, react_2.useState)();
+    const [errorLevel, setErrorLevel] = (0, react_2.useState)('none');
+    const [error, setError] = (0, react_2.useState)();
+    const authenticator = (0, auth_1.useAuthenticator)();
+    const currentUser = authenticator.user;
+    const currentRole = currentUser.role;
+    const editorApi = (0, client_1.useEditorApi)();
+    const dialog = (0, feedback_1.useDialog)();
+    const { emailField, usernameField, passwordField, roleField, globalField } = (0, hooks_1.useTempFields)({
+        emailField: domain_1.UserValidation.EmailField,
+        usernameField: domain_1.UserValidation.UsernameField,
+        passwordField: domain_1.UserValidation.PasswordField,
+        roleField: funnel_core_1.Schema.Field.enumeration({
+            name: 'Role',
+            semantics: 'dropdown',
+            options: funnel_cms_1.Role.Id.values
+                .map(roleId => funnel_cms_1.Role.fromId(roleId))
+                .filter(role => role.compareTo(currentRole) >= 0 && role.id !== 'public')
+                .reduce((options, role) => {
+                // map role
+                options[role.id] = {
+                    name: role.name,
+                    hint: role.description
+                };
+                // keep reducing
+                return options;
+            }, {}),
+            defaultOption: 'editor'
+        }),
+        globalField: funnel_core_1.Schema.Field.boolean({
+            name: 'Multi-site',
+            description: 'Allow this user to access all sites',
+            semantics: 'toggle',
+            defaultValue: false
+        })
+    }, [currentRole]);
+    const modified = emailField.modified
+        || usernameField.modified
+        || roleField.modified
+        || globalField.modified;
+    const brands = Object.keys(funnel_core_1.AppConfig.get().brands);
+    const isCurrentUser = currentUser.id === (initialUser === null || initialUser === void 0 ? void 0 : initialUser.id);
+    // export service
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        edit: async ({ user, anchor }) => {
+            var _a;
+            // reset state
+            setInitialUser(user);
+            setAnchor(anchor);
+            setErrorLevel('none');
+            setError(undefined);
+            // reset fields
+            emailField.reset(user
+                ? funnel_core_1.Schema.TextField.Value.toData(user.email)
+                : null);
+            usernameField.reset(user
+                ? funnel_core_1.Schema.TextField.Value.toData(user.username)
+                : null);
+            passwordField.reset(null);
+            roleField.reset(funnel_core_1.Schema.EnumField.Value.toData((_a = user === null || user === void 0 ? void 0 : user.role.id) !== null && _a !== void 0 ? _a : 'editor'));
+            globalField.reset(funnel_core_1.Schema.BooleanField.Value.toData(user ? user.brands.length === 0 : false));
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        },
+        resetPassword: async (user) => {
+            // reset password
+            passwordField.reset(null);
+            // show dialog
+            await dialog.confirm({
+                title: 'Reset Password',
+                message: ((0, jsx_runtime_1.jsxs)("div", { children: ["Are you sure that you want to reset the password for ", (0, jsx_runtime_1.jsx)("code", { className: "text-warn-content", children: user.email }), "?"] })),
+                confirmLabel: 'Change Password',
+                executingLabel: 'Updating Password',
+                CustomConfirm: ({ setConfirmed }) => {
+                    // bind props
+                    const valid = passwordField.valid;
+                    // bind field for rendering
+                    (0, hooks_1.useField)(passwordField);
+                    // sync confirmation with being valid
+                    (0, react_2.useEffect)(() => {
+                        setConfirmed(valid);
+                    }, [setConfirmed, valid]);
+                    // render
+                    return ((0, jsx_runtime_1.jsx)("form", { autoComplete: "off", onSubmit: e => e.preventDefault(), children: (0, jsx_runtime_1.jsx)(fields_1.FieldErrorController, { errorLevel: "all", children: (0, jsx_runtime_1.jsx)(fields_1.FieldEditor, { field: passwordField, autoFocus: true }) }) }));
+                },
+                asyncTask: async () => {
+                    // try to update password
+                    try {
+                        // send password update
+                        await editorApi.updateUser({
+                            id: user.id,
+                            password: funnel_core_1.Schema.TextField.Value.fromData(passwordField.value)
+                        });
+                        // indicate success
+                        return { success: true };
+                    }
+                    // handle error
+                    catch (e) {
+                        return {
+                            success: false,
+                            error: funnel_core_1.IsometricErrorUtils.coerceError(e)
+                        };
+                    }
+                }
+            });
+        }
+    }), [editorApi, dialog, emailField, usernameField, passwordField, roleField, globalField]);
+    // skip if there's no deferral
+    if (!deferral) {
+        return null;
+    }
+    // helpers
+    const onValidate = async () => {
+        // determine if valid
+        const valid = emailField.valid
+            && usernameField.valid
+            && roleField.valid
+            && globalField.valid
+            && (!!initialUser || passwordField.valid);
+        // set error level
+        setErrorLevel(valid ? 'none' : 'all');
+        // return status
+        return valid;
+    };
+    const onSave = async () => {
+        var _a;
+        // extract values (or skip)
+        const email = funnel_core_1.Schema.TextField.Value.fromData(emailField.value);
+        const username = funnel_core_1.Schema.TextField.Value.fromData(usernameField.value);
+        const password = funnel_core_1.Schema.TextField.Value.fromData(passwordField.value);
+        const role = funnel_core_1.Schema.EnumField.Value.fromData(roleField.value);
+        const global = (_a = funnel_core_1.Schema.BooleanField.Value.fromData(globalField.value)) !== null && _a !== void 0 ? _a : false;
+        if (!email || !username || (!initialUser && !password) || !role) {
+            console.warn('[UserEditor/onSave] cannot save without valid fields');
+            return;
+        }
+        // clear previous errors
+        setError(undefined);
+        // try save user
+        try {
+            // update user
+            let userData;
+            if (initialUser) {
+                // build update
+                const update = {
+                    id: initialUser.id
+                };
+                if (emailField.modified) {
+                    update.email = email;
+                }
+                if (usernameField.modified) {
+                    update.username = username;
+                }
+                if (roleField.modified) {
+                    update.role = role;
+                }
+                // send update
+                userData = await editorApi.updateUser(update);
+                // update current user if that's who we changed
+                if (currentUser.id === userData.id) {
+                    authenticator.user = new funnel_cms_1.User(userData);
+                }
+            }
+            // or create a new one
+            else {
+                userData = await editorApi.createUser({
+                    email,
+                    password,
+                    username,
+                    role,
+                    blocked: false,
+                    brands: global ? [] : [funnel_core_1.AppConfig.brand()],
+                });
+            }
+            // update after closing
+            setResult(new funnel_cms_1.User(userData));
+        }
+        // handle error
+        catch (e) {
+            // set error
+            console.error('[UserEditor/onSave] failed to save user', e);
+            setError(feedback_1.ErrorMessage.getGenericError((e instanceof Error) ? e : new funnel_core_1.ServerError()));
+            // throw
+            throw e;
+        }
+    };
+    const onCancel = async () => {
+        // confirm if there are unsaved changes
+        if (modified) {
+            // confirm
+            const confirmed = await dialog.confirm({
+                title: 'Are you sure?',
+                message: 'You have unsaved changes that you\'ll lose.',
+                confirmLabel: 'Yes',
+                destructive: true
+            });
+            // skip if user cancelled
+            if (!confirmed) {
+                return;
+            }
+        }
+        // set result (triggers editor to close)
+        setResult(null);
+    };
+    const onClosed = () => {
+        // complete deferral
+        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.MiniEditor, { className: "flex flex-col gap-l8", title: initialUser ? 'Edit User' : 'New User', open: result === undefined, placement: "right", anchor: anchor, anchorOffset: 6, canSave: onValidate, disableSave: !!initialUser && !modified, renderSaveLabel: state => state === 'saving'
+            ? !initialUser ? 'Creating...' : 'Updating...'
+            : !initialUser ? 'Create' : 'Update', onSave: onSave, onClose: onCancel, onClosed: onClosed, children: [(0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: error }), !error &&
+                (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "warn", children: "Make sure to limit the new user's role to avoid any potential security risks.  You can always give someone more access later if they really need it!" }), (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)("form", { className: "flex flex-col gap-l8", autoComplete: "off", onSubmit: e => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)(fields_1.FieldErrorController, { errorLevel: errorLevel, children: [(0, jsx_runtime_1.jsx)(fields_1.FieldEditor, { field: emailField, autoFocus: true }), (0, jsx_runtime_1.jsx)(fields_1.FieldEditor, { field: usernameField }), !initialUser &&
+                                (0, jsx_runtime_1.jsx)(fields_1.FieldEditor, { field: passwordField }), (0, jsx_runtime_1.jsx)(fields_1.FieldEditor, { field: roleField, disabled: isCurrentUser }), brands.length > 1 &&
+                                (0, jsx_runtime_1.jsx)(fields_1.FieldEditor, { field: globalField })] }) }) })] }));
+});

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

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { Icon } from '../visuals';
+export declare function Badge({ className, variant, status, icon, label, onClick, ...props }: Badge.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Badge {
+    type Props = HTMLAttributes<HTMLSpanElement> & {
+        variant?: Variant;
+        status?: Status;
+        icon?: Icon.Variant;
+        label: string;
+    };
+    type Variant = 'default' | 'outlined' | 'dotted' | 'tiny' | 'outlinedTiny' | 'dottedTiny';
+    type Status = 'info' | 'draft' | 'success' | 'warn' | 'error';
+}

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

@@ -0,0 +1,61 @@
+"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.Badge = Badge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../visuals");
+// component
+function Badge(_a) {
+    var { className, variant = 'default', status = 'info', icon, label, onClick } = _a, props = __rest(_a, ["className", "variant", "status", "icon", "label", "onClick"]);
+    // fail if trying to render icon when badge is small
+    const hasIcon = !!icon;
+    if (hasIcon && variant === 'tiny') {
+        console.warn('[Badge] cannot have an icon with the "tiny" badge variant');
+        return (0, jsx_runtime_1.jsx)("span", { className: "text-destructive-content bg-destructive/tint0 p-l2", children: "BUG!" });
+    }
+    // render
+    const outlined = variant === 'outlined' || variant === 'outlinedTiny';
+    const dotted = variant === 'dotted' || variant === 'dottedTiny';
+    const tiny = variant === 'tiny' || variant === 'outlinedTiny' || variant === 'dottedTiny';
+    return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: (0, classnames_1.default)(className, 'inline-flex items-center whitespace-nowrap', getStatusClassName(status), {
+            'h-20 label-xs label-strong leading-[20px] px-l3 rounded-full': tiny,
+            'h-25 label-sm label-strong leading-[25px] rounded-full': !tiny,
+            'pl-l4 pr-l5 gap-l2': hasIcon,
+            'px-l4': !tiny && !hasIcon,
+            'border-solid border-border-l1': outlined,
+            'border border-dashed border-border-l1': dotted,
+            'border-2': (outlined || dotted) && !tiny,
+            'border': (outlined || dotted) && tiny,
+            'cursor-pointer': onClick
+        }), tabIndex: onClick ? 0 : undefined, onClick: onClick }, props, { children: [icon &&
+                (0, jsx_runtime_1.jsx)(visuals_1.Icon, { variant: icon, size: "md" }), label] })));
+}
+// helpers
+function getStatusClassName(status) {
+    switch (status) {
+        case 'draft':
+            return 'text-draft-content bg-draft/tint0 border-draft-content';
+        case 'info':
+            return 'text-info-content bg-info/tint0 border-info-content';
+        case 'success':
+            return 'text-success-content bg-success/tint0 border-success-content';
+        case 'warn':
+            return 'text-warn-content bg-warn/tint0 border-warn-content';
+        case 'error':
+            return 'text-destructive-content bg-destructive/tint0 border-destructive-content';
+    }
+}

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+export declare function CountBadge({ className, variant, count, ...props }: CountBadge.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CountBadge {
+    type Props = Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+        variant?: Variant;
+        count: number;
+    };
+    type Variant = 'primary' | 'secondary';
+}

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

@@ -0,0 +1,27 @@
+"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.CountBadge = CountBadge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+function CountBadge(_a) {
+    var { className, variant = 'primary', count } = _a, props = __rest(_a, ["className", "variant", "count"]);
+    // render
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, classnames_1.default)(className, 'min-w-18 inline-flex justify-center items-center px-l2 rounded-full', 'label-xs label-strong align-middle', {
+            'text-ix-util bg-ix-primary': variant === 'primary',
+            'text-content-primary bg-ix-util-hover/tint1': variant === 'secondary'
+        }) }, props, { children: count })));
+}

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { Illustration } from '../visuals';
+export declare function EmptyState({ className, variant, size, children }: EmptyState.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace EmptyState {
+    type Props = {
+        className?: string;
+        variant?: Variant;
+        size?: Size;
+        children?: ReactNode;
+    };
+    type Variant = Extract<Illustration.Variant, 'missing' | 'chat'>;
+    type Size = 'sm' | 'md';
+}