@mediaradar/design-components 0.6.0 → 0.8.0

package/dist/index.d.cts

@@ -1,5 +1,7 @@
 import * as react from 'react';
-import { ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject, ButtonHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 
 /**
  * @pattern InfoTip
@@ -1183,4 +1185,486 @@ interface PublisherBreakdownListProps {
  */
 declare function PublisherBreakdownList({ rows, defaultVisibleCount, padded, viewAllHref, renderLogo }: PublisherBreakdownListProps): react.JSX.Element;
 
-export { AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Card, type CardProps, CheckBox, type CheckBoxProps, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, DateRangeFilter, type DateRangeFilterProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, NO_RESULTS_BODY, NO_RESULTS_TITLE, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, Tooltip, type TooltipProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, noResultsBody };
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "ghost" | "danger" | null | undefined;
+    size?: "icon" | "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /** Render the button styling onto the single child element instead of a `<button>` (e.g. a router `<Link>`). */
+    asChild?: boolean;
+    /** Shows a spinner in place of the leading edge and disables the button. */
+    loading?: boolean;
+}
+/**
+ * @pattern Button
+ * @description Primary interactive control for actions. Five visual variants
+ * (primary, secondary, ghost, danger, link) and four sizes (sm, md, lg, icon).
+ * Supports polymorphic rendering via `asChild` (Radix Slot) to apply button
+ * styling to a different element, e.g. a router `<Link>`. Also exports the
+ * raw `buttonVariants` cva function for consumers composing button styling
+ * onto something other than this component.
+ * @tokens bg-brand-primaryAction, text-brand-onprimary, bg-surface, text-text-primary, border-border-interactive, hover:bg-subtle, bg-status-danger, text-status-onstatus, text-text-link, rounded-control, duration-(--mr-motion-duration-interactive), ease-interactive
+ * @dependencies class-variance-authority, @radix-ui/react-slot, lucide-react
+ * @variant primary - The one primary action on a screen. Solid brand fill.
+ * @variant secondary - Any other real action competing for attention (Cancel, Export). Bordered, neutral fill.
+ * @variant ghost - Low-emphasis action inside a dense toolbar or row where a border would add visual noise.
+ * @variant danger - Destructive/irreversible actions (Delete, Remove). Never pair with `primary` in the same control group.
+ * @variant link - Reads as inline text, not a control. Use inside body copy or where a full button would overpower the surrounding content.
+ * @behavior `disabled` removes pointer events entirely (not just a style
+ * change) and dims to 40% opacity. Focus handling is a deliberate exception:
+ * most interactive components use a visible `focus-visible:outline-2` ring,
+ * but Button suppresses it (`focus-visible:outline-hidden focus-visible:ring-0`)
+ * and relies on its per-variant hover/brightness treatment instead. `loading`
+ * implies `disabled` (and sets `aria-busy`), since a control mid-submit
+ * shouldn't accept another click.
+ * @usage
+ * ```tsx
+ * <Button variant="primary" size="md">Save changes</Button>
+ * <Button variant="secondary" size="sm">Cancel</Button>
+ * <Button variant="danger">Delete</Button>
+ * <Button variant="primary" loading>Saving…</Button>
+ * ```
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface FilterDropdownFooterProps {
+    /** Omit to hide the Clear All action for dropdowns that don't need it. */
+    onClear?: () => void;
+    /** Fires when the primary action is pressed. */
+    onApply: () => void;
+    clearLabel?: string;
+    applyLabel?: string;
+}
+/**
+ * @pattern FilterDropdownFooter
+ * @description Fixed Apply/Clear All footer for quick-filter dropdowns —
+ * pinned below the (independently scrollable) option list so it's always
+ * visible. Shared by the Media/Advertiser/Date/Group By/Time Increment quick
+ * filters on Sports Dashboard, Publisher Intel, and Opportunities.
+ * @tokens border-border-default
+ * @usage
+ * ```tsx
+ * <FilterDropdownFooter onApply={handleApply} onClear={handleClear} />
+ * ```
+ */
+declare function FilterDropdownFooter({ onClear, onApply, clearLabel, applyLabel, }: FilterDropdownFooterProps): react.JSX.Element;
+
+interface NameListModalProps {
+    title: string;
+    initialName: string;
+    submitLabel: string;
+    onCancel: () => void;
+    onSubmit: (name: string) => void;
+}
+/**
+ * @pattern NameListModal
+ * @description Minimal create/rename dialog — just the list name. Shared by
+ * the Account Lists table and the list detail page so create/rename look
+ * identical.
+ * @tokens rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, rounded-control, bg-input, focus:border-brand-primaryAction
+ * @behavior Escape closes the dialog via `onCancel`, same as clicking the
+ * scrim backdrop. Submit is disabled until the name is non-empty (trimmed).
+ * @usage
+ * ```tsx
+ * <NameListModal title="Rename list" initialName={list.name} submitLabel="Save" onCancel={close} onSubmit={rename} />
+ * ```
+ */
+declare function NameListModal({ title, initialName, submitLabel, onCancel, onSubmit }: NameListModalProps): react.ReactPortal;
+
+/** Shared styling for filter-bar chip triggers, so every dropdown chip matches. */
+declare function chipTriggerClass(): string;
+interface ChipContentProps {
+    /** Small uppercase label above the value. */
+    caption: string;
+    /** The current selection, shown below the caption. */
+    value: ReactNode;
+    /** Optional leading icon rendered before the caption/value stack. */
+    icon?: ReactNode;
+}
+/**
+ * @pattern ChipTrigger
+ * @description Shared foundation for filter-bar chip triggers — pairs
+ * `chipTriggerClass` with `ChipContent` for the caption/value/icon layout, so
+ * every dropdown chip across the app matches.
+ * @tokens rounded-control, bg-input, border-border-strong, text-text-secondary, text-text-tertiary, text-text-primary, hover:bg-subtle, focus-visible:outline-border-focus, hover:text-text-primary
+ * @behavior Provides only the shared `focus-visible:outline-2` keyboard-focus
+ * treatment every dropdown trigger depends on — open/close, Escape, and
+ * outside-click dismissal all live in each consumer, not here. A new dropdown
+ * built on `chipTriggerClass` has to implement its own dismissal handling.
+ * @usage
+ * ```tsx
+ * <button className={chipTriggerClass()}>
+ *   <ChipContent caption="Media Type" value="All" />
+ * </button>
+ * ```
+ */
+declare function ChipContent({ caption, value, icon }: ChipContentProps): react.JSX.Element;
+
+interface ChipLike {
+    key: string;
+    label: string;
+    groupLabel: string;
+}
+interface FilterChipBarProps<T extends ChipLike> {
+    /** Any `{ key, label, groupLabel }` shape — only those fields are read. */
+    chips: T[];
+    onRemove: (chip: T) => void;
+    onClearAll: () => void;
+    /**
+     * Chip keys that are kept but not applied (e.g. a filter the active
+     * workspace can't resolve). Rendered inactive, still removable.
+     */
+    parkedKeys?: Set<string>;
+}
+/**
+ * @pattern FilterChipBar
+ * @description Applied-filter chips — wrap freely across as many rows as
+ * needed, every chip shown. Each chip reveals its filter category on hover
+ * (tooltip + outline). "Clear all" trails the chips. Generic over the
+ * page's own chip type — only the shared key/label/groupLabel fields are
+ * used.
+ * @tokens rounded-full, bg-subtle, text-text-secondary, text-text-link, text-text-tertiary, bg-text-primary, border-border-default, group-hover:bg-border-default, group-hover:ring-border-interactive, group-hover:text-text-primary, group-hover:text-text-secondary, hover:text-text-primary, shadow-raised, text-surface
+ * @dependencies lucide-react
+ * @behavior A parked chip (key in `parkedKeys`) renders with no fill and a
+ * dashed edge instead of the solid applied style, and its hover tooltip
+ * reads "Not in this workspace" instead of the filter's group label.
+ * @usage
+ * ```tsx
+ * <FilterChipBar chips={activeChips} onRemove={removeChip} onClearAll={clearAll} />
+ * ```
+ */
+declare function FilterChipBar<T extends ChipLike>({ chips, onRemove, onClearAll, parkedKeys }: FilterChipBarProps<T>): react.JSX.Element | null;
+
+type SortDir = "asc" | "desc";
+/** An active column and direction, or `null` for the unsorted state. */
+type SortState<K extends string> = {
+    key: K;
+    dir: SortDir;
+} | null;
+/**
+ * The state after clicking `key`. `firstDir` is what the column opens on,
+ * since the useful first look differs by column: counts and dates want the
+ * largest or newest first, names want A→Z.
+ */
+declare function cycleSort<K extends string>(current: SortState<K>, key: K, firstDir?: SortDir): SortState<K>;
+/**
+ * `SortState` in the shape SortButton takes. SortButton wants a non-null
+ * object and reads `key: null` as "no column active".
+ */
+declare function sortProp<K extends string>(sort: SortState<K>): {
+    key: K | null;
+    dir: SortDir;
+};
+
+interface SortButtonProps<K extends string> {
+    label: string;
+    sortKey: K;
+    /** Current sort; a null `key` renders every SortButton inactive. See `sortProp`. */
+    sort: {
+        key: K | null;
+        dir: SortDir;
+    };
+    onSort: (key: K) => void;
+    /** True when there are no rows to order — hides the arrow, drops the click. */
+    disabled?: boolean;
+}
+/**
+ * @pattern SortButton
+ * @description Design-system rule: every sortable table column header uses
+ * this exact icon/color treatment. Sortable-but-inactive columns show a
+ * neutral ArrowUpDown in text-tertiary at half opacity, coming up to full on
+ * hover so the column reads as clickable; the active column swaps to a
+ * direction arrow (ArrowUp/ArrowDown) colored with the brand action blue.
+ * @tokens text-text-tertiary, text-brand-primaryAction, hover:text-text-primary
+ * @dependencies lucide-react
+ * @behavior Pair with `cycleSort`/`sortProp` (exported alongside) for the
+ * standard three-state cycle — sort, reverse, then unsorted. `disabled` keeps
+ * the column's inherited header color rather than dimming it — the column
+ * isn't unavailable, there's just no data under it.
+ * @usage
+ * ```tsx
+ * const [sort, setSort] = useState<SortState<'spend'>>(null)
+ * <SortButton label="Spend" sortKey="spend" sort={sortProp(sort)} onSort={(k) => setSort(cycleSort(sort, k))} />
+ * ```
+ */
+declare function SortButton<K extends string>({ label, sortKey, sort, onSort, disabled }: SortButtonProps<K>): react.JSX.Element;
+
+interface PagerProps {
+    /** The current page, 1-indexed. */
+    page: number;
+    totalPages: number;
+    onPage: (p: number) => void;
+}
+/**
+ * @pattern Pager
+ * @description Compact prev/next pager with a windowed page-number list —
+ * shows every page up to 7 total, otherwise 1 … current±1 … last with
+ * ellipsis gaps. Shared by My Exports and Account Matcher.
+ * @tokens rounded-control, text-text-secondary, bg-brand-primaryAction, text-brand-onprimary, hover:bg-subtle, hover:text-text-primary, text-text-tertiary
+ * @dependencies lucide-react
+ * @usage
+ * ```tsx
+ * <Pager page={page} totalPages={totalPages} onPage={setPage} />
+ * ```
+ */
+declare function Pager({ page, totalPages, onPage }: PagerProps): react.JSX.Element;
+
+declare const SIZES$1: {
+    /** Matches a 15px lucide icon exactly, so a workspace name in a menu row
+     *  left-aligns with labels in icon-led rows above and below it. */
+    readonly xs: "h-[15px] w-[15px] rounded-[4px] text-[8px] tracking-tight";
+    readonly sm: "h-6 w-6 text-[10px]";
+    readonly md: "h-7 w-7 text-[11px]";
+    readonly lg: "h-11 w-11 text-[15px]";
+};
+interface WorkspaceAvatarProps {
+    /** Omit for the unscoped "All data workspace". */
+    name?: string;
+    size?: keyof typeof SIZES$1;
+}
+/**
+ * @pattern WorkspaceAvatar
+ * @description The square tile that identifies a workspace in a switch
+ * list — first 1–2 word initials of the workspace name. Pass no name for
+ * the unscoped "All data workspace", which renders "AD" through the same
+ * rule so the unscoped default reads as a peer of named workspaces rather
+ * than a special case.
+ * @tokens rounded-control, bg-subtle, text-text-secondary
+ * @usage
+ * ```tsx
+ * <WorkspaceAvatar name="Capital One" size="sm" />
+ * ```
+ */
+declare function WorkspaceAvatar({ name, size }: WorkspaceAvatarProps): react.JSX.Element;
+
+interface TagProps {
+    children: ReactNode;
+    /** Extra classes merged onto the chip. */
+    className?: string;
+}
+/**
+ * @pattern Tag
+ * @description Canonical descriptive tag — a neutral beige chip (e.g.
+ * "Digital", a focus area, a category). Use this for every non-semantic
+ * label so tags read the same everywhere. Colored/semantic badges (NEW, ±%
+ * deltas, status, counts) are intentionally NOT this component.
+ * @tokens bg-subtle, text-text-secondary, rounded-full
+ * @usage
+ * ```tsx
+ * <Tag>Digital</Tag>
+ * ```
+ */
+declare function Tag({ children, className }: TagProps): react.JSX.Element;
+
+/**
+ * @pattern TablePagination
+ * @description Full table-footer pagination bar: a rows-per-page select, a
+ * first/prev/pages/next/last pager, and the resolved "1 – 25 of N results"
+ * range. Owns no state — the host page holds `page` and `perPage` so the
+ * paged slice and the bar can't disagree.
+ * @tokens rounded-control, border-border-default, bg-input, text-text-primary, text-text-secondary, text-text-tertiary, bg-brand-primaryAction, text-brand-onprimary, hover:bg-subtle, hover:text-text-primary, focus:outline-border-focus
+ * @behavior The current page is filled with the brand action color (matching
+ * the Contacts pager). First/prev disable on page 1, next/last on the last
+ * page — disabled controls stay in the layout so the row never reflows.
+ * Changing the per-page count reports it and leaves the host to reset to page
+ * 1. With one page of results the pager still renders, so the bar's height
+ * and the range readout don't come and go as filters narrow.
+ * @usage
+ * ```tsx
+ * <TablePagination
+ *   page={page}
+ *   perPage={perPage}
+ *   totalItems={matching.length}
+ *   onPageChange={setPage}
+ *   onPerPageChange={(n) => { setPerPage(n); setPage(1) }}
+ *   itemLabel="results"
+ * />
+ * ```
+ */
+declare function TablePagination({ page, perPage, totalItems, onPageChange, onPerPageChange, perPageOptions, itemLabel, className, }: {
+    page: number;
+    perPage: number;
+    totalItems: number;
+    onPageChange: (page: number) => void;
+    onPerPageChange: (perPage: number) => void;
+    perPageOptions?: number[];
+    itemLabel?: string;
+    className?: string;
+}): react.JSX.Element;
+type TablePaginationProps = Parameters<typeof TablePagination>[0];
+
+/** Resolve a label to its actual [start, end] span, ending at `today`. */
+declare function resolveRange(label: string, today?: Date): [Date, Date];
+declare function DateRangePicker({ defaultValue, align, presets, onChange, onRangeChange, showFooter, today, years, }: {
+    defaultValue?: string;
+    align?: 'left' | 'right';
+    /** Rolling presets shown above Custom Range. Defaults to 3/6/12 months. */
+    presets?: string[];
+    onChange?: (label: string) => void;
+    /** Reports the resolved start/end dates — used to drive dependent views (e.g. table columns). */
+    onRangeChange?: (start: Date, end: Date) => void;
+    /** Deferred mode: preset/custom-range picks stage in a draft; only the fixed
+     *  Apply footer commits it (no live commit on click). */
+    showFooter?: boolean;
+    /** End of the available data window: rolling presets resolve back from here.
+     *  Defaults to the current date. */
+    today?: Date;
+    /** Years offered in the Custom Range selects. Defaults to the last four,
+     *  ending with `today`'s year. */
+    years?: number[];
+}): react.JSX.Element;
+type DateRangePickerProps = Parameters<typeof DateRangePicker>[0];
+
+interface MultiSelectGroup {
+    id: string;
+    label: string;
+    children: {
+        id: string;
+        label: string;
+    }[];
+}
+/**
+ * @pattern MultiSelectFilter
+ * @description Quick-access multi-select chip — mirrors the DateRangeFilter
+ * button shape (two-line caption + value with a chevron) and opens a
+ * searchable checkbox popover. Used for the page-level Media Type /
+ * Advertiser filters that share state with the filter tray.
+ * @tokens rounded-control, rounded-card, border-border-default, bg-surface, shadow-overlay, text-text-primary, text-text-secondary, text-text-tertiary, text-text-link, border-border-interactive, bg-brand-primaryAction, bg-input, hover:bg-subtle, hover:text-text-primary, placeholder:text-text-tertiary
+ * @dependencies lucide-react
+ * @behavior Same draft/commit-on-close pattern as AdvertiserQuickFilter — the
+ * draft resyncs from `selected` every time the tray opens, and (without
+ * showFooter) any close path commits it, while showFooter mode requires the
+ * Apply button and discards the draft on every other close. `min` enforces a
+ * selection floor by silently ignoring any toggle that would drop below it —
+ * there's no error state, the click just does nothing. Group parents are
+ * tri-state and toggle all of their children in one action.
+ * @usage
+ * ```tsx
+ * <MultiSelectFilter caption="Media" options={mediaOptions} selected={selected} onChange={setSelected} />
+ * ```
+ */
+declare function MultiSelectFilter({ caption, options, groups, selected, onChange, allLabel, searchable, searchPlaceholder, align, fullIsAll, min, icon, showFooter, clearValue, menuWidthClass, plainParent, fullWidth, }: {
+    caption: string;
+    options?: {
+        id: string;
+        label: string;
+    }[];
+    /** When provided, renders a nested parent → children tree (selection tracks
+     *  leaf ids; parents are tri-state and toggle all their children). */
+    groups?: MultiSelectGroup[];
+    selected: string[];
+    onChange: (next: string[]) => void;
+    allLabel?: string;
+    searchable?: boolean;
+    /** Overrides the search box's placeholder. The default derives from the
+     *  caption, which reads wrong once a caption is singular ("Search topic"). */
+    searchPlaceholder?: string;
+    align?: 'left' | 'right';
+    /** Treat "all options selected" as the unfiltered "All" state in the label. */
+    fullIsAll?: boolean;
+    /** Minimum selections that must remain (a toggle that would drop below is ignored). */
+    min?: number;
+    icon?: React.ReactNode;
+    /** Deferred mode: checkbox edits stage in a draft; only the fixed Apply/Clear
+     *  All footer commits or discards them (no live commit on close). */
+    showFooter?: boolean;
+    /** What "Clear all" resets the draft to — the page's default selection. */
+    clearValue?: string[];
+    /** Tailwind width class for the dropdown panel (default `w-60`). Widen it when
+     *  option labels are long and would otherwise wrap. */
+    menuWidthClass?: string;
+    /** Render group parents at normal weight instead of semibold. */
+    plainParent?: boolean;
+    /** Stretch the trigger (and, with `menuWidthClass="w-full"`, the panel) to fill
+     *  its container — for stacked/full-width form layouts instead of the chip bar. */
+    fullWidth?: boolean;
+}): react.JSX.Element;
+type MultiSelectFilterProps = Parameters<typeof MultiSelectFilter>[0];
+
+/**
+ * Track, knob and travel per size. The knob leaves a 2px gutter at each end, so
+ * its "on" offset is always track − knob − 2 — keep that relationship if a new
+ * size is added, or the knob will sit off-centre at one end.
+ */
+declare const SIZES: {
+    readonly sm: {
+        readonly track: "h-5 w-9";
+        readonly knob: "h-4 w-4";
+        readonly on: "translate-x-[18px]";
+    };
+    readonly md: {
+        readonly track: "h-6 w-11";
+        readonly knob: "h-5 w-5";
+        readonly on: "translate-x-[22px]";
+    };
+};
+interface ToggleProps {
+    checked: boolean;
+    /** Receives the value being switched TO, not the current one. */
+    onChange: (next: boolean) => void;
+    /** Accessible name; the visible label lives in the row around it. */
+    label: string;
+    size?: keyof typeof SIZES;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * @pattern Toggle
+ * @description The app's on/off switch. Use it for a setting that takes effect
+ * as a state the user keeps — "only include enriched creatives", "email me a
+ * digest" — where a checkbox would read as an item being ticked off a list.
+ * Rendered as a `<button role="switch">` so the on/off state is announced as a
+ * switch rather than a checkbox, and so the track and knob can carry the brand
+ * fill without fighting a native input's styling hooks.
+ * @tokens bg-brand-primaryAction, bg-border-interactive, bg-surface, shadow-raised, outline-border-focus
+ * @behavior The knob is positioned by `translate-x`, not by flex alignment, so
+ * the slide animates. Off uses `bg-border-interactive` rather than a grey
+ * literal, which keeps the track visible against `bg-surface` in dark mode.
+ * Pair it with a label and any InfoTip in the surrounding row: this component
+ * draws only the switch, so rows stay free to lay the label out however they
+ * need (usually label left, switch pushed right).
+ * @variant md - Settings panels and modals, where the switch is the row's subject.
+ * @variant sm - Dense rows next to 13px body text, where the md track overpowers its own label.
+ * @usage
+ * ```tsx
+ * <Toggle checked={enabled} onChange={setEnabled} label="Email news alerts" />
+ * <Toggle size="sm" checked={enabled} onChange={setEnabled} label="Only include enriched creatives" />
+ * ```
+ */
+declare function Toggle({ checked, onChange, label, size, disabled, className }: ToggleProps): react.JSX.Element;
+
+interface AISparkProps {
+    size?: number;
+    className?: string;
+}
+/**
+ * @pattern AISpark
+ * @description Assistant glyph — the lucide Sparkles icon stroked with the
+ * MR orange→violet assistant gradient. Each instance scopes its own gradient
+ * id, and the stops follow light/dark mode.
+ * @dependencies lucide-react
+ * @usage
+ * ```tsx
+ * <AISpark size={14} />
+ * ```
+ */
+declare function AISpark({ size, className }: AISparkProps): react.JSX.Element;
+
+type FreshnessLevel = "fresh" | "recent" | "stale";
+interface FreshnessProps {
+    level: FreshnessLevel;
+}
+/**
+ * @pattern Freshness
+ * @description Freshness dot — prefixed to card meta rows so a row of 4
+ * timestamps stops reading as a wall of identical text. Color carries the
+ * urgency signal at a glance.
+ * @tokens bg-status-success, bg-status-warning, bg-text-tertiary
+ * @usage
+ * ```tsx
+ * <Freshness level="fresh" />
+ * ```
+ */
+declare function Freshness({ level }: FreshnessProps): react.JSX.Element;
+
+export { AISpark, type AISparkProps, AdvertiserNoResults, type AdvertiserNoResultsProps, AdvertiserQuickFilter, type AdvertiserQuickFilterProps, AdvertiserSearchPrompt, type AdvertiserSearchPromptProps, BarChartPlaceholder, type BarChartPlaceholderProps, Button, type ButtonProps, Card, type CardProps, CheckBox, type CheckBoxProps, ChipContent, type ChipContentProps, DEFAULT_SEARCH_MATCH, DataScopeFilter, type DataScopeFilterProps, DateRangeFilter, type DateRangeFilterProps, DateRangePicker, type DateRangePickerProps, FilterChipBar, type FilterChipBarProps, FilterDropdownFooter, type FilterDropdownFooterProps, Freshness, type FreshnessLevel, type FreshnessProps, InfoTip, type InfoTipProps, LineChartPlaceholder, type LineChartPlaceholderProps, MultiSelectFilter, type MultiSelectFilterProps, type MultiSelectGroup, NO_RESULTS_BODY, NO_RESULTS_TITLE, NameListModal, type NameListModalProps, type NoResultsAction, NoResultsEmptyState, type NoResultsEmptyStateProps, PRIMARY_ACTION_CLASS, Pager, type PagerProps, type PickerColumn, type PickerFilter, type PickerRow, PieChartPlaceholder, type PieChartPlaceholderProps, type PubBreak, PublisherBreakdownList, type PublisherBreakdownListProps, QUIET_ACTION_CLASS, SearchBar, type SearchBarProps, type SearchBarVariant, type SearchMatchMode, type SearchMatchValue, SectionRail, type SectionRailProps, SelectAllVisible, type SelectAllVisibleProps, SelectFilter, type SelectFilterProps, SelectedSection, type SelectedSectionProps, SelectionPicker, type SelectionPickerAccountList, type SelectionPickerProps, SortButton, type SortButtonProps, type SortDir, type SortState, StackedColumnPlaceholder, type StackedColumnPlaceholderProps, type SummaryGroup, type SummaryGroupItemValue, TablePagination, type TablePaginationProps, Tag, type TagProps, Toggle, type ToggleProps, Tooltip, type TooltipProps, WorkspaceAvatar, type WorkspaceAvatarProps, WorkspaceSelectedCard, type WorkspaceSelectedCardProps, buttonVariants, chipTriggerClass, cycleSort, noResultsBody, resolveRange, sortProp };