@byline/admin 2.5.2 → 2.6.0

package/dist/fields/relation/relation-field.d.ts

@@ -0,0 +1,18 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { RelationField as FieldType, RelatedDocumentValue } from '@byline/core';
+interface RelationFieldProps {
+    field: FieldType;
+    value?: RelatedDocumentValue | null;
+    defaultValue?: RelatedDocumentValue | null;
+    onChange?: (value: RelatedDocumentValue | null) => void;
+    id?: string;
+    path?: string;
+}
+export declare const RelationField: ({ field, value, defaultValue, onChange, id, path, }: RelationFieldProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,138 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { getCollectionAdminConfig, getCollectionDefinition } from "@byline/core";
+import { useTranslation } from "@byline/i18n/react";
+import { Button, CloseIcon, EditIcon, ErrorText, IconButton, Label } from "@byline/ui/react";
+import classnames from "classnames";
+import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import relation_field_module from "./relation-field.module.js";
+import { RelationPicker } from "./relation-picker.js";
+import { RelationSummary } from "./relation-summary.js";
+const RelationField = ({ field, value, defaultValue, onChange, id, path })=>{
+    const fieldPath = path ?? field.name;
+    const htmlId = id ?? fieldPath;
+    const fieldError = useFieldError(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const incomingValue = void 0 !== fieldValue ? fieldValue ?? null : value ?? defaultValue ?? null;
+    const targetDef = getCollectionDefinition(field.targetCollection);
+    const targetAdminConfig = getCollectionAdminConfig(field.targetCollection);
+    const { t } = useTranslation('byline-admin');
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [pickedRecord, setPickedRecord] = useState(null);
+    const handleSelect = (selection)=>{
+        setPickerOpen(false);
+        selection.record ? setPickedRecord({
+            id: selection.targetDocumentId,
+            record: selection.record
+        }) : setPickedRecord(null);
+        onChange?.({
+            targetDocumentId: selection.targetDocumentId,
+            targetCollectionId: selection.targetCollectionId
+        });
+    };
+    const handleRemove = ()=>{
+        setPickedRecord(null);
+        onChange?.(null);
+    };
+    const cachedRecord = pickedRecord && incomingValue && pickedRecord.id === incomingValue.targetDocumentId ? pickedRecord.record : null;
+    const isUnknown = null == targetDef;
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-relation ${field.name}`,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-relation-header', relation_field_module.header),
+                children: /*#__PURE__*/ jsx(Label, {
+                    id: `${htmlId}-label`,
+                    htmlFor: htmlId,
+                    label: field.label ?? field.name,
+                    required: !field.optional
+                })
+            }),
+            field.helpText && /*#__PURE__*/ jsx("div", {
+                className: classnames('byline-field-relation-help', relation_field_module.help),
+                children: field.helpText
+            }),
+            isUnknown ? /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-field-relation-error-tile', relation_field_module["error-tile"]),
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: t('fields.relation.unknownError', {
+                            name: field.name,
+                            target: field.targetCollection
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: classnames('byline-field-relation-error-text', relation_field_module["error-text"]),
+                        children: t('fields.relation.unknownHint')
+                    })
+                ]
+            }) : incomingValue ? /*#__PURE__*/ jsxs("div", {
+                className: classnames('byline-field-relation-tile', relation_field_module.tile),
+                children: [
+                    /*#__PURE__*/ jsx(RelationSummary, {
+                        targetDefinition: targetDef,
+                        targetAdminConfig: targetAdminConfig,
+                        displayField: field.displayField,
+                        value: incomingValue,
+                        cachedRecord: cachedRecord
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-field-relation-actions', relation_field_module.actions),
+                        children: [
+                            /*#__PURE__*/ jsx(IconButton, {
+                                id: htmlId,
+                                type: "button",
+                                intent: "noeffect",
+                                size: "xs",
+                                "aria-label": t('fields.relation.changeAriaLabel', {
+                                    label: targetDef.labels.singular
+                                }),
+                                onClick: ()=>setPickerOpen(true),
+                                children: /*#__PURE__*/ jsx(EditIcon, {
+                                    width: "15px",
+                                    height: "15px"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(IconButton, {
+                                type: "button",
+                                intent: "noeffect",
+                                size: "xs",
+                                "aria-label": t('fields.relation.removeAriaLabel', {
+                                    label: targetDef.labels.singular
+                                }),
+                                onClick: handleRemove,
+                                children: /*#__PURE__*/ jsx(CloseIcon, {
+                                    width: "15px",
+                                    height: "15px"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ jsx(Button, {
+                id: htmlId,
+                size: "xs",
+                variant: "outlined",
+                intent: "noeffect",
+                type: "button",
+                onClick: ()=>setPickerOpen(true),
+                children: t('fields.relation.selectButton', {
+                    label: targetDef.labels.singular
+                })
+            }),
+            fieldError && /*#__PURE__*/ jsx(ErrorText, {
+                id: `${field.name}-error`,
+                text: fieldError
+            }),
+            !isUnknown && /*#__PURE__*/ jsx(RelationPicker, {
+                targetCollectionPath: field.targetCollection,
+                targetDefinition: targetDef,
+                displayField: field.displayField,
+                isOpen: pickerOpen,
+                onSelect: handleSelect,
+                onDismiss: ()=>setPickerOpen(false)
+            })
+        ]
+    });
+};
+export { RelationField };

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

@@ -0,0 +1,13 @@
+import "./relation-field_module.css";
+const relation_field_module = {
+    header: "header-y7lSnb",
+    help: "help-DEGVPH",
+    "error-tile": "error-tile-y2kiiq",
+    errorTile: "error-tile-y2kiiq",
+    "error-text": "error-text-jHQh34",
+    errorText: "error-text-jHQh34",
+    tile: "tile-Y3_yre",
+    actions: "actions-Nov8hS",
+    mono: "mono-y8Xo6b"
+};
+export default relation_field_module;

package/dist/fields/relation/relation-field_module.css

@@ -0,0 +1,62 @@
+:is(.header-y7lSnb, .byline-field-relation-header) {
+  align-items: baseline;
+  gap: var(--spacing-8);
+  margin-bottom: .25rem;
+  display: flex;
+}
+
+:is(.help-DEGVPH, .byline-field-relation-help) {
+  color: var(--gray-400);
+  font-size: var(--font-size-xs);
+  margin-bottom: .25rem;
+}
+
+:is(.error-tile-y2kiiq, .byline-field-relation-error-tile) {
+  padding: var(--spacing-8);
+  border: var(--border-width-thin) var(--border-style-solid) var(--red-700);
+  background-color: oklch(from var(--red-900) l c h / .2);
+  border-radius: var(--border-radius-md);
+  color: var(--red-200);
+  font-size: var(--font-size-xs);
+  flex-direction: column;
+  gap: .25rem;
+  margin-top: .25rem;
+  display: flex;
+}
+
+:is(.error-text-jHQh34, .byline-field-relation-error-text) {
+  color: oklch(from var(--red-400) l c h / .8);
+}
+
+:is(.tile-Y3_yre, .byline-field-relation-tile) {
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+  padding: var(--spacing-8);
+  border: var(--border-width-thin) var(--border-style-solid) var(--primary-500);
+  border-radius: var(--border-radius-md);
+  color: var(--gray-200);
+  font-size: var(--font-size-xs);
+  margin-top: .25rem;
+  display: flex;
+}
+
+:is(.actions-Nov8hS, .byline-field-relation-actions) {
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+  display: flex;
+}
+
+.byline-field-relation-actions .byline-button {
+  color: var(--gray-900);
+}
+
+:is(.dark .byline-field-relation-actions .byline-button, [data-theme="dark"] .byline-field-relation-actions .byline-button) {
+  color: var(--gray-200);
+}
+
+:is(.mono-y8Xo6b, .byline-field-relation-mono) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+

package/dist/fields/relation/relation-picker.d.ts

@@ -0,0 +1,49 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { CollectionDefinition } from '@byline/core';
+/**
+ * Row rendering strategy, in priority order:
+ *   1. `CollectionAdminConfig.picker` — a ColumnDefinition[] from the target
+ *      admin config. Each row renders the declared columns side-by-side,
+ *      reusing any column formatters (thumbnail, date, etc).
+ *   2. Explicit `displayField` prop on this component (forwarded from
+ *      `RelationField.displayField`).
+ *   3. `CollectionDefinition.useAsTitle` on the target.
+ *   4. First top-level `text` field on the target.
+ *
+ * Paths 2–4 render a single-line label (primary) + `path` (secondary).
+ */
+interface RelationPickerProps {
+    /** The target collection path (e.g. `'media'`). */
+    targetCollectionPath: string;
+    /** The target collection definition (used for labels + displayField fallback). */
+    targetDefinition?: CollectionDefinition | null;
+    /** Explicit display field to render as row label. */
+    displayField?: string;
+    /** Modal open/close state. */
+    isOpen: boolean;
+    /**
+     * Called with the picked selection when the user confirms.
+     *
+     * `record` is the raw document the picker row rendered — the caller can
+     * use it to show the selected value in its own tile without a refetch.
+     * The fields available on `record` are whatever `resolveSelectFields`
+     * asked the listing endpoint for (picker columns + `useAsTitle` +
+     * `displayField`), so any display surface downstream of the picker that
+     * also renders from those same columns will find the data it needs.
+     */
+    onSelect: (selection: {
+        targetDocumentId: string;
+        targetCollectionId: string;
+        record?: Record<string, any>;
+    }) => void;
+    /** Called when the user dismisses the modal. */
+    onDismiss: () => void;
+}
+export declare const RelationPicker: ({ targetCollectionPath, targetDefinition, displayField, isOpen, onSelect, onDismiss, }: RelationPickerProps) => import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,236 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { getCollectionAdminConfig } from "@byline/core";
+import { useTranslation } from "@byline/i18n/react";
+import { Button, LoaderRing, Modal, Search } from "@byline/ui/react";
+import classnames from "classnames";
+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";
+const PAGE_SIZE = 15;
+const RelationPicker = ({ targetCollectionPath, targetDefinition, displayField, isOpen, onSelect, onDismiss })=>{
+    const [query, setQuery] = useState('');
+    const [page, setPage] = useState(1);
+    const { t } = useTranslation('byline-admin');
+    const [selectedDocumentId, setSelectedDocumentId] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [documents, setDocuments] = useState([]);
+    const [totalPages, setTotalPages] = useState(1);
+    const [collectionId, setCollectionId] = useState(null);
+    const { getCollectionDocuments } = useBylineFieldServices();
+    const targetAdminConfig = getCollectionAdminConfig(targetCollectionPath);
+    const pickerColumns = targetAdminConfig?.picker;
+    useEffect(()=>{
+        if (isOpen) {
+            setQuery('');
+            setPage(1);
+            setSelectedDocumentId(null);
+            setError(null);
+        }
+    }, [
+        isOpen
+    ]);
+    useEffect(()=>{
+        if (!isOpen) return;
+        let cancelled = false;
+        const selectFields = resolveSelectFields(targetDefinition, displayField, pickerColumns);
+        setLoading(true);
+        setError(null);
+        getCollectionDocuments({
+            collection: targetCollectionPath,
+            params: {
+                page,
+                page_size: PAGE_SIZE,
+                query: query.length > 0 ? query : void 0,
+                fields: selectFields
+            }
+        }).then((response)=>{
+            if (cancelled) return;
+            setDocuments(response.docs);
+            setTotalPages(response.meta.totalPages ?? 1);
+            setCollectionId(response.included.collection.id);
+        }).catch((err)=>{
+            if (cancelled) return;
+            setError(err instanceof Error ? err.message : t('fields.relation.picker.loadFailed'));
+        }).finally(()=>{
+            if (!cancelled) setLoading(false);
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        isOpen,
+        targetCollectionPath,
+        query,
+        page,
+        displayField,
+        targetDefinition,
+        pickerColumns,
+        getCollectionDocuments,
+        t
+    ]);
+    const resolvedDisplayField = displayField ?? targetDefinition?.useAsTitle ?? resolveFallbackDisplayField(targetDefinition) ?? null;
+    const handleSelect = useCallback(()=>{
+        if (!selectedDocumentId || !collectionId) return;
+        const record = documents.find((d)=>d?.id === selectedDocumentId);
+        onSelect({
+            targetDocumentId: selectedDocumentId,
+            targetCollectionId: collectionId,
+            record
+        });
+    }, [
+        selectedDocumentId,
+        collectionId,
+        documents,
+        onSelect
+    ]);
+    const title = t('fields.relation.selectPickerTitle', {
+        label: targetDefinition?.labels.singular ?? targetCollectionPath
+    });
+    return /*#__PURE__*/ jsx(Modal, {
+        isOpen: isOpen,
+        onDismiss: onDismiss,
+        children: /*#__PURE__*/ jsxs(Modal.Container, {
+            style: {
+                maxWidth: '600px',
+                width: '100%'
+            },
+            children: [
+                /*#__PURE__*/ jsx(Modal.Header, {
+                    className: classnames('byline-field-relation-picker-header', relation_picker_module.header),
+                    children: /*#__PURE__*/ jsx("h3", {
+                        className: classnames('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),
+                        children: [
+                            /*#__PURE__*/ jsx(Search, {
+                                onSearch: (q)=>{
+                                    setPage(1);
+                                    setQuery(q ?? '');
+                                },
+                                onClear: ()=>{
+                                    setPage(1);
+                                    setQuery('');
+                                },
+                                inputSize: "sm",
+                                placeholder: t('fields.relation.picker.searchPlaceholder')
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: classnames('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),
+                                        children: /*#__PURE__*/ jsx(LoaderRing, {
+                                            size: 24,
+                                            color: "#888888"
+                                        })
+                                    }),
+                                    !loading && error && /*#__PURE__*/ jsx("div", {
+                                        className: classnames('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),
+                                        children: t('fields.relation.picker.empty')
+                                    }),
+                                    documents.length > 0 && /*#__PURE__*/ jsx("ul", {
+                                        className: classnames('byline-field-relation-picker-rows', relation_picker_module.rows),
+                                        children: documents.map((doc)=>{
+                                            const id = doc.id;
+                                            const selected = selectedDocumentId === id;
+                                            return /*#__PURE__*/ jsx("li", {
+                                                children: /*#__PURE__*/ jsx("button", {
+                                                    type: "button",
+                                                    className: classnames('byline-field-relation-picker-row-button', relation_picker_module["row-button"], selected && [
+                                                        'byline-field-relation-picker-row-selected',
+                                                        relation_picker_module["row-selected"]
+                                                    ]),
+                                                    onClick: ()=>setSelectedDocumentId(id),
+                                                    children: pickerColumns && pickerColumns.length > 0 ? /*#__PURE__*/ jsx("div", {
+                                                        className: classnames('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"]),
+                                                        children: [
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                className: classnames('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"]),
+                                                                children: doc.path
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            }, id);
+                                        })
+                                    })
+                                ]
+                            }),
+                            totalPages > 1 && /*#__PURE__*/ jsxs("div", {
+                                className: classnames('byline-field-relation-picker-pager', relation_picker_module.pager),
+                                children: [
+                                    /*#__PURE__*/ jsx(Button, {
+                                        size: "xs",
+                                        variant: "outlined",
+                                        intent: "noeffect",
+                                        type: "button",
+                                        disabled: page <= 1 || loading,
+                                        onClick: ()=>setPage((p)=>Math.max(1, p - 1)),
+                                        children: t('common.pager.previous')
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: t('common.pager.pageOf', {
+                                            page,
+                                            total: totalPages
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        size: "xs",
+                                        variant: "outlined",
+                                        intent: "noeffect",
+                                        type: "button",
+                                        disabled: page >= totalPages || loading,
+                                        onClick: ()=>setPage((p)=>Math.min(totalPages, p + 1)),
+                                        children: t('common.pager.next')
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Modal.Actions, {
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            size: "sm",
+                            intent: "noeffect",
+                            type: "button",
+                            onClick: onDismiss,
+                            className: classnames('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),
+                            intent: "primary",
+                            type: "button",
+                            disabled: !selectedDocumentId,
+                            onClick: handleSelect,
+                            children: t('common.actions.select')
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { RelationPicker };

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

@@ -0,0 +1,26 @@
+import "./relation-picker_module.css";
+const relation_picker_module = {
+    header: "header-quQOWP",
+    title: "title-nX1CSv",
+    body: "body-S2EcHm",
+    list: "list-UFzd89",
+    loading: "loading-LZVbkl",
+    error: "error-ZtOVuJ",
+    empty: "empty-ks6ZeP",
+    rows: "rows-QZrdT9",
+    "row-button": "row-button-ZHfXmj",
+    rowButton: "row-button-ZHfXmj",
+    "row-selected": "row-selected-VlrgyO",
+    rowSelected: "row-selected-VlrgyO",
+    "row-cells": "row-cells-aSIcf5",
+    rowCells: "row-cells-aSIcf5",
+    "row-stack": "row-stack-BOPzzj",
+    rowStack: "row-stack-BOPzzj",
+    "row-label": "row-label-gEaOEB",
+    rowLabel: "row-label-gEaOEB",
+    "row-path": "row-path-v1lJwb",
+    rowPath: "row-path-v1lJwb",
+    pager: "pager-EWOfET",
+    action: "action-STxQVM"
+};
+export default relation_picker_module;

package/dist/fields/relation/relation-picker_module.css

@@ -0,0 +1,124 @@
+:is(.header-quQOWP, .byline-field-relation-picker-header) {
+  margin-bottom: var(--spacing-8);
+  padding-top: 1rem;
+}
+
+:is(.title-nX1CSv, .byline-field-relation-picker-title) {
+  margin: 0 0 var(--spacing-8) 0;
+  font-size: var(--font-size-xl);
+}
+
+:is(.body-S2EcHm, .byline-field-relation-picker-body) {
+  flex-direction: column;
+  gap: .75rem;
+  display: flex;
+}
+
+:is(.list-UFzd89, .byline-field-relation-picker-list) {
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-700);
+  border-radius: var(--border-radius-md);
+  min-height: 320px;
+  max-height: 420px;
+  overflow-y: auto;
+}
+
+:is(.loading-LZVbkl, .byline-field-relation-picker-loading) {
+  justify-content: center;
+  align-items: center;
+  padding: 2.5rem 0;
+  display: flex;
+}
+
+:is(.error-ZtOVuJ, .byline-field-relation-picker-error) {
+  color: var(--red-500);
+  font-size: var(--font-size-sm);
+  text-align: center;
+  padding: 2.5rem 1rem;
+}
+
+:is(.empty-ks6ZeP, .byline-field-relation-picker-empty) {
+  color: var(--gray-400);
+  font-size: var(--font-size-sm);
+  text-align: center;
+  padding: 2.5rem 1rem;
+}
+
+:is(.rows-QZrdT9, .byline-field-relation-picker-rows) {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+:is(.rows-QZrdT9 > li + li, .byline-field-relation-picker-rows > li + li) {
+  border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-700);
+}
+
+:is(.row-button-ZHfXmj, .byline-field-relation-picker-row-button) {
+  width: 100%;
+  padding: var(--spacing-8) .75rem;
+  text-align: left;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+  transition: background-color .15s;
+}
+
+:is(.row-button-ZHfXmj:hover, .byline-field-relation-picker-row-button:hover) {
+  background-color: var(--gray-25);
+}
+
+:is(.row-selected-VlrgyO, .byline-field-relation-picker-row-selected) {
+  background-color: oklch(from var(--primary-200) l c h / .3);
+  border-left: 2px solid var(--primary-200);
+}
+
+:is(.row-cells-aSIcf5, .byline-field-relation-picker-row-cells) {
+  align-items: center;
+  gap: .75rem;
+  display: flex;
+}
+
+:is(.row-stack-BOPzzj, .byline-field-relation-picker-row-stack) {
+  flex-direction: column;
+  gap: .125rem;
+  display: flex;
+}
+
+:is(.row-label-gEaOEB, .byline-field-relation-picker-row-label) {
+  color: var(--gray-100);
+  font-size: var(--font-size-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:is(.row-path-v1lJwb, .byline-field-relation-picker-row-path) {
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:is(.pager-EWOfET, .byline-field-relation-picker-pager) {
+  color: var(--gray-400);
+  font-size: var(--font-size-xs);
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+:is(.action-STxQVM, .byline-field-relation-picker-action) {
+  min-width: 70px;
+}
+
+:is(:is([data-theme="dark"], .dark) .row-button-ZHfXmj:hover, :is([data-theme="dark"], .dark) .byline-field-relation-picker-row-button:hover) {
+  background-color: var(--gray-900);
+}
+
+:is(:is([data-theme="dark"], .dark) .row-selected-VlrgyO, :is([data-theme="dark"], .dark) .byline-field-relation-picker-row-selected) {
+  background-color: oklch(from var(--primary-900) l c h / .3);
+  border-left: 2px solid var(--primary-400);
+}
+