@byline/admin 4.11.0 → 4.11.2

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

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { isPendingStoredFileValue } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { CloseIcon, ErrorText, HelpText, IconButton, ImageLightbox, Label, LoaderRing } 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 image_field_module from "./image-field.module.js";
@@ -39,7 +39,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
         className: `byline-field-image ${field.name}`,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-image-header', image_field_module.header),
+                className: clsx('byline-field-image-header', image_field_module.header),
                 children: /*#__PURE__*/ jsx(Label, {
                     id: htmlId,
                     htmlFor: htmlId,
@@ -48,7 +48,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                 })
             }),
             showUploadWidget ? uploadGated ? /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-image-empty', image_field_module.empty),
+                className: clsx('byline-field-image-empty', image_field_module.empty),
                 role: "note",
                 "data-testid": "upload-require-saved-document",
                 children: t('fields.upload.requireSavedDocument')
@@ -60,19 +60,19 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                     handleChange(uploaded);
                 }
             }) : /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-image-empty', image_field_module.empty),
+                className: clsx('byline-field-image-empty', image_field_module.empty),
                 children: t('fields.image.empty')
             }) : /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-field-image-tile', image_field_module.tile),
+                className: clsx('byline-field-image-tile', image_field_module.tile),
                 children: [
                     isUploading && /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-field-image-uploading', image_field_module.uploading),
+                        className: clsx('byline-field-image-uploading', image_field_module.uploading),
                         "aria-live": "polite",
                         "aria-busy": "true",
                         children: /*#__PURE__*/ jsx(LoaderRing, {})
                     }),
                     collectionPath && /*#__PURE__*/ jsx("div", {
-                        className: classnames('byline-field-image-remove', image_field_module.remove),
+                        className: clsx('byline-field-image-remove', image_field_module.remove),
                         children: /*#__PURE__*/ jsx(IconButton, {
                             type: "button",
                             intent: "noeffect",
@@ -87,17 +87,17 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                         })
                     }),
                     previewUrl && /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-image-preview-wrap', image_field_module["preview-wrap"]),
+                        className: clsx('byline-field-image-preview-wrap', image_field_module["preview-wrap"]),
                         children: [
                             canOpenLightbox ? /*#__PURE__*/ jsx("button", {
                                 type: "button",
                                 onClick: ()=>setLightboxOpen(true),
                                 "aria-label": t('fields.image.openLightboxAriaLabel'),
-                                className: classnames('byline-field-image-preview-button', image_field_module["preview-button"]),
+                                className: clsx('byline-field-image-preview-button', image_field_module["preview-button"]),
                                 children: /*#__PURE__*/ jsx("img", {
                                     src: previewUrl,
                                     alt: incomingValue.originalFilename ?? incomingValue.filename,
-                                    className: classnames('byline-field-image-preview', image_field_module.preview, 'image/svg+xml' === incomingValue.mimeType && [
+                                    className: clsx('byline-field-image-preview', image_field_module.preview, 'image/svg+xml' === incomingValue.mimeType && [
                                         'byline-field-image-preview-svg',
                                         image_field_module["preview-svg"]
                                     ])
@@ -105,24 +105,24 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                             }) : /*#__PURE__*/ jsx("img", {
                                 src: previewUrl,
                                 alt: incomingValue.originalFilename ?? incomingValue.filename,
-                                className: classnames('byline-field-image-preview', image_field_module.preview, 'image/svg+xml' === incomingValue.mimeType && [
+                                className: clsx('byline-field-image-preview', image_field_module.preview, 'image/svg+xml' === incomingValue.mimeType && [
                                     'byline-field-image-preview-svg',
                                     image_field_module["preview-svg"]
                                 ])
                             }),
                             isPending && /*#__PURE__*/ jsx("div", {
-                                className: classnames('byline-field-image-pending', image_field_module.pending),
+                                className: clsx('byline-field-image-pending', image_field_module.pending),
                                 children: t('fields.fileMeta.pendingUpload')
                             })
                         ]
                     }),
                     /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-image-meta', image_field_module.meta),
+                        className: clsx('byline-field-image-meta', image_field_module.meta),
                         children: [
                             /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                        className: clsx('byline-field-image-meta-key', image_field_module["meta-key"]),
                                         children: t('fields.fileMeta.filename')
                                     }),
                                     ' ',
@@ -132,7 +132,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                             /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                        className: clsx('byline-field-image-meta-key', image_field_module["meta-key"]),
                                         children: t('fields.fileMeta.original')
                                     }),
                                     ' ',
@@ -142,7 +142,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                             /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                        className: clsx('byline-field-image-meta-key', image_field_module["meta-key"]),
                                         children: t('fields.fileMeta.type')
                                     }),
                                     ' ',
@@ -152,7 +152,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                             /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                        className: clsx('byline-field-image-meta-key', image_field_module["meta-key"]),
                                         children: t('fields.fileMeta.size')
                                     }),
                                     ' ',
@@ -162,12 +162,12 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                             isPending ? /*#__PURE__*/ jsxs("div", {
                                 children: [
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                        className: clsx('byline-field-image-meta-key', image_field_module["meta-key"]),
                                         children: t('fields.fileMeta.status')
                                     }),
                                     ' ',
                                     /*#__PURE__*/ jsx("span", {
-                                        className: classnames('byline-field-image-meta-pending', image_field_module["meta-pending"]),
+                                        className: clsx('byline-field-image-meta-pending', image_field_module["meta-pending"]),
                                         children: t('fields.fileMeta.willUploadOnSave')
                                     })
                                 ]
@@ -176,7 +176,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                                     /*#__PURE__*/ jsxs("div", {
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                                className: clsx('byline-field-image-meta-key', image_field_module["meta-key"]),
                                                 children: t('fields.fileMeta.storage')
                                             }),
                                             ' ',
@@ -186,7 +186,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                                     incomingValue?.imageWidth != null && /*#__PURE__*/ jsxs("div", {
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                                className: clsx('byline-field-image-meta-key', image_field_module["meta-key"]),
                                                 children: t('fields.imageMeta.dimensions')
                                             }),
                                             ' ',
@@ -197,7 +197,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                                     incomingValue?.imageFormat != null && /*#__PURE__*/ jsxs("div", {
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                                className: clsx('byline-field-image-meta-key', image_field_module["meta-key"]),
                                                 children: t('fields.imageMeta.format')
                                             }),
                                             ' ',
@@ -207,7 +207,7 @@ const ImageField = ({ field, value, defaultValue, onChange: _onChange, path })=>
                                     /*#__PURE__*/ jsxs("div", {
                                         children: [
                                             /*#__PURE__*/ jsx("span", {
-                                                className: classnames('byline-field-image-meta-key', image_field_module["meta-key"]),
+                                                className: clsx('byline-field-image-meta-key', image_field_module["meta-key"]),
                                                 children: t('fields.imageMeta.thumbnail')
                                             }),
                                             ' ',

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

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, 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 image_upload_field_module from "./image-upload-field.module.js";
 const ImageUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded, accept = 'image/*' })=>{
@@ -88,13 +88,13 @@ const ImageUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded
     ]);
     const isProcessing = 'processing' === status;
     return /*#__PURE__*/ jsxs("div", {
-        className: classnames('byline-field-image-upload', image_upload_field_module.root),
+        className: clsx('byline-field-image-upload', image_upload_field_module.root),
         children: [
             /*#__PURE__*/ jsx("input", {
                 ref: inputRef,
                 type: "file",
                 accept: accept,
-                className: classnames('byline-field-image-upload-input', image_upload_field_module.input),
+                className: clsx('byline-field-image-upload-input', image_upload_field_module.input),
                 onChange: handleFileChange,
                 disabled: isProcessing,
                 "aria-hidden": "true",
@@ -114,7 +114,7 @@ const ImageUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded
                         handleBrowseClick();
                     }
                 },
-                className: classnames('byline-field-image-upload-zone', image_upload_field_module.zone, isDragOver && !isProcessing && [
+                className: clsx('byline-field-image-upload-zone', image_upload_field_module.zone, isDragOver && !isProcessing && [
                     'byline-field-image-upload-zone-active',
                     image_upload_field_module["zone-active"]
                 ], isProcessing && [
@@ -124,7 +124,7 @@ const ImageUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded
                 children: isProcessing ? /*#__PURE__*/ jsxs(Fragment, {
                     children: [
                         /*#__PURE__*/ jsxs("svg", {
-                            className: classnames('byline-field-image-upload-spinner', image_upload_field_module.spinner),
+                            className: clsx('byline-field-image-upload-spinner', image_upload_field_module.spinner),
                             xmlns: "http://www.w3.org/2000/svg",
                             fill: "none",
                             viewBox: "0 0 24 24",
@@ -150,7 +150,7 @@ const ImageUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded
                             ]
                         }),
                         /*#__PURE__*/ jsx("span", {
-                            className: classnames('byline-field-image-upload-label', image_upload_field_module.label),
+                            className: clsx('byline-field-image-upload-label', image_upload_field_module.label),
                             children: t('fields.image.upload.processing')
                         })
                     ]
@@ -158,7 +158,7 @@ const ImageUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded
                     children: [
                         /*#__PURE__*/ jsx("svg", {
                             xmlns: "http://www.w3.org/2000/svg",
-                            className: classnames('byline-field-image-upload-icon', image_upload_field_module.icon),
+                            className: clsx('byline-field-image-upload-icon', image_upload_field_module.icon),
                             fill: "none",
                             viewBox: "0 0 24 24",
                             stroke: "currentColor",
@@ -171,25 +171,25 @@ const ImageUploadField = ({ field: _field, collectionPath, fieldPath, onUploaded
                             })
                         }),
                         /*#__PURE__*/ jsxs("span", {
-                            className: classnames('byline-field-image-upload-label', image_upload_field_module.label),
+                            className: clsx('byline-field-image-upload-label', image_upload_field_module.label),
                             children: [
                                 t('fields.image.upload.label'),
                                 ' ',
                                 /*#__PURE__*/ jsx("span", {
-                                    className: classnames('byline-field-image-upload-action', image_upload_field_module.action),
+                                    className: clsx('byline-field-image-upload-action', image_upload_field_module.action),
                                     children: t('fields.image.upload.browse')
                                 })
                             ]
                         }),
                         /*#__PURE__*/ jsx("span", {
-                            className: classnames('byline-field-image-upload-hint', image_upload_field_module.hint),
+                            className: clsx('byline-field-image-upload-hint', image_upload_field_module.hint),
                             children: t('fields.image.upload.hint')
                         })
                     ]
                 })
             }),
             'error' === status && errorMessage && /*#__PURE__*/ jsx("p", {
-                className: classnames('byline-field-image-upload-error', image_upload_field_module.error),
+                className: clsx('byline-field-image-upload-error', image_upload_field_module.error),
                 role: "alert",
                 children: errorMessage
             })

package/dist/fields/locale-badge.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import locale_badge_module from "./locale-badge.module.js";
 const LocaleBadge = ({ locale })=>/*#__PURE__*/ jsx("span", {
         "aria-hidden": "true",
         title: `Localised — editing ${locale.toUpperCase()} content`,
-        className: classnames('byline-locale-badge', locale_badge_module.badge),
+        className: clsx('byline-locale-badge', locale_badge_module.badge),
         children: locale
     });
 export { LocaleBadge };

package/dist/fields/relation/relation-display.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
+import clsx from "clsx";
 import relation_display_module from "./relation-display.module.js";
 function PickerCell({ column, record }) {
     const name = String(column.fieldName);
@@ -15,7 +15,7 @@ function PickerCell({ column, record }) {
     }
     else content = null == value ? null : 'string' == typeof value || 'number' == typeof value || 'boolean' == typeof value ? String(value) : null;
     return /*#__PURE__*/ jsx("div", {
-        className: classnames('byline-relation-cell', relation_display_module.cell, 'center' === column.align && [
+        className: clsx('byline-relation-cell', relation_display_module.cell, 'center' === column.align && [
             'byline-relation-cell-center',
             relation_display_module["cell-center"]
         ], 'right' === column.align && [

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

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { getCollectionAdminConfig, getCollectionDefinition } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Button, CloseIcon, EditIcon, ErrorText, HelpText, IconButton, Label } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useFieldError, useFieldValue } from "../../forms/form-context.js";
 import relation_field_module from "./relation-field.module.js";
 import { RelationPicker } from "./relation-picker.js";
@@ -40,7 +40,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
         className: `byline-field-relation ${field.name}`,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-relation-header', relation_field_module.header),
+                className: clsx('byline-field-relation-header', relation_field_module.header),
                 children: /*#__PURE__*/ jsx(Label, {
                     id: `${htmlId}-label`,
                     htmlFor: htmlId,
@@ -49,7 +49,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
                 })
             }),
             isUnknown ? /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-field-relation-error-tile', relation_field_module["error-tile"]),
+                className: clsx('byline-field-relation-error-tile', relation_field_module["error-tile"]),
                 children: [
                     /*#__PURE__*/ jsx("span", {
                         children: t('fields.relation.unknownError', {
@@ -58,14 +58,14 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
                         })
                     }),
                     /*#__PURE__*/ jsx("span", {
-                        className: classnames('byline-field-relation-error-text', relation_field_module["error-text"]),
+                        className: clsx('byline-field-relation-error-text', relation_field_module["error-text"]),
                         children: t('fields.relation.unknownHint')
                     })
                 ]
             }) : /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-relation-frame', relation_field_module.frame),
+                className: clsx('byline-field-relation-frame', relation_field_module.frame),
                 children: incomingValue ? /*#__PURE__*/ jsxs("div", {
-                    className: classnames('byline-field-relation-tile', relation_field_module.tile),
+                    className: clsx('byline-field-relation-tile', relation_field_module.tile),
                     children: [
                         /*#__PURE__*/ jsx(RelationSummary, {
                             targetDefinition: targetDef,
@@ -75,7 +75,7 @@ const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
                             cachedRecord: cachedRecord
                         }),
                         /*#__PURE__*/ jsxs("div", {
-                            className: classnames('byline-field-relation-actions', relation_field_module.actions),
+                            className: clsx('byline-field-relation-actions', relation_field_module.actions),
                             children: [
                                 /*#__PURE__*/ jsx(IconButton, {
                                     id: htmlId,

package/dist/fields/relation/relation-many-field.js

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { getCollectionAdminConfig, getCollectionDefinition } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Button, CloseIcon, DraggableSortable, ErrorText, GripperVerticalIcon, HelpText, IconButton, Label, PlusIcon, moveItem, useSortable } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useFieldError, useFieldValue, useFormContext } from "../../forms/form-context.js";
 import relation_field_module from "./relation-field.module.js";
 import { RelationPicker } from "./relation-picker.js";
@@ -24,20 +24,20 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
     return /*#__PURE__*/ jsxs("div", {
         ref: setNodeRef,
         style: style,
-        className: classnames('byline-field-relation-many-tile', relation_field_module["many-tile"], isDragging && [
+        className: clsx('byline-field-relation-many-tile', relation_field_module["many-tile"], isDragging && [
             'byline-field-relation-many-tile-dragging',
             relation_field_module["many-tile-dragging"]
         ]),
         children: [
             /*#__PURE__*/ jsx("button", {
                 type: "button",
-                className: classnames('byline-field-relation-many-grip', relation_field_module["many-grip"]),
+                className: clsx('byline-field-relation-many-grip', relation_field_module["many-grip"]),
                 ...attributes,
                 ...listeners,
                 children: /*#__PURE__*/ jsx(GripperVerticalIcon, {})
             }),
             /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-relation-many-body', relation_field_module["many-body"]),
+                className: clsx('byline-field-relation-many-body', relation_field_module["many-body"]),
                 children: children
             }),
             /*#__PURE__*/ jsx(IconButton, {
@@ -45,7 +45,7 @@ const RelationManyTile = ({ id, children, onRemove, removeAriaLabel })=>{
                 size: "xs",
                 intent: "noeffect",
                 "aria-label": removeAriaLabel,
-                className: classnames('byline-field-relation-many-remove', relation_field_module["many-remove"]),
+                className: clsx('byline-field-relation-many-remove', relation_field_module["many-remove"]),
                 onClick: onRemove,
                 children: /*#__PURE__*/ jsx(CloseIcon, {
                     width: "14px",
@@ -107,7 +107,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
         className: `byline-field-relation ${field.name}`,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: classnames('byline-field-relation-header', relation_field_module.header),
+                className: clsx('byline-field-relation-header', relation_field_module.header),
                 children: /*#__PURE__*/ jsx(Label, {
                     id: `${htmlId}-label`,
                     htmlFor: htmlId,
@@ -116,7 +116,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
                 })
             }),
             isUnknown ? /*#__PURE__*/ jsxs("div", {
-                className: classnames('byline-field-relation-error-tile', relation_field_module["error-tile"]),
+                className: clsx('byline-field-relation-error-tile', relation_field_module["error-tile"]),
                 children: [
                     /*#__PURE__*/ jsx("span", {
                         children: t('fields.relation.unknownError', {
@@ -125,24 +125,24 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
                         })
                     }),
                     /*#__PURE__*/ jsx("span", {
-                        className: classnames('byline-field-relation-error-text', relation_field_module["error-text"]),
+                        className: clsx('byline-field-relation-error-text', relation_field_module["error-text"]),
                         children: t('fields.relation.unknownHint')
                     })
                 ]
             }) : /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-relation-frame', relation_field_module.frame),
+                        className: clsx('byline-field-relation-frame', relation_field_module.frame),
                         children: [
                             0 === items.length ? /*#__PURE__*/ jsx("p", {
-                                className: classnames('byline-field-relation-many-empty', relation_field_module["many-empty"]),
+                                className: clsx('byline-field-relation-many-empty', relation_field_module["many-empty"]),
                                 children: t('fields.relation.manyEmpty', {
                                     label: targetDef.labels.plural
                                 })
                             }) : /*#__PURE__*/ jsx(DraggableSortable, {
                                 ids: items.map((v)=>v.targetDocumentId),
                                 onDragEnd: handleDragEnd,
-                                className: classnames('byline-field-relation-many', relation_field_module.many),
+                                className: clsx('byline-field-relation-many', relation_field_module.many),
                                 children: items.map((value)=>/*#__PURE__*/ jsx(RelationManyTile, {
                                         id: value.targetDocumentId,
                                         onRemove: ()=>handleRemove(value.targetDocumentId),
@@ -159,7 +159,7 @@ const RelationManyField = ({ field, defaultValue, id, path })=>{
                                     }, value.targetDocumentId))
                             }),
                             /*#__PURE__*/ jsx("div", {
-                                className: classnames('byline-field-relation-many-add', relation_field_module["many-add"]),
+                                className: clsx('byline-field-relation-many-add', relation_field_module["many-add"]),
                                 children: /*#__PURE__*/ jsxs(Button, {
                                     id: htmlId,
                                     size: "xs",

package/dist/fields/relation/relation-picker.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from "react";
 import { getCollectionAdminConfig, resolveItemViewColumns } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Button, CheckIcon, LoaderRing, Modal, Search } from "@byline/ui/react";
-import classnames from "classnames";
+import clsx from "clsx";
 import { useBylineFieldServices } from "../field-services-context.js";
 import { PickerCell, resolveFallbackDisplayField, resolveRowLabel, resolveSelectFields } from "./relation-display.js";
 import relation_picker_module from "./relation-picker.module.js";
@@ -128,15 +128,15 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
             },
             children: [
                 /*#__PURE__*/ jsx(Modal.Header, {
-                    className: classnames('byline-field-relation-picker-header', relation_picker_module.header),
+                    className: clsx('byline-field-relation-picker-header', relation_picker_module.header),
                     children: /*#__PURE__*/ jsx("h3", {
-                        className: classnames('byline-field-relation-picker-title', relation_picker_module.title),
+                        className: clsx('byline-field-relation-picker-title', relation_picker_module.title),
                         children: title
                     })
                 }),
                 /*#__PURE__*/ jsx(Modal.Content, {
                     children: /*#__PURE__*/ jsxs("div", {
-                        className: classnames('byline-field-relation-picker-body', relation_picker_module.body),
+                        className: clsx('byline-field-relation-picker-body', relation_picker_module.body),
                         children: [
                             /*#__PURE__*/ jsx(Search, {
                                 onSearch: (q)=>{
@@ -151,25 +151,25 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
                                 placeholder: t('fields.relation.picker.searchPlaceholder')
                             }),
                             /*#__PURE__*/ jsxs("div", {
-                                className: classnames('byline-field-relation-picker-list', relation_picker_module.list),
+                                className: clsx('byline-field-relation-picker-list', relation_picker_module.list),
                                 children: [
                                     loading && 0 === documents.length && /*#__PURE__*/ jsx("div", {
-                                        className: classnames('byline-field-relation-picker-loading', relation_picker_module.loading),
+                                        className: clsx('byline-field-relation-picker-loading', relation_picker_module.loading),
                                         children: /*#__PURE__*/ jsx(LoaderRing, {
                                             size: 24,
                                             color: "#888888"
                                         })
                                     }),
                                     !loading && error && /*#__PURE__*/ jsx("div", {
-                                        className: classnames('byline-field-relation-picker-error', relation_picker_module.error),
+                                        className: clsx('byline-field-relation-picker-error', relation_picker_module.error),
                                         children: error
                                     }),
                                     !loading && !error && 0 === documents.length && /*#__PURE__*/ jsx("div", {
-                                        className: classnames('byline-field-relation-picker-empty', relation_picker_module.empty),
+                                        className: clsx('byline-field-relation-picker-empty', relation_picker_module.empty),
                                         children: t('fields.relation.picker.empty')
                                     }),
                                     documents.length > 0 && /*#__PURE__*/ jsx("ul", {
-                                        className: classnames('byline-field-relation-picker-rows', relation_picker_module.rows),
+                                        className: clsx('byline-field-relation-picker-rows', relation_picker_module.rows),
                                         children: documents.map((doc)=>{
                                             const id = doc.id;
                                             const selected = multiple ? selectedMap.has(id) : selectedDocumentId === id;
@@ -180,7 +180,7 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
                                                     disabled: excluded,
                                                     "aria-pressed": multiple ? selected : void 0,
                                                     title: excluded ? t('fields.relation.picker.alreadyAdded') : void 0,
-                                                    className: classnames('byline-field-relation-picker-row-button', relation_picker_module["row-button"], multiple && [
+                                                    className: clsx('byline-field-relation-picker-row-button', relation_picker_module["row-button"], multiple && [
                                                         'byline-field-relation-picker-row-multi',
                                                         relation_picker_module["row-multi"]
                                                     ], selected && [
@@ -198,7 +198,7 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
                                                     children: [
                                                         multiple && /*#__PURE__*/ jsx("span", {
                                                             "aria-hidden": "true",
-                                                            className: classnames('byline-field-relation-picker-check', relation_picker_module.check, (selected || excluded) && [
+                                                            className: clsx('byline-field-relation-picker-check', relation_picker_module.check, (selected || excluded) && [
                                                                 'byline-field-relation-picker-check-checked',
                                                                 relation_picker_module["check-checked"]
                                                             ]),
@@ -208,26 +208,26 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
                                                             })
                                                         }),
                                                         pickerColumns && pickerColumns.length > 0 ? /*#__PURE__*/ jsx("div", {
-                                                            className: classnames('byline-field-relation-picker-row-cells', relation_picker_module["row-cells"]),
+                                                            className: clsx('byline-field-relation-picker-row-cells', relation_picker_module["row-cells"]),
                                                             children: pickerColumns.map((col)=>/*#__PURE__*/ jsx(PickerCell, {
                                                                     column: col,
                                                                     record: doc
                                                                 }, String(col.fieldName)))
                                                         }) : /*#__PURE__*/ jsxs("div", {
-                                                            className: classnames('byline-field-relation-picker-row-stack', relation_picker_module["row-stack"]),
+                                                            className: clsx('byline-field-relation-picker-row-stack', relation_picker_module["row-stack"]),
                                                             children: [
                                                                 /*#__PURE__*/ jsx("span", {
-                                                                    className: classnames('byline-field-relation-picker-row-label', relation_picker_module["row-label"]),
+                                                                    className: clsx('byline-field-relation-picker-row-label', relation_picker_module["row-label"]),
                                                                     children: resolveRowLabel(doc, resolvedDisplayField) || id
                                                                 }),
                                                                 'string' == typeof doc.path && doc.path.length > 0 && /*#__PURE__*/ jsx("span", {
-                                                                    className: classnames('byline-field-relation-picker-row-path', relation_picker_module["row-path"]),
+                                                                    className: clsx('byline-field-relation-picker-row-path', relation_picker_module["row-path"]),
                                                                     children: doc.path
                                                                 })
                                                             ]
                                                         }),
                                                         excluded && /*#__PURE__*/ jsx("span", {
-                                                            className: classnames('byline-field-relation-picker-added-hint', relation_picker_module["added-hint"]),
+                                                            className: clsx('byline-field-relation-picker-added-hint', relation_picker_module["added-hint"]),
                                                             children: t('fields.relation.picker.alreadyAdded')
                                                         })
                                                     ]
@@ -238,7 +238,7 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
                                 ]
                             }),
                             totalPages > 1 && /*#__PURE__*/ jsxs("div", {
-                                className: classnames('byline-field-relation-picker-pager', relation_picker_module.pager),
+                                className: clsx('byline-field-relation-picker-pager', relation_picker_module.pager),
                                 children: [
                                     /*#__PURE__*/ jsx(Button, {
                                         size: "xs",
@@ -276,12 +276,12 @@ const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField,
                             intent: "noeffect",
                             type: "button",
                             onClick: onDismiss,
-                            className: classnames('byline-field-relation-picker-action', relation_picker_module.action),
+                            className: clsx('byline-field-relation-picker-action', relation_picker_module.action),
                             children: t('common.actions.cancel')
                         }),
                         /*#__PURE__*/ jsx(Button, {
                             size: "sm",
-                            className: classnames('byline-field-relation-picker-action', relation_picker_module.action),
+                            className: clsx('byline-field-relation-picker-action', relation_picker_module.action),
                             intent: "primary",
                             type: "button",
                             disabled: multiple ? 0 === selectedMap.size : !selectedDocumentId,