@byline/admin 4.10.2 → 4.11.1

package/dist/fields/array/array-field.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useTranslation } from "@byline/i18n/react";
 import { DraggableSortable, IconButton, PlusIcon, moveItem } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { sliceFieldAdmin } from "../field-admin.js";
 import { defaultScalarForField } from "../field-helpers.js";
 import { FieldRenderer } from "../field-renderer.js";
@@ -112,10 +112,10 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
                 const groupData = initial && 'object' == typeof initial ? initial : {};
                 const groupAdmin = sliceFieldAdmin(fieldAdmin, childField.name);
                 return /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
+                    className: clsx('byline-field-array-group-fields', array_field_module["group-fields"]),
                     children: [
                         childField.label && /*#__PURE__*/ jsx("h4", {
-                            className: classnames('byline-field-array-group-header', array_field_module["group-header"]),
+                            className: clsx('byline-field-array-group-header', array_field_module["group-header"]),
                             children: childField.label
                         }),
                         childField.fields.map((innerField)=>/*#__PURE__*/ jsx(FieldRenderer, {
@@ -148,7 +148,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
             onAddBelow: ()=>handleInsertBelow(index),
             onRemove: ()=>handleRemoveItem(index),
             children: /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
+                className: clsx('byline-field-array-group-fields', array_field_module["group-fields"]),
                 children: innerBody
             })
         }, itemWrapper.id);
@@ -158,13 +158,13 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
             onAddBelow: ()=>handleInsertBelow(index),
             onRemove: ()=>handleRemoveItem(index),
             children: /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-array-group-fields', array_field_module["group-fields"]),
+                className: clsx('byline-field-array-group-fields', array_field_module["group-fields"]),
                 children: innerBody
             })
         }, itemWrapper.id);
     };
     const addRow = /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-field-array-add-row', array_field_module["add-row"]),
+        className: clsx('byline-field-array-add-row', array_field_module["add-row"]),
         children: [
             /*#__PURE__*/ jsx(IconButton, {
                 onClick: ()=>{
@@ -179,7 +179,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
                 onClick: ()=>{
                     handleAddItem();
                 },
-                className: classnames('byline-field-array-add-label', array_field_module["add-label"]),
+                className: clsx('byline-field-array-add-label', array_field_module["add-label"]),
                 children: t('fields.array.addItem')
             })
         ]
@@ -188,11 +188,11 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
         className: `byline-field-array ${field.name}`,
         children: [
             field.label && /*#__PURE__*/ jsx("h3", {
-                className: classnames('byline-field-array-title', array_field_module.title),
+                className: clsx('byline-field-array-title', array_field_module.title),
                 children: field.label
             }),
             disableSorting ? /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-field-array-stack', array_field_module.stack),
+                className: clsx('byline-field-array-stack', array_field_module.stack),
                 children: [
                     items.map((item, index)=>renderItem(item, index)),
                     addRow
@@ -200,7 +200,7 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, content
             }) : /*#__PURE__*/ jsxs(DraggableSortable, {
                 ids: items.map((i)=>i.id),
                 onDragEnd: handleDragEnd,
-                className: classnames('byline-field-array-stack', array_field_module.stack),
+                className: clsx('byline-field-array-stack', array_field_module.stack),
                 children: [
                     items.map((item, index)=>renderItem(item, index)),
                     addRow

package/dist/fields/blocks/blocks-field.js

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useState } from "react";
 import { getClientConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Card, CloseIcon, DraggableSortable, IconButton, Modal, PlusIcon, moveItem } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { defaultScalarForField } from "../field-helpers.js";
 import { GroupField } from "../group/group-field.js";
 import { SortableItem } from "../sortable-item.js";
@@ -154,17 +154,17 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
         className: `byline-field-blocks ${field.name}`,
         children: [
             field.label && /*#__PURE__*/ jsx("h3", {
-                className: classnames('byline-field-blocks-title', blocks_field_module.title),
+                className: clsx('byline-field-blocks-title', blocks_field_module.title),
                 children: field.label
             }),
             /*#__PURE__*/ jsxs(DraggableSortable, {
                 ids: items.map((i)=>i.id),
                 onDragEnd: handleDragEnd,
-                className: classnames('byline-field-blocks-stack', blocks_field_module.stack),
+                className: clsx('byline-field-blocks-stack', blocks_field_module.stack),
                 children: [
                     items.map((item, index)=>renderItem(item, index)),
                     /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-blocks-add-row', blocks_field_module["add-row"]),
+                        className: clsx('byline-field-blocks-add-row', blocks_field_module["add-row"]),
                         children: [
                             /*#__PURE__*/ jsx(IconButton, {
                                 onClick: ()=>{
@@ -184,7 +184,7 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                                     setPendingInsertIndex(null);
                                     setShowAddBlockModal(true);
                                 },
-                                className: classnames('byline-field-blocks-add-label', blocks_field_module["add-label"]),
+                                className: clsx('byline-field-blocks-add-label', blocks_field_module["add-label"]),
                                 children: t('fields.blocks.addBlock')
                             })
                         ]
@@ -204,10 +204,10 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                     },
                     children: [
                         /*#__PURE__*/ jsxs(Modal.Header, {
-                            className: classnames('byline-field-blocks-modal-head', blocks_field_module["modal-head"]),
+                            className: clsx('byline-field-blocks-modal-head', blocks_field_module["modal-head"]),
                             children: [
                                 /*#__PURE__*/ jsx("h3", {
-                                    className: classnames('byline-field-blocks-modal-title', blocks_field_module["modal-title"]),
+                                    className: clsx('byline-field-blocks-modal-title', blocks_field_module["modal-title"]),
                                     children: t('fields.blocks.modalTitle')
                                 }),
                                 /*#__PURE__*/ jsx(IconButton, {
@@ -226,38 +226,38 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                             ]
                         }),
                         /*#__PURE__*/ jsx(Modal.Content, {
-                            className: classnames('byline-field-blocks-card-cursor', blocks_field_module["modal-content"]),
+                            className: clsx('byline-field-blocks-card-cursor', blocks_field_module["modal-content"]),
                             children: /*#__PURE__*/ jsx("div", {
-                                className: classnames('byline-field-blocks-grid', blocks_field_module.grid),
+                                className: clsx('byline-field-blocks-grid', blocks_field_module.grid),
                                 children: availableBlocks.map((b, index)=>/*#__PURE__*/ jsxs(Card, {
                                         hover: true,
                                         onClick: ()=>void handleAddItem(b.blockType, pendingInsertIndex ?? void 0),
-                                        className: classnames('byline-field-blocks-card', blocks_field_module.card),
+                                        className: clsx('byline-field-blocks-card', blocks_field_module.card),
                                         children: [
                                             /*#__PURE__*/ jsxs(Card.Header, {
                                                 children: [
                                                     /*#__PURE__*/ jsxs("div", {
-                                                        className: classnames('byline-field-blocks-card-head', blocks_field_module["card-head"]),
+                                                        className: clsx('byline-field-blocks-card-head', blocks_field_module["card-head"]),
                                                         children: [
                                                             /*#__PURE__*/ jsx(Card.Title, {
-                                                                className: classnames('byline-field-blocks-card-title', blocks_field_module["card-title"]),
+                                                                className: clsx('byline-field-blocks-card-title', blocks_field_module["card-title"]),
                                                                 children: b.label ?? b.blockType
                                                             }),
                                                             /*#__PURE__*/ jsx("span", {
-                                                                className: classnames('byline-field-blocks-card-index', blocks_field_module["card-index"]),
+                                                                className: clsx('byline-field-blocks-card-index', blocks_field_module["card-index"]),
                                                                 children: index + 1
                                                             })
                                                         ]
                                                     }),
                                                     /*#__PURE__*/ jsx("code", {
-                                                        className: classnames('byline-field-blocks-card-code', blocks_field_module["card-code"]),
+                                                        className: clsx('byline-field-blocks-card-code', blocks_field_module["card-code"]),
                                                         children: b.blockType
                                                     })
                                                 ]
                                             }),
                                             /*#__PURE__*/ jsx(Card.Content, {
                                                 children: /*#__PURE__*/ jsx("p", {
-                                                    className: classnames('byline-field-blocks-card-body', blocks_field_module["card-body"]),
+                                                    className: clsx('byline-field-blocks-card-body', blocks_field_module["card-body"]),
                                                     children: b.helpText ?? b.label ?? b.blockType
                                                 })
                                             })

package/dist/fields/code/code-field.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import react, { Suspense, useCallback } from "react";
 import { ErrorText, HelpText, Label } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useFieldError, useFieldValue } from "../../forms/form-context.js";
 import { LocaleBadge } from "../locale-badge.js";
 import code_field_module from "./code-field.module.js";
@@ -39,7 +39,7 @@ const CodeField = ({ field, value, defaultValue, onChange, id, path, locale, com
     };
     const showBadge = !!locale && !!field.label;
     const hasCustomLabel = !!CustomLabel;
-    const labelRowClass = classnames('byline-field-code-label-row', code_field_module["label-row"]);
+    const labelRowClass = clsx('byline-field-code-label-row', code_field_module["label-row"]);
     const renderLabel = ()=>{
         if (hasCustomLabel) return /*#__PURE__*/ jsxs("div", {
             className: labelRowClass,
@@ -79,7 +79,7 @@ const CodeField = ({ field, value, defaultValue, onChange, id, path, locale, com
         });
         return /*#__PURE__*/ jsx(Suspense, {
             fallback: /*#__PURE__*/ jsx("textarea", {
-                className: classnames('byline-field-code-loading', code_field_module.loading),
+                className: clsx('byline-field-code-loading', code_field_module.loading),
                 readOnly: true,
                 value: incomingValue,
                 rows: 6,

package/dist/fields/datetime/datetime-field.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DatePicker, ErrorText } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useFieldError, useFieldValue, useIsDirty } from "../../forms/form-context.js";
 import datetime_field_module from "./datetime-field.module.js";
 const DateTimeField = ({ field, value, defaultValue, onChange, id, path })=>{
@@ -22,7 +22,7 @@ const DateTimeField = ({ field, value, defaultValue, onChange, id, path })=>{
                 yearsInFuture: field.yearsInFuture || 1,
                 yearsInPast: field.yearsInPast || 10,
                 onDateChange: (date)=>onChange?.(date),
-                className: classnames(isDirty && [
+                className: clsx(isDirty && [
                     'byline-field-datetime-dirty',
                     datetime_field_module.dirty
                 ])

package/dist/fields/draggable-context-menu.js

@@ -2,14 +2,14 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "@byline/i18n/react";
 import { DeleteIcon, Dropdown, EllipsisIcon, IconButton, PlusIcon } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import draggable_context_menu_module from "./draggable-context-menu.module.js";
 function DraggableContextMenu({ onAddBelow, onRemove }) {
     const { t } = useTranslation('byline-admin');
-    const itemClass = classnames('byline-draggable-menu-item', draggable_context_menu_module.item);
-    const rowClass = classnames('byline-draggable-menu-row', draggable_context_menu_module.row);
-    const iconSlotClass = classnames('byline-draggable-menu-icon-slot', draggable_context_menu_module["icon-slot"]);
-    const labelClass = classnames('byline-draggable-menu-label', draggable_context_menu_module.label);
+    const itemClass = clsx('byline-draggable-menu-item', draggable_context_menu_module.item);
+    const rowClass = clsx('byline-draggable-menu-row', draggable_context_menu_module.row);
+    const iconSlotClass = clsx('byline-draggable-menu-icon-slot', draggable_context_menu_module["icon-slot"]);
+    const labelClass = clsx('byline-draggable-menu-label', draggable_context_menu_module.label);
     return /*#__PURE__*/ jsxs(Dropdown.Root, {
         modal: false,
         children: [
@@ -28,7 +28,7 @@ function DraggableContextMenu({ onAddBelow, onRemove }) {
                 children: /*#__PURE__*/ jsxs(Dropdown.Content, {
                     align: "end",
                     sideOffset: 0,
-                    className: classnames('byline-draggable-menu', draggable_context_menu_module.menu),
+                    className: clsx('byline-draggable-menu', draggable_context_menu_module.menu),
                     children: [
                         /*#__PURE__*/ jsx(Dropdown.Item, {
                             className: itemClass,
@@ -51,7 +51,7 @@ function DraggableContextMenu({ onAddBelow, onRemove }) {
                             })
                         }),
                         /*#__PURE__*/ jsx(Dropdown.Separator, {
-                            className: classnames('byline-draggable-menu-separator', draggable_context_menu_module.separator)
+                            className: clsx('byline-draggable-menu-separator', draggable_context_menu_module.separator)
                         }),
                         /*#__PURE__*/ jsx(Dropdown.Item, {
                             className: itemClass,
@@ -66,11 +66,11 @@ function DraggableContextMenu({ onAddBelow, onRemove }) {
                                             children: /*#__PURE__*/ jsx(DeleteIcon, {
                                                 width: "18px",
                                                 height: "18px",
-                                                svgClassName: classnames('byline-draggable-menu-delete-icon', draggable_context_menu_module["delete-icon"])
+                                                svgClassName: clsx('byline-draggable-menu-delete-icon', draggable_context_menu_module["delete-icon"])
                                             })
                                         }),
                                         /*#__PURE__*/ jsx("span", {
-                                            className: classnames('byline-draggable-menu-label byline-draggable-menu-label-danger', draggable_context_menu_module.label, draggable_context_menu_module["label-danger"]),
+                                            className: clsx('byline-draggable-menu-label byline-draggable-menu-label-danger', draggable_context_menu_module.label, draggable_context_menu_module["label-danger"]),
                                             children: t('fields.draggableMenu.remove')
                                         })
                                     ]

package/dist/fields/field-renderer.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getClientConfig } from "@byline/core";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useFormContext } from "../forms/form-context.js";
 import { ArrayField } from "./array/array-field.js";
 import { BlocksField } from "./blocks/blocks-field.js";
@@ -229,11 +229,11 @@ const FieldRenderer = ({ field, defaultValue: initialDefault, basePath, disableS
     };
     const selfBadge = 'text' === field.type || 'textArea' === field.type || 'code' === field.type || 'richText' === field.type;
     if (badge && !selfBadge) return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-field-localized-wrap', field_renderer_module["localized-wrap"]),
+        className: clsx('byline-field-localized-wrap', field_renderer_module["localized-wrap"]),
         children: [
             renderField(),
             /*#__PURE__*/ jsx("span", {
-                className: classnames('byline-field-localized-badge', field_renderer_module["localized-badge"]),
+                className: clsx('byline-field-localized-badge', field_renderer_module["localized-badge"]),
                 children: badge
             })
         ]

package/dist/fields/file/file-field.js

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isPendingStoredFileValue } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { CloseIcon, DocumentIcon, DownloadIcon, ErrorText, HelpText, IconButton, Label, LoaderRing, VideoIcon } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useFieldError, useFieldValue, useFormContext, useIsDirty, useIsFieldUploading } from "../../forms/form-context.js";
 import { useFieldChangeHandler } from "../use-field-change-handler.js";
 import file_field_module from "./file-field.module.js";
@@ -47,7 +47,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
         className: `byline-field-file ${field.name}`,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-file-header', file_field_module.header),
+                className: clsx('byline-field-file-header', file_field_module.header),
                 children: /*#__PURE__*/ jsx(Label, {
                     id: htmlId,
                     htmlFor: htmlId,
@@ -56,7 +56,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                 })
             }),
             showUploadWidget ? uploadGated ? /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-file-empty', file_field_module.empty),
+                className: clsx('byline-field-file-empty', file_field_module.empty),
                 role: "note",
                 "data-testid": "upload-require-saved-document",
                 children: t('fields.upload.requireSavedDocument')
@@ -68,19 +68,19 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                     handleChange(uploaded);
                 }
             }) : /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-file-empty', file_field_module.empty),
+                className: clsx('byline-field-file-empty', file_field_module.empty),
                 children: t('fields.file.empty')
             }) : /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-field-file-tile', file_field_module.tile),
+                className: clsx('byline-field-file-tile', file_field_module.tile),
                 children: [
                     isUploading && /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-field-file-uploading', file_field_module.uploading),
+                        className: clsx('byline-field-file-uploading', file_field_module.uploading),
                         "aria-live": "polite",
                         "aria-busy": "true",
                         children: /*#__PURE__*/ jsx(LoaderRing, {})
                     }),
                     collectionPath && /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-file-actions', file_field_module.actions),
+                        className: clsx('byline-field-file-actions', file_field_module.actions),
                         children: [
                             !isPending && incomingValue?.storageUrl && /*#__PURE__*/ jsx(IconButton, {
                                 type: "button",
@@ -115,33 +115,33 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                         "aria-label": t('fields.file.openInNewTabAriaLabel', {
                             filename: incomingValue.originalFilename ?? incomingValue.filename
                         }),
-                        className: classnames('byline-field-file-icon-wrap', file_field_module["icon-wrap"]),
+                        className: clsx('byline-field-file-icon-wrap', file_field_module["icon-wrap"]),
                         children: /*#__PURE__*/ jsx(FileGlyph, {
                             width: "48px",
                             height: "48px",
-                            className: classnames('byline-field-file-icon', file_field_module.icon)
+                            className: clsx('byline-field-file-icon', file_field_module.icon)
                         })
                     }) : /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-file-icon-wrap', file_field_module["icon-wrap"]),
+                        className: clsx('byline-field-file-icon-wrap', file_field_module["icon-wrap"]),
                         children: [
                             /*#__PURE__*/ jsx(FileGlyph, {
                                 width: "48px",
                                 height: "48px",
-                                className: classnames('byline-field-file-icon', file_field_module.icon)
+                                className: clsx('byline-field-file-icon', file_field_module.icon)
                             }),
                             isPending && /*#__PURE__*/ jsx("div", {
-                                className: classnames('byline-field-file-pending', file_field_module.pending),
+                                className: clsx('byline-field-file-pending', file_field_module.pending),
                                 children: t('fields.fileMeta.pendingUpload')
                             })
                         ]
                     }),
                     /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-file-meta', file_field_module.meta),
+                        className: clsx('byline-field-file-meta', file_field_module.meta),
                         children: [
                             /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                        className: clsx('byline-field-file-meta-key', file_field_module["meta-key"]),
                                         children: t('fields.fileMeta.filename')
                                     }),
                                     ' ',
@@ -151,7 +151,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                             /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                        className: clsx('byline-field-file-meta-key', file_field_module["meta-key"]),
                                         children: t('fields.fileMeta.original')
                                     }),
                                     ' ',
@@ -161,7 +161,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                             /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                        className: clsx('byline-field-file-meta-key', file_field_module["meta-key"]),
                                         children: t('fields.fileMeta.type')
                                     }),
                                     ' ',
@@ -171,7 +171,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                             /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                        className: clsx('byline-field-file-meta-key', file_field_module["meta-key"]),
                                         children: t('fields.fileMeta.size')
                                     }),
                                     ' ',
@@ -181,12 +181,12 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                             isPending ? /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                        className: clsx('byline-field-file-meta-key', file_field_module["meta-key"]),
                                         children: t('fields.fileMeta.status')
                                     }),
                                     ' ',
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-file-meta-pending', file_field_module["meta-pending"]),
+                                        className: clsx('byline-field-file-meta-pending', file_field_module["meta-pending"]),
                                         children: t('fields.fileMeta.willUploadOnSave')
                                     })
                                 ]
@@ -195,7 +195,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                                     /*#__PURE__*/ jsxs("div", {
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                                className: clsx('byline-field-file-meta-key', file_field_module["meta-key"]),
                                                 children: t('fields.fileMeta.storage')
                                             }),
                                             ' ',
@@ -205,7 +205,7 @@ const FileField = ({ field, value, defaultValue, onChange: _onChange, path })=>{
                                     /*#__PURE__*/ jsxs("div", {
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-field-file-meta-key', file_field_module["meta-key"]),
+                                                className: clsx('byline-field-file-meta-key', file_field_module["meta-key"]),
                                                 children: t('fields.fileMeta.path')
                                             }),
                                             ' ',

package/dist/fields/file/file-upload-field.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
 import { createPendingStoredFileValue } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useFormContext } from "../../forms/form-context.js";
 import file_upload_field_module from "./file-upload-field.module.js";
 const FileUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded, accept })=>{
@@ -58,13 +58,13 @@ const FileUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded,
     ]);
     const isProcessing = 'processing' === status;
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-field-file-upload', file_upload_field_module.root),
+        className: clsx('byline-field-file-upload', file_upload_field_module.root),
         children: [
             /*#__PURE__*/ jsx("input", {
                 ref: inputRef,
                 type: "file",
                 accept: accept,
-                className: classnames('byline-field-file-upload-input', file_upload_field_module.input),
+                className: clsx('byline-field-file-upload-input', file_upload_field_module.input),
                 onChange: handleFileChange,
                 disabled: isProcessing,
                 "aria-hidden": "true",
@@ -84,7 +84,7 @@ const FileUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded,
                         handleBrowseClick();
                     }
                 },
-                className: classnames('byline-field-file-upload-zone', file_upload_field_module.zone, isDragOver && !isProcessing && [
+                className: clsx('byline-field-file-upload-zone', file_upload_field_module.zone, isDragOver && !isProcessing && [
                     'byline-field-file-upload-zone-active',
                     file_upload_field_module["zone-active"]
                 ], isProcessing && [
@@ -94,7 +94,7 @@ const FileUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded,
                 children: [
                     /*#__PURE__*/ jsx("svg", {
                         xmlns: "http://www.w3.org/2000/svg",
-                        className: classnames('byline-field-file-upload-icon', file_upload_field_module.icon),
+                        className: clsx('byline-field-file-upload-icon', file_upload_field_module.icon),
                         fill: "none",
                         viewBox: "0 0 24 24",
                         stroke: "currentColor",
@@ -107,12 +107,12 @@ const FileUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded,
                         })
                     }),
                     /*#__PURE__*/ jsxs("span", {
-                        className: classnames('byline-field-file-upload-label', file_upload_field_module.label),
+                        className: clsx('byline-field-file-upload-label', file_upload_field_module.label),
                         children: [
                             t('fields.file.upload.label'),
                             ' ',
                             /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-field-file-upload-action', file_upload_field_module.action),
+                                className: clsx('byline-field-file-upload-action', file_upload_field_module.action),
                                 children: t('fields.file.upload.browse')
                             })
                         ]
@@ -120,7 +120,7 @@ const FileUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded,
                 ]
             }),
             'error' === status && errorMessage && /*#__PURE__*/ jsx("p", {
-                className: classnames('byline-field-file-upload-error', file_upload_field_module.error),
+                className: clsx('byline-field-file-upload-error', file_upload_field_module.error),
                 role: "alert",
                 children: errorMessage
             })

package/dist/fields/group/group-field.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { ErrorText } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { sliceFieldAdmin } from "../field-admin.js";
 import { placeholderForField } from "../field-helpers.js";
 import { FieldRenderer } from "../field-renderer.js";
@@ -22,27 +22,27 @@ const GroupField = ({ field, defaultValue, path, disableSorting = true, contentL
         className: `byline-field-group ${field.name}`,
         children: [
             field.label && /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-field-group-header', group_field_module.header),
+                className: clsx('byline-field-group-header', group_field_module.header),
                 children: [
                     /*#__PURE__*/ jsxs("h3", {
-                        className: classnames('byline-field-group-title', group_field_module.title),
+                        className: clsx('byline-field-group-title', group_field_module.title),
                         children: [
                             field.label,
                             ' ',
                             !field.optional && /*#__PURE__*/ jsx("span", {
-                                className: classnames('byline-field-group-required', group_field_module.required),
+                                className: clsx('byline-field-group-required', group_field_module.required),
                                 children: "*"
                             })
                         ]
                     }),
                     field.helpText && /*#__PURE__*/ jsx("p", {
-                        className: classnames('byline-field-group-help', group_field_module.help),
+                        className: clsx('byline-field-group-help', group_field_module.help),
                         children: field.helpText
                     })
                 ]
             }),
             /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-group-body', group_field_module.body),
+                className: clsx('byline-field-group-body', group_field_module.body),
                 children: field.fields.map((innerField)=>/*#__PURE__*/ jsx(FieldRenderer, {
                         field: innerField,
                         defaultValue: groupData[innerField.name],