@byline/ui 2.5.2 → 2.6.0

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

@@ -1,18 +0,0 @@
-/**
- * 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

@@ -1,146 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { getCollectionAdminConfig, getCollectionDefinition } from "@byline/core";
-import classnames from "classnames";
-import { useFieldError, useFieldValue } from "../../forms/form-context.js";
-import { CloseIcon } from "../../icons/close-icon.js";
-import { EditIcon } from "../../icons/edit-icon.js";
-import { Button, ErrorText, IconButton, Label } from "../../uikit.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 [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;
-    const monoClass = classnames('byline-field-relation-mono', relation_field_module.mono);
-    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__*/ jsxs("span", {
-                        children: [
-                            "Relation field ",
-                            /*#__PURE__*/ jsx("code", {
-                                className: monoClass,
-                                children: field.name
-                            }),
-                            " targets unknown collection ",
-                            /*#__PURE__*/ jsx("code", {
-                                className: monoClass,
-                                children: field.targetCollection
-                            }),
-                            "."
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx("span", {
-                        className: classnames('byline-field-relation-error-text', relation_field_module["error-text"]),
-                        children: "Register the collection in your Byline config or correct the target path."
-                    })
-                ]
-            }) : 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": `Change ${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": `Remove ${targetDef.labels.singular}`,
-                                onClick: handleRemove,
-                                children: /*#__PURE__*/ jsx(CloseIcon, {
-                                    width: "15px",
-                                    height: "15px"
-                                })
-                            })
-                        ]
-                    })
-                ]
-            }) : /*#__PURE__*/ jsxs(Button, {
-                id: htmlId,
-                size: "xs",
-                variant: "outlined",
-                intent: "noeffect",
-                type: "button",
-                onClick: ()=>setPickerOpen(true),
-                children: [
-                    "Select ",
-                    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

@@ -1,13 +0,0 @@
-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

@@ -1,62 +0,0 @@
-: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

@@ -1,49 +0,0 @@
-/**
- * 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

@@ -1,233 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useState } from "react";
-import { getCollectionAdminConfig } from "@byline/core";
-import classnames from "classnames";
-import { useBylineFieldServices } from "../../services/field-services-context.js";
-import { Button, LoaderRing, Modal, Search } from "../../uikit.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 [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 : 'Failed to load documents');
-        }).finally(()=>{
-            if (!cancelled) setLoading(false);
-        });
-        return ()=>{
-            cancelled = true;
-        };
-    }, [
-        isOpen,
-        targetCollectionPath,
-        query,
-        page,
-        displayField,
-        targetDefinition,
-        pickerColumns,
-        getCollectionDocuments
-    ]);
-    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 = targetDefinition ? `Select ${targetDefinition.labels.singular}` : `Select ${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: "Search"
-                            }),
-                            /*#__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: "No documents found"
-                                    }),
-                                    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: "Previous"
-                                    }),
-                                    /*#__PURE__*/ jsxs("span", {
-                                        children: [
-                                            "Page ",
-                                            page,
-                                            " of ",
-                                            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: "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: "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: "Select"
-                        })
-                    ]
-                })
-            ]
-        })
-    });
-};
-export { RelationPicker };

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

@@ -1,26 +0,0 @@
-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

@@ -1,124 +0,0 @@
-: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);
-}
-