@byline/admin 4.11.0 → 4.11.1

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

@@ -5,7 +5,7 @@ import { revalidateLogic, useForm } from "@tanstack/react-form-start";
 import { getClientConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, LoaderEllipsis, Select } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { z } from "zod";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
 import preferences_module from "./preferences.module.js";
@@ -73,7 +73,7 @@ function Preferences({ account, onClose, onSuccess }) {
         }
     });
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-account-preferences-wrap', preferences_module.wrap),
+        className: clsx('byline-account-preferences-wrap', preferences_module.wrap),
         children: /*#__PURE__*/ jsxs("form", {
             method: "post",
             noValidate: true,
@@ -82,7 +82,7 @@ function Preferences({ account, onClose, onSuccess }) {
                 event.stopPropagation();
                 form.handleSubmit();
             },
-            className: classnames('byline-account-preferences-form', preferences_module.form),
+            className: clsx('byline-account-preferences-form', preferences_module.form),
             children: [
                 formError ? /*#__PURE__*/ jsx(Alert, {
                     intent: "danger",
@@ -95,11 +95,11 @@ function Preferences({ account, onClose, onSuccess }) {
                 /*#__PURE__*/ jsx(form.Field, {
                     name: "locale",
                     children: (field)=>/*#__PURE__*/ jsxs("div", {
-                            className: classnames('byline-account-preferences-row', preferences_module.row),
+                            className: clsx('byline-account-preferences-row', preferences_module.row),
                             children: [
                                 /*#__PURE__*/ jsx("label", {
                                     htmlFor: "preferences-locale-select",
-                                    className: classnames('byline-account-preferences-label', preferences_module.label),
+                                    className: clsx('byline-account-preferences-label', preferences_module.label),
                                     children: t('account.preferences.languageLabel')
                                 }),
                                 /*#__PURE__*/ jsx(Select, {
@@ -113,21 +113,21 @@ function Preferences({ account, onClose, onSuccess }) {
                                     }
                                 }),
                                 /*#__PURE__*/ jsx("p", {
-                                    className: classnames('muted', 'byline-account-preferences-help', preferences_module.help),
+                                    className: clsx('muted', 'byline-account-preferences-help', preferences_module.help),
                                     children: t('account.preferences.languageHelp')
                                 })
                             ]
                         })
                 }),
                 /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-account-preferences-actions', preferences_module.actions),
+                    className: clsx('byline-account-preferences-actions', preferences_module.actions),
                     children: [
                         /*#__PURE__*/ jsx(Button, {
                             type: "button",
                             intent: "secondary",
                             size: "sm",
                             onClick: onClose,
-                            className: classnames('byline-account-preferences-action', preferences_module.action),
+                            className: clsx('byline-account-preferences-action', preferences_module.action),
                             children: successMessage ? t('common.actions.close') : t('common.actions.cancel')
                         }),
                         /*#__PURE__*/ jsx(form.Subscribe, {
@@ -140,7 +140,7 @@ function Preferences({ account, onClose, onSuccess }) {
                                     intent: "primary",
                                     type: "submit",
                                     disabled: !canSubmit || isSubmitting,
-                                    className: classnames('byline-account-preferences-action', preferences_module.action),
+                                    className: clsx('byline-account-preferences-action', preferences_module.action),
                                     children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                                         size: 42
                                     }) : t('common.actions.save')

package/dist/modules/admin-account/components/theme-switch.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
 import { ButtonGroup, ButtonGroupItem } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { getThemeMode, setThemeMode } from "./theme.js";
 import theme_switch_module from "./theme-switch.module.js";
 function ThemeSwitch() {
@@ -19,7 +19,7 @@ function ThemeSwitch() {
         setThemeMode(next);
     };
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-account-theme-switch', theme_switch_module.wrap),
+        className: clsx('byline-account-theme-switch', theme_switch_module.wrap),
         children: [
             /*#__PURE__*/ jsxs(ButtonGroup, {
                 type: "single",
@@ -28,7 +28,7 @@ function ThemeSwitch() {
                 value: mode,
                 onValueChange: handleChange,
                 "aria-label": t('account.appearance.colorTheme'),
-                className: classnames('byline-account-theme-group', theme_switch_module.group),
+                className: clsx('byline-account-theme-group', theme_switch_module.group),
                 children: [
                     /*#__PURE__*/ jsx(ButtonGroupItem, {
                         value: "light",
@@ -45,7 +45,7 @@ function ThemeSwitch() {
                 ]
             }),
             /*#__PURE__*/ jsx("p", {
-                className: classnames('muted', 'byline-account-theme-help', theme_switch_module.help),
+                className: clsx('muted', 'byline-account-theme-help', theme_switch_module.help),
                 children: t('account.appearance.help')
             })
         ]

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

@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import { revalidateLogic, useForm } from "@tanstack/react-form-start";
 import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, Input, LoaderEllipsis } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { z } from "zod";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
 import update_module from "./update.module.js";
@@ -100,7 +100,7 @@ function UpdateAccount({ account, onClose, onSuccess }) {
         }
     });
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-account-update-wrap', update_module.wrap),
+        className: clsx('byline-account-update-wrap', update_module.wrap),
         children: /*#__PURE__*/ jsxs("form", {
             method: "post",
             noValidate: true,
@@ -109,7 +109,7 @@ function UpdateAccount({ account, onClose, onSuccess }) {
                 event.stopPropagation();
                 form.handleSubmit();
             },
-            className: classnames('byline-account-update-form', update_module.form),
+            className: clsx('byline-account-update-form', update_module.form),
             children: [
                 formError ? /*#__PURE__*/ jsx(Alert, {
                     intent: "danger",
@@ -179,14 +179,14 @@ function UpdateAccount({ account, onClose, onSuccess }) {
                         })
                 }),
                 /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-account-update-actions', update_module.actions),
+                    className: clsx('byline-account-update-actions', update_module.actions),
                     children: [
                         /*#__PURE__*/ jsx(Button, {
                             type: "button",
                             intent: "secondary",
                             size: "sm",
                             onClick: onClose,
-                            className: classnames('byline-account-update-action', update_module.action),
+                            className: clsx('byline-account-update-action', update_module.action),
                             children: successMessage ? t('common.actions.close') : t('common.actions.cancel')
                         }),
                         /*#__PURE__*/ jsx(form.Subscribe, {
@@ -200,7 +200,7 @@ function UpdateAccount({ account, onClose, onSuccess }) {
                                     intent: "primary",
                                     type: "submit",
                                     disabled: !canSubmit || isSubmitting,
-                                    className: classnames('byline-account-update-action', update_module.action),
+                                    className: clsx('byline-account-update-action', update_module.action),
                                     children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                                         size: 42
                                     }) : t('common.actions.save')

package/dist/modules/admin-permissions/components/inspector.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
 import { Button, Container, LoaderRing, Section } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
 import inspector_module from "./inspector.module.js";
 function sourceVariant(source) {
@@ -45,26 +45,26 @@ function displayUser(user) {
 function MatrixPanel({ matrix }) {
     const { t } = useTranslation('byline-admin');
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-inspector-matrix', inspector_module.matrix),
+        className: clsx('byline-inspector-matrix', inspector_module.matrix),
         children: [
             /*#__PURE__*/ jsxs("div", {
                 children: [
                     /*#__PURE__*/ jsx("h4", {
-                        className: classnames('byline-inspector-matrix-title', inspector_module["matrix-title"]),
+                        className: clsx('byline-inspector-matrix-title', inspector_module["matrix-title"]),
                         children: t('adminPermissions.matrix.rolesTitle', {
                             count: matrix.roles.length
                         })
                     }),
                     0 === matrix.roles.length ? /*#__PURE__*/ jsx("p", {
-                        className: classnames('muted', 'byline-inspector-matrix-empty', inspector_module["matrix-empty"]),
+                        className: clsx('muted', 'byline-inspector-matrix-empty', inspector_module["matrix-empty"]),
                         children: t('adminPermissions.matrix.rolesEmpty')
                     }) : /*#__PURE__*/ jsx("ul", {
-                        className: classnames('byline-inspector-matrix-list', inspector_module["matrix-list"]),
+                        className: clsx('byline-inspector-matrix-list', inspector_module["matrix-list"]),
                         children: matrix.roles.map((role)=>/*#__PURE__*/ jsxs("li", {
-                                className: classnames('byline-inspector-matrix-item', inspector_module["matrix-item"]),
+                                className: clsx('byline-inspector-matrix-item', inspector_module["matrix-item"]),
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-inspector-matrix-name', inspector_module["matrix-name"]),
+                                        className: clsx('byline-inspector-matrix-name', inspector_module["matrix-name"]),
                                         children: role.name
                                     }),
                                     /*#__PURE__*/ jsxs("span", {
@@ -82,18 +82,18 @@ function MatrixPanel({ matrix }) {
             /*#__PURE__*/ jsxs("div", {
                 children: [
                     /*#__PURE__*/ jsx("h4", {
-                        className: classnames('byline-inspector-matrix-title', inspector_module["matrix-title"]),
+                        className: clsx('byline-inspector-matrix-title', inspector_module["matrix-title"]),
                         children: t('adminPermissions.matrix.usersTitle', {
                             count: matrix.users.length
                         })
                     }),
                     0 === matrix.users.length ? /*#__PURE__*/ jsx("p", {
-                        className: classnames('muted', 'byline-inspector-matrix-empty', inspector_module["matrix-empty"]),
+                        className: clsx('muted', 'byline-inspector-matrix-empty', inspector_module["matrix-empty"]),
                         children: t('adminPermissions.matrix.usersEmpty')
                     }) : /*#__PURE__*/ jsx("ul", {
-                        className: classnames('byline-inspector-matrix-list', inspector_module["matrix-list"]),
+                        className: clsx('byline-inspector-matrix-list', inspector_module["matrix-list"]),
                         children: matrix.users.map((user)=>/*#__PURE__*/ jsx("li", {
-                                className: classnames('byline-inspector-matrix-item', inspector_module["matrix-item"]),
+                                className: clsx('byline-inspector-matrix-item', inspector_module["matrix-item"]),
                                 children: displayUser(user)
                             }, user.id))
                     })
@@ -107,33 +107,33 @@ function AbilityRow({ ability, matrix, loading, onToggle, expanded }) {
     const sv = sourceVariant(ability.source);
     const sourceKey = ability.source ?? 'unknown';
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-inspector-row', inspector_module.row),
+        className: clsx('byline-inspector-row', inspector_module.row),
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-inspector-row-head', inspector_module["row-head"]),
+                className: clsx('byline-inspector-row-head', inspector_module["row-head"]),
                 children: [
                     /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-inspector-row-info', inspector_module["row-info"]),
+                        className: clsx('byline-inspector-row-info', inspector_module["row-info"]),
                         children: [
                             /*#__PURE__*/ jsxs("div", {
-                                className: classnames('byline-inspector-row-meta', inspector_module["row-meta"]),
+                                className: clsx('byline-inspector-row-meta', inspector_module["row-meta"]),
                                 children: [
                                     /*#__PURE__*/ jsx("code", {
-                                        className: classnames('byline-inspector-row-key', inspector_module["row-key"]),
+                                        className: clsx('byline-inspector-row-key', inspector_module["row-key"]),
                                         children: ability.key
                                     }),
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-inspector-row-source', inspector_module["row-source"], sv.global, sv.local),
+                                        className: clsx('byline-inspector-row-source', inspector_module["row-source"], sv.global, sv.local),
                                         children: t(`adminPermissions.source.${sourceKey}`)
                                     })
                                 ]
                             }),
                             /*#__PURE__*/ jsx("p", {
-                                className: classnames('byline-inspector-row-label', inspector_module["row-label"]),
+                                className: clsx('byline-inspector-row-label', inspector_module["row-label"]),
                                 children: ability.label
                             }),
                             ability.description ? /*#__PURE__*/ jsx("p", {
-                                className: classnames('muted', "byline-inspector-row-description", inspector_module["row-description"]),
+                                className: clsx('muted', "byline-inspector-row-description", inspector_module["row-description"]),
                                 children: ability.description
                             }) : null
                         ]
@@ -147,7 +147,7 @@ function AbilityRow({ ability, matrix, loading, onToggle, expanded }) {
                 ]
             }),
             expanded ? loading ? /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-inspector-loader', inspector_module.loader),
+                className: clsx('byline-inspector-loader', inspector_module.loader),
                 children: [
                     /*#__PURE__*/ jsx(LoaderRing, {
                         size: 20,
@@ -168,17 +168,17 @@ function GroupSection({ group, matrices, loading, expanded, onToggle }) {
     const { t } = useTranslation('byline-admin');
     return /*#__PURE__*/ jsxs("details", {
         open: true,
-        className: classnames('byline-inspector-group', inspector_module.group),
+        className: clsx('byline-inspector-group', inspector_module.group),
         children: [
             /*#__PURE__*/ jsxs("summary", {
-                className: classnames('byline-inspector-group-summary', inspector_module["group-summary"]),
+                className: clsx('byline-inspector-group-summary', inspector_module["group-summary"]),
                 children: [
                     /*#__PURE__*/ jsx("span", {
-                        className: classnames('byline-inspector-group-name', inspector_module["group-name"]),
+                        className: clsx('byline-inspector-group-name', inspector_module["group-name"]),
                         children: group.group
                     }),
                     /*#__PURE__*/ jsx("span", {
-                        className: classnames('muted', 'byline-inspector-group-count', inspector_module["group-count"]),
+                        className: clsx('muted', 'byline-inspector-group-count', inspector_module["group-count"]),
                         children: t('adminPermissions.group.abilitiesCount', {
                             count: group.abilities.length
                         })
@@ -186,7 +186,7 @@ function GroupSection({ group, matrices, loading, expanded, onToggle }) {
                 ]
             }),
             /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-inspector-group-body', inspector_module["group-body"]),
+                className: clsx('byline-inspector-group-body', inspector_module["group-body"]),
                 children: group.abilities.map((ability)=>/*#__PURE__*/ jsx(AbilityRow, {
                         ability: ability,
                         matrix: matrices[ability.key],
@@ -236,14 +236,14 @@ function AbilitiesInspector({ data }) {
         children: /*#__PURE__*/ jsxs(Container, {
             children: [
                 /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-inspector-head', inspector_module.head),
+                    className: clsx('byline-inspector-head', inspector_module.head),
                     children: [
                         /*#__PURE__*/ jsx("h1", {
-                            className: classnames('byline-inspector-title', inspector_module.title),
+                            className: clsx('byline-inspector-title', inspector_module.title),
                             children: t('adminPermissions.title')
                         }),
                         /*#__PURE__*/ jsx("span", {
-                            className: classnames('byline-inspector-count-pill', inspector_module["count-pill"]),
+                            className: clsx('byline-inspector-count-pill', inspector_module["count-pill"]),
                             children: t('adminPermissions.countPill', {
                                 count: data.total
                             })
@@ -251,14 +251,14 @@ function AbilitiesInspector({ data }) {
                     ]
                 }),
                 /*#__PURE__*/ jsx("p", {
-                    className: classnames('muted', 'byline-inspector-lead', inspector_module.lead),
+                    className: clsx('muted', 'byline-inspector-lead', inspector_module.lead),
                     children: t('adminPermissions.lead')
                 }),
                 0 === data.groups.length ? /*#__PURE__*/ jsx("p", {
-                    className: classnames('muted', 'byline-inspector-empty', inspector_module.empty),
+                    className: clsx('muted', 'byline-inspector-empty', inspector_module.empty),
                     children: t('adminPermissions.empty')
                 }) : /*#__PURE__*/ jsx("div", {
-                    className: classnames('byline-inspector-groups', inspector_module.groups),
+                    className: clsx('byline-inspector-groups', inspector_module.groups),
                     children: data.groups.map((group)=>/*#__PURE__*/ jsx(GroupSection, {
                             group: group,
                             matrices: matrices,

package/dist/modules/admin-roles/components/create.js

@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import { revalidateLogic, useForm } from "@tanstack/react-form-start";
 import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, Input, LoaderEllipsis, TextArea } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { z } from "zod";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
 import create_module from "./create.module.js";
@@ -80,7 +80,7 @@ function CreateAdminRole({ onClose, onSuccess }) {
         }
     });
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-role-create-wrap', create_module.wrap),
+        className: clsx('byline-role-create-wrap', create_module.wrap),
         children: /*#__PURE__*/ jsxs("form", {
             method: "post",
             noValidate: true,
@@ -89,7 +89,7 @@ function CreateAdminRole({ onClose, onSuccess }) {
                 event.stopPropagation();
                 form.handleSubmit();
             },
-            className: classnames('byline-role-create-form', create_module.form),
+            className: clsx('byline-role-create-form', create_module.form),
             children: [
                 formError ? /*#__PURE__*/ jsx(Alert, {
                     intent: "danger",
@@ -140,14 +140,14 @@ function CreateAdminRole({ onClose, onSuccess }) {
                         })
                 }),
                 /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-role-create-actions', create_module.actions),
+                    className: clsx('byline-role-create-actions', create_module.actions),
                     children: [
                         /*#__PURE__*/ jsx(Button, {
                             type: "button",
                             intent: "secondary",
                             size: "sm",
                             onClick: onClose,
-                            className: classnames('byline-role-create-action', create_module.action),
+                            className: clsx('byline-role-create-action', create_module.action),
                             children: t('common.actions.cancel')
                         }),
                         /*#__PURE__*/ jsx(form.Subscribe, {
@@ -160,7 +160,7 @@ function CreateAdminRole({ onClose, onSuccess }) {
                                     intent: "primary",
                                     type: "submit",
                                     disabled: !canSubmit || isSubmitting,
-                                    className: classnames('byline-role-create-action', create_module.action),
+                                    className: clsx('byline-role-create-action', create_module.action),
                                     children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                                         size: 42
                                     }) : t('common.actions.save')

package/dist/modules/admin-roles/components/permissions.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, Checkbox, LoaderEllipsis } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
 import permissions_module from "./permissions.module.js";
 function setsEqual(a, b) {
@@ -19,19 +19,19 @@ function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, on
     const selectedInGroup = groupKeys.filter((key)=>selected.has(key)).length;
     const isEdit = 'edit' === mode;
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-role-permissions-group', permissions_module.group),
+        className: clsx('byline-role-permissions-group', permissions_module.group),
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-role-permissions-group-head', permissions_module["group-head"]),
+                className: clsx('byline-role-permissions-group-head', permissions_module["group-head"]),
                 children: [
                     /*#__PURE__*/ jsxs("div", {
                         children: [
                             /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-role-permissions-group-name', permissions_module["group-name"]),
+                                className: clsx('byline-role-permissions-group-name', permissions_module["group-name"]),
                                 children: group.group
                             }),
                             /*#__PURE__*/ jsx("span", {
-                                className: classnames('muted', 'byline-role-permissions-group-count', permissions_module["group-count"]),
+                                className: clsx('muted', 'byline-role-permissions-group-count', permissions_module["group-count"]),
                                 children: t('adminRoles.permissions.groupCount', {
                                     selected: selectedInGroup,
                                     total: group.abilities.length,
@@ -41,7 +41,7 @@ function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, on
                         ]
                     }),
                     isEdit ? /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-role-permissions-group-buttons', permissions_module["group-buttons"]),
+                        className: clsx('byline-role-permissions-group-buttons', permissions_module["group-buttons"]),
                         children: [
                             /*#__PURE__*/ jsx(Button, {
                                 size: "xs",
@@ -64,9 +64,9 @@ function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, on
                 ]
             }),
             /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-role-permissions-grid', permissions_module.grid),
+                className: clsx('byline-role-permissions-grid', permissions_module.grid),
                 children: group.abilities.map((ability)=>/*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-role-permissions-row', permissions_module.row),
+                        className: clsx('byline-role-permissions-row', permissions_module.row),
                         children: [
                             /*#__PURE__*/ jsx(Checkbox, {
                                 id: `ability-${ability.key}`,
@@ -74,31 +74,31 @@ function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, on
                                 checked: selected.has(ability.key),
                                 disabled: !isEdit || saving,
                                 onCheckedChange: (checked)=>onToggle(ability.key, true === checked),
-                                containerClasses: classnames('byline-role-permissions-checkbox-auto', permissions_module["checkbox-auto"]),
-                                componentClasses: classnames('byline-role-permissions-checkbox-auto', permissions_module["checkbox-auto"])
+                                containerClasses: clsx('byline-role-permissions-checkbox-auto', permissions_module["checkbox-auto"]),
+                                componentClasses: clsx('byline-role-permissions-checkbox-auto', permissions_module["checkbox-auto"])
                             }),
                             /*#__PURE__*/ jsxs("label", {
                                 htmlFor: `ability-${ability.key}`,
-                                className: classnames('byline-role-permissions-label', permissions_module.label, isEdit && [
+                                className: clsx('byline-role-permissions-label', permissions_module.label, isEdit && [
                                     'byline-role-permissions-label-edit',
                                     permissions_module["label-edit"]
                                 ]),
                                 children: [
                                     /*#__PURE__*/ jsxs("div", {
-                                        className: classnames('byline-role-permissions-label-head', permissions_module["label-head"]),
+                                        className: clsx('byline-role-permissions-label-head', permissions_module["label-head"]),
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-role-permissions-label-name', permissions_module["label-name"]),
+                                                className: clsx('byline-role-permissions-label-name', permissions_module["label-name"]),
                                                 children: ability.label
                                             }),
                                             /*#__PURE__*/ jsx("code", {
-                                                className: classnames('byline-role-permissions-key', permissions_module.key),
+                                                className: clsx('byline-role-permissions-key', permissions_module.key),
                                                 children: ability.key
                                             })
                                         ]
                                     }),
                                     ability.description ? /*#__PURE__*/ jsx("p", {
-                                        className: classnames('muted', "byline-role-permissions-description", permissions_module.description),
+                                        className: clsx('muted', "byline-role-permissions-description", permissions_module.description),
                                         children: ability.description
                                     }) : null
                                 ]
@@ -181,10 +181,10 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
     }
     const isEdit = 'edit' === mode;
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-role-permissions-wrap', permissions_module.wrap),
+        className: clsx('byline-role-permissions-wrap', permissions_module.wrap),
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-role-permissions-toolbar', permissions_module.toolbar),
+                className: clsx('byline-role-permissions-toolbar', permissions_module.toolbar),
                 children: [
                     /*#__PURE__*/ jsx(ModeToggle, {
                         mode: mode,
@@ -194,7 +194,7 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
                         onEdit: handleEnterEdit
                     }),
                     /*#__PURE__*/ jsx("p", {
-                        className: classnames('muted', 'byline-role-permissions-counter', permissions_module.counter),
+                        className: clsx('muted', 'byline-role-permissions-counter', permissions_module.counter),
                         children: t('adminRoles.permissions.counter', {
                             selected: totalSelected,
                             total: registered.total,
@@ -203,7 +203,7 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
                         })
                     }),
                     isEdit && isDirty ? /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-role-permissions-actions', permissions_module.actions),
+                        className: clsx('byline-role-permissions-actions', permissions_module.actions),
                         children: [
                             /*#__PURE__*/ jsx(Button, {
                                 type: "button",
@@ -211,7 +211,7 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
                                 size: "xs",
                                 onClick: handleCancel,
                                 disabled: saving,
-                                className: classnames('byline-role-permissions-action', permissions_module.action),
+                                className: clsx('byline-role-permissions-action', permissions_module.action),
                                 children: t('common.actions.cancel')
                             }),
                             /*#__PURE__*/ jsx(Button, {
@@ -220,7 +220,7 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
                                 size: "xs",
                                 onClick: ()=>void handleSave(),
                                 disabled: saving,
-                                className: classnames('byline-role-permissions-action', permissions_module.action),
+                                className: clsx('byline-role-permissions-action', permissions_module.action),
                                 children: saving ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                                     size: 30
                                 }) : t('common.actions.save')
@@ -234,7 +234,7 @@ function RolePermissions({ role, registered, initialAbilities, onSaved }) {
                 children: error
             }) : null,
             /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-role-permissions-groups', permissions_module.groups),
+                className: clsx('byline-role-permissions-groups', permissions_module.groups),
                 children: registered.groups.map((group)=>/*#__PURE__*/ jsx(GroupSection, {
                         group: group,
                         selected: selected,
@@ -257,13 +257,13 @@ function ModeToggle({ mode, dirty, saving, onView, onEdit }) {
     return /*#__PURE__*/ jsxs("div", {
         role: "group",
         "aria-label": t('adminRoles.permissions.modeAriaLabel'),
-        className: classnames('byline-role-permissions-mode-toggle', permissions_module["mode-toggle"]),
+        className: clsx('byline-role-permissions-mode-toggle', permissions_module["mode-toggle"]),
         children: [
             /*#__PURE__*/ jsx("button", {
                 type: "button",
                 onClick: onView,
                 disabled: viewDisabled,
-                className: classnames('byline-role-permissions-mode-button', permissions_module["mode-button"], isView && [
+                className: clsx('byline-role-permissions-mode-button', permissions_module["mode-button"], isView && [
                     'byline-role-permissions-mode-button-active',
                     permissions_module["mode-button-active"]
                 ], viewDisabled && !isView && [
@@ -276,7 +276,7 @@ function ModeToggle({ mode, dirty, saving, onView, onEdit }) {
                 type: "button",
                 onClick: onEdit,
                 disabled: editDisabled,
-                className: classnames('byline-role-permissions-mode-button', 'byline-role-permissions-mode-button-divider', permissions_module["mode-button"], permissions_module["mode-button-divider"], isEdit && [
+                className: clsx('byline-role-permissions-mode-button', 'byline-role-permissions-mode-button-divider', permissions_module["mode-button"], permissions_module["mode-button-divider"], isEdit && [
                     'byline-role-permissions-mode-button-active',
                     permissions_module["mode-button-active"]
                 ], editDisabled && !isEdit && [

package/dist/modules/admin-roles/components/update.js

@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import { revalidateLogic, useForm } from "@tanstack/react-form-start";
 import { useTranslation } from "@byline/i18n/react";
 import { Alert, Button, Input, LoaderEllipsis, TextArea } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { z } from "zod";
 import { useBylineAdminServices } from "../../../services/admin-services-context.js";
 import update_module from "./update.module.js";
@@ -73,7 +73,7 @@ function UpdateRole({ role, onClose, onSuccess }) {
         }
     });
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-role-update-wrap', update_module.wrap),
+        className: clsx('byline-role-update-wrap', update_module.wrap),
         children: /*#__PURE__*/ jsxs("form", {
             method: "post",
             noValidate: true,
@@ -82,7 +82,7 @@ function UpdateRole({ role, onClose, onSuccess }) {
                 event.stopPropagation();
                 form.handleSubmit();
             },
-            className: classnames('byline-role-update-form', update_module.form),
+            className: clsx('byline-role-update-form', update_module.form),
             children: [
                 formError ? /*#__PURE__*/ jsx(Alert, {
                     intent: "danger",
@@ -130,14 +130,14 @@ function UpdateRole({ role, onClose, onSuccess }) {
                         })
                 }),
                 /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-role-update-actions', update_module.actions),
+                    className: clsx('byline-role-update-actions', update_module.actions),
                     children: [
                         /*#__PURE__*/ jsx(Button, {
                             type: "button",
                             intent: "secondary",
                             size: "sm",
                             onClick: onClose,
-                            className: classnames('byline-role-update-action', update_module.action),
+                            className: clsx('byline-role-update-action', update_module.action),
                             children: successMessage ? t('common.actions.close') : t('common.actions.cancel')
                         }),
                         /*#__PURE__*/ jsx(form.Subscribe, {
@@ -150,7 +150,7 @@ function UpdateRole({ role, onClose, onSuccess }) {
                                     intent: "primary",
                                     type: "submit",
                                     disabled: !canSubmit || isSubmitting,
-                                    className: classnames('byline-role-update-action', update_module.action),
+                                    className: clsx('byline-role-update-action', update_module.action),
                                     children: true === isSubmitting ? /*#__PURE__*/ jsx(LoaderEllipsis, {
                                         size: 42
                                     }) : t('common.actions.save')