@byline/admin 4.11.0 → 4.11.2

package/dist/forms/form-renderer.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getClientConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, ComboButton } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { sliceFieldAdmin } from "../fields/field-admin.js";
 import { FieldRenderer } from "../fields/field-renderer.js";
 import { useBylineFieldServices } from "../fields/field-services-context.js";
@@ -211,17 +211,17 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
         const resolvedActive = visibleTabs.length > 0 && !visibleTabs.some((t)=>t.name === requested) ? visibleTabs[0]?.name ?? requested : requested;
         const activeTab = visibleTabs.find((t)=>t.name === resolvedActive);
         return /*#__PURE__*/ jsxs("div", {
-            className: classnames('byline-form-tabset', form_renderer_module.tabset),
+            className: clsx('byline-form-tabset', form_renderer_module.tabset),
             children: [
                 visibleTabs.length > 0 && /*#__PURE__*/ jsx(AdminTabs, {
                     tabs: visibleTabs,
                     activeTab: resolvedActive,
                     onChange: (tabName)=>handleTabChange(set.name, tabName),
                     errorCounts: tabErrorCountsBySet[set.name],
-                    className: classnames('byline-form-tabset-tabs', form_renderer_module["tabset-tabs"])
+                    className: clsx('byline-form-tabset-tabs', form_renderer_module["tabset-tabs"])
                 }),
                 activeTab && /*#__PURE__*/ jsx("div", {
-                    className: classnames('byline-form-tabset-fields', form_renderer_module["tabset-fields"]),
+                    className: clsx('byline-form-tabset-fields', form_renderer_module["tabset-fields"]),
                     children: activeTab.fields.map((name)=>renderItem(name))
                 })
             ]
@@ -231,22 +231,22 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
         method: "post",
         noValidate: true,
         onSubmit: handleSubmit,
-        className: classnames('byline-form', form_renderer_module.form),
+        className: clsx('byline-form', form_renderer_module.form),
         inert: isUploading ? true : void 0,
         "aria-busy": isUploading,
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-form-heading-row', form_renderer_module["heading-row"]),
+                className: clsx('byline-form-heading-row', form_renderer_module["heading-row"]),
                 children: [
                     /*#__PURE__*/ jsx("h1", {
-                        className: classnames('byline-form-heading', form_renderer_module.heading),
+                        className: clsx('byline-form-heading', form_renderer_module.heading),
                         children: heading
                     }),
                     headerSlot
                 ]
             }),
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-form-status-bar', form_renderer_module["status-bar"]),
+                className: clsx('byline-form-status-bar', form_renderer_module["status-bar"]),
                 children: [
                     /*#__PURE__*/ jsx(FormStatusDisplay, {
                         initialData: initialData,
@@ -255,10 +255,10 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
                         onUnpublish: onUnpublish
                     }),
                     /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-form-actions', form_renderer_module.actions),
+                        className: clsx('byline-form-actions', form_renderer_module.actions),
                         children: [
                             /*#__PURE__*/ jsx(Button, {
-                                className: classnames('byline-form-actions-button', form_renderer_module["actions-button"]),
+                                className: clsx('byline-form-actions-button', form_renderer_module["actions-button"]),
                                 size: "sm",
                                 intent: "noeffect",
                                 type: "button",
@@ -266,17 +266,17 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
                                 children: false === hasChanges ? t('common.actions.close') : t('common.actions.cancel')
                             }),
                             /*#__PURE__*/ jsx(Button, {
-                                className: classnames('byline-form-actions-button', form_renderer_module["actions-button"]),
+                                className: clsx('byline-form-actions-button', form_renderer_module["actions-button"]),
                                 size: "sm",
                                 type: "submit",
                                 disabled: false === hasChanges || isUploading,
                                 children: isUploading ? t('forms.actions.uploading') : t('common.actions.save')
                             }),
                             primaryStatus && onStatusChange && /*#__PURE__*/ jsx("div", {
-                                className: classnames('byline-form-actions-status-wrap', form_renderer_module["actions-status-wrap"]),
+                                className: clsx('byline-form-actions-status-wrap', form_renderer_module["actions-status-wrap"]),
                                 children: /*#__PURE__*/ jsx(ComboButton, {
-                                    buttonClassName: classnames('byline-form-actions-combo-button', form_renderer_module["actions-combo-button"]),
-                                    triggerClassName: classnames('byline-form-actions-combo-trigger', form_renderer_module["actions-combo-trigger"]),
+                                    buttonClassName: clsx('byline-form-actions-combo-button', form_renderer_module["actions-combo-button"]),
+                                    triggerClassName: clsx('byline-form-actions-combo-trigger', form_renderer_module["actions-combo-trigger"]),
                                     options: secondaryStatuses.map((s)=>({
                                             label: isTerminal ? t('forms.actions.revertTo', {
                                                 label: s.label ?? s.name
@@ -348,14 +348,14 @@ const FormContent = ({ mode, fields, onSubmit, onCancel, onStatusChange, onUnpub
                 ]
             }),
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-form-layout', form_renderer_module.layout),
+                className: clsx('byline-form-layout', form_renderer_module.layout),
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-form-content', form_renderer_module.content),
+                        className: clsx('byline-form-content', form_renderer_module.content),
                         children: layout.main.map((name)=>renderItem(name))
                     }),
                     /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-form-sidebar', form_renderer_module.sidebar),
+                        className: clsx('byline-form-sidebar', form_renderer_module.sidebar),
                         children: [
                             (useAsPath || 'string' == typeof initialData?.path && initialData.path.length > 0) && /*#__PURE__*/ jsx(PathWidget, {
                                 useAsPath: useAsPath,

package/dist/forms/form-status-display.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "@byline/i18n/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { LocalDateTime } from "../fields/local-date-time.js";
 import form_renderer_module from "./form-renderer.module.js";
 const FormStatusDisplay = ({ initialData, workflowStatuses, publishedVersion, onUnpublish })=>{
@@ -10,33 +10,33 @@ const FormStatusDisplay = ({ initialData, workflowStatuses, publishedVersion, on
     const statusLabel = workflowStatuses?.find((s)=>s.name === statusCode)?.label ?? statusCode;
     const showStatusCell = (workflowStatuses?.length ?? 0) > 1;
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-form-status', form_renderer_module.status),
+        className: clsx('byline-form-status', form_renderer_module.status),
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-form-status-meta', form_renderer_module["status-meta"]),
+                className: clsx('byline-form-status-meta', form_renderer_module["status-meta"]),
                 children: [
                     showStatusCell && /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-form-status-cell', form_renderer_module["status-cell"]),
+                        className: clsx('byline-form-status-cell', form_renderer_module["status-cell"]),
                         children: [
                             /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-form-status-muted', form_renderer_module["status-muted"]),
+                                className: clsx('byline-form-status-muted', form_renderer_module["status-muted"]),
                                 children: t('forms.status.label')
                             }),
                             /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-form-status-trunc', form_renderer_module["status-trunc"]),
+                                className: clsx('byline-form-status-trunc', form_renderer_module["status-trunc"]),
                                 children: statusLabel
                             })
                         ]
                     }),
                     initialData?.updatedAt != null && /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-form-status-cell', form_renderer_module["status-cell"]),
+                        className: clsx('byline-form-status-cell', form_renderer_module["status-cell"]),
                         children: [
                             /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-form-status-muted', form_renderer_module["status-muted"]),
+                                className: clsx('byline-form-status-muted', form_renderer_module["status-muted"]),
                                 children: t('forms.status.lastModified')
                             }),
                             /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-form-status-trunc', form_renderer_module["status-trunc"]),
+                                className: clsx('byline-form-status-trunc', form_renderer_module["status-trunc"]),
                                 children: /*#__PURE__*/ jsx(LocalDateTime, {
                                     value: initialData.updatedAt
                                 })
@@ -44,14 +44,14 @@ const FormStatusDisplay = ({ initialData, workflowStatuses, publishedVersion, on
                         ]
                     }),
                     initialData?.createdAt != null && /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-form-status-cell', form_renderer_module["status-cell"]),
+                        className: clsx('byline-form-status-cell', form_renderer_module["status-cell"]),
                         children: [
                             /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-form-status-muted', form_renderer_module["status-muted"]),
+                                className: clsx('byline-form-status-muted', form_renderer_module["status-muted"]),
                                 children: t('forms.status.created')
                             }),
                             /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-form-status-trunc', form_renderer_module["status-trunc"]),
+                                className: clsx('byline-form-status-trunc', form_renderer_module["status-trunc"]),
                                 children: /*#__PURE__*/ jsx(LocalDateTime, {
                                     value: initialData.createdAt
                                 })
@@ -61,10 +61,10 @@ const FormStatusDisplay = ({ initialData, workflowStatuses, publishedVersion, on
                 ]
             }),
             null != publishedVersion && /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-form-status-published', form_renderer_module["status-published"]),
+                className: clsx('byline-form-status-published', form_renderer_module["status-published"]),
                 children: [
                     /*#__PURE__*/ jsxs("span", {
-                        className: classnames('byline-form-status-muted', form_renderer_module["status-muted"]),
+                        className: clsx('byline-form-status-muted', form_renderer_module["status-muted"]),
                         children: [
                             t('forms.status.publishedLive'),
                             ' ',
@@ -81,7 +81,7 @@ const FormStatusDisplay = ({ initialData, workflowStatuses, publishedVersion, on
                             /*#__PURE__*/ jsx("button", {
                                 type: "button",
                                 onClick: onUnpublish,
-                                className: classnames('byline-form-status-unpublish', form_renderer_module["status-unpublish"]),
+                                className: clsx('byline-form-status-unpublish', form_renderer_module["status-unpublish"]),
                                 children: t('common.actions.unpublish')
                             })
                         ]

package/dist/forms/path-widget.js

@@ -4,7 +4,7 @@ import { useCallback, useMemo } from "react";
 import { slugify } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Input, Label } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useFieldValue, useFormContext, useSystemPath } from "./form-context.js";
 import path_widget_module from "./path-widget.module.js";
 function coerceToString(value) {
@@ -79,7 +79,7 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, activeLocale, mo
         className: "byline-form-path",
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-form-path-header', path_widget_module.header),
+                className: clsx('byline-form-path-header', path_widget_module.header),
                 children: [
                     /*#__PURE__*/ jsx(Label, {
                         id: "system-path-label",
@@ -89,7 +89,7 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, activeLocale, mo
                     showRegenerate && /*#__PURE__*/ jsx("button", {
                         type: "button",
                         onClick: handleRegenerate,
-                        className: classnames('byline-form-path-regenerate', path_widget_module.regenerate),
+                        className: clsx('byline-form-path-regenerate', path_widget_module.regenerate),
                         "aria-label": t('pathWidget.regenerateAriaLabel', {
                             field: useAsPath
                         }),
@@ -111,7 +111,7 @@ const PathWidget = ({ useAsPath, collectionPath, defaultLocale, activeLocale, mo
             }),
             /*#__PURE__*/ jsx("span", {
                 id: "system-path-description",
-                className: classnames('byline-form-path-sr-only', path_widget_module["sr-only"]),
+                className: clsx('byline-form-path-sr-only', path_widget_module["sr-only"]),
                 children: srDescription
             })
         ]

package/dist/forms/tree-placement-widget.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import { getCollectionDefinition } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Button } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useBylineFieldServices } from "../fields/field-services-context.js";
 import { RelationPicker } from "../fields/relation/relation-picker.js";
 import tree_placement_widget_module from "./tree-placement-widget.module.js";
@@ -101,14 +101,14 @@ const TreePlacementWidget = ({ collectionPath, documentId, useAsTitle })=>{
     ]);
     if (!treeServicesReady) return null;
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-form-tree', tree_placement_widget_module.tree),
+        className: clsx('byline-form-tree', tree_placement_widget_module.tree),
         children: [
             /*#__PURE__*/ jsx("span", {
-                className: classnames('byline-form-tree-heading', tree_placement_widget_module.heading),
+                className: clsx('byline-form-tree-heading', tree_placement_widget_module.heading),
                 children: t('treeWidget.label')
             }),
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-form-tree-current', tree_placement_widget_module.current),
+                className: clsx('byline-form-tree-current', tree_placement_widget_module.current),
                 children: [
                     /*#__PURE__*/ jsx("span", {
                         className: tree_placement_widget_module.parentLabel,
@@ -119,16 +119,16 @@ const TreePlacementWidget = ({ collectionPath, documentId, useAsTitle })=>{
                         className: tree_placement_widget_module.parentValue,
                         children: parent.title
                     }) : /*#__PURE__*/ jsx("span", {
-                        className: classnames(tree_placement_widget_module.parentValue, tree_placement_widget_module.root),
+                        className: clsx(tree_placement_widget_module.parentValue, tree_placement_widget_module.root),
                         children: t('treeWidget.rootOption')
                     }) : /*#__PURE__*/ jsx("span", {
-                        className: classnames(tree_placement_widget_module.parentValue, tree_placement_widget_module.root),
+                        className: clsx(tree_placement_widget_module.parentValue, tree_placement_widget_module.root),
                         children: t('treeWidget.notInTree')
                     })
                 ]
             }),
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-form-tree-actions', tree_placement_widget_module.actions),
+                className: clsx('byline-form-tree-actions', tree_placement_widget_module.actions),
                 children: [
                     /*#__PURE__*/ jsx(Button, {
                         type: "button",
@@ -141,13 +141,13 @@ const TreePlacementWidget = ({ collectionPath, documentId, useAsTitle })=>{
                     }),
                     placed ? null != parent && /*#__PURE__*/ jsx("button", {
                         type: "button",
-                        className: classnames('byline-form-tree-link', tree_placement_widget_module.link),
+                        className: clsx('byline-form-tree-link', tree_placement_widget_module.link),
                         disabled: busy,
                         onClick: ()=>place(null, null),
                         children: t('treeWidget.makeRoot')
                     }) : /*#__PURE__*/ jsx("button", {
                         type: "button",
-                        className: classnames('byline-form-tree-link', tree_placement_widget_module.link),
+                        className: clsx('byline-form-tree-link', tree_placement_widget_module.link),
                         disabled: loading || busy,
                         onClick: ()=>place(null, null),
                         children: t('treeWidget.addToTree')
@@ -155,7 +155,7 @@ const TreePlacementWidget = ({ collectionPath, documentId, useAsTitle })=>{
                 ]
             }),
             null != error && /*#__PURE__*/ jsx("p", {
-                className: classnames('byline-form-tree-error', tree_placement_widget_module.error),
+                className: clsx('byline-form-tree-error', tree_placement_widget_module.error),
                 children: error
             }),
             null != targetDefinition && /*#__PURE__*/ jsx(RelationPicker, {

package/dist/modules/admin-account/components/change-password.js

@@ -5,7 +5,7 @@ import { revalidateLogic, useForm } from "@tanstack/react-form-start";
 import { passwordSchema } from "@byline/core/validation";
 import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, InputPassword, LoaderEllipsis } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { z } from "zod";
 import { translateValidationError } from "../../../lib/translate-validation-error.js";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
@@ -85,7 +85,7 @@ function ChangeAccountPassword({ account, onClose, onSuccess }) {
         }
     });
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-account-change-password-wrap', change_password_module.wrap),
+        className: clsx('byline-account-change-password-wrap', change_password_module.wrap),
         children: /*#__PURE__*/ jsxs("form", {
             method: "post",
             noValidate: true,
@@ -94,7 +94,7 @@ function ChangeAccountPassword({ account, onClose, onSuccess }) {
                 event.stopPropagation();
                 form.handleSubmit();
             },
-            className: classnames('byline-account-change-password-form', change_password_module.form),
+            className: clsx('byline-account-change-password-form', change_password_module.form),
             children: [
                 formError ? /*#__PURE__*/ jsx(Alert, {
                     intent: "danger",
@@ -154,14 +154,14 @@ function ChangeAccountPassword({ account, onClose, onSuccess }) {
                         })
                 }),
                 /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-account-change-password-actions', change_password_module.actions),
+                    className: clsx('byline-account-change-password-actions', change_password_module.actions),
                     children: [
                         /*#__PURE__*/ jsx(Button, {
                             type: "button",
                             intent: "secondary",
                             size: "sm",
                             onClick: onClose,
-                            className: classnames('byline-account-change-password-action', change_password_module.action),
+                            className: clsx('byline-account-change-password-action', change_password_module.action),
                             children: successMessage ? t('common.actions.close') : t('common.actions.cancel')
                         }),
                         /*#__PURE__*/ jsx(form.Subscribe, {
@@ -175,7 +175,7 @@ function ChangeAccountPassword({ account, onClose, onSuccess }) {
                                     intent: "primary",
                                     type: "submit",
                                     disabled: !canSubmit || isSubmitting,
-                                    className: classnames('byline-account-change-password-action', change_password_module.action),
+                                    className: clsx('byline-account-change-password-action', change_password_module.action),
                                     children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                                         size: 42
                                     }) : t('common.actions.save')

package/dist/modules/admin-account/components/container.js

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { LocalDateTime } from "@byline/admin/react";
 import { useTranslation } from "@byline/i18n/react";
 import { CloseIcon, Drawer, EditIcon, IconButton } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { ChangeAccountPassword } from "./change-password.js";
 import container_module from "./container.module.js";
 import { Preferences } from "./preferences.js";
@@ -18,10 +18,10 @@ const panelComponents = {
 };
 function ContainerSection({ title, onEdit, editAriaLabel, children }) {
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-account-section', container_module.section),
+        className: clsx('byline-account-section', container_module.section),
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-account-section-head', container_module["section-head"]),
+                className: clsx('byline-account-section-head', container_module["section-head"]),
                 children: [
                     /*#__PURE__*/ jsx("h2", {
                         children: title
@@ -72,10 +72,10 @@ function AccountSelfContainer({ account }) {
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-account-grid', container_module.grid),
+                className: clsx('byline-account-grid', container_module.grid),
                 children: [
                     /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-account-column', container_module.column),
+                        className: clsx('byline-account-column', container_module.column),
                         children: [
                             /*#__PURE__*/ jsxs(ContainerSection, {
                                 title: t('account.sections.profile'),
@@ -83,7 +83,7 @@ function AccountSelfContainer({ account }) {
                                 editAriaLabel: editAriaFor(t('account.sections.profile')),
                                 children: [
                                     /*#__PURE__*/ jsxs("p", {
-                                        className: classnames('byline-account-line', container_module.line),
+                                        className: clsx('byline-account-line', container_module.line),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
@@ -94,7 +94,7 @@ function AccountSelfContainer({ account }) {
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("p", {
-                                        className: classnames('byline-account-line', container_module.line),
+                                        className: clsx('byline-account-line', container_module.line),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
@@ -102,13 +102,13 @@ function AccountSelfContainer({ account }) {
                                             }),
                                             ' ',
                                             currentAccount.given_name ?? /*#__PURE__*/ jsx("span", {
-                                                className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                                className: clsx('muted', 'byline-account-not-set', container_module["not-set"]),
                                                 children: t('common.notSet')
                                             })
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("p", {
-                                        className: classnames('byline-account-line', container_module.line),
+                                        className: clsx('byline-account-line', container_module.line),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
@@ -116,13 +116,13 @@ function AccountSelfContainer({ account }) {
                                             }),
                                             ' ',
                                             currentAccount.family_name ?? /*#__PURE__*/ jsx("span", {
-                                                className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                                className: clsx('muted', 'byline-account-not-set', container_module["not-set"]),
                                                 children: t('common.notSet')
                                             })
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("p", {
-                                        className: classnames('byline-account-line', container_module.line),
+                                        className: clsx('byline-account-line', container_module.line),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
@@ -130,13 +130,13 @@ function AccountSelfContainer({ account }) {
                                             }),
                                             ' ',
                                             currentAccount.username ?? /*#__PURE__*/ jsx("span", {
-                                                className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                                className: clsx('muted', 'byline-account-not-set', container_module["not-set"]),
                                                 children: t('common.notSet')
                                             })
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("div", {
-                                        className: classnames('muted', 'byline-account-meta', container_module.meta),
+                                        className: clsx('muted', 'byline-account-meta', container_module.meta),
                                         children: [
                                             /*#__PURE__*/ jsxs("p", {
                                                 children: [
@@ -167,7 +167,7 @@ function AccountSelfContainer({ account }) {
                                                 ]
                                             }),
                                             /*#__PURE__*/ jsxs("p", {
-                                                className: classnames('byline-account-line', container_module.line),
+                                                className: clsx('byline-account-line', container_module.line),
                                                 children: [
                                                     /*#__PURE__*/ jsxs("span", {
                                                         className: "font-bold",
@@ -192,7 +192,7 @@ function AccountSelfContainer({ account }) {
                                 editAriaLabel: editAriaFor(t('account.sections.preferences')),
                                 children: [
                                     /*#__PURE__*/ jsxs("p", {
-                                        className: classnames('byline-account-line', container_module.line),
+                                        className: clsx('byline-account-line', container_module.line),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
@@ -200,13 +200,13 @@ function AccountSelfContainer({ account }) {
                                             }),
                                             ' ',
                                             currentAccount.preferred_locale ?? /*#__PURE__*/ jsx("span", {
-                                                className: classnames('muted', 'byline-account-not-set', container_module["not-set"]),
+                                                className: clsx('muted', 'byline-account-not-set', container_module["not-set"]),
                                                 children: t('language.useBrowserDefault')
                                             })
                                         ]
                                     }),
                                     /*#__PURE__*/ jsx("p", {
-                                        className: classnames('muted', 'byline-account-status-help', container_module["status-help"]),
+                                        className: clsx('muted', 'byline-account-status-help', container_module["status-help"]),
                                         children: t('account.preferences.help')
                                     })
                                 ]
@@ -214,14 +214,14 @@ function AccountSelfContainer({ account }) {
                         ]
                     }),
                     /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-account-column', container_module.column),
+                        className: clsx('byline-account-column', container_module.column),
                         children: [
                             /*#__PURE__*/ jsx(ContainerSection, {
                                 title: t('account.sections.password'),
                                 onEdit: openDrawer('change_password'),
                                 editAriaLabel: editAriaFor(t('account.sections.password')),
                                 children: /*#__PURE__*/ jsx("p", {
-                                    className: classnames('byline-account-line', container_module.line),
+                                    className: clsx('byline-account-line', container_module.line),
                                     children: t('account.password.intro')
                                 })
                             }),
@@ -233,7 +233,7 @@ function AccountSelfContainer({ account }) {
                                 title: t('account.sections.status'),
                                 children: [
                                     /*#__PURE__*/ jsxs("p", {
-                                        className: classnames('byline-account-line', container_module.line),
+                                        className: clsx('byline-account-line', container_module.line),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
@@ -244,7 +244,7 @@ function AccountSelfContainer({ account }) {
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("p", {
-                                        className: classnames('byline-account-line', container_module.line),
+                                        className: clsx('byline-account-line', container_module.line),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
@@ -255,7 +255,7 @@ function AccountSelfContainer({ account }) {
                                         ]
                                     }),
                                     /*#__PURE__*/ jsxs("p", {
-                                        className: classnames('byline-account-line', container_module.line),
+                                        className: clsx('byline-account-line', container_module.line),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
                                                 className: "muted",
@@ -263,13 +263,13 @@ function AccountSelfContainer({ account }) {
                                             }),
                                             ' ',
                                             /*#__PURE__*/ jsx("span", {
-                                                className: currentAccount.is_enabled ? classnames('byline-account-status-on', container_module["status-on"]) : classnames('byline-account-status-off', container_module["status-off"]),
+                                                className: currentAccount.is_enabled ? clsx('byline-account-status-on', container_module["status-on"]) : clsx('byline-account-status-off', container_module["status-off"]),
                                                 children: currentAccount.is_enabled ? t('account.status.enabled') : t('account.status.disabled')
                                             })
                                         ]
                                     }),
                                     /*#__PURE__*/ jsx("p", {
-                                        className: classnames('muted', 'byline-account-status-help', container_module["status-help"]),
+                                        className: clsx('muted', 'byline-account-status-help', container_module["status-help"]),
                                         children: t('account.status.help')
                                     })
                                 ]
@@ -285,17 +285,17 @@ function AccountSelfContainer({ account }) {
                 topOffset: "46px",
                 isOpen: isDrawerOpen,
                 onDismiss: closeDrawer,
-                className: classnames('byline-account-drawer', container_module.drawer),
+                className: clsx('byline-account-drawer', container_module.drawer),
                 children: /*#__PURE__*/ jsxs(Drawer.Container, {
                     "aria-hidden": !isDrawerOpen,
-                    className: classnames('byline-account-drawer-body', container_module["drawer-body"]),
+                    className: clsx('byline-account-drawer-body', container_module["drawer-body"]),
                     children: [
                         /*#__PURE__*/ jsxs(Drawer.TopActions, {
                             children: [
                                 /*#__PURE__*/ jsx("button", {
                                     type: "button",
                                     tabIndex: 0,
-                                    className: classnames('byline-account-drawer-skip', container_module["drawer-skip"]),
+                                    className: clsx('byline-account-drawer-skip', container_module["drawer-skip"]),
                                     children: "no action"
                                 }),
                                 /*#__PURE__*/ jsx(IconButton, {
@@ -317,7 +317,7 @@ function AccountSelfContainer({ account }) {
                         }),
                         /*#__PURE__*/ jsx(Drawer.Content, {
                             children: /*#__PURE__*/ jsx("div", {
-                                className: classnames('byline-account-drawer-scroll', container_module["drawer-scroll"]),
+                                className: clsx('byline-account-drawer-scroll', container_module["drawer-scroll"]),
                                 children: /*#__PURE__*/ jsx(Panel, {
                                     account: currentAccount,
                                     onClose: closeDrawer,