@byline/admin 2.5.2 → 2.6.0

package/dist/presentation/row_module.css

@@ -0,0 +1,18 @@
+:is(.row-WWZ32_, .byline-admin-row) {
+  align-items: flex-start;
+  gap: var(--spacing-16);
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.row-WWZ32_ > *, .byline-admin-row > *) {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (min-width: 40rem) {
+  :is(.row-WWZ32_, .byline-admin-row) {
+    flex-direction: row;
+  }
+}
+

package/dist/presentation/tabs.d.ts

@@ -0,0 +1,25 @@
+export interface AdminTabItem {
+    name: string;
+    label: string;
+}
+interface AdminTabsProps {
+    tabs: AdminTabItem[];
+    activeTab: string;
+    onChange: (name: string) => void;
+    /** Error counts keyed by tab name — shows a danger badge when > 0. */
+    errorCounts?: Record<string, number>;
+    className?: string;
+}
+/**
+ * Tabs navigation bar for admin form layouts.
+ *
+ * Used by FormRenderer when a CollectionAdminConfig declares a `tabs` array.
+ * Each tab is a simple button with a bottom-border active indicator.
+ * Inactive tabs show a subtle hover state. Fully dark-mode aware.
+ *
+ * Stable override handles: `.byline-admin-tabs`, `.byline-admin-tab`,
+ * `.byline-admin-tab-active`, `.byline-admin-tab-label`,
+ * `.byline-admin-tab-badge`.
+ */
+export declare const AdminTabs: ({ tabs, activeTab, onChange, errorCounts, className, }: AdminTabsProps) => import("react").JSX.Element;
+export {};

package/dist/presentation/tabs.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "@byline/i18n/react";
+import { Badge } from "@byline/ui/react";
+import classnames from "classnames";
+import tabs_module from "./tabs.module.js";
+const AdminTabs = ({ tabs, activeTab, onChange, errorCounts, className })=>{
+    const { t } = useTranslation('byline-admin');
+    return /*#__PURE__*/ jsx("div", {
+        role: "tablist",
+        "aria-label": t('presentation.formTabsAriaLabel'),
+        className: classnames('byline-admin-tabs', tabs_module.tabs, className),
+        children: tabs.map((tab)=>{
+            const isActive = tab.name === activeTab;
+            return /*#__PURE__*/ jsx("button", {
+                type: "button",
+                role: "tab",
+                "aria-selected": isActive,
+                onClick: ()=>onChange(tab.name),
+                className: classnames('byline-admin-tab', tabs_module.tab, isActive && [
+                    'byline-admin-tab-active',
+                    tabs_module["tab-active"]
+                ]),
+                children: /*#__PURE__*/ jsxs("span", {
+                    className: classnames('byline-admin-tab-label', tabs_module.label),
+                    children: [
+                        tab.label,
+                        (errorCounts?.[tab.name] ?? 0) > 0 && /*#__PURE__*/ jsx(Badge, {
+                            intent: "danger",
+                            className: classnames('byline-admin-tab-badge', tabs_module.badge),
+                            children: errorCounts?.[tab.name]
+                        })
+                    ]
+                })
+            }, tab.name);
+        })
+    });
+};
+export { AdminTabs };

package/dist/presentation/tabs.module.js

@@ -0,0 +1,10 @@
+import "./tabs_module.css";
+const tabs_module = {
+    tabs: "tabs-AUVgW2",
+    tab: "tab-Tn7xcQ",
+    "tab-active": "tab-active-cGf5N5",
+    tabActive: "tab-active-cGf5N5",
+    label: "label-PvJgbb",
+    badge: "badge-NJVOEv"
+};
+export default tabs_module;

package/dist/presentation/tabs_module.css

@@ -0,0 +1,68 @@
+:is(.tabs-AUVgW2, .byline-admin-tabs) {
+  gap: var(--spacing-16);
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  display: flex;
+}
+
+:is(.tab-Tn7xcQ, .byline-admin-tab) {
+  color: var(--gray-500);
+  font-size: 1.1rem;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  background: none;
+  border-bottom: 2px solid #0000;
+  outline: none;
+  margin-bottom: -1px;
+  padding: .625rem 0;
+  transition: color .15s, border-color .15s;
+  position: relative;
+}
+
+:is(.tab-Tn7xcQ:hover, .byline-admin-tab:hover) {
+  color: var(--gray-800);
+  border-bottom-color: var(--gray-300);
+}
+
+:is(.tab-Tn7xcQ:focus-visible, .byline-admin-tab:focus-visible) {
+  box-shadow: 0 0 0 2px var(--blue-500);
+}
+
+:is(.tab-active-cGf5N5, .byline-admin-tab-active), :is(.tab-active-cGf5N5:hover, .byline-admin-tab-active:hover) {
+  color: var(--primary-600);
+  border-bottom-color: var(--primary-400);
+}
+
+:is(.label-PvJgbb, .byline-admin-tab-label) {
+  align-items: center;
+  gap: .375rem;
+  display: flex;
+}
+
+:is(.badge-NJVOEv, .byline-admin-tab-badge) {
+  justify-content: center;
+  align-items: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 .375rem;
+  font-size: .7rem;
+  display: flex;
+}
+
+:is(:is([data-theme="dark"], .dark) .tabs-AUVgW2, :is([data-theme="dark"], .dark) .byline-admin-tabs) {
+  border-bottom-color: var(--gray-700);
+}
+
+:is(:is([data-theme="dark"], .dark) .tab-Tn7xcQ, :is([data-theme="dark"], .dark) .byline-admin-tab) {
+  color: var(--gray-400);
+}
+
+:is(:is([data-theme="dark"], .dark) .tab-Tn7xcQ:hover, :is([data-theme="dark"], .dark) .byline-admin-tab:hover) {
+  color: var(--gray-200);
+  border-bottom-color: var(--gray-600);
+}
+
+:is(:is([data-theme="dark"], .dark) .tab-active-cGf5N5, :is([data-theme="dark"], .dark) .byline-admin-tab-active), :is(:is([data-theme="dark"], .dark) .tab-active-cGf5N5:hover, :is([data-theme="dark"], .dark) .byline-admin-tab-active:hover) {
+  color: var(--primary-200);
+  border-bottom-color: var(--primary-400);
+}
+

package/dist/react.d.ts

@@ -0,0 +1,66 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Single React barrel for `@byline/admin`. Hosts every client-side
+ * surface the admin shell needs to render the document editor —
+ * presentational layout primitives, field widgets, the form runtime,
+ * the editor-shared widgets (status badge, diff modal), and the
+ * field-side services Context. Generic drag-and-drop helpers
+ * (`DraggableSortable`, `useSortable`, `moveItem`) live in
+ * `@byline/ui/react` since they embed no CMS concepts.
+ *
+ * Why one barrel: per-area subpath exports break React Context
+ * identity under bundlers that pre-bundle subpaths individually
+ * (e.g. Vite's `optimizeDeps.include`) — a provider mounted on one
+ * Context identity and a hook reading another. A single specifier
+ * eliminates the trap structurally. Tree-shaking inside the ESM
+ * bundle still drops anything unused by the host.
+ *
+ * Sibling subpaths in this package — `@byline/admin/admin-users`,
+ * `@byline/admin/admin-roles/components/*`, `@byline/admin/auth`,
+ * etc. — host per-vertical components and server-side modules;
+ * those are intentionally separate so server-only imports don't pull
+ * React.
+ */
+export * from './fields/array/array-field.js';
+export * from './fields/blocks/blocks-field.js';
+export * from './fields/checkbox/checkbox-field.js';
+export * from './fields/column-formatter.js';
+export * from './fields/date-time-formatter.js';
+export * from './fields/datetime/datetime-field.js';
+export * from './fields/draggable-context-menu.js';
+export * from './fields/field-helpers.js';
+export * from './fields/field-renderer.js';
+export * from './fields/field-services-context.js';
+export * from './fields/file/file-field.js';
+export * from './fields/file/file-upload-field.js';
+export * from './fields/group/group-field.js';
+export * from './fields/image/image-field.js';
+export * from './fields/image/image-upload-field.js';
+export * from './fields/local-date-time.js';
+export * from './fields/locale-badge.js';
+export * from './fields/numerical/numerical-field.js';
+export * from './fields/relation/relation-field.js';
+export * from './fields/relation/relation-picker.js';
+export * from './fields/select/select-field.js';
+export * from './fields/sortable-item.js';
+export * from './fields/text/text-field.js';
+export * from './fields/text-area/text-area-field.js';
+export * from './fields/use-field-change-handler.js';
+export * from './forms/document-actions.js';
+export * from './forms/form-context.js';
+export * from './forms/form-renderer.js';
+export * from './forms/navigation-guard.js';
+export * from './forms/path-widget.js';
+export * from './lib/translate-validation-error.js';
+export * from './presentation/group.js';
+export * from './presentation/row.js';
+export * from './presentation/tabs.js';
+export * from './widgets/diff-viewer/diff-modal.js';
+export * from './widgets/status-badge/status-badge.js';
+export type { BylineFieldServices, CollectionListDoc, CollectionListParams, CollectionListResponse, GetCollectionDocumentsFn, UploadedFileResult, UploadFieldFn, } from './fields/field-services-types.js';

package/dist/react.js

@@ -0,0 +1,36 @@
+export * from "./fields/array/array-field.js";
+export * from "./fields/blocks/blocks-field.js";
+export * from "./fields/checkbox/checkbox-field.js";
+export * from "./fields/column-formatter.js";
+export * from "./fields/date-time-formatter.js";
+export * from "./fields/datetime/datetime-field.js";
+export * from "./fields/draggable-context-menu.js";
+export * from "./fields/field-helpers.js";
+export * from "./fields/field-renderer.js";
+export * from "./fields/field-services-context.js";
+export * from "./fields/file/file-field.js";
+export * from "./fields/file/file-upload-field.js";
+export * from "./fields/group/group-field.js";
+export * from "./fields/image/image-field.js";
+export * from "./fields/image/image-upload-field.js";
+export * from "./fields/local-date-time.js";
+export * from "./fields/locale-badge.js";
+export * from "./fields/numerical/numerical-field.js";
+export * from "./fields/relation/relation-field.js";
+export * from "./fields/relation/relation-picker.js";
+export * from "./fields/select/select-field.js";
+export * from "./fields/sortable-item.js";
+export * from "./fields/text/text-field.js";
+export * from "./fields/text-area/text-area-field.js";
+export * from "./fields/use-field-change-handler.js";
+export * from "./forms/document-actions.js";
+export * from "./forms/form-context.js";
+export * from "./forms/form-renderer.js";
+export * from "./forms/navigation-guard.js";
+export * from "./forms/path-widget.js";
+export * from "./lib/translate-validation-error.js";
+export * from "./presentation/group.js";
+export * from "./presentation/row.js";
+export * from "./presentation/tabs.js";
+export * from "./widgets/diff-viewer/diff-modal.js";
+export * from "./widgets/status-badge/status-badge.js";

package/dist/services/admin-services-types.d.ts

@@ -50,6 +50,21 @@ export type SignInResult = unknown;
 export type UpdateAccountInput = UpdateAccountRequest;
 /** Same shape as `ChangeAccountPasswordRequest` from `@byline/admin/admin-account`. */
 export type ChangeAccountPasswordInput = ChangeAccountPasswordRequest;
+export interface SetInterfaceLocaleInput {
+    /** BCP 47 tag, or `null` to clear the preference and re-engage detection. */
+    locale: string | null;
+}
+/**
+ * Return shape for the locale-switcher service. `account` is populated
+ * when the request resolved an authenticated admin actor (the form on
+ * the account page); `null` on pre-auth surfaces (the sign-in page
+ * locale dropdown) where the cookie write is the only effect.
+ */
+export interface SetInterfaceLocaleResult {
+    ok: true;
+    locale: string | null;
+    account: AccountResponse | null;
+}
 export interface CreateAdminUserInput {
     email: string;
     password: string;
@@ -106,6 +121,7 @@ export interface BylineAdminServices {
     adminSignIn: AdminServiceCall<SignInInput, SignInResult>;
     updateAccount: AdminServiceCall<UpdateAccountInput, AccountResponse>;
     changeAccountPassword: AdminServiceCall<ChangeAccountPasswordInput, AccountResponse>;
+    setInterfaceLocale: AdminServiceCall<SetInterfaceLocaleInput, SetInterfaceLocaleResult>;
     createAdminUser: AdminServiceCall<CreateAdminUserInput, AdminUserResponse>;
     updateAdminUser: AdminServiceCall<UpdateAdminUserInput, AdminUserResponse>;
     setAdminUserPassword: AdminServiceCall<SetAdminUserPasswordInput, AdminUserResponse>;

package/dist/widgets/diff-viewer/diff-modal.d.ts

@@ -0,0 +1,22 @@
+export interface DiffModalProps {
+    isOpen: boolean;
+    onDismiss: () => void;
+    collection: string;
+    documentId: string;
+    /** The `versionId` of the historical version to compare. */
+    versionId: string;
+    /** A human-readable label for the historical version (e.g. a date string). */
+    versionLabel: string;
+    /** The already-loaded current (latest) version of the document. */
+    currentDocument: Record<string, unknown>;
+    /** Content locale to compare — undefined / 'all' shows all locales. */
+    locale?: string;
+    /**
+     * Host-provided loader for a historical document version. The diff
+     * modal is framework-neutral; callers wire this to whatever transport
+     * they use (e.g. `BylineAdminServices.getCollectionDocumentVersion` in
+     * the admin shell).
+     */
+    loadHistoricalVersion: (collection: string, documentId: string, versionId: string, locale: string | undefined) => Promise<Record<string, unknown>>;
+}
+export declare function DiffModal({ isOpen, onDismiss, collection, documentId, versionId, versionLabel, currentDocument, locale, loadHistoricalVersion, }: DiffModalProps): import("react").JSX.Element;

package/dist/widgets/diff-viewer/diff-modal.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTranslation } from "@byline/i18n/react";
+import { CloseIcon, IconButton, LoaderRing, Modal } from "@byline/ui/react";
+import classnames from "classnames";
+import react_diff_viewer_continued, { DiffMethod } from "react-diff-viewer-continued";
+import diff_modal_module from "./diff-modal.module.js";
+const STRIP_KEYS = new Set([
+    'id',
+    'versionId',
+    'path',
+    'status',
+    'createdAt',
+    'updatedAt',
+    'hasPublishedVersion',
+    '_publishedVersion'
+]);
+function stripMeta(doc) {
+    if (doc.fields && 'object' == typeof doc.fields) return doc.fields;
+    return Object.fromEntries(Object.entries(doc).filter(([k])=>!STRIP_KEYS.has(k)));
+}
+function DiffModal({ isOpen, onDismiss, collection, documentId, versionId, versionLabel, currentDocument, locale, loadHistoricalVersion }) {
+    const { t } = useTranslation('byline-admin');
+    const [historicalDoc, setHistoricalDoc] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    useEffect(()=>{
+        if (!isOpen || !versionId) return;
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        setHistoricalDoc(null);
+        loadHistoricalVersion(collection, documentId, versionId, locale).then((doc)=>{
+            if (cancelled) return;
+            setHistoricalDoc(doc);
+        }).catch((err)=>{
+            if (cancelled) return;
+            setError(err instanceof Error ? err.message : t('diffModal.loadFailed'));
+        }).finally(()=>{
+            if (!cancelled) setLoading(false);
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        isOpen,
+        collection,
+        documentId,
+        versionId,
+        locale,
+        loadHistoricalVersion,
+        t
+    ]);
+    const currentStr = currentDocument ? JSON.stringify(stripMeta(currentDocument), null, 2) : '';
+    const historicalStr = historicalDoc ? JSON.stringify(stripMeta(historicalDoc), null, 2) : '';
+    return /*#__PURE__*/ jsx(Modal, {
+        isOpen: isOpen,
+        closeOnOverlayClick: true,
+        onDismiss: onDismiss,
+        children: /*#__PURE__*/ jsxs(Modal.Container, {
+            style: {
+                width: '96vw',
+                maxWidth: '96vw',
+                height: '90vh',
+                maxHeight: '90vh',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden'
+            },
+            children: [
+                /*#__PURE__*/ jsxs(Modal.Header, {
+                    className: classnames('byline-diff-modal-header', diff_modal_module.header),
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: classnames('byline-diff-modal-title-stack', diff_modal_module["title-stack"]),
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    className: classnames('byline-diff-modal-title', diff_modal_module.title),
+                                    children: t('diffModal.title')
+                                }),
+                                /*#__PURE__*/ jsxs("p", {
+                                    className: classnames('byline-diff-modal-subtitle', diff_modal_module.subtitle),
+                                    children: [
+                                        t('diffModal.subtitleBefore'),
+                                        ' ',
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: classnames('byline-diff-modal-version', diff_modal_module.version),
+                                            children: versionLabel
+                                        }),
+                                        ' ',
+                                        t('diffModal.subtitleAfter')
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(IconButton, {
+                            onClick: onDismiss,
+                            size: "xs",
+                            "aria-label": t('diffModal.closeAriaLabel'),
+                            children: /*#__PURE__*/ jsx(CloseIcon, {
+                                width: "15px",
+                                height: "15px"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(Modal.Content, {
+                    className: classnames('byline-diff-modal-content', diff_modal_module.content),
+                    style: {
+                        minHeight: 0
+                    },
+                    children: [
+                        loading && /*#__PURE__*/ jsxs("div", {
+                            className: classnames('byline-diff-modal-state', diff_modal_module.state),
+                            children: [
+                                /*#__PURE__*/ jsx(LoaderRing, {
+                                    size: 28,
+                                    color: "#666666"
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    children: t('diffModal.loading')
+                                })
+                            ]
+                        }),
+                        error && /*#__PURE__*/ jsx("div", {
+                            className: classnames('byline-diff-modal-state', 'byline-diff-modal-error', diff_modal_module.state, diff_modal_module.error),
+                            children: error
+                        }),
+                        !loading && !error && historicalDoc && /*#__PURE__*/ jsx("div", {
+                            className: classnames('byline-diff-modal-viewer', diff_modal_module.viewer),
+                            children: /*#__PURE__*/ jsx(react_diff_viewer_continued, {
+                                oldValue: historicalStr,
+                                newValue: currentStr,
+                                splitView: true,
+                                compareMethod: DiffMethod.LINES,
+                                useDarkTheme: true,
+                                leftTitle: versionLabel,
+                                rightTitle: t('diffModal.currentVersion'),
+                                hideLineNumbers: false
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { DiffModal };

package/dist/widgets/diff-viewer/diff-modal.module.js

@@ -0,0 +1,14 @@
+import "./diff-modal_module.css";
+const diff_modal_module = {
+    header: "header-da1tQG",
+    "title-stack": "title-stack-mSxmPG",
+    titleStack: "title-stack-mSxmPG",
+    title: "title-xO708s",
+    subtitle: "subtitle-VnkAjp",
+    version: "version-sRziHD",
+    content: "content-_KyVkg",
+    state: "state-Gg9w8j",
+    error: "error-BP4kEV",
+    viewer: "viewer-hxDZsJ"
+};
+export default diff_modal_module;

package/dist/widgets/diff-viewer/diff-modal_module.css

@@ -0,0 +1,56 @@
+:is(.header-da1tQG, .byline-diff-modal-header) {
+  padding-top: var(--spacing-16);
+  margin-bottom: var(--spacing-8);
+  flex-shrink: 0;
+}
+
+:is(.title-stack-mSxmPG, .byline-diff-modal-title-stack) {
+  flex-direction: column;
+  display: flex;
+}
+
+:is(.title-xO708s, .byline-diff-modal-title) {
+  font-size: var(--font-size-xl);
+  margin: 0;
+}
+
+:is(.subtitle-VnkAjp, .byline-diff-modal-subtitle) {
+  font-size: var(--font-size-sm);
+  color: var(--gray-400);
+  margin: 0;
+}
+
+:is(.version-sRziHD, .byline-diff-modal-version) {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  background-color: var(--canvas-700);
+  padding: 0 var(--spacing-4);
+  border-radius: var(--border-radius-sm);
+}
+
+:is(.content-_KyVkg, .byline-diff-modal-content) {
+  flex: 1 1 0;
+  min-height: 0;
+  padding: 0;
+  overflow: auto;
+}
+
+:is(.state-Gg9w8j, .byline-diff-modal-state) {
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-12);
+  height: 100%;
+  color: var(--gray-400);
+  display: flex;
+}
+
+:is(.error-BP4kEV, .byline-diff-modal-error) {
+  color: var(--red-400);
+  gap: 0;
+}
+
+:is(.viewer-hxDZsJ, .byline-diff-modal-viewer) {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+}
+

package/dist/widgets/status-badge/status-badge.d.ts

@@ -0,0 +1,25 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { WorkflowStatus } from '@byline/core';
+/**
+ * Compact badge for workflow status values. Maps the three built-in
+ * statuses (draft, published, archived) to semantic intents and falls
+ * back to `noeffect` for any custom workflow statuses.
+ *
+ * When `hasPublishedVersion` is true and the current status is not
+ * `published`, a small green dot is rendered before the badge to
+ * indicate that a published version is live.
+ *
+ * Stable override handles: `.byline-status-badge-wrap`,
+ * `.byline-status-badge-dot`, `.byline-status-badge`.
+ */
+export declare const StatusBadge: ({ status, workflowStatuses, hasPublishedVersion, }: {
+    status: string;
+    workflowStatuses: WorkflowStatus[];
+    hasPublishedVersion?: boolean;
+}) => import("react").JSX.Element;

package/dist/widgets/status-badge/status-badge.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { WORKFLOW_STATUS_ARCHIVED, WORKFLOW_STATUS_DRAFT, WORKFLOW_STATUS_PUBLISHED } from "@byline/core";
+import { useTranslation } from "@byline/i18n/react";
+import { Badge } from "@byline/ui/react";
+import classnames from "classnames";
+import status_badge_module from "./status-badge.module.js";
+function statusIntent(status) {
+    switch(status){
+        case WORKFLOW_STATUS_PUBLISHED:
+            return 'success';
+        case WORKFLOW_STATUS_DRAFT:
+            return 'warning';
+        case WORKFLOW_STATUS_ARCHIVED:
+            return 'info';
+        default:
+            return 'noeffect';
+    }
+}
+const StatusBadge = ({ status, workflowStatuses, hasPublishedVersion })=>{
+    const { t } = useTranslation('byline-admin');
+    const label = workflowStatuses.find((s)=>s.name === status)?.label ?? String(status ?? '');
+    return /*#__PURE__*/ jsxs("span", {
+        className: classnames('byline-status-badge-wrap', status_badge_module.wrap),
+        children: [
+            true === hasPublishedVersion && 'published' !== status && /*#__PURE__*/ jsx("span", {
+                title: t('statusBadge.publishedVersionLive'),
+                className: classnames('byline-status-badge-dot', status_badge_module.dot)
+            }),
+            /*#__PURE__*/ jsx(Badge, {
+                intent: statusIntent(status),
+                className: classnames('byline-status-badge', status_badge_module.badge),
+                children: label
+            })
+        ]
+    });
+};
+export { StatusBadge };

package/dist/widgets/status-badge/status-badge.module.js

@@ -0,0 +1,7 @@
+import "./status-badge_module.css";
+const status_badge_module = {
+    wrap: "wrap-ZbeRnh",
+    dot: "dot-VmpmJH",
+    badge: "badge-zXEFyw"
+};
+export default status_badge_module;

package/dist/widgets/status-badge/status-badge_module.css

@@ -0,0 +1,20 @@
+:is(.wrap-ZbeRnh, .byline-status-badge-wrap) {
+  align-items: center;
+  gap: var(--spacing-4);
+  display: inline-flex;
+}
+
+:is(.dot-VmpmJH, .byline-status-badge-dot) {
+  border-radius: var(--border-radius-full);
+  background-color: var(--green-500);
+  width: .5rem;
+  height: .5rem;
+  display: inline-block;
+}
+
+:is(.badge-zXEFyw, .byline-status-badge) {
+  padding: 0 .375rem;
+  font-size: .65rem;
+  line-height: 1.5;
+}
+