@byline/host-tanstack-start 4.11.0 → 4.11.2

package/dist/admin-shell/chrome/breadcrumbs/breadcrumbs.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
 import { Dropdown, EllipsisIcon } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { Link } from "../loose-router.js";
 import breadcrumbs_module from "./breadcrumbs.module.js";
 const useIsoLayoutEffect = "u" > typeof window ? useLayoutEffect : useEffect;
@@ -94,10 +94,10 @@ function Breadcrumbs({ breadcrumbs, className, homeLabel = 'Home', homePath = '/
     return /*#__PURE__*/ jsxs("nav", {
         ref: navRef,
         "aria-label": "Breadcrumb",
-        className: classnames('byline-breadcrumbs', breadcrumbs_module.nav, className),
+        className: clsx('byline-breadcrumbs', breadcrumbs_module.nav, className),
         children: [
             /*#__PURE__*/ jsxs("ul", {
-                className: classnames('byline-breadcrumbs-list', breadcrumbs_module.list),
+                className: clsx('byline-breadcrumbs-list', breadcrumbs_module.list),
                 children: [
                     /*#__PURE__*/ jsx(HomeItem, {
                         homePath: homePath,
@@ -109,7 +109,7 @@ function Breadcrumbs({ breadcrumbs, className, homeLabel = 'Home', homePath = '/
             /*#__PURE__*/ jsxs("ul", {
                 ref: measureRef,
                 "aria-hidden": true,
-                className: classnames(breadcrumbs_module.list, breadcrumbs_module.measure),
+                className: clsx(breadcrumbs_module.list, breadcrumbs_module.measure),
                 children: [
                     /*#__PURE__*/ jsx(HomeItem, {
                         homePath: homePath,
@@ -117,13 +117,13 @@ function Breadcrumbs({ breadcrumbs, className, homeLabel = 'Home', homePath = '/
                     }),
                     breadcrumbs.map((b, i)=>renderBreadcrumb(b, i === lastIndex)),
                     /*#__PURE__*/ jsxs("li", {
-                        className: classnames('byline-breadcrumbs-item', breadcrumbs_module.item),
+                        className: clsx('byline-breadcrumbs-item', breadcrumbs_module.item),
                         children: [
                             /*#__PURE__*/ jsx(ChevronIcon, {}),
                             /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-breadcrumbs-overflow-trigger', breadcrumbs_module.overflowTrigger),
+                                className: clsx('byline-breadcrumbs-overflow-trigger', breadcrumbs_module.overflowTrigger),
                                 children: /*#__PURE__*/ jsx(EllipsisIcon, {
-                                    className: classnames('byline-breadcrumbs-overflow-icon', breadcrumbs_module.overflowIcon)
+                                    className: clsx('byline-breadcrumbs-overflow-icon', breadcrumbs_module.overflowIcon)
                                 })
                             })
                         ]
@@ -136,17 +136,17 @@ function Breadcrumbs({ breadcrumbs, className, homeLabel = 'Home', homePath = '/
 function renderBreadcrumb(breadcrumb, isLeaf) {
     return /*#__PURE__*/ jsxs("li", {
         "aria-current": isLeaf ? 'page' : void 0,
-        className: classnames('byline-breadcrumbs-item', breadcrumbs_module.item),
+        className: clsx('byline-breadcrumbs-item', breadcrumbs_module.item),
         children: [
             /*#__PURE__*/ jsx(ChevronIcon, {
                 isLeaf: isLeaf
             }),
             isLeaf ? /*#__PURE__*/ jsx("span", {
-                className: classnames('byline-breadcrumbs-leaf', breadcrumbs_module.leaf),
+                className: clsx('byline-breadcrumbs-leaf', breadcrumbs_module.leaf),
                 children: truncate(breadcrumb.label, MAX_LABEL_LENGTH, true)
             }) : /*#__PURE__*/ jsx(Link, {
                 to: breadcrumb.href,
-                className: classnames('byline-breadcrumbs-link', breadcrumbs_module.link),
+                className: clsx('byline-breadcrumbs-link', breadcrumbs_module.link),
                 children: truncate(breadcrumb.label, MAX_LABEL_LENGTH, true)
             })
         ]
@@ -154,14 +154,14 @@ function renderBreadcrumb(breadcrumb, isLeaf) {
 }
 function HomeItem({ homePath, homeLabel }) {
     return /*#__PURE__*/ jsx("li", {
-        className: classnames('byline-breadcrumbs-item', breadcrumbs_module.item),
+        className: clsx('byline-breadcrumbs-item', breadcrumbs_module.item),
         children: /*#__PURE__*/ jsxs(Link, {
             to: homePath,
-            className: classnames('byline-breadcrumbs-link', breadcrumbs_module.link),
+            className: clsx('byline-breadcrumbs-link', breadcrumbs_module.link),
             children: [
                 /*#__PURE__*/ jsx("svg", {
                     role: "presentation",
-                    className: classnames('byline-breadcrumbs-home-icon', breadcrumbs_module.homeIcon),
+                    className: clsx('byline-breadcrumbs-home-icon', breadcrumbs_module.homeIcon),
                     fill: "currentColor",
                     viewBox: "0 0 20 20",
                     xmlns: "http://www.w3.org/2000/svg",
@@ -177,7 +177,7 @@ function HomeItem({ homePath, homeLabel }) {
 function ChevronIcon({ isLeaf = false }) {
     return /*#__PURE__*/ jsx("svg", {
         role: "presentation",
-        className: classnames('byline-breadcrumbs-chevron', breadcrumbs_module.chevron, {
+        className: clsx('byline-breadcrumbs-chevron', breadcrumbs_module.chevron, {
             'byline-breadcrumbs-chevron-current': isLeaf,
             [breadcrumbs_module.chevronCurrent]: isLeaf
         }),
@@ -194,16 +194,16 @@ function ChevronIcon({ isLeaf = false }) {
 function OverflowDropdown({ items }) {
     const { t } = useTranslation('byline-admin');
     return /*#__PURE__*/ jsxs("li", {
-        className: classnames('byline-breadcrumbs-item', breadcrumbs_module.item),
+        className: clsx('byline-breadcrumbs-item', breadcrumbs_module.item),
         children: [
             /*#__PURE__*/ jsx(ChevronIcon, {}),
             /*#__PURE__*/ jsxs(Dropdown.Root, {
                 children: [
                     /*#__PURE__*/ jsx(Dropdown.Trigger, {
                         "aria-label": t('chrome.breadcrumbs.showHiddenAriaLabel'),
-                        className: classnames('byline-breadcrumbs-overflow-trigger', breadcrumbs_module.overflowTrigger),
+                        className: clsx('byline-breadcrumbs-overflow-trigger', breadcrumbs_module.overflowTrigger),
                         children: /*#__PURE__*/ jsx(EllipsisIcon, {
-                            className: classnames('byline-breadcrumbs-overflow-icon', breadcrumbs_module.overflowIcon)
+                            className: clsx('byline-breadcrumbs-overflow-icon', breadcrumbs_module.overflowIcon)
                         })
                     }),
                     /*#__PURE__*/ jsx(Dropdown.Portal, {
@@ -211,7 +211,7 @@ function OverflowDropdown({ items }) {
                             sideOffset: 5,
                             align: "start",
                             children: items.map((item)=>/*#__PURE__*/ jsx(Dropdown.Item, {
-                                    className: classnames('byline-breadcrumbs-overflow-item', breadcrumbs_module.overflowItem),
+                                    className: clsx('byline-breadcrumbs-overflow-item', breadcrumbs_module.overflowItem),
                                     render: /*#__PURE__*/ jsx(Link, {
                                         to: item.href
                                     }),

package/dist/admin-shell/chrome/content.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useAdminMenu } from "./admin-menu-provider.js";
 import content_module from "./content.module.js";
 function Content({ children }) {
@@ -24,7 +24,7 @@ function Content({ children }) {
         closeDrawer
     ]);
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-admin-content', content_module.root),
+        className: clsx('byline-admin-content', content_module.root),
         children: children
     });
 }

package/dist/admin-shell/chrome/dashboard.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { getClientConfig, getWorkflowStatuses } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Card, Container, Section } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { getAdminRoutePath } from "../../routes/admin-path.js";
 import dashboard_module from "./dashboard.module.js";
 import { Link } from "./loose-router.js";
@@ -37,14 +37,14 @@ function StatTile({ ws, count, collectionPath }) {
         search: {
             status: ws.name
         },
-        className: classnames('byline-dashboard-stat-tile', dashboard_module.statTile, modifier.global, modifier.local),
+        className: clsx('byline-dashboard-stat-tile', dashboard_module.statTile, modifier.global, modifier.local),
         children: [
             /*#__PURE__*/ jsx("span", {
-                className: classnames('byline-dashboard-stat-tile-label', dashboard_module.statTileLabel),
+                className: clsx('byline-dashboard-stat-tile-label', dashboard_module.statTileLabel),
                 children: ws.label ?? ws.name
             }),
             /*#__PURE__*/ jsx("span", {
-                className: classnames('byline-dashboard-stat-tile-number', dashboard_module.statTileNumber),
+                className: clsx('byline-dashboard-stat-tile-number', dashboard_module.statTileNumber),
                 children: count
             })
         ]
@@ -56,7 +56,7 @@ function AdminDashboard({ statsMap }) {
     return /*#__PURE__*/ jsx(Section, {
         children: /*#__PURE__*/ jsx(Container, {
             children: /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-dashboard-grid', dashboard_module.grid),
+                className: clsx('byline-dashboard-grid', dashboard_module.grid),
                 children: config.collections.map((collection)=>{
                     const stats = statsMap[collection.path];
                     const total = stats?.reduce((sum, s)=>sum + s.count, 0) ?? 0;
@@ -68,20 +68,20 @@ function AdminDashboard({ statsMap }) {
                                 params: {
                                     collection: collection.path
                                 },
-                                className: classnames('byline-dashboard-card-link', dashboard_module.cardLink),
+                                className: clsx('byline-dashboard-card-link', dashboard_module.cardLink),
                                 children: /*#__PURE__*/ jsx(Card.Header, {
                                     children: /*#__PURE__*/ jsxs("div", {
-                                        className: classnames('byline-dashboard-card-header', dashboard_module.cardHeader),
+                                        className: clsx('byline-dashboard-card-header', dashboard_module.cardHeader),
                                         children: [
                                             /*#__PURE__*/ jsxs(Card.Title, {
-                                                className: classnames('byline-dashboard-card-title', dashboard_module.cardTitle),
+                                                className: clsx('byline-dashboard-card-title', dashboard_module.cardTitle),
                                                 children: [
                                                     /*#__PURE__*/ jsx("span", {
-                                                        className: classnames('byline-dashboard-title-text', dashboard_module.titleText),
+                                                        className: clsx('byline-dashboard-title-text', dashboard_module.titleText),
                                                         children: collection.labels.plural
                                                     }),
                                                     /*#__PURE__*/ jsx("span", {
-                                                        className: classnames('muted byline-dashboard-title-meta', dashboard_module.titleMeta),
+                                                        className: clsx('muted byline-dashboard-title-meta', dashboard_module.titleMeta),
                                                         children: t('dashboard.totalCount', {
                                                             count: total
                                                         })
@@ -100,7 +100,7 @@ function AdminDashboard({ statsMap }) {
                             }),
                             /*#__PURE__*/ jsx(Card.Content, {
                                 children: void 0 !== stats ? /*#__PURE__*/ jsx("div", {
-                                    className: classnames('byline-dashboard-stat-grid', dashboard_module.statGrid),
+                                    className: clsx('byline-dashboard-stat-grid', dashboard_module.statGrid),
                                     children: workflowStatuses.map((ws)=>{
                                         const entry = stats.find((s)=>s.status === ws.name);
                                         return /*#__PURE__*/ jsx(StatTile, {
@@ -114,7 +114,7 @@ function AdminDashboard({ statsMap }) {
                                     params: {
                                         collection: collection.path
                                     },
-                                    className: classnames('byline-dashboard-empty-link', dashboard_module.emptyLink),
+                                    className: clsx('byline-dashboard-empty-link', dashboard_module.emptyLink),
                                     children: /*#__PURE__*/ jsx("p", {
                                         children: t("dashboard.collectionDescription", {
                                             label: collection.labels.plural

package/dist/admin-shell/chrome/hamburger.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "@byline/i18n/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useAdminMenu } from "./admin-menu-provider.js";
 import hamburger_module from "./hamburger.module.js";
 function Hamburger({ className, color = 'bg-white before:bg-white after:bg-white', activeBorderColor: _activeBorderColor, ...other }) {
@@ -14,7 +14,7 @@ function Hamburger({ className, color = 'bg-white before:bg-white after:bg-white
     };
     return /*#__PURE__*/ jsx("button", {
         onClick: handleClick,
-        className: classnames('byline-admin-hamburger', hamburger_module.button, `component--hamburger ${drawerOpen ? 'is_active' : ''}`, className),
+        className: clsx('byline-admin-hamburger', hamburger_module.button, `component--hamburger ${drawerOpen ? 'is_active' : ''}`, className),
         tabIndex: 0,
         "aria-label": t('chrome.menu.openAriaLabel'),
         "aria-controls": "admin-menu",
@@ -24,7 +24,7 @@ function Hamburger({ className, color = 'bg-white before:bg-white after:bg-white
             className: "box",
             "aria-hidden": "true",
             children: /*#__PURE__*/ jsx("span", {
-                className: classnames('inner', color)
+                className: clsx('inner', color)
             })
         })
     });

package/dist/admin-shell/chrome/preview-toggle.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
 import { EyeClosedIcon, EyeOpenIcon, Tooltip } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { disablePreviewModeFn, enablePreviewModeFn, getPreviewStateFn } from "../../server-fns/preview/index.js";
 function PreviewToggle({ compact }) {
     const { t } = useTranslation('byline-admin');
@@ -55,7 +55,7 @@ function PreviewToggle({ compact }) {
         children: icon
     });
     return /*#__PURE__*/ jsx("li", {
-        className: classnames('menu-item byline-preview-toggle', {
+        className: clsx('menu-item byline-preview-toggle', {
             compact,
             active: preview
         }),

package/dist/admin-shell/chrome/route-error.js

@@ -4,7 +4,7 @@ import { useRouter } from "@tanstack/react-router";
 import { BylineError, ErrorCodes, getClientConfig } from "@byline/core";
 import { I18nContext, I18nProvider, useTranslation } from "@byline/i18n/react";
 import { Alert, Button, Container, Section } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import route_error_module from "./route-error.module.js";
 const ERROR_TITLE_KEYS = {
     [ErrorCodes.NOT_FOUND]: 'routeError.titles.notFound',
@@ -48,9 +48,9 @@ function RouteErrorContent({ error, reset }) {
     const router = useRouter();
     const { t } = useTranslation('byline-admin');
     return /*#__PURE__*/ jsx(Section, {
-        className: classnames('byline-route-error', route_error_module.section),
+        className: clsx('byline-route-error', route_error_module.section),
         children: /*#__PURE__*/ jsx(Container, {
-            className: classnames('byline-route-error-container', route_error_module.container),
+            className: clsx('byline-route-error-container', route_error_module.container),
             children: /*#__PURE__*/ jsxs(Alert, {
                 intent: "danger",
                 icon: true,
@@ -58,11 +58,11 @@ function RouteErrorContent({ error, reset }) {
                 title: getErrorTitle(error, t),
                 children: [
                     /*#__PURE__*/ jsx("p", {
-                        className: classnames('byline-route-error-message', route_error_module.message),
+                        className: clsx('byline-route-error-message', route_error_module.message),
                         children: getErrorMessage(error, t)
                     }),
                     /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-route-error-actions', route_error_module.actions),
+                        className: clsx('byline-route-error-actions', route_error_module.actions),
                         children: [
                             /*#__PURE__*/ jsx(Button, {
                                 variant: "outlined",
@@ -76,7 +76,7 @@ function RouteErrorContent({ error, reset }) {
                             }),
                             /*#__PURE__*/ jsx("a", {
                                 href: "/",
-                                className: classnames('byline-route-error-link', route_error_module.link),
+                                className: clsx('byline-route-error-link', route_error_module.link),
                                 children: t('common.actions.goToHomepage')
                             })
                         ]
@@ -96,9 +96,9 @@ function RouteError(props) {
 function RouteNotFoundContent() {
     const { t } = useTranslation('byline-admin');
     return /*#__PURE__*/ jsx(Section, {
-        className: classnames('byline-route-error', route_error_module.section),
+        className: clsx('byline-route-error', route_error_module.section),
         children: /*#__PURE__*/ jsx(Container, {
-            className: classnames('byline-route-error-container', route_error_module.container),
+            className: clsx('byline-route-error-container', route_error_module.container),
             children: /*#__PURE__*/ jsxs(Alert, {
                 intent: "warning",
                 icon: true,
@@ -106,14 +106,14 @@ function RouteNotFoundContent() {
                 title: t('routeError.notFound.title'),
                 children: [
                     /*#__PURE__*/ jsx("p", {
-                        className: classnames('byline-route-error-message', route_error_module.message),
+                        className: clsx('byline-route-error-message', route_error_module.message),
                         children: t('routeError.notFound.message')
                     }),
                     /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-route-error-actions', route_error_module.actions),
+                        className: clsx('byline-route-error-actions', route_error_module.actions),
                         children: /*#__PURE__*/ jsx("a", {
                             href: "/",
-                            className: classnames('byline-route-error-link', route_error_module.link),
+                            className: clsx('byline-route-error-link', route_error_module.link),
                             children: t('common.actions.goToHomepage')
                         })
                     })
@@ -133,22 +133,22 @@ function RootError({ error, reset }) {
         return 'An unexpected error occurred. Please try again.';
     }
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-root-error', route_error_module.rootRoot),
+        className: clsx('byline-root-error', route_error_module.rootRoot),
         children: /*#__PURE__*/ jsxs("div", {
-            className: classnames('byline-root-error-inner', route_error_module.rootInner),
+            className: clsx('byline-root-error-inner', route_error_module.rootInner),
             children: [
                 /*#__PURE__*/ jsx("h1", {
-                    className: classnames('byline-root-error-title', route_error_module.rootTitle),
+                    className: clsx('byline-root-error-title', route_error_module.rootTitle),
                     children: "Something went wrong"
                 }),
                 /*#__PURE__*/ jsx("p", {
-                    className: classnames('byline-root-error-detail', route_error_module.rootDetail),
+                    className: clsx('byline-root-error-detail', route_error_module.rootDetail),
                     children: rootMessage(error)
                 }),
                 /*#__PURE__*/ jsx("button", {
                     type: "button",
                     onClick: reset,
-                    className: classnames('byline-root-error-button', route_error_module.rootButton),
+                    className: clsx('byline-root-error-button', route_error_module.rootButton),
                     children: "Try again"
                 })
             ]

package/dist/admin-shell/chrome/route-progress-bar.js

@@ -2,7 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { useRouterState } from "@tanstack/react-router";
-import classnames from "classnames";
+import clsx from "clsx";
 import route_progress_bar_module from "./route-progress-bar.module.js";
 const SHOW_DELAY_MS = 80;
 const MIN_VISIBLE_MS = 250;
@@ -72,7 +72,7 @@ function RouteProgressBar() {
         }, []);
     return /*#__PURE__*/ jsx("div", {
         "aria-hidden": "true",
-        className: classnames('byline-route-progress-bar', route_progress_bar_module.bar, {
+        className: clsx('byline-route-progress-bar', route_progress_bar_module.bar, {
             [route_progress_bar_module.barVisible]: 'visible' === phase,
             'byline-route-progress-bar-visible': 'visible' === phase,
             [route_progress_bar_module.barFinishing]: 'finishing' === phase,

package/dist/admin-shell/chrome/sign-in-page.js

@@ -3,7 +3,7 @@ import { SignInForm } from "@byline/admin/auth/components/sign-in-form";
 import { BylineAdminServicesProvider } from "@byline/admin/services";
 import { getClientConfig } from "@byline/core";
 import { I18nProvider, LanguageMenu } from "@byline/i18n/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { buildLocaleDefinitions } from "../../i18n/locale-definitions.js";
 import { bylineAdminServices } from "../../integrations/byline-admin-services.js";
 import { setInterfaceLocaleFn } from "../../server-fns/i18n/index.js";
@@ -28,14 +28,14 @@ function SignInPage({ redirectTo, activeLocale }) {
         children: /*#__PURE__*/ jsx(BylineAdminServicesProvider, {
             services: bylineAdminServices,
             children: /*#__PURE__*/ jsxs("main", {
-                className: classnames('byline-sign-in-page', sign_in_page_module.main),
+                className: clsx('byline-sign-in-page', sign_in_page_module.main),
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-sign-in-page-bar', sign_in_page_module.bar),
+                        className: clsx('byline-sign-in-page-bar', sign_in_page_module.bar),
                         children: /*#__PURE__*/ jsx(LanguageMenu, {})
                     }),
                     /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-sign-in-page-inner', sign_in_page_module.inner),
+                        className: clsx('byline-sign-in-page-inner', sign_in_page_module.inner),
                         children: /*#__PURE__*/ jsx(SignInForm, {
                             redirectTo: redirectTo,
                             homeUrl: serverURL

package/dist/admin-shell/chrome/th-sortable.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useRouterState } from "@tanstack/react-router";
 import { Table } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useNavigate } from "./loose-router.js";
 import { SortAscendingIcon, SortDescendingIcon, SortNeutralIcon } from "./sort-icons.js";
 import th_sortable_module from "./th-sortable.module.js";
@@ -38,7 +38,7 @@ function TableHeadingCellSortable({ path: _path = '/', fieldName, label, sortabl
         activeOrder,
         activeDesc
     ]);
-    const alignClasses = classnames({
+    const alignClasses = clsx({
         'byline-th-align-left': 'left' === align,
         [th_sortable_module.alignLeft]: 'left' === align,
         'byline-th-align-center': 'center' === align,
@@ -47,7 +47,7 @@ function TableHeadingCellSortable({ path: _path = '/', fieldName, label, sortabl
         [th_sortable_module.alignRight]: 'right' === align
     });
     if (false === sortable) return /*#__PURE__*/ jsx(Table.HeadingCell, {
-        className: classnames('byline-th-sortable', className, alignClasses),
+        className: clsx('byline-th-sortable', className, alignClasses),
         ...rest,
         children: label
     });
@@ -57,11 +57,11 @@ function TableHeadingCellSortable({ path: _path = '/', fieldName, label, sortabl
         return /*#__PURE__*/ jsx(SortAscendingIcon, {});
     };
     return /*#__PURE__*/ jsx(Table.HeadingCell, {
-        className: classnames('byline-th-sortable', className),
+        className: clsx('byline-th-sortable', className),
         ...rest,
         children: /*#__PURE__*/ jsxs("button", {
             type: "button",
-            className: classnames('byline-th-sortable-button', th_sortable_module.button, alignClasses, 'right' === align && [
+            className: clsx('byline-th-sortable-button', th_sortable_module.button, alignClasses, 'right' === align && [
                 th_sortable_module.alignRightAuto,
                 'byline-th-align-right-auto'
             ]),

package/dist/admin-shell/collections/api.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "@byline/i18n/react";
 import { Container, Section } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { JsonView, allExpanded, darkStyles } from "react-json-view-lite";
 import api_module from "./api.module.js";
 import { ViewMenu } from "./view-menu.js";
@@ -10,15 +10,15 @@ const ApiView = ({ collectionDefinition, initialData, locale, depth, contentLoca
     const { labels, path } = collectionDefinition;
     const { t } = useTranslation('byline-admin');
     return /*#__PURE__*/ jsx(Section, {
-        className: classnames('byline-api-section', api_module.section),
+        className: clsx('byline-api-section', api_module.section),
         children: /*#__PURE__*/ jsxs(Container, {
-            className: classnames('byline-api-container', api_module.container),
+            className: clsx('byline-api-container', api_module.container),
             children: [
                 /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-api-head', api_module.head),
+                    className: clsx('byline-api-head', api_module.head),
                     children: [
                         /*#__PURE__*/ jsx("h2", {
-                            className: classnames('byline-api-title', api_module.title),
+                            className: clsx('byline-api-title', api_module.title),
                             children: t('collections.api.title', {
                                 label: labels.singular
                             })
@@ -35,7 +35,7 @@ const ApiView = ({ collectionDefinition, initialData, locale, depth, contentLoca
                     ]
                 }),
                 /*#__PURE__*/ jsx("div", {
-                    className: classnames('byline-api-viewer', api_module.viewer),
+                    className: clsx('byline-api-viewer', api_module.viewer),
                     children: /*#__PURE__*/ jsx(JsonView, {
                         data: initialData,
                         shouldExpandNode: allExpanded,

package/dist/admin-shell/collections/document-history.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "@byline/i18n/react";
 import { Container, Section, Table } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import document_history_module from "./document-history.module.js";
 const ACTION_KEYS = {
     'document.path.changed': 'collections.documentHistory.actionPathChanged',
@@ -25,7 +25,7 @@ const DocumentHistoryView = ({ data })=>{
     if (0 === entries.length) return /*#__PURE__*/ jsx(Section, {
         children: /*#__PURE__*/ jsx(Container, {
             children: /*#__PURE__*/ jsx("p", {
-                className: classnames('byline-coll-dochistory-empty', document_history_module.empty),
+                className: clsx('byline-coll-dochistory-empty', document_history_module.empty),
                 children: t('collections.documentHistory.empty')
             })
         })
@@ -33,7 +33,7 @@ const DocumentHistoryView = ({ data })=>{
     return /*#__PURE__*/ jsx(Section, {
         children: /*#__PURE__*/ jsx(Container, {
             children: /*#__PURE__*/ jsx(Table.Container, {
-                className: classnames('byline-coll-dochistory-table-wrap', document_history_module.tableWrap),
+                className: clsx('byline-coll-dochistory-table-wrap', document_history_module.tableWrap),
                 children: /*#__PURE__*/ jsxs(Table, {
                     children: [
                         /*#__PURE__*/ jsx(Table.Header, {
@@ -67,7 +67,7 @@ const DocumentHistoryView = ({ data })=>{
                                 return /*#__PURE__*/ jsxs(Table.Row, {
                                     children: [
                                         /*#__PURE__*/ jsx(Table.Cell, {
-                                            className: classnames('byline-coll-dochistory-when', document_history_module.when),
+                                            className: clsx('byline-coll-dochistory-when', document_history_module.when),
                                             children: new Date(entry.occurredAt).toLocaleString()
                                         }),
                                         /*#__PURE__*/ jsx(Table.Cell, {
@@ -77,19 +77,19 @@ const DocumentHistoryView = ({ data })=>{
                                             children: actorLabel
                                         }),
                                         /*#__PURE__*/ jsx(Table.Cell, {
-                                            className: classnames('byline-coll-dochistory-change', document_history_module.change),
+                                            className: clsx('byline-coll-dochistory-change', document_history_module.change),
                                             children: hasChange ? /*#__PURE__*/ jsxs(Fragment, {
                                                 children: [
                                                     /*#__PURE__*/ jsx("span", {
-                                                        className: classnames('byline-coll-dochistory-before', document_history_module.before),
+                                                        className: clsx('byline-coll-dochistory-before', document_history_module.before),
                                                         children: formatAuditValue(entry.before)
                                                     }),
                                                     /*#__PURE__*/ jsx("span", {
-                                                        className: classnames('byline-coll-dochistory-arrow', document_history_module.arrow),
+                                                        className: clsx('byline-coll-dochistory-arrow', document_history_module.arrow),
                                                         children: ' → '
                                                     }),
                                                     /*#__PURE__*/ jsx("span", {
-                                                        className: classnames('byline-coll-dochistory-after', document_history_module.after),
+                                                        className: clsx('byline-coll-dochistory-after', document_history_module.after),
                                                         children: formatAuditValue(entry.after)
                                                     })
                                                 ]