@byline/ui 0.9.3

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

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Input, Label } from "@infonomic/uikit/react";
+import classnames from "classnames";
+import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import { LocaleBadge } from "../locale-badge.js";
+import text_field_module from "./text-field.module.js";
+const TextField = ({ field, value, defaultValue, onChange, id, path, locale, components })=>{
+    const fieldPath = path ?? field.name;
+    const fieldError = useFieldError(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
+    const htmlId = id ?? fieldPath;
+    const handleChange = useCallback((value)=>{
+        if (onChange) onChange(value);
+    }, [
+        onChange
+    ]);
+    const slots = components;
+    const CustomLabel = slots?.Label;
+    const CustomHelpText = slots?.HelpText;
+    const CustomField = slots?.Field;
+    const BeforeField = slots?.beforeField;
+    const AfterField = slots?.afterField;
+    const slotBaseProps = {
+        field: field,
+        path: fieldPath,
+        value: incomingValue,
+        error: fieldError,
+        id: htmlId
+    };
+    const showBadge = !!locale && !!field.label;
+    const hasCustomLabel = !!CustomLabel;
+    const suppressInputLabel = showBadge || hasCustomLabel;
+    const suppressInputHelpText = !!CustomHelpText;
+    const labelRowClass = classnames('byline-field-text-label-row', text_field_module["label-row"]);
+    const renderLabel = ()=>{
+        if (hasCustomLabel) return /*#__PURE__*/ jsxs("div", {
+            className: labelRowClass,
+            children: [
+                /*#__PURE__*/ jsx(CustomLabel, {
+                    ...slotBaseProps,
+                    label: field.label,
+                    required: !field.optional
+                }),
+                showBadge && /*#__PURE__*/ jsx(LocaleBadge, {
+                    locale: locale
+                })
+            ]
+        });
+        if (showBadge) return /*#__PURE__*/ jsxs("div", {
+            className: labelRowClass,
+            children: [
+                /*#__PURE__*/ jsx(Label, {
+                    id: `${htmlId}-label`,
+                    htmlFor: htmlId,
+                    label: field.label,
+                    required: !field.optional
+                }),
+                /*#__PURE__*/ jsx(LocaleBadge, {
+                    locale: locale
+                })
+            ]
+        });
+        return null;
+    };
+    const renderInput = ()=>{
+        if (CustomField) return /*#__PURE__*/ jsx(CustomField, {
+            ...slotBaseProps,
+            onChange: handleChange,
+            defaultValue: defaultValue,
+            placeholder: field.placeholder
+        });
+        return /*#__PURE__*/ jsx(Input, {
+            id: htmlId,
+            name: field.name,
+            label: suppressInputLabel ? void 0 : field.label,
+            required: !field.optional,
+            helpText: suppressInputHelpText ? void 0 : field.helpText,
+            value: incomingValue,
+            onChange: (e)=>handleChange(e.target.value),
+            error: null != fieldError,
+            errorText: fieldError
+        });
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-text ${field.name}`,
+        children: [
+            renderLabel(),
+            BeforeField && /*#__PURE__*/ jsx(BeforeField, {
+                ...slotBaseProps
+            }),
+            renderInput(),
+            AfterField && /*#__PURE__*/ jsx(AfterField, {
+                ...slotBaseProps
+            }),
+            CustomHelpText && /*#__PURE__*/ jsx(CustomHelpText, {
+                ...slotBaseProps,
+                helpText: field.helpText
+            })
+        ]
+    });
+};
+export { TextField };

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

@@ -0,0 +1,6 @@
+import "./text-field_module.css";
+const text_field_module = {
+    "label-row": "label-row-sjBuRb",
+    labelRow: "label-row-sjBuRb"
+};
+export default text_field_module;

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

@@ -0,0 +1,5 @@
+:is(.label-row-sjBuRb, .byline-field-text-label-row) {
+  align-items: center;
+  display: flex;
+}
+

package/dist/fields/text-area/text-area-field.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { FieldComponentSlots, TextAreaField as FieldType } from '@byline/core';
+export declare const TextAreaField: ({ field, value, defaultValue, onChange, id, path, locale, components, }: {
+    field: FieldType;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    id?: string;
+    path?: string;
+    /** When provided, renders a LocaleBadge next to the field label. */
+    locale?: string;
+    /** Optional UI component slot overrides from the admin config. */
+    components?: FieldComponentSlots;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=text-area-field.d.ts.map

package/dist/fields/text-area/text-area-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area-field.d.ts","sourceRoot":"","sources":["../../../src/fields/text-area/text-area-field.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAS,mBAAmB,EAAE,aAAa,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA;AAQ1F,eAAO,MAAM,aAAa,GAAI,yEAS3B;IACD,KAAK,EAAE,SAAS,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,kEAAkE;IAClE,UAAU,CAAC,EAAE,mBAAmB,CAAA;CACjC,gCA4GA,CAAA"}

package/dist/fields/text-area/text-area-field.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Label, TextArea } from "@infonomic/uikit/react";
+import classnames from "classnames";
+import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import { LocaleBadge } from "../locale-badge.js";
+import text_area_field_module from "./text-area-field.module.js";
+const TextAreaField = ({ field, value, defaultValue, onChange, id, path, locale, components })=>{
+    const fieldPath = path ?? field.name;
+    const fieldError = useFieldError(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
+    const htmlId = id ?? fieldPath;
+    const handleChange = useCallback((value)=>{
+        if (onChange) onChange(value);
+    }, [
+        onChange
+    ]);
+    const slots = components;
+    const CustomLabel = slots?.Label;
+    const CustomHelpText = slots?.HelpText;
+    const CustomField = slots?.Field;
+    const BeforeField = slots?.beforeField;
+    const AfterField = slots?.afterField;
+    const slotBaseProps = {
+        field: field,
+        path: fieldPath,
+        value: incomingValue,
+        error: fieldError,
+        id: htmlId
+    };
+    const showBadge = !!locale && !!field.label;
+    const hasCustomLabel = !!CustomLabel;
+    const suppressInputLabel = showBadge || hasCustomLabel;
+    const suppressInputHelpText = !!CustomHelpText;
+    const labelRowClass = classnames('byline-field-text-area-label-row', text_area_field_module["label-row"]);
+    const renderLabel = ()=>{
+        if (hasCustomLabel) return /*#__PURE__*/ jsxs("div", {
+            className: labelRowClass,
+            children: [
+                /*#__PURE__*/ jsx(CustomLabel, {
+                    ...slotBaseProps,
+                    label: field.label,
+                    required: !field.optional
+                }),
+                showBadge && /*#__PURE__*/ jsx(LocaleBadge, {
+                    locale: locale
+                })
+            ]
+        });
+        if (showBadge) return /*#__PURE__*/ jsxs("div", {
+            className: labelRowClass,
+            children: [
+                /*#__PURE__*/ jsx(Label, {
+                    id: `${htmlId}-label`,
+                    htmlFor: htmlId,
+                    label: field.label,
+                    required: !field.optional
+                }),
+                /*#__PURE__*/ jsx(LocaleBadge, {
+                    locale: locale
+                })
+            ]
+        });
+        return null;
+    };
+    const renderInput = ()=>{
+        if (CustomField) return /*#__PURE__*/ jsx(CustomField, {
+            ...slotBaseProps,
+            onChange: handleChange,
+            defaultValue: defaultValue,
+            placeholder: field.placeholder
+        });
+        return /*#__PURE__*/ jsx(TextArea, {
+            id: htmlId,
+            name: field.name,
+            label: suppressInputLabel ? void 0 : field.label,
+            required: !field.optional,
+            helpText: suppressInputHelpText ? void 0 : field.helpText,
+            value: incomingValue,
+            onChange: (e)=>handleChange(e.target.value),
+            error: null != fieldError,
+            errorText: fieldError,
+            rows: 4
+        });
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-text-area ${field.name}`,
+        children: [
+            renderLabel(),
+            BeforeField && /*#__PURE__*/ jsx(BeforeField, {
+                ...slotBaseProps
+            }),
+            renderInput(),
+            AfterField && /*#__PURE__*/ jsx(AfterField, {
+                ...slotBaseProps
+            }),
+            CustomHelpText && /*#__PURE__*/ jsx(CustomHelpText, {
+                ...slotBaseProps,
+                helpText: field.helpText
+            })
+        ]
+    });
+};
+export { TextAreaField };

package/dist/fields/text-area/text-area-field.module.js

@@ -0,0 +1,6 @@
+import "./text-area-field_module.css";
+const text_area_field_module = {
+    "label-row": "label-row-HwX7C9",
+    labelRow: "label-row-HwX7C9"
+};
+export default text_area_field_module;

package/dist/fields/text-area/text-area-field_module.css

@@ -0,0 +1,5 @@
+:is(.label-row-HwX7C9, .byline-field-text-area-label-row) {
+  align-items: center;
+  display: flex;
+}
+

package/dist/fields/use-field-change-handler.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 { Field } from '@byline/core';
+/**
+ * Returns a change handler for the given field that runs through the
+ * field-hook pipeline before committing the value:
+ *
+ *   1. `clearFieldError(path)`
+ *   2. `field.hooks.beforeValidate(ctx)` — advisory: may set an error on
+ *      the field but the value is **always** committed (user can keep typing)
+ *   3. `field.hooks.beforeChange(ctx)` — may return `{ value }` to replace
+ *      or `{ error }` to block the change entirely
+ *   4. `setFieldValue(path, finalValue)`
+ *
+ * When the field has no hooks the function is a zero-overhead pass-through
+ * to `setFieldValue` (no promises, no extra allocations).
+ */
+export declare function useFieldChangeHandler(field: Field, path: string): (value: any) => void;
+//# sourceMappingURL=use-field-change-handler.d.ts.map

package/dist/fields/use-field-change-handler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-change-handler.d.ts","sourceRoot":"","sources":["../../src/fields/use-field-change-handler.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,EAAE,KAAK,EAA6C,MAAM,cAAc,CAAA;AAKpF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,WAKpD,GAAG,UA6Ed"}

package/dist/fields/use-field-change-handler.js

@@ -0,0 +1,52 @@
+import { useCallback } from "react";
+import { normalizeHooks } from "@byline/core";
+import { useFormContext } from "../forms/form-context.js";
+function useFieldChangeHandler(field, path) {
+    const { setFieldValue, getFieldValue, getFieldValues, setFieldError, clearFieldError } = useFormContext();
+    return useCallback((value)=>{
+        const hooks = field.hooks;
+        const validateFns = normalizeHooks(hooks?.beforeValidate);
+        const changeFns = normalizeHooks(hooks?.beforeChange);
+        if (0 === validateFns.length && 0 === changeFns.length) return void setFieldValue(path, value);
+        const previousValue = getFieldValue(path);
+        const ctx = {
+            value,
+            previousValue,
+            data: getFieldValues(),
+            path,
+            field,
+            operation: 'change'
+        };
+        clearFieldError(path);
+        if (0 === changeFns.length) setFieldValue(path, value);
+        (async ()=>{
+            try {
+                let advisoryError;
+                for (const fn of validateFns){
+                    const result = await fn(ctx);
+                    if (result?.error) advisoryError = result.error;
+                    if (result?.value !== void 0) ctx.value = result.value;
+                }
+                for (const fn of changeFns){
+                    const result = await fn(ctx);
+                    if (result?.error) return void setFieldError(path, result.error);
+                    if (result?.value !== void 0) ctx.value = result.value;
+                }
+                setFieldValue(path, ctx.value);
+                if (advisoryError) setFieldError(path, advisoryError);
+            } catch (err) {
+                const message = err instanceof Error ? err.message : 'Unexpected hook error';
+                setFieldError(path, message);
+            }
+        })();
+    }, [
+        field,
+        path,
+        setFieldValue,
+        getFieldValue,
+        getFieldValues,
+        setFieldError,
+        clearFieldError
+    ]);
+}
+export { useFieldChangeHandler };

package/dist/forms/document-actions.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { PublishedVersionInfo } from './form-renderer';
+export declare function DocumentActions({ publishedVersion, onUnpublish, onDelete, }: {
+    publishedVersion?: PublishedVersionInfo | null;
+    onUnpublish?: () => Promise<void>;
+    onDelete?: () => Promise<void>;
+}): import("react").JSX.Element;
+//# sourceMappingURL=document-actions.d.ts.map

package/dist/forms/document-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"document-actions.d.ts","sourceRoot":"","sources":["../../src/forms/document-actions.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAgBH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAA;AAE3D,wBAAgB,eAAe,CAAC,EAC9B,gBAAgB,EAChB,WAAW,EACX,QAAQ,GACT,EAAE;IACD,gBAAgB,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IAC9C,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;IACjC,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC/B,+BAoHA"}

package/dist/forms/document-actions.js

@@ -0,0 +1,153 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, CloseIcon, DeleteIcon, Dropdown, EllipsisIcon, IconButton, Modal } from "@infonomic/uikit/react";
+import classnames from "classnames";
+import document_actions_module from "./document-actions.module.js";
+function DocumentActions({ publishedVersion, onUnpublish, onDelete }) {
+    const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+    const handleOnDelete = ()=>{
+        setShowDeleteConfirm(false);
+        if (onDelete) onDelete();
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(Dropdown.Root, {
+                children: [
+                    /*#__PURE__*/ jsx(Dropdown.Trigger, {
+                        render: /*#__PURE__*/ jsx(IconButton, {
+                            variant: "text",
+                            intent: "noeffect",
+                            size: "sm"
+                        }),
+                        children: /*#__PURE__*/ jsx(EllipsisIcon, {
+                            className: classnames('byline-form-actions-icon', document_actions_module.icon),
+                            width: "15px",
+                            height: "15px"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown.Portal, {
+                        children: /*#__PURE__*/ jsxs(Dropdown.Content, {
+                            className: classnames('byline-form-actions-menu', document_actions_module.menu),
+                            align: "end",
+                            "data-side": "top",
+                            sideOffset: 10,
+                            children: [
+                                publishedVersion && /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Dropdown.Item, {
+                                            onClick: onUnpublish,
+                                            children: /*#__PURE__*/ jsxs("div", {
+                                                className: classnames('byline-form-actions-item', document_actions_module.item),
+                                                children: [
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: classnames('byline-form-actions-item-icon', document_actions_module["item-icon"])
+                                                    }),
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: classnames('byline-form-actions-item-text', document_actions_module["item-text"]),
+                                                        children: "Unpublish"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ jsx(Dropdown.Separator, {})
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(Dropdown.Item, {
+                                    onClick: ()=>{
+                                        setShowDeleteConfirm(true);
+                                    },
+                                    children: /*#__PURE__*/ jsxs("div", {
+                                        className: classnames('byline-form-actions-item', document_actions_module.item),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-form-actions-item-icon', document_actions_module["item-icon"]),
+                                                children: /*#__PURE__*/ jsx(DeleteIcon, {
+                                                    width: "16px",
+                                                    height: "16px"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: classnames('byline-form-actions-item-text', document_actions_module["item-text"]),
+                                                children: /*#__PURE__*/ jsx("button", {
+                                                    type: "button",
+                                                    className: classnames('byline-form-actions-delete', document_actions_module["delete"]),
+                                                    children: "Delete"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Modal, {
+                isOpen: showDeleteConfirm,
+                closeOnOverlayClick: true,
+                onDismiss: ()=>{
+                    setShowDeleteConfirm(false);
+                },
+                children: /*#__PURE__*/ jsxs(Modal.Container, {
+                    style: {
+                        maxWidth: '500px'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxs(Modal.Header, {
+                            className: classnames('byline-form-actions-modal-head', document_actions_module["modal-head"]),
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    className: classnames('byline-form-actions-modal-title', document_actions_module["modal-title"]),
+                                    children: "Delete Document"
+                                }),
+                                /*#__PURE__*/ jsx(IconButton, {
+                                    "arial-label": "Close",
+                                    size: "xs",
+                                    onClick: ()=>{
+                                        setShowDeleteConfirm(false);
+                                    },
+                                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                                        width: "16px",
+                                        height: "16px",
+                                        svgClassName: "white-icon"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Modal.Content, {
+                            children: /*#__PURE__*/ jsx("p", {
+                                children: "Warning: This action cannot be undone. Are you sure you want to delete this document?"
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Modal.Actions, {
+                            children: [
+                                /*#__PURE__*/ jsx("button", {
+                                    "data-autofocus": true,
+                                    type: "button",
+                                    tabIndex: 0,
+                                    className: classnames('byline-form-actions-sr-only', document_actions_module["sr-only"]),
+                                    children: "no action"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    intent: "noeffect",
+                                    onClick: ()=>{
+                                        setShowDeleteConfirm(false);
+                                    },
+                                    children: "Cancel"
+                                }),
+                                /*#__PURE__*/ jsx(Button, {
+                                    size: "sm",
+                                    intent: "danger",
+                                    onClick: handleOnDelete,
+                                    children: "Delete"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+export { DocumentActions };

package/dist/forms/document-actions.module.js

@@ -0,0 +1,18 @@
+import "./document-actions_module.css";
+const document_actions_module = {
+    icon: "icon-s8mBo2",
+    menu: "menu-IxqAyg",
+    item: "item-k3szmy",
+    "item-icon": "item-icon-G0Twql",
+    itemIcon: "item-icon-G0Twql",
+    "item-text": "item-text-QjsRkV",
+    itemText: "item-text-QjsRkV",
+    delete: "delete-xmSRLN",
+    "modal-head": "modal-head-T7hzCI",
+    modalHead: "modal-head-T7hzCI",
+    "modal-title": "modal-title-e2sqE2",
+    modalTitle: "modal-title-e2sqE2",
+    "sr-only": "sr-only-VaKvc6",
+    srOnly: "sr-only-VaKvc6"
+};
+export default document_actions_module;

package/dist/forms/document-actions_module.css

@@ -0,0 +1,66 @@
+:is(.icon-s8mBo2, .byline-form-actions-icon) {
+  color: var(--primary-500);
+  transform: rotate(90deg);
+}
+
+:is(.menu-IxqAyg, .byline-form-actions-menu) {
+  min-width: 110px;
+}
+
+:is(.item-k3szmy, .byline-form-actions-item) {
+  margin-left: var(--spacing-8);
+  align-items: center;
+  display: flex;
+}
+
+:is(.item-icon-G0Twql, .byline-form-actions-item-icon) {
+  width: 28px;
+  display: inline-block;
+}
+
+:is(.item-text-QjsRkV, .byline-form-actions-item-text) {
+  width: 100%;
+  font-size: var(--font-size-sm);
+  text-align: left;
+  flex: 1;
+  display: inline-block;
+}
+
+:is(.delete-xmSRLN, .byline-form-actions-delete) {
+  width: 100%;
+  color: var(--red-600);
+  text-align: left;
+  cursor: pointer;
+  background: none;
+  border: none;
+  flex: 1;
+  padding: 0;
+  line-height: 1;
+}
+
+:is(.modal-head-T7hzCI, .byline-form-actions-modal-head) {
+  margin-bottom: var(--spacing-8);
+  padding-top: 1rem;
+}
+
+:is(.modal-title-e2sqE2, .byline-form-actions-modal-title) {
+  margin: 0 0 var(--spacing-8) 0;
+  font-size: var(--font-size-2xl);
+}
+
+:is(.sr-only-VaKvc6, .byline-form-actions-sr-only) {
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+:is(:is([data-theme="dark"], .dark) .delete-xmSRLN, :is([data-theme="dark"], .dark) .byline-form-actions-delete) {
+  color: var(--red-400);
+}
+