@50arms/ui 0.0.0-stage → 35.1.0

package/dist/types/components/SettingRow.d.ts

@@ -0,0 +1,144 @@
+import { type ReactNode } from "react";
+import { type CardHeaderProps } from "./Card";
+/**
+ * What `SettingRow` hands to a `control` supplied as a render function —
+ * two ARIA id references to place on the control's own focusable element(s).
+ *
+ * WHY A RENDER PROP, NOT AN AUTOMATIC ASSOCIATION LIKE `Field`.
+ *
+ * `Field` (this library's other labelled wrapper) gets the label/description
+ * link for free, but only because every control it has ever wrapped is one of
+ * THIS library's own Base UI–backed primitives — `Checkbox`, `Switch`,
+ * `Input`, `Select`… — and those read Base UI's internal field context
+ * themselves to pick up `aria-describedby`. That mechanism is a private
+ * implementation detail of Base UI (there is no public hook a third-party
+ * control could subscribe to), so it silently does NOTHING for anything that
+ * is not one of those primitives.
+ *
+ * `SettingRow.control` is typed to accept literally anything a settings page
+ * might need in that slot — a bare `<input>`, a third-party widget, a
+ * composite the CONSUMER wrote that has never heard of this library, let
+ * alone Base UI's field internals. Wrapping arbitrary children in the same
+ * context-based `Field` would look correct and associate nothing, which is
+ * the worse failure: it fails silently, exactly the thing this component
+ * exists to prevent for settings prose.
+ *
+ * So the association is made an explicit VALUE instead of an implicit
+ * context read: `SettingRow` generates the ids, and a `control` passed as a
+ * function receives them and is responsible for spreading them onto the
+ * element that actually receives focus (the switch's button, the input
+ * itself, a slider's thumb — for a multi-thumb control, every thumb).
+ *
+ * `control` may also be passed as a plain `ReactNode` — the escape hatch for
+ * a control that already carries its own accessible name and description
+ * through some other channel (for example a `SwitchField`/`Field`-wrapped
+ * control, or a composite region where per-control labelling does not apply)
+ * — in which case NEITHER id is wired anywhere, and getting the control
+ * properly named and described is entirely the caller's responsibility.
+ */
+export interface SettingRowControlRenderProps {
+    /** Always present — `label` is required, so the row always has a name to give. */
+    "aria-labelledby": string;
+    /** `undefined` when this row has no `description` — nothing to describe with. */
+    "aria-describedby": string | undefined;
+}
+export interface SettingRowBaseProps {
+    /** The setting's name. Always rendered as visible text and always given an id. */
+    label: ReactNode;
+    /**
+     * What the setting actually DOES, in one line. Always visible — see the
+     * module doc comment for why this is not a tooltip. Rendered with a
+     * generated id and, when `control` is a render function, offered to it via
+     * `SettingRowControlRenderProps["aria-describedby"]`.
+     */
+    description?: ReactNode;
+    /**
+     * The long-form "why this matters" — collapsed by default, revealed by a
+     * disclosure built on this library's `Collapsible`. Omit entirely when
+     * `description` alone says everything worth saying; not every setting earns
+     * a second paragraph.
+     */
+    details?: ReactNode;
+    /** Accessible name + visible label of the `details` disclosure trigger. */
+    detailsLabel?: ReactNode;
+    /** Renders the `details` disclosure already open — for a setting a caller deep-links to. */
+    detailsDefaultOpen?: boolean;
+    /**
+     * The CONSEQUENCE of changing this setting, stated plainly — "takes effect
+     * on next dispatch", "requires a worker restart" — never the mechanism. See
+     * the module doc comment: this is what stops a setting from silently not
+     * applying yet.
+     */
+    effect?: ReactNode;
+    /**
+     * Where the control sits. DX-4968.
+     *
+     * `inline` (the default): beside the text from `sm` (640px) up, under it below. Right for a switch, a select or a short input,
+     * which keeps its own width at the row's trailing edge.
+     *
+     * `stacked`: ALWAYS under the text, the full width of the row. Use it for a control whose value is long and must be seen or
+     * copied whole, such as a `CopyValue` holding a URL. Beside the text, a control that cannot shrink takes the row's whole width and
+     * leaves the label and description a word-per-line sliver (or runs past the card edge); stacked gives the value box the width
+     * to truncate or wrap inside, with the copy button still in view.
+     */
+    layout?: "inline" | "stacked";
+    /**
+     * Right-aligned indicator — a `Badge` showing the setting's current derived
+     * state, most often. Rendered beside the control, not inside it, so it
+     * survives a `readOnly` row where there is no control at all.
+     */
+    status?: ReactNode;
+    className?: string;
+}
+export interface SettingRowEditableProps extends SettingRowBaseProps {
+    readOnly?: undefined;
+    /**
+     * The setting's control. Either a plain node, or a function receiving the
+     * ids to associate — see `SettingRowControlRenderProps`.
+     */
+    control: ReactNode | ((renderProps: SettingRowControlRenderProps) => ReactNode);
+}
+export interface SettingRowReadOnlyProps extends SettingRowBaseProps {
+    /**
+     * Presents this row as READ-ONLY instead of rendering `control` at all —
+     * see the module doc comment for why this is a first-class state rather
+     * than a disabled control. `reason` is required; `value`, when given, is
+     * the setting's current value, shown as plain text beside it.
+     */
+    readOnly: {
+        reason: ReactNode;
+        value?: ReactNode;
+    };
+    control?: undefined;
+}
+export type SettingRowProps = SettingRowEditableProps | SettingRowReadOnlyProps;
+export declare function SettingRow(props: SettingRowProps): import("react").JSX.Element;
+export interface SettingGroupProps {
+    /** DOM id on the group's root element, so a URL anchor (`#designs`) can target it. */
+    id?: string;
+    /** The group's name — e.g. "Notifications", "Dispatch limits". */
+    title: ReactNode;
+    /** One line of context for the whole group. */
+    description?: ReactNode;
+    /** @default "h3" — see `CardHeader`'s own doc comment on why this is the caller's call. */
+    titleAs?: CardHeaderProps["titleAs"];
+    /** Where a Save button or a "last changed" line lives. Rendered as a `CardFooter`. */
+    footer?: ReactNode;
+    className?: string;
+    /** `SettingRow` elements, in display order. */
+    children: ReactNode;
+}
+/**
+ * A titled card holding several `SettingRow`s.
+ *
+ * `SettingGroup` simply IS a `Card` — a fixed shape (`CardHeader` for the
+ * title/description, a divided list of rows, an optional `CardFooter`) built
+ * from parts this library already ships, rather than a new container
+ * component that happens to look like one. Nesting, theming, radius
+ * arithmetic and padding all come from `Card` for free, and any future fix to
+ * that component (the nested-radius correction, for one) reaches every
+ * settings page without this file changing at all. The rows themselves supply
+ * only the divider and the per-row padding — everything else about "a card
+ * with a header" was already solved.
+ */
+export declare function SettingGroup({ id, title, description, titleAs, footer, className, children, }: SettingGroupProps): import("react").JSX.Element;

package/dist/types/components/SignOffRings.d.ts

@@ -0,0 +1,29 @@
+export type SignOffActor = "person" | "agent";
+/** The ring/badge tone of each actor. */
+export declare const SIGN_OFF_TONE: {
+    readonly person: "success";
+    readonly agent: "brand";
+};
+/** The same two colours as text, for a label that names an actor beside its ring. Literal class names so Tailwind's source scan sees them. */
+export declare const SIGN_OFF_TEXT_CLASS: {
+    readonly person: "text-success-text";
+    readonly agent: "text-brand-text";
+};
+/**
+ * How full a ring is, 0-100: the share of `total` that is `done`, floored. Only a complete set reaches 100: 199 of 200
+ * rounds to 100 but is not done, so it reads 99. Any sign-off at all shows at least a 1% sliver. `total` is never 0 here.
+ */
+export declare function signOffFill(done: number, total: number): number;
+export interface SignOffRingsProps {
+    /** How many there are: drawn in the centre. Must be positive; a caller with none draws no ring. */
+    total: number;
+    /** How many a person signed off (the outer ring). */
+    person: number;
+    /** How many an agent verified (the inner ring). */
+    agent: number;
+    /** The ring's accessible name: one sentence naming both fractions, in the caller's words. */
+    label: string;
+    className?: string;
+    testId?: string;
+}
+export declare function SignOffRings({ total, person, agent, label, className, testId }: SignOffRingsProps): import("react").JSX.Element;

package/dist/types/components/Slider.d.ts

@@ -0,0 +1,255 @@
+import type { ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const slider: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+        };
+    };
+    tone: {
+        control: {
+            indicator: string;
+            thumb: string;
+        };
+        accent: {
+            indicator: string;
+            thumb: string;
+        };
+        brand: {
+            indicator: string;
+            thumb: string;
+        };
+        success: {
+            indicator: string;
+            thumb: string;
+        };
+        warning: {
+            indicator: string;
+            thumb: string;
+        };
+        danger: {
+            indicator: string;
+            thumb: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            control: string;
+            label: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    readout: string;
+    control: string;
+    track: string;
+    indicator: string[];
+    thumb: string[];
+    marks: string;
+    markLabel: string;
+}, undefined, {
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+        };
+    };
+    tone: {
+        control: {
+            indicator: string;
+            thumb: string;
+        };
+        accent: {
+            indicator: string;
+            thumb: string;
+        };
+        brand: {
+            indicator: string;
+            thumb: string;
+        };
+        success: {
+            indicator: string;
+            thumb: string;
+        };
+        warning: {
+            indicator: string;
+            thumb: string;
+        };
+        danger: {
+            indicator: string;
+            thumb: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            control: string;
+            label: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    readout: string;
+    control: string;
+    track: string;
+    indicator: string[];
+    thumb: string[];
+    marks: string;
+    markLabel: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: {
+            track: string;
+            thumb: string;
+        };
+        md: {
+            track: string;
+            thumb: string;
+        };
+        lg: {
+            track: string;
+            thumb: string;
+        };
+    };
+    tone: {
+        control: {
+            indicator: string;
+            thumb: string;
+        };
+        accent: {
+            indicator: string;
+            thumb: string;
+        };
+        brand: {
+            indicator: string;
+            thumb: string;
+        };
+        success: {
+            indicator: string;
+            thumb: string;
+        };
+        warning: {
+            indicator: string;
+            thumb: string;
+        };
+        danger: {
+            indicator: string;
+            thumb: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            control: string;
+            label: string;
+        };
+        false: {};
+    };
+}, {
+    root: string;
+    header: string;
+    label: string;
+    readout: string;
+    control: string;
+    track: string;
+    indicator: string[];
+    thumb: string[];
+    marks: string;
+    markLabel: string;
+}>>;
+export type SliderThumbMarker = {
+    /** `checkered` is a finish-line flag (aim here); `solid` is filled with the tone. */
+    flag: "checkered" | "solid";
+    /** Colours the bar, and the flag when solid. Default `neutral`. */
+    tone?: "neutral" | "accent" | "brand" | "success" | "warning" | "danger";
+};
+export type SliderMark = {
+    value: number;
+    /** Shown under the tick. Omit for a bare tick. */
+    label?: ReactNode;
+};
+export interface SliderProps extends Omit<VariantProps<typeof slider>, "disabled"> {
+    /** A number for a single thumb; two numbers for a range. */
+    value?: number | number[];
+    defaultValue?: number | number[];
+    onValueChange?: (value: number | number[]) => void;
+    /** Fired once when dragging ends — for expensive commits. */
+    onValueCommitted?: (value: number | number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /**
+     * How a dragged thumb meets `step`. `live` (the default) jumps from step to step as the pointer
+     * crosses each halfway point. `release` makes the thumb and the filled indicator follow the
+     * pointer continuously along the track while it is held, and settle on the nearest step with a
+     * short glide when it is let go (no glide under reduced motion). The value never leaves the
+     * steps: `onValueChange` reports the nearest step and fires only when that step changes,
+     * `onValueCommitted` fires once on release with the step the thumb lands on, a track click goes
+     * straight to the nearest step, and the keyboard, readout, tooltip and `aria-valuenow` are the
+     * same as `live`. A single thumb only (a range with `snap="release"` throws) and left-to-right only.
+     * `thumbMarkers` works.
+     */
+    snap?: "live" | "release";
+    /** Smallest allowed gap between range thumbs. */
+    minStepsBetweenValues?: number;
+    /**
+     * What a dragged range thumb does on reaching its neighbour. `push` (the
+     * default) shoves the neighbour along; `stop` halts the dragged thumb at it,
+     * so two values that may be equal need no clamping in the consumer.
+     */
+    thumbCollision?: "push" | "stop";
+    /**
+     * Where range thumbs sit when their values are equal. `overlap` (the
+     * default) stacks them exactly, so only the top one can be grabbed.
+     * `offset` lifts the first above the track and drops the second below it,
+     * so both stay grabbable by mouse and finger.
+     */
+    meetingThumbs?: "overlap" | "offset";
+    /**
+     * Draw each thumb as a vertical bar with a flag at its top instead of a round
+     * handle, one entry per thumb in value order. The first thumb's flag points left
+     * and the second's right, so two flags at equal values never cover each other and
+     * `meetingThumbs` is not needed (setting both throws). One or two thumbs only.
+     */
+    thumbMarkers?: SliderThumbMarker[];
+    /** An accessible name per thumb, in value order — e.g. `["Target", "Critical"]`. */
+    thumbLabels?: string[];
+    label?: ReactNode;
+    /** Turn the raw number into what a person should read. */
+    format?: (value: number) => string;
+    /** Show the formatted value beside the label. */
+    showValue?: boolean;
+    /** Ticks. `true` derives them from `step`; an array places them exactly. */
+    marks?: boolean | SliderMark[];
+    /** When to float the value over the thumb. */
+    tooltip?: "never" | "drag" | "always";
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Slider({ value, defaultValue, onValueChange, onValueCommitted, min, max, step, snap, minStepsBetweenValues, thumbCollision, meetingThumbs, thumbLabels, thumbMarkers, label, format: formatProp, showValue, marks, tooltip, size, tone, disabled, className, ref, }: SliderProps): import("react").JSX.Element;
+export {};

package/dist/types/components/SolutionChoice.d.ts

@@ -0,0 +1,49 @@
+import { type ReactNode } from "react";
+export interface SolutionChoiceProCon {
+    /** The collapsible's trigger ("For and against"). */
+    triggerLabel: string;
+    proLabel: string;
+    /** What speaks for it; blank or omitted draws no pro box. */
+    pro?: string;
+    conLabel: string;
+    /** What speaks against it; blank or omitted draws no con box. */
+    con?: string;
+}
+export interface SolutionChoiceAction {
+    label: string;
+    /** Names the option the button acts on, so several identical buttons stay apart. */
+    ariaLabel: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export interface SolutionChoiceActions {
+    choose: SolutionChoiceAction & {
+        loading?: boolean;
+    };
+    note: SolutionChoiceAction;
+    /** Omitted when the problem's kind cannot reject an option. */
+    reject?: SolutionChoiceAction;
+}
+export interface SolutionChoiceProps {
+    title: string;
+    recommended: boolean;
+    /** The recommendation badge's word; drawn only when `recommended`. */
+    recommendedLabel: string;
+    /** Markdown; blank or omitted draws no body. */
+    body?: string;
+    /** The small heading over the body. */
+    bodyLabel: string;
+    proCon?: SolutionChoiceProCon;
+    /** Top right, level with the badge (or the title when there is none): a step-progress donut. */
+    progress?: ReactNode;
+    /** Between the body and the for/against block: a step tree. */
+    children?: ReactNode;
+    /** The choice row; `null` shows the option with no controls. */
+    actions?: SolutionChoiceActions | null;
+    /** An open note editor. While present it REPLACES the choice row, so two near-identical rows are never on screen together. */
+    composer?: ReactNode;
+    /** Wraps the choose button, so a host can mark it for attention. */
+    chooseWrapper?: (button: ReactNode) => ReactNode;
+    className?: string;
+}
+export declare function SolutionChoice({ title, recommended, recommendedLabel, body, bodyLabel, proCon, progress, children, actions, composer, chooseWrapper, className, }: SolutionChoiceProps): import("react").JSX.Element;

package/dist/types/components/SortMenu.d.ts

@@ -0,0 +1,45 @@
+import type { ButtonProps } from "./Button";
+import { type IconName } from "./Icon";
+export type SortDirection = "asc" | "desc";
+export interface SortOption<Field extends string = string> {
+    value: Field;
+    /** The field as a person names it ("Name", "Created"). */
+    label: string;
+    /**
+     * What each direction means for THIS field, in the words that fit it
+     * ("A to Z" / "Z to A", "Oldest first" / "Newest first"). Absent, the
+     * directions read the built-in "Ascending" / "Descending" words of the active `UiLocaleProvider`. It names the arrows to
+     * assistive technology and appears in their tooltips, so a person is never
+     * left decoding which way an arrow sorts a date.
+     */
+    directions?: {
+        asc: string;
+        desc: string;
+    };
+    /**
+     * A registered icon for the field (DX-4615). When the sorted field carries one, the closed control draws it before the
+     * direction's arrow ("what" then "which way"), and the popover draws it beside the field's label. A list whose options
+     * carry none renders exactly as it did; give every option an icon or none, so the rows and the trigger stay one shape.
+     */
+    icon?: IconName;
+}
+export interface SortValue<Field extends string = string> {
+    field: Field;
+    direction: SortDirection;
+}
+export interface SortMenuProps<Field extends string = string> {
+    options: readonly SortOption<Field>[];
+    value: SortValue<Field>;
+    onValueChange: (value: SortValue<Field>) => void;
+    /** Names the control for assistive technology, e.g. "Sort plans". The active order is appended to it. */
+    "aria-label": string;
+    size?: ButtonProps["size"];
+    /**
+     * The trigger's resting look (DX-4615). `outline` (default) draws the bordered button; `ghost` draws the bare arrow, for a
+     * header that already holds other borderless icons (a board lane's title row). Same arrow, same tooltip, same popover.
+     */
+    triggerVariant?: "outline" | "ghost";
+    align?: "start" | "center" | "end";
+    className?: string;
+}
+export declare function SortMenu<Field extends string = string>({ options, value, onValueChange, "aria-label": ariaLabel, size, triggerVariant, align, className, }: SortMenuProps<Field>): import("react").JSX.Element;

package/dist/types/components/Spinner.d.ts

@@ -0,0 +1,29 @@
+import type { Ref, SVGProps } from "react";
+import type { IconSize } from "./Icon";
+export interface SpinnerProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    size?: IconSize;
+    /**
+     * An accessible name. Omitted by default because a spinner is almost always
+     * inside something that already announces its own busy state — a button with
+     * `aria-busy`, or a region with `aria-live`. Announcing "Loading" a second
+     * time from the spinner itself is noise, not help.
+     */
+    label?: string;
+    ref?: Ref<SVGSVGElement>;
+}
+/**
+ * An indeterminate spinner built from TWO nested rates: the whole SVG rotates
+ * at a constant speed while the visible arc grows and shrinks underneath it.
+ *
+ * That combination is what separates a spinner that reads as alive from one
+ * that reads as mechanical. A single constant rotation has one frequency, and
+ * the eye locks onto it within a second — which is precisely when a spinner
+ * starts feeling like the app has hung. The second rate keeps the motion from
+ * ever repeating exactly where the eye expects it.
+ *
+ * Both animations are transform / stroke-dash on a ~20px element, so the cost
+ * is inside the paint budget even though `stroke-dasharray` is a paint
+ * property: the rule is animated AREA x FREQUENCY, and this loops forever but
+ * over almost no area.
+ */
+export declare function Spinner({ size, label, className, style, ref, ...props }: SpinnerProps): import("react").JSX.Element;

package/dist/types/components/Stat.d.ts

@@ -0,0 +1,136 @@
+import type { ReactNode, Ref } from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const stat: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            box: string;
+            value: string;
+        };
+        sm: {
+            box: string;
+            value: string;
+        };
+        md: {
+            box: string;
+            value: string;
+        };
+        lg: {
+            box: string;
+            value: string;
+        };
+    };
+}, {
+    box: string;
+    root: string;
+    label: string;
+    value: string;
+    unit: string;
+    delta: string;
+    hint: string;
+}, undefined, {
+    size: {
+        xs: {
+            box: string;
+            value: string;
+        };
+        sm: {
+            box: string;
+            value: string;
+        };
+        md: {
+            box: string;
+            value: string;
+        };
+        lg: {
+            box: string;
+            value: string;
+        };
+    };
+}, {
+    box: string;
+    root: string;
+    label: string;
+    value: string;
+    unit: string;
+    delta: string;
+    hint: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: {
+            box: string;
+            value: string;
+        };
+        sm: {
+            box: string;
+            value: string;
+        };
+        md: {
+            box: string;
+            value: string;
+        };
+        lg: {
+            box: string;
+            value: string;
+        };
+    };
+}, {
+    box: string;
+    root: string;
+    label: string;
+    value: string;
+    unit: string;
+    delta: string;
+    hint: string;
+}>>;
+export type StatSize = NonNullable<VariantProps<typeof stat>["size"]>;
+export type StatTrend = "up" | "down" | "flat";
+/** Whether this movement is good news, bad news, or neither. */
+export type StatSentiment = "positive" | "negative" | "neutral";
+export interface StatProps extends VariantProps<typeof stat> {
+    label: ReactNode;
+    value: ReactNode;
+    /** Rendered smaller, beside the value — "ms", "/min", "GB". */
+    unit?: ReactNode;
+    /** The change itself — "12%", "+1.2K". */
+    delta?: ReactNode;
+    trend?: StatTrend;
+    /** Whether that movement is good. Independent of direction, on purpose. */
+    sentiment?: StatSentiment;
+    hint?: ReactNode;
+    /** A sparkline, ring, or icon shown alongside. */
+    visual?: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function Stat({ label, value, unit, delta, trend, sentiment, hint, visual, size, className, ref, }: StatProps): import("react").JSX.Element;
+export interface StatRowProps {
+    /**
+     * The readout, as DATA. Every entry is the props of one `Stat`; `size` is the
+     * row's, not each stat's, so they cannot disagree.
+     */
+    stats: readonly Omit<StatProps, "size">[];
+    size?: StatSize;
+    /** Which edge the row settles against when it has spare width. */
+    align?: "start" | "end" | "between";
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function StatRow({ stats, size, align, className, ref }: StatRowProps): import("react").JSX.Element | null;
+export interface SparklineProps {
+    values: number[];
+    /** Matches the stat's sentiment, so the line agrees with the delta beside it. */
+    sentiment?: StatSentiment;
+    className?: string;
+}
+/**
+ * A bare trend line — no axes, no grid, no labels.
+ *
+ * A sparkline answers "which way, and how steadily", not "what value". Adding
+ * axes makes it a bad chart instead of a good sparkline, and at this size the
+ * ink spent on them is ink taken from the only thing being communicated.
+ *
+ * The last point is marked, because "where it ended up" is the one specific
+ * value anyone reads off a shape this small.
+ */
+export declare function Sparkline({ values, sentiment, className }: SparklineProps): import("react").JSX.Element | null;
+export {};