@uniformdev/design-system 20.50.2-alpha.1 → 20.50.2-alpha.117

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,14 +1,11 @@
1
1
  import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
2
2
  import { Decorator } from '@storybook/react-vite';
3
3
  import * as React$1 from 'react';
4
- import React__default, { RefObject, ReactElement, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ImgHTMLAttributes, SVGProps, InputHTMLAttributes, CSSProperties, Ref, HtmlHTMLAttributes, PropsWithChildren, FocusEventHandler, ChangeEvent } from 'react';
5
- import { GroupBase, Props, MultiValue, SingleValue } from 'react-select';
4
+ import React__default, { RefObject, ReactElement, HTMLAttributes, ReactNode, ButtonHTMLAttributes, ImgHTMLAttributes, SVGProps, InputHTMLAttributes, HtmlHTMLAttributes, PropsWithChildren, CSSProperties, Ref, FocusEventHandler, ChangeEvent } from 'react';
5
+ import { GroupBase, Props, MultiValue, SingleValue, StylesConfig } from 'react-select';
6
6
  export { ActionMeta, FormatOptionLabelContext, FormatOptionLabelMeta, GetOptionLabel, GetOptionValue, GroupBase, GroupHeadingProps, GroupProps, MenuListProps, MenuPlacement, MultiValue, MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, OnChangeValue, OptionContext, OptionProps, Options, OptionsOrGroups } from 'react-select';
7
7
  import * as _emotion_react from '@emotion/react';
8
- import { SerializedStyles } from '@emotion/react';
9
- import * as _ariakit_react from '@ariakit/react';
10
- import { TooltipOptions, TooltipStoreProps, TooltipProps as TooltipProps$1, ButtonProps as ButtonProps$1, MenuStoreProps, PopoverStoreState, MenuProps as MenuProps$1, Menu as Menu$1, MenuItemProps as MenuItemProps$1, PopoverProps as PopoverProps$1, PopoverProviderProps, PopoverStore, TabStoreState, TabListProps, TabProps, TabPanelProps } from '@ariakit/react';
11
- export { PopoverStore } from '@ariakit/react';
8
+ import { SerializedStyles, Interpolation, Theme as Theme$1 } from '@emotion/react';
12
9
  import { IconType as IconType$2, IconBaseProps } from '@react-icons/all-files/lib';
13
10
  import * as _react_icons_all_files from '@react-icons/all-files';
14
11
  import { IconType as IconType$1 } from '@react-icons/all-files';
@@ -19,11 +16,10 @@ import { JsonSchema7Type } from 'zod-to-json-schema';
19
16
  import { InitialConfigType } from '@lexical/react/LexicalComposer';
20
17
  import { LinkParamValue, RichTextParamConfiguration } from '@uniformdev/canvas';
21
18
  export { RichTextBuiltInElement, RichTextBuiltInFormat } from '@uniformdev/canvas';
22
- import { Spread, SerializedElementNode, ElementNode, NodeKey, EditorConfig, DOMConversionMap, RangeSelection, SerializedEditorState, LexicalEditor } from 'lexical';
19
+ import { ElementNode, NodeKey, Spread, SerializedElementNode, EditorConfig, DOMConversionMap, RangeSelection, SerializedEditorState, LexicalEditor } from 'lexical';
23
20
  import * as _uniformdev_richtext from '@uniformdev/richtext';
24
21
  import { RichTextBuiltInElement } from '@uniformdev/richtext';
25
22
  export { richTextBuiltInElements, richTextBuiltInFormats } from '@uniformdev/richtext';
26
- export { Id as ToastId, toast } from 'react-toastify';
27
23
 
28
24
  /** @todo: line 144 onwards will be brought into a title, paragraph, list and link components */
29
25
  type ThemeProps = {
@@ -58,10 +54,12 @@ declare const useBreakpoint: () => BreakpointSize;
58
54
  * Media Query Helper Function
59
55
  * @function
60
56
  * @param {string} size - The responsive breakpoint value
61
- * @returns {string} - compiled media query e.g. (min-width: 640px)
57
+ * @param {'min' | 'max'} [bound='min'] - Whether to use min-width or max-width
58
+ * @returns {string} - compiled media query e.g. @media (min-width: 640px)
62
59
  * @example `${mq('md')} { background: red; }`
60
+ * @example `${mq('lg', 'max')} { overflow: hidden; }`
63
61
  */
64
- declare const mq: (size: BreakpointSize) => string;
62
+ declare const mq: (size: BreakpointSize, bound?: "min" | "max") => string;
65
63
  /**
66
64
  * Media Query Helper Function
67
65
  * @function
@@ -345,7 +343,7 @@ type AddListButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
345
343
  */
346
344
  declare const AddListButton: ({ buttonText, onButtonClick, disabled, icon, variant, theme, ...buttonProps }: AddListButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
347
345
 
348
- type AvatarSizeProp = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
346
+ type AvatarSizeProp = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
349
347
  type AvatarProps = {
350
348
  /**
351
349
  * The src of the avatar.
@@ -370,6 +368,27 @@ type AvatarProps = {
370
368
  */
371
369
  declare const Avatar: ({ src, label, children, size, as, labelWithoutPortal, ...props }: AvatarProps) => _emotion_react_jsx_runtime.JSX.Element;
372
370
 
371
+ /** Canonical width tokens for each `Avatar` `size` (single source of truth for rem values). */
372
+ declare const AVATAR_SIZE_2XS = "1rem";
373
+ declare const AVATAR_SIZE_XS = "1.5rem";
374
+ declare const AVATAR_SIZE_SM = "2rem";
375
+ declare const AVATAR_SIZE_MD = "2.5rem";
376
+ declare const AVATAR_SIZE_LG = "3rem";
377
+ declare const AVATAR_SIZE_XL = "4rem";
378
+ declare const AVATAR_SIZE_2XL = "5rem";
379
+ /** Largest step (6rem ≈ 96px when root font size is 16px). */
380
+ declare const AVATAR_SIZE_3XL = "6rem";
381
+ declare const avatarStyles: _emotion_react.SerializedStyles;
382
+ declare const avatarImageStyles: _emotion_react.SerializedStyles;
383
+ declare const avatarSize2xsStyles: _emotion_react.SerializedStyles;
384
+ declare const avatarSizeXsStyles: _emotion_react.SerializedStyles;
385
+ declare const avatarSizeSmStyles: _emotion_react.SerializedStyles;
386
+ declare const avatarSizeMdStyles: _emotion_react.SerializedStyles;
387
+ declare const avatarSizeLgStyles: _emotion_react.SerializedStyles;
388
+ declare const avatarSizeXlStyles: _emotion_react.SerializedStyles;
389
+ declare const avatarSize2xlStyles: _emotion_react.SerializedStyles;
390
+ declare const avatarSize3xlStyles: _emotion_react.SerializedStyles;
391
+
373
392
  interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
374
393
  /**
375
394
  * The maximum number of avatars to show. This must be 2 or more.
@@ -505,24 +524,40 @@ interface UseShortcutResult extends ShortcutReference {
505
524
  }
506
525
  declare function useShortcut({ disabled, handler, shortcut, macShortcut, doNotPreventDefault, activeWhenEditing, useKey, }: UseShortcutOptions): UseShortcutResult;
507
526
 
508
- type TooltipProps = TooltipOptions & {
527
+ type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
528
+ interface PopoverStore {
529
+ show(): void;
530
+ hide(): void;
531
+ readonly open: boolean;
532
+ }
533
+
534
+ type TooltipProps = {
509
535
  /** Content of tooltip popover */
510
536
  title: string | React.ReactElement;
511
537
  /** Optional ability to specify alternative placement. By default - bottom center */
512
- placement?: TooltipStoreProps['placement'];
538
+ placement?: Placement;
513
539
  /** Optional ability to control visibility of Tooltip manually, useful for showing tooltip on click instead of on hover */
514
- visible?: TooltipStoreProps['open'];
540
+ visible?: boolean | undefined;
515
541
  /** Offset between the reference and the popover on the main axis. Use it only in special cases. */
516
- gutter?: TooltipProps$1['gutter'];
542
+ gutter?: number;
517
543
  children: ReactElement;
518
544
  /** If the tooltip should not be rendered inside a portal */
519
545
  withoutPortal?: boolean;
520
- /** sets the delay time before showing the tooltip
546
+ /**
547
+ * Sets the delay time before showing the tooltip.
521
548
  * @default 0
522
549
  */
523
550
  timeout?: number;
524
- } & Pick<HTMLAttributes<HTMLDivElement>, 'className'>;
525
- declare function Tooltip({ children, title, placement, visible, withoutPortal, timeout, ...tooltipProps }: TooltipProps): _emotion_react_jsx_runtime.JSX.Element;
551
+ /**
552
+ * Sets the visibility of the tooltip. This is deprecated and will be removed in the next major version.
553
+ * @deprecated Use `visible` instead.
554
+ */
555
+ open?: boolean | undefined;
556
+ } & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'>;
557
+ /**
558
+ * Displays contextual information when hovering or focusing an element.
559
+ */
560
+ declare function Tooltip({ children, title, placement, visible, withoutPortal, timeout, gutter, ...popupProps }: TooltipProps): _emotion_react_jsx_runtime.JSX.Element;
526
561
 
527
562
  /** Button sizes that are available to use with our brand */
528
563
  type ButtonSizeProps = 'zero' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -551,7 +586,7 @@ declare const useButtonStyles: ({ size, ...props }: ButtonStylesProps) => {
551
586
  btnSize: string;
552
587
  };
553
588
 
554
- type ButtonProps = ButtonProps$1 & {
589
+ type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
555
590
  /** sets the theme of the button
556
591
  * @default "primary"
557
592
  */
@@ -587,7 +622,25 @@ type ButtonWithVariantProps = Omit<ButtonProps, 'buttonType'> & {
587
622
  * Uniform Button Component
588
623
  * @example <Button buttonType="secondary" size="md" onClick={() => alert('hello world!')}>Click me</Button>
589
624
  */
590
- declare const Button: React$1.ForwardRefExoticComponent<(Omit<ButtonProps, "ref"> | Omit<ButtonWithVariantProps, "ref">) & React$1.RefAttributes<HTMLButtonElement>>;
625
+ declare const Button: React$1.ForwardRefExoticComponent<(ButtonProps | ButtonWithVariantProps) & React$1.RefAttributes<HTMLButtonElement>>;
626
+
627
+ type LinkButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
628
+ /** React child node */
629
+ children?: React$1.ReactNode;
630
+ /** (optional) sets whether the link is truncated or not */
631
+ truncated?: boolean;
632
+ };
633
+ /**
634
+ * @deprecated - Beta - A button styled as a link with ghost-like appearance.
635
+ * Features no padding, left-aligned content, text truncation, and no background hover color.
636
+ * @example <LinkButton onClick={() => {}}>Click me</LinkButton>
637
+ */
638
+ declare const LinkButton: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
639
+ /** React child node */
640
+ children?: React$1.ReactNode;
641
+ /** (optional) sets whether the link is truncated or not */
642
+ truncated?: boolean;
643
+ } & React$1.RefAttributes<HTMLButtonElement>>;
591
644
 
592
645
  declare const rectangleRoundedIcon: IconType$1;
593
646
  declare const cardIcon: IconType$1;
@@ -1400,8 +1453,8 @@ type ButtonWithMenuStylesProps = ButtonWithMenuDefaultStylesProps | ButtonWithMe
1400
1453
  interface ActionButtonsProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size' | 'disabled'> {
1401
1454
  /** Takes a function for the visible button */
1402
1455
  onButtonClick?: () => void;
1403
- /** (optional) ariakit placements options for the expandable menu */
1404
- placement?: MenuStoreProps['placement'];
1456
+ /** (optional) placement options for the expandable menu */
1457
+ placement?: Placement;
1405
1458
  /** sets the button text value */
1406
1459
  buttonText: React.ReactNode;
1407
1460
  /** sets a leading icon supporting the button text */
@@ -1451,12 +1504,25 @@ declare const ButtonWithMenu: ({ onButtonClick, buttonText, icon, disabled, chil
1451
1504
  * A string in the ISO 8601 date format: YYYY-MM-DD
1452
1505
  */
1453
1506
  type IsoDateString = string;
1507
+ type CalendarCellCss = Interpolation<Theme$1> | null | false | undefined;
1508
+ /**
1509
+ * Optional style overrides for calendar sub-elements.
1510
+ */
1511
+ type CalendarStyles = {
1512
+ /**
1513
+ * Returns custom styles to append to a date cell.
1514
+ */
1515
+ calendarCell?: (date: Date) => CalendarCellCss[];
1516
+ };
1454
1517
  type CalendarProps = Pick<CalendarProps$1<DateValue>, 'autoFocus' | 'isDisabled' | 'isReadOnly' | 'isInvalid'> & Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onFocus'> & {
1455
1518
  value: IsoDateString | null | undefined;
1456
1519
  timeZone: string;
1457
1520
  minValue?: IsoDateString;
1458
1521
  maxValue?: IsoDateString;
1459
1522
  onChange?: (value: IsoDateString) => void;
1523
+ styles?: CalendarStyles;
1524
+ withTodayButton?: boolean;
1525
+ isDateUnavailable?: (date: Date) => boolean;
1460
1526
  };
1461
1527
  /**
1462
1528
  * A Calendar Grid which allows the user to navigate
@@ -1464,7 +1530,7 @@ type CalendarProps = Pick<CalendarProps$1<DateValue>, 'autoFocus' | 'isDisabled'
1464
1530
  *
1465
1531
  * @deprecated This component is in beta, name and props are subject to change without a major version
1466
1532
  */
1467
- declare const Calendar: ({ value, timeZone, minValue, maxValue, onChange, autoFocus, isDisabled, isInvalid, isReadOnly, ...props }: CalendarProps) => _emotion_react_jsx_runtime.JSX.Element;
1533
+ declare const Calendar: ({ value, timeZone, minValue, maxValue, onChange, styles: stylesProp, autoFocus, isDisabled, isInvalid, isReadOnly, withTodayButton, isDateUnavailable, ...props }: CalendarProps) => _emotion_react_jsx_runtime.JSX.Element;
1468
1534
 
1469
1535
  /** Callout button types available to use with our brand */
1470
1536
  type CalloutType = 'caution' | 'danger' | 'info' | 'note' | 'success' | 'tip' | 'error';
@@ -1561,7 +1627,7 @@ declare const CardContainer: ({ bgColor, padding, withLastColumn, children, ...p
1561
1627
  */
1562
1628
  declare const LoadingCardSkeleton: () => _emotion_react_jsx_runtime.JSX.Element;
1563
1629
 
1564
- type ChipSizeProp = 'xs' | 'sm' | 'md';
1630
+ type ChipSizeProp = 'xxs' | 'xs' | 'sm' | 'md';
1565
1631
  type ChipTheme = 'accent-light' | 'accent-dark' | 'accent-alt-light' | 'accent-alt-dark' | 'neutral-light' | 'neutral-dark' | 'utility-caution' | 'utility-danger' | 'utility-info' | 'utility-success';
1566
1632
  type ChipProps = {
1567
1633
  icon?: IconType;
@@ -1609,15 +1675,23 @@ type DismissibleChipActionProps = {
1609
1675
  declare const DismissibleChipAction: ({ onDismiss, ...props }: DismissibleChipActionProps) => _emotion_react_jsx_runtime.JSX.Element;
1610
1676
 
1611
1677
  type FilterChipSize = 'xs' | 'sm' | 'md' | 'lg';
1612
- type FilterChipProps = {
1678
+ /**
1679
+ * Compact button used to toggle a filter on/off, optionally rendered as a
1680
+ * dropdown trigger. Spreads `...props` first then sets `type` last with a
1681
+ * fallback to `"button"` so wrappers like Base UI's `Menu.Trigger` (which can
1682
+ * forward `type: undefined` via `cloneElement`) cannot accidentally turn it
1683
+ * into a submit button inside a `<form>`. Marked with `markNativeButton` so
1684
+ * `Menu` knows the rendered DOM is a real `<button>` and can pass
1685
+ * `nativeButton={true}` to Base UI.
1686
+ */
1687
+ declare const FilterChip: React$1.ForwardRefExoticComponent<{
1613
1688
  leadingIcon?: IconType;
1614
1689
  asDropdown?: boolean;
1615
1690
  children: React.ReactNode;
1616
1691
  dataTestId?: string;
1617
1692
  size?: FilterChipSize;
1618
1693
  isSelected?: boolean;
1619
- } & ButtonHTMLAttributes<HTMLButtonElement>;
1620
- declare const FilterChip: ({ leadingIcon, asDropdown, children, dataTestId, size, isSelected, ...props }: FilterChipProps) => _emotion_react_jsx_runtime.JSX.Element;
1694
+ } & ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
1621
1695
 
1622
1696
  type MultilineChipProps = {
1623
1697
  children: ReactNode;
@@ -1783,13 +1857,15 @@ type DateTimePickerProps = {
1783
1857
  /** (optional) sets the base test id for each of the elements with a testid */
1784
1858
  testId?: string;
1785
1859
  /** (optional) sets the popover placement */
1786
- placement?: PopoverStoreState['placement'];
1860
+ placement?: Placement;
1787
1861
  /** (optional) sets the popover offset
1788
1862
  * @default 8
1789
1863
  */
1790
1864
  offset?: number;
1791
1865
  /** (optional) sets whether to render the popover in a portal */
1792
1866
  portal?: boolean;
1867
+ /** (optional) reduces input height to match compact parameter inputs */
1868
+ compact?: boolean;
1793
1869
  };
1794
1870
  /**
1795
1871
  * Use this context for slots within the date time picker
@@ -1809,7 +1885,7 @@ declare function useDateTimePickerContext(): {
1809
1885
  * Subcomponents can manipulate the value directly by using
1810
1886
  * the `useDateTimePickerContext()` hook.
1811
1887
  */
1812
- declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
1888
+ declare const DateTimePicker: ({ id, label, triggerIcon, value, minVisible, maxVisible, variant, caption, placeholder, belowTimeInputSlot, showLabel, errorMessage, warningMessage, disabled, onChange, offset, testId, placement, portal, compact, ...props }: DateTimePickerProps) => _emotion_react_jsx_runtime.JSX.Element;
1813
1889
 
1814
1890
  declare function DateTimePickerSummary({ value, placeholder, }: {
1815
1891
  value: DateTimePickerValue | null | undefined;
@@ -2048,7 +2124,7 @@ interface IconButtonProps extends Omit<ButtonProps, 'size'> {
2048
2124
  /** Style for the larger sizes have not been decided yet */
2049
2125
  size?: 'xs' | 'sm' | 'md';
2050
2126
  }
2051
- declare const IconButton: React$1.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
2127
+ declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
2052
2128
 
2053
2129
  interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
2054
2130
  imgClassName?: string;
@@ -2653,8 +2729,6 @@ type IntegrationModalHeaderProps = {
2653
2729
  /** (optional) sets child elements in */
2654
2730
  menu?: React$1.ReactNode;
2655
2731
  };
2656
- type HexModalBackgroundProps = React$1.SVGAttributes<SVGElement>;
2657
- declare const HexModalBackground: ({ ...props }: HexModalBackgroundProps) => _emotion_react_jsx_runtime.JSX.Element;
2658
2732
  /** Uniform Integration Modal Header
2659
2733
  * @example <IntegrationModalHeader icon="/icon.svg" name="name" />
2660
2734
  */
@@ -2709,6 +2783,14 @@ type KeyValueInputProps<TValue extends string = string> = {
2709
2783
  onChange: (icon: string) => void;
2710
2784
  disabled?: boolean;
2711
2785
  }) => ReactNode;
2786
+ /**
2787
+ * When true, keys and values are treated as fully independent: typing a key
2788
+ * does not autofill the value, and multi-line paste lines without a comma
2789
+ * are imported as keys with empty values rather than mirroring key into value.
2790
+ * Use for inputs where the value has no logical relation to the key
2791
+ * (e.g. HTTP header name/value pairs).
2792
+ */
2793
+ independentKeyValue?: boolean;
2712
2794
  };
2713
2795
  /**
2714
2796
  * A component to render a sortable key-value input
@@ -2717,212 +2799,9 @@ type KeyValueInputProps<TValue extends string = string> = {
2717
2799
  * return <KeyValueInput value={value} onChange={setValue} />
2718
2800
  * @deprecated This component is in beta, name and props are subject to change without a major version
2719
2801
  */
2720
- declare const KeyValueInput: <TValue extends string = string>({ value, onChange, label, newItemDefault, keyLabel, valueLabel, iconLabel, keyInfoPopover, valueInfoPopover, iconInfoPopover, disabled, errors, onFocusChange, showIconColumn, renderIconSelector, }: KeyValueInputProps<TValue>) => _emotion_react_jsx_runtime.JSX.Element;
2721
-
2722
- type AsideAndSectionLayout = {
2723
- /** sets child components in the aside / supporting column */
2724
- sidebar?: ReactNode;
2725
- /** sets child components in the section / main content column */
2726
- children: ReactNode;
2727
- /** Makes the sidebar sticky to the top of the container
2728
- * @default false
2729
- */
2730
- isStickyAside?: boolean;
2731
- };
2732
- declare const AsideAndSectionLayout: ({ sidebar, children, isStickyAside, }: AsideAndSectionLayout) => _emotion_react_jsx_runtime.JSX.Element;
2733
-
2734
- type SpacingProp = '0' | '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
2735
- type BackgroundColorProp = 'transparent' | 'white' | 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900';
2736
- type HtmlTagProps = 'div' | 'section' | 'article' | 'aside' | 'span';
2737
- type BorderRadiusProps = 'rounded-sm' | 'rounded-base' | 'rounded-md';
2738
- type CommonContainerProps = {
2739
- /** sets the background color of the element */
2740
- backgroundColor?: BackgroundColorProp;
2741
- /** sets border: 1px solid var(--gray-300)*/
2742
- border?: boolean;
2743
- /** sets the border radius of the element */
2744
- rounded?: BorderRadiusProps;
2745
- /** sets the padding of the element */
2746
- padding?: string;
2747
- /** sets the margin of the element */
2748
- margin?: string;
2749
- };
2750
- type RhythmProps = React.HTMLAttributes<HTMLDivElement | HTMLFieldSetElement> & {
2751
- /** sets the wrapping html tag
2752
- * @default 'div'
2753
- */
2754
- tag?: HtmlTagProps | 'fieldset';
2755
- /** sets the spacing between each element
2756
- * @default 'div'
2757
- */
2758
- gap?: SpacingProp;
2759
- /** sets the alignment of elements
2760
- * @default normal browser behaviour
2761
- */
2762
- align?: CSSProperties['alignItems'];
2763
- justify?: CSSProperties['justifyContent'];
2764
- children: React.ReactNode;
2765
- /** for use when fieldset is applied to the tag prop */
2766
- disabled?: boolean;
2767
- ref?: Ref<HTMLDivElement>;
2768
- };
2769
-
2770
- type ContainerProps = CommonContainerProps & React$1.HTMLAttributes<HTMLDivElement> & {
2771
- tag?: HtmlTagProps;
2772
- children: React$1.ReactNode;
2773
- };
2774
- declare const Container: ({ tag, backgroundColor, border, rounded, padding, margin, children, ...props }: ContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
2775
-
2776
- declare const HorizontalRhythm: ({ align, justify, tag, gap, children, ref, ...props }: RhythmProps) => _emotion_react_jsx_runtime.JSX.Element;
2777
-
2778
- type TwoColumnLayoutProps = {
2779
- /** sets the full bleed background colour
2780
- * @default 'var(--white)'
2781
- */
2782
- bgColor?: 'var(--white)' | 'var(--gray-50)';
2783
- /** sets child components in the aside / supporting column */
2784
- supportingContent?: ReactNode;
2785
- /** sets child components in the section / main content column */
2786
- children?: ReactNode;
2787
- /** inverts the layout placing the aside container on the left
2788
- * @default false
2789
- */
2790
- invertLayout?: boolean;
2791
- };
2792
- /** @example <TwoColumnLayout supportingContent={<div>supporting content</div>}><h1>title</h1></TwoColumnLayout> */
2793
- declare const TwoColumnLayout: ({ bgColor, invertLayout, supportingContent, children, }: TwoColumnLayoutProps) => _emotion_react_jsx_runtime.JSX.Element;
2794
-
2795
- declare const VerticalRhythm: ({ align, justify, tag, gap, children, ref, ...props }: RhythmProps) => _emotion_react_jsx_runtime.JSX.Element;
2796
-
2797
- type LimitsBarProps = {
2798
- /** The current value of used limits */
2799
- current: number;
2800
- /** The maximum number of limits */
2801
- max: number;
2802
- /** @deprecated No longer used */
2803
- label?: string;
2804
- /** Optional popover content for info icon */
2805
- popoverContent?: ReactNode;
2806
- };
2807
- /**
2808
- * Uniform Limits Bar Component
2809
- * @example <LimitsBar current={3} max={5} />
2810
- */
2811
- declare const LimitsBar: ({ current, max, popoverContent }: LimitsBarProps) => _emotion_react_jsx_runtime.JSX.Element;
2812
-
2813
- type LinkListProps = React$1.HTMLAttributes<HTMLDivElement> & {
2814
- /** sets the title field */
2815
- title: string;
2816
- /** (optional) sets react child component */
2817
- children?: React$1.ReactNode;
2818
- };
2819
- declare const LinkList: ({ title, children, ...props }: LinkListProps) => _emotion_react_jsx_runtime.JSX.Element;
2820
-
2821
- type ScrollableListProps = React$1.HTMLAttributes<HTMLDivElement> & {
2822
- /** (optional) sets the label value */
2823
- label?: string;
2824
- /** (optional) allows users to add child components within the container */
2825
- children?: React$1.ReactNode;
2826
- };
2827
- /**
2828
- * Component that sets the base structure for scrollable content in a max height container
2829
- * @example <ScrollableList label="allowed content types"><button>say hello</button></ScrollableList>
2830
- */
2831
- declare const ScrollableList: ({ label, children, ...props }: ScrollableListProps) => _emotion_react_jsx_runtime.JSX.Element;
2832
-
2833
- type ScrollableListContainerProps = {
2834
- /** sets whether to show or hide the shadow around the element
2835
- * @default 'false'
2836
- */
2837
- disableShadow?: boolean;
2838
- /** sets the active style of the button */
2839
- active: boolean;
2840
- };
2841
-
2842
- type ScrollableItemProps = {
2843
- /** sets an element within the label > span element */
2844
- icon?: React.ReactElement;
2845
- /**sets the label value */
2846
- label: string | React.ReactElement;
2847
- /** sets a data-testid on the label */
2848
- labelTestId?: string;
2849
- /** recommended to use a form input element of type radio or checkbox */
2850
- children: React.ReactNode;
2851
- } & ScrollableListContainerProps;
2852
- /** @example <ScrollableListInputItem label="my label" active={true}><input type="radio" name="age" /></ScrollableListInputItem>*/
2853
- declare const ScrollableListInputItem: ({ label, icon, active, disableShadow, children, labelTestId, ...props }: ScrollableItemProps) => _emotion_react_jsx_runtime.JSX.Element;
2854
-
2855
- type ScrollableListItemProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
2856
- /** sets the button text value */
2857
- buttonText: string;
2858
- icon?: React$1.ReactElement;
2859
- } & ScrollableListContainerProps;
2860
- /**
2861
- * Component used within <ScrollableList /> for adding interactive button components with predefined styles
2862
- * @example <ScrollableListItem buttontext="my button" active={false} />
2863
- */
2864
- declare const ScrollableListItem: ({ buttonText, icon, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
2865
-
2866
- type LoadingIndicatorProps = {
2867
- color?: 'gray' | 'accent-alt';
2868
- size?: 'lg' | 'sm';
2869
- } & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
2870
- /**
2871
- * Loading Indicator
2872
- * @example <LoadingIndicator />
2873
- */
2874
- declare const LoadingIndicator: ({ size, color, ...props }: LoadingIndicatorProps) => _emotion_react_jsx_runtime.JSX.Element;
2875
-
2876
- interface LoadingOverlayProps {
2877
- /** sets whether to display the loading overlay components */
2878
- isActive: boolean;
2879
- /** (optional) type that sets a text value or React component under the loading icon */
2880
- statusMessage?: string | ReactNode;
2881
- /** (optional) the z-index value of the overlay
2882
- * @default 9999
2883
- */
2884
- zIndex?: number;
2885
- /** (optional) sets the width and height of the loader
2886
- * @default 128
2887
- */
2888
- loaderSize?: number;
2889
- /** (optional) sets the loading overlay background color
2890
- * @default 'var(--white)'
2891
- */
2892
- overlayBackgroundColor?: 'transparent' | 'var(--white)';
2893
- /** (optional) if set to true, the animation of the loading indicator is paused
2894
- * @default false
2895
- */
2896
- isPaused?: boolean;
2897
- /** (optional) aligns the content of the overlay to the top instead of having it centered
2898
- * @default false
2899
- */
2900
- isTopAligned?: boolean;
2901
- children?: React.ReactNode;
2902
- /** (optional) sets the position of the overlay
2903
- * @default 'absolute'
2904
- */
2905
- position?: 'absolute' | 'fixed';
2906
- }
2907
- /**
2908
- * Loading Overlay.
2909
- * NOTE: the container/parent element must have a non-static `position` value for the overlay to work properly.
2910
- * @example <LoadingOverlay isActive={true} statusMessage="Loading..." />
2911
- */
2912
- declare const LoadingOverlay: ({ isActive, statusMessage, zIndex, loaderSize, overlayBackgroundColor, isTopAligned, isPaused, children, position, }: LoadingOverlayProps) => _emotion_react_jsx_runtime.JSX.Element;
2913
- interface LoadingIconProps extends HTMLAttributes<SVGSVGElement> {
2914
- /** (optional) prop that sets a number value for the height of the icon */
2915
- width?: number;
2916
- /** (optional) prop that sets a number value for the width of the icon */
2917
- height?: number;
2918
- }
2919
- /**
2920
- * Loading Icon
2921
- * @example <LoadingIcon height={128} width={128} />
2922
- */
2923
- declare const LoadingIcon: ({ height, width, ...props }: LoadingIconProps) => _emotion_react_jsx_runtime.JSX.Element;
2802
+ declare const KeyValueInput: <TValue extends string = string>({ value, onChange, label, newItemDefault, keyLabel, valueLabel, iconLabel, keyInfoPopover, valueInfoPopover, iconInfoPopover, disabled, errors, onFocusChange, showIconColumn, renderIconSelector, independentKeyValue, }: KeyValueInputProps<TValue>) => _emotion_react_jsx_runtime.JSX.Element;
2924
2803
 
2925
- interface DropdownStyleMenuTriggerProps extends React.HTMLAttributes<HTMLButtonElement> {
2804
+ interface DropdownStyleMenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
2926
2805
  children: React.ReactNode;
2927
2806
  /** sets the background color of the button */
2928
2807
  bgColor?: string;
@@ -2931,17 +2810,33 @@ interface DropdownStyleMenuTriggerProps extends React.HTMLAttributes<HTMLButtonE
2931
2810
  */
2932
2811
  variant?: 'ghost' | 'outline';
2933
2812
  }
2934
- /** Renders a dropdown menu style menu trigger button */
2813
+ /**
2814
+ * Renders a dropdown menu style menu trigger button. Marked with
2815
+ * `markNativeButton` so the design system's `Menu` knows to opt into Base UI's
2816
+ * native-button code path even though the React element type is a function
2817
+ * component.
2818
+ */
2935
2819
  declare const DropdownStyleMenuTrigger: React$1.ForwardRefExoticComponent<DropdownStyleMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
2936
2820
 
2937
2821
  declare const legacyPlacements: readonly ["auto", "auto-start", "auto-end"];
2938
2822
  type LegacyPlacement = (typeof legacyPlacements)[number];
2939
- interface MenuProps extends MenuProps$1 {
2940
- /** the component that triggers the menu functionality */
2823
+
2824
+ /**
2825
+ * @internal Hook used by MenuItem to detect when it is being rendered as the
2826
+ * `render` element of a Base UI SubmenuTrigger, so it can render a plain styled
2827
+ * div instead of `<BaseUIMenu.Item>` (which conflicts with SubmenuTrigger's own
2828
+ * composite-store registration and breaks click handling on submenu children).
2829
+ */
2830
+ declare function useIsSubmenuTriggerMode(): boolean;
2831
+ interface MenuProps extends Pick<React$1.HTMLAttributes<HTMLDivElement>, 'className' | 'id' | 'style'> {
2832
+ /** The component that triggers the menu functionality */
2941
2833
  menuTrigger: React$1.ReactElement & React$1.RefAttributes<any>;
2942
- /** (optional) Ariakit placements options for the expandable menu */
2943
- placement?: MenuStoreProps['placement'] | LegacyPlacement;
2944
- /** (optional) allows users to set additional class names */
2834
+ /**
2835
+ * (optional) placement options for the expandable menu.
2836
+ * Root menus default to `bottom-end` when omitted; use `bottom` for center alignment.
2837
+ */
2838
+ placement?: Placement | LegacyPlacement;
2839
+ /** (optional) allows users to set additional class names */
2945
2840
  menuItemsContainerCssClasses?: SerializedStyles | string;
2946
2841
  /** (optional) allows users to add child elements */
2947
2842
  children?: React$1.ReactNode;
@@ -2956,7 +2851,7 @@ interface MenuProps extends MenuProps$1 {
2956
2851
  * If you need to disable this functionality, set this prop to true.
2957
2852
  */
2958
2853
  disableAutoSeparatorManagement?: boolean;
2959
- /** sets whether to use a React portal rendering or not. */
2854
+ /** Sets whether to use a React portal rendering or not. */
2960
2855
  withoutPortal?: boolean;
2961
2856
  /** (optional) sets the test id attribute */
2962
2857
  testId?: string;
@@ -2965,12 +2860,47 @@ interface MenuProps extends MenuProps$1 {
2965
2860
  * this is not compatible with nested menus that expand to the left or right of the menu
2966
2861
  */
2967
2862
  maxMenuHeight?: string;
2968
- portalElement?: React$1.ComponentProps<typeof Menu$1>['portalElement'];
2969
- /** sets the menu size
2863
+ /** Optional container element for the portal */
2864
+ portalElement?: HTMLElement | null;
2865
+ /** Sets the menu size
2970
2866
  * it's recommended to use the same size for all menu items in a menu
2971
2867
  * @default 'base'
2972
2868
  */
2973
2869
  size?: 'small' | 'base';
2870
+ /** (optional) disables the menu trigger so the menu cannot be opened */
2871
+ disabled?: boolean;
2872
+ /** Controls the open state of the menu (controlled mode) */
2873
+ open?: boolean;
2874
+ /** Called when the menu closes */
2875
+ onClose?: () => void;
2876
+ /** Called when the menu open state changes */
2877
+ onOpenChange?: (open: boolean) => void;
2878
+ /** Distance between the trigger and the menu popup in pixels */
2879
+ gutter?: number;
2880
+ /** Offset along the alignment axis in pixels */
2881
+ shift?: number;
2882
+ /**
2883
+ * Returns a custom anchor rect for positioning the menu.
2884
+ * Used by QuickFilter for custom anchor positioning.
2885
+ */
2886
+ getAnchorRect?: (anchor: HTMLElement | null) => {
2887
+ x?: number;
2888
+ y?: number;
2889
+ width?: number;
2890
+ height?: number;
2891
+ };
2892
+ /**
2893
+ * Controls when the menu repositions.
2894
+ * When provided, disables automatic anchor tracking after initial placement.
2895
+ */
2896
+ updatePosition?: (props: {
2897
+ updatePosition: () => void;
2898
+ }) => void;
2899
+ /**
2900
+ * @deprecated use `withoutPortal={false}` instead (default behavior).
2901
+ * Kept for backward compatibility.
2902
+ */
2903
+ portal?: boolean;
2974
2904
  }
2975
2905
  /**
2976
2906
  * Component used for creating clickable menus
@@ -2982,7 +2912,7 @@ interface MenuProps extends MenuProps$1 {
2982
2912
  * <MenuItem>Item 1</MenuItem>
2983
2913
  * </Menu>
2984
2914
  */
2985
- declare const Menu: React$1.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
2915
+ declare const Menu: React$1.ForwardRefExoticComponent<MenuProps & React$1.RefAttributes<HTMLDivElement>>;
2986
2916
 
2987
2917
  type MenuGroupProps = {
2988
2918
  /** Title for the menu group. If undefined or an empty string, the group will render as normal menu */
@@ -2998,7 +2928,7 @@ declare const MenuGroup: ({ title, children }: MenuGroupProps) => _emotion_react
2998
2928
  * accent-alt - AI color (accent-alt-dark). DOES NOT change the text - only the icon color!
2999
2929
  */
3000
2930
  type MenuItemTextThemeProps = 'base' | 'red' | 'accent-alt';
3001
- type MenuItemProps = MenuItemProps$1 & {
2931
+ type MenuItemProps = Pick<React$1.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'tabIndex' | 'id' | 'title' | 'onMouseEnter' | 'onMouseLeave'> & {
3002
2932
  /**
3003
2933
  * Sets child elements within the component.
3004
2934
  * Can be omitted when using the `render` prop
@@ -3006,6 +2936,11 @@ type MenuItemProps = MenuItemProps$1 & {
3006
2936
  children?: ChildFunction | React$1.ReactNode;
3007
2937
  /** (optional) set whether to hide the menu after a click action */
3008
2938
  hideMenuOnClick?: boolean;
2939
+ /**
2940
+ * @deprecated Use `hideMenuOnClick` instead.
2941
+ * Alias kept for backward compatibility.
2942
+ */
2943
+ hideOnClick?: boolean;
3009
2944
  /** (optional) set an icon along side the item text, we recommend using the MenuItemIcon component
3010
2945
  * @example <MenuItemIcon icon="add-r" />
3011
2946
  */
@@ -3026,8 +2961,18 @@ type MenuItemProps = MenuItemProps$1 & {
3026
2961
  * be automatically set to invoke the shortcut's handler function.
3027
2962
  */
3028
2963
  shortcut?: ShortcutReference;
2964
+ /** Click handler for the menu item */
2965
+ onClick?: React$1.MouseEventHandler<HTMLElement>;
2966
+ /** Whether the menu item is disabled */
2967
+ disabled?: boolean;
2968
+ /** Overrides the rendered element */
2969
+ render?: React$1.ReactElement;
2970
+ /** Ref forwarded to the root element */
2971
+ ref?: React$1.Ref<HTMLDivElement>;
2972
+ /** Overrides the text label to use when the item is matched during keyboard text navigation */
2973
+ label?: string;
3029
2974
  };
3030
- type ChildFunction = (menuItemProps: MenuItemProps$1) => React$1.ReactElement | null;
2975
+ type ChildFunction = (menuItemProps: Record<string, unknown>) => React$1.ReactElement | null;
3031
2976
  /**
3032
2977
  * MenuItem Component used along side <Menu /> component
3033
2978
  * @example <MenuItem onClick={() => alert('menu item was clicked')} icon={<RedClose />}>Remove Link</MenuItem>
@@ -3035,8 +2980,8 @@ type ChildFunction = (menuItemProps: MenuItemProps$1) => React$1.ReactElement |
3035
2980
  declare const MenuItem: React$1.ForwardRefExoticComponent<Omit<MenuItemProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
3036
2981
  /**
3037
2982
  * MenuItem Component for headless use outside <Menu /> component
3038
- * Use only if adapting Uniform menu item appearance to a non-ariakit menu.
3039
- * This is required because ariakit does not let you use MenuItem outside of a Menu component.
2983
+ * Use only if adapting Uniform menu item appearance to a non-Base UI menu.
2984
+ * This is required because Base UI does not let you use MenuItem outside of a Menu component.
3040
2985
  * @example <MenuItemInner onClick={() => alert('menu item was clicked')} icon={<RedClose />}>Remove Link</MenuItem>
3041
2986
  */
3042
2987
  declare const MenuItemInner: React$1.FC<MenuItemProps>;
@@ -3059,10 +3004,20 @@ declare const MenuItemSeparator: ({ ...props }: HtmlHTMLAttributes<HTMLHRElement
3059
3004
 
3060
3005
  type MenuButtonProp = {
3061
3006
  children: React.ReactNode;
3062
- } & HTMLAttributes<HTMLButtonElement>;
3063
- declare const MenuButton: React$1.ForwardRefExoticComponent<{
3064
- children: React.ReactNode;
3065
- } & HTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
3007
+ } & ButtonHTMLAttributes<HTMLButtonElement>;
3008
+ /**
3009
+ * Bare `<button type="button">` styled wrapper used as a Menu trigger.
3010
+ *
3011
+ * The `type` attribute is set after `...props` with a fallback so wrappers
3012
+ * such as Base UI's `Menu.Trigger` (which can forward `type: undefined` via
3013
+ * `cloneElement`) cannot accidentally turn this into a submit button when
3014
+ * placed inside a `<form>`. Marked with `markNativeButton` so the design
3015
+ * system's `Menu` component knows to opt into Base UI's native-button code
3016
+ * path.
3017
+ */
3018
+ declare const MenuButton: React$1.ForwardRefExoticComponent<{
3019
+ children: React.ReactNode;
3020
+ } & ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
3066
3021
  type MenuThreeDotsProps = {
3067
3022
  /** sets the aria-label and title value on the button
3068
3023
  * @default 'More options'
@@ -3073,7 +3028,12 @@ type MenuThreeDotsProps = {
3073
3028
  */
3074
3029
  iconSize?: string;
3075
3030
  disabled?: boolean;
3076
- } & HTMLAttributes<HTMLButtonElement>;
3031
+ } & ButtonHTMLAttributes<HTMLButtonElement>;
3032
+ /**
3033
+ * Three-dot ("more options") Menu trigger. Marked as a native-button trigger
3034
+ * so `Menu` reports `nativeButton={true}` to Base UI even though it is a
3035
+ * function component (Base UI inspects the React element's outer `type`).
3036
+ */
3077
3037
  declare const MenuThreeDots: React$1.ForwardRefExoticComponent<{
3078
3038
  /** sets the aria-label and title value on the button
3079
3039
  * @default 'More options'
@@ -3084,14 +3044,18 @@ declare const MenuThreeDots: React$1.ForwardRefExoticComponent<{
3084
3044
  */
3085
3045
  iconSize?: string;
3086
3046
  disabled?: boolean;
3087
- } & HTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
3047
+ } & ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
3048
+ /**
3049
+ * Select-style Menu trigger that renders the current value with a chevron.
3050
+ * Marked as a native-button trigger for the same reason as `MenuThreeDots`.
3051
+ */
3088
3052
  declare const MenuSelect: React$1.ForwardRefExoticComponent<{
3089
3053
  /** sets the size of the menu select
3090
3054
  * @default 'base'
3091
3055
  */
3092
3056
  size?: "xs" | "sm" | "base" | "md" | "lg";
3093
3057
  children: React.ReactNode;
3094
- } & HTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
3058
+ } & ButtonHTMLAttributes<HTMLButtonElement> & React$1.RefAttributes<HTMLButtonElement>>;
3095
3059
 
3096
3060
  type SearchableMenuProps = {
3097
3061
  /** Note: this is pre-debounced for your handling enjoyment */
@@ -3102,6 +3066,8 @@ type SearchableMenuProps = {
3102
3066
  disableSearch?: boolean;
3103
3067
  /** Sets the placeholder in the search input */
3104
3068
  searchPlaceholder?: string;
3069
+ /** Called when Enter is pressed in the search input and no highlighted menu item handles the event */
3070
+ onSearchEnterKeyDown?: () => void;
3105
3071
  } & MenuProps;
3106
3072
  /**
3107
3073
  * Searchable menu allows searching through its menu items
@@ -3109,9 +3075,445 @@ type SearchableMenuProps = {
3109
3075
  declare const SearchableMenu: (props: SearchableMenuProps) => _emotion_react_jsx_runtime.JSX.Element;
3110
3076
 
3111
3077
  interface SelectableMenuItemProps extends PropsWithChildren<Omit<MenuItemProps, 'children'>> {
3078
+ /** whether the menu item is selected */
3112
3079
  selected: boolean;
3080
+ /** the styles to use for the selectable menu item
3081
+ * @default 'default'
3082
+ */
3083
+ selectStyles?: 'default' | 'checkbox-select';
3084
+ /** whether the menu item is selectable
3085
+ * @default true
3086
+ */
3087
+ isSelectable?: boolean;
3113
3088
  }
3114
- declare function SelectableMenuItem({ selected, children, ...menuItemProps }: SelectableMenuItemProps): _emotion_react_jsx_runtime.JSX.Element;
3089
+ /**
3090
+ * A {@link MenuItem} that displays a selected state via a leading check icon.
3091
+ *
3092
+ * The component forwards refs to the underlying menu item DOM node so that
3093
+ * Base UI's `SubmenuTrigger` (which clones its `render` element and attaches a
3094
+ * ref for positioning/focus management) works correctly when a
3095
+ * SelectableMenuItem is used as a submenu trigger.
3096
+ */
3097
+ declare const SelectableMenuItem: React$1.ForwardRefExoticComponent<Omit<SelectableMenuItemProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
3098
+
3099
+ type SwatchSize = 'default' | 'small';
3100
+ type SwatchVariant = 'swatch-default' | 'swatch-red' | 'swatch-orange' | 'swatch-yellow' | 'swatch-green' | 'swatch-blue' | 'swatch-purple' | 'swatch-pink' | 'swatch-brown' | 'swatch-gray';
3101
+ type SwatchProps = {
3102
+ /** sets the size of the swatch
3103
+ * @default 'default'
3104
+ */
3105
+ size?: SwatchSize;
3106
+ /** sets the color variant of the swatch
3107
+ * @default 'swatch-default'
3108
+ */
3109
+ variant?: SwatchVariant;
3110
+ /** sets the tooltip of the swatch
3111
+ * @default undefined
3112
+ */
3113
+ tooltip?: string;
3114
+ /** sets the test id of the swatch
3115
+ * @default 'swatch'
3116
+ */
3117
+ testId?: string;
3118
+ };
3119
+ /** @example <Swatch variant="swatch-blue" size="default" /> */
3120
+ declare const Swatch: ({ size, variant, tooltip, testId, }: SwatchProps) => _emotion_react_jsx_runtime.JSX.Element;
3121
+
3122
+ /** Swatch color CSS custom properties
3123
+ * Exports CSS variables for all swatch variants that can be used in other components.
3124
+ * Each variant has --swatch-{variant}-bg and --swatch-{variant}-border variables.
3125
+ * @example <div css={swatchColors}></div>
3126
+ * @example css-in-js my-component { ${swatchColors} }
3127
+ */
3128
+ declare const swatchColors: _emotion_react.SerializedStyles;
3129
+ /**
3130
+ * Swatch variant styles as plain objects.
3131
+ * Works with both Emotion's css prop and react-select's styles API.
3132
+ * @example <div css={swatchVariant['swatch-blue']}></div>
3133
+ * @example styles={{ multiValue: (base, { data }) => ({ ...base, ...swatchVariant[data.color] }) }}
3134
+ */
3135
+ declare const swatchVariant: {
3136
+ readonly 'swatch-default': {
3137
+ readonly '--variant-bg': "var(--swatch-default-bg)";
3138
+ readonly '--variant-border': "var(--swatch-default-border)";
3139
+ };
3140
+ readonly 'swatch-gray': {
3141
+ readonly '--variant-bg': "var(--swatch-gray-bg)";
3142
+ readonly '--variant-border': "var(--swatch-gray-border)";
3143
+ };
3144
+ readonly 'swatch-brown': {
3145
+ readonly '--variant-bg': "var(--swatch-brown-bg)";
3146
+ readonly '--variant-border': "var(--swatch-brown-border)";
3147
+ };
3148
+ readonly 'swatch-orange': {
3149
+ readonly '--variant-bg': "var(--swatch-orange-bg)";
3150
+ readonly '--variant-border': "var(--swatch-orange-border)";
3151
+ };
3152
+ readonly 'swatch-yellow': {
3153
+ readonly '--variant-bg': "var(--swatch-yellow-bg)";
3154
+ readonly '--variant-border': "var(--swatch-yellow-border)";
3155
+ };
3156
+ readonly 'swatch-green': {
3157
+ readonly '--variant-bg': "var(--swatch-green-bg)";
3158
+ readonly '--variant-border': "var(--swatch-green-border)";
3159
+ };
3160
+ readonly 'swatch-blue': {
3161
+ readonly '--variant-bg': "var(--swatch-blue-bg)";
3162
+ readonly '--variant-border': "var(--swatch-blue-border)";
3163
+ };
3164
+ readonly 'swatch-purple': {
3165
+ readonly '--variant-bg': "var(--swatch-purple-bg)";
3166
+ readonly '--variant-border': "var(--swatch-purple-border)";
3167
+ };
3168
+ readonly 'swatch-pink': {
3169
+ readonly '--variant-bg': "var(--swatch-pink-bg)";
3170
+ readonly '--variant-border': "var(--swatch-pink-border)";
3171
+ };
3172
+ readonly 'swatch-red': {
3173
+ readonly '--variant-bg': "var(--swatch-red-bg)";
3174
+ readonly '--variant-border': "var(--swatch-red-border)";
3175
+ };
3176
+ };
3177
+
3178
+ /**
3179
+ * SwatchComboBoxLabelStyles provides custom styles for react-select's multiValue and multiValueLabel.
3180
+ * Dynamically applies color based on each option's color property.
3181
+ * @returns A StylesConfig object with customized styles.
3182
+ */
3183
+ declare const SwatchComboBoxLabelStyles: <TOption, IsMulti extends boolean = boolean, TGroup extends ComboBoxGroupBase<TOption> = ComboBoxGroupBase<TOption>>() => StylesConfig<TOption, IsMulti, TGroup>;
3184
+ declare function SwatchComboBox<TOption = InputComboBoxOption & {
3185
+ color: SwatchVariant;
3186
+ }, IsMulti extends boolean = false, TGroup extends ComboBoxGroupBase<TOption> = ComboBoxGroupBase<TOption>>({ labelTitle, caption, isMulti, ...props }: InputComboBoxProps<TOption, IsMulti, TGroup> & {
3187
+ labelTitle?: string;
3188
+ caption?: string;
3189
+ isMulti?: boolean;
3190
+ }): _emotion_react_jsx_runtime.JSX.Element;
3191
+
3192
+ type SwatchLabelProps = {
3193
+ /** Sets the color variant of the swatch label
3194
+ * @default 'swatch-default'
3195
+ */
3196
+ variant?: SwatchVariant;
3197
+ /** The text to display inside the swatch label */
3198
+ label: string;
3199
+ /** The size of the swatch label
3200
+ * @default 'default'
3201
+ */
3202
+ size?: 'xs' | 'sm' | 'md';
3203
+ /** The right slot to display inside the swatch label */
3204
+ rightSlot?: React.ReactNode;
3205
+ /** The tooltip to display inside the swatch label */
3206
+ tooltip?: string | React.ReactElement;
3207
+ /** The left slot to display inside the swatch label */
3208
+ leftSlot?: React.ReactNode;
3209
+ };
3210
+ /**
3211
+ * A colored label component that uses the same color variants as Swatch.
3212
+ * @example <SwatchLabel variant="swatch-blue" label="Blue Label" />
3213
+ */
3214
+ declare const SwatchLabel: ({ variant, size, label, rightSlot, tooltip, leftSlot, }: SwatchLabelProps) => _emotion_react_jsx_runtime.JSX.Element;
3215
+ declare const SwatchLabelRemoveButton: ({ onRemove, size, }: {
3216
+ /** The function to call when the remove button is clicked */
3217
+ onRemove: () => void;
3218
+ /** The size of the remove button
3219
+ * @default 'sm'
3220
+ */
3221
+ size?: SwatchLabelProps["size"];
3222
+ }) => _emotion_react_jsx_runtime.JSX.Element;
3223
+ /**
3224
+ * A tooltip component that displays a swatch label with a parent title and a description.
3225
+ * @example <SwatchLabelTooltip parentTitle="Parent Title" title="Title" description="Description" />
3226
+ */
3227
+ declare const SwatchLabelTooltip: ({ parentTitle, title, description, }: {
3228
+ parentTitle?: string | React.ReactElement;
3229
+ title?: string | React.ReactElement;
3230
+ description?: string | React.ReactElement;
3231
+ }) => _emotion_react_jsx_runtime.JSX.Element;
3232
+
3233
+ /** Represents a label item that can be displayed in the quick filter */
3234
+ type LabelsQuickFilterItem = {
3235
+ /** Unique identifier for the label */
3236
+ id: string;
3237
+ /** Display name for the label */
3238
+ name: string;
3239
+ /** Optional swatch variant color */
3240
+ variant?: SwatchVariant;
3241
+ /** Optional tooltip content */
3242
+ tooltip?: string | React.ReactElement;
3243
+ /** Whether this item represents a group header */
3244
+ isGroup?: boolean;
3245
+ /** The parent group ID if this label belongs to a group */
3246
+ parent?: string;
3247
+ };
3248
+ type LabelsQuickFilterProps = {
3249
+ /** The text to display on the filter button */
3250
+ buttonText: string;
3251
+ /** The text to display on the add button */
3252
+ addButtonText?: string | null;
3253
+ /** All available label items (including groups and children) */
3254
+ items: LabelsQuickFilterItem[];
3255
+ /** Set or array of currently selected item IDs */
3256
+ selectedIds: Set<string> | string[];
3257
+ /** Callback when a label is selected */
3258
+ onSelect: (item: LabelsQuickFilterItem) => void;
3259
+ /** Callback when a label is deselected */
3260
+ onDeselect: (id: string) => void;
3261
+ /** Whether the filter is disabled */
3262
+ disabled?: boolean;
3263
+ /** Test ID for the component */
3264
+ testId?: string;
3265
+ /** Override the total results count (defaults to items.length excluding groups) */
3266
+ totalResults?: number;
3267
+ /** handles creating a new label */
3268
+ onCreateLabel?: (label: string) => void;
3269
+ /** sets whether to use a React portal rendering or not. */
3270
+ withoutPortal?: boolean;
3271
+ /**
3272
+ * The maximum width of the quick filter container.
3273
+ * Useful for controlling the maximum width of the filter in different layouts (e.g., responsive sidebars).
3274
+ * @default '4rem'
3275
+ */
3276
+ maxContainerSize?: string;
3277
+ /** the function to call when the quick filter is opened */
3278
+ onOpen?: () => void;
3279
+ /** the function to call when the quick filter is closed */
3280
+ onClose?: () => void;
3281
+ /**
3282
+ * Override the placement of the dropdown menu.
3283
+ * @default 'right-start'
3284
+ */
3285
+ menuPlacement?: MenuProps['placement'];
3286
+ /**
3287
+ * Override the anchor rect for custom menu positioning.
3288
+ * Pass `null` to disable the built-in default and use standard positioning.
3289
+ */
3290
+ menuGetAnchorRect?: ((anchor: HTMLElement | null) => {
3291
+ x?: number;
3292
+ y?: number;
3293
+ width?: number;
3294
+ height?: number;
3295
+ }) | null;
3296
+ /**
3297
+ * Override the updatePosition callback to control when the menu repositions.
3298
+ * Pass `null` to disable the built-in default (position freezing) and allow normal repositioning.
3299
+ */
3300
+ menuUpdatePosition?: MenuProps['updatePosition'] | null;
3301
+ /** the maximum number of results to display
3302
+ * @default 0 (no limit)
3303
+ */
3304
+ maxCount?: number;
3305
+ };
3306
+ /**
3307
+ * A reusable quick filter component for selecting labels with swatch colors.
3308
+ * Supports flat labels and grouped labels with nested menus.
3309
+ * @example <LabelsQuickFilter buttonText="Filter by label" items={labels} selectedIds={selectedSet} onSelect={handleSelect} onDeselect={handleDeselect} />
3310
+ */
3311
+ declare const LabelsQuickFilter: ({ buttonText, addButtonText, items, selectedIds, onSelect, onDeselect, disabled, testId, totalResults, onCreateLabel, withoutPortal, maxContainerSize, onOpen, onClose, menuPlacement, menuGetAnchorRect, menuUpdatePosition, maxCount, }: LabelsQuickFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
3312
+
3313
+ type AsideAndSectionLayout = {
3314
+ /** sets child components in the aside / supporting column */
3315
+ sidebar?: ReactNode;
3316
+ /** sets child components in the section / main content column */
3317
+ children: ReactNode;
3318
+ /** Makes the sidebar sticky to the top of the container
3319
+ * @default false
3320
+ */
3321
+ isStickyAside?: boolean;
3322
+ };
3323
+ declare const AsideAndSectionLayout: ({ sidebar, children, isStickyAside, }: AsideAndSectionLayout) => _emotion_react_jsx_runtime.JSX.Element;
3324
+
3325
+ type SpacingProp = '0' | '2xs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
3326
+ type BackgroundColorProp = 'transparent' | 'white' | 'gray-50' | 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900';
3327
+ type HtmlTagProps = 'div' | 'section' | 'article' | 'aside' | 'span';
3328
+ type BorderRadiusProps = 'rounded-sm' | 'rounded-base' | 'rounded-md';
3329
+ type CommonContainerProps = {
3330
+ /** sets the background color of the element */
3331
+ backgroundColor?: BackgroundColorProp;
3332
+ /** sets border: 1px solid var(--gray-300)*/
3333
+ border?: boolean;
3334
+ /** sets the border radius of the element */
3335
+ rounded?: BorderRadiusProps;
3336
+ /** sets the padding of the element */
3337
+ padding?: string;
3338
+ /** sets the margin of the element */
3339
+ margin?: string;
3340
+ };
3341
+ type RhythmProps = React.HTMLAttributes<HTMLDivElement | HTMLFieldSetElement> & {
3342
+ /** sets the wrapping html tag
3343
+ * @default 'div'
3344
+ */
3345
+ tag?: HtmlTagProps | 'fieldset';
3346
+ /** sets the spacing between each element
3347
+ * @default 'div'
3348
+ */
3349
+ gap?: SpacingProp;
3350
+ /** sets the alignment of elements
3351
+ * @default normal browser behaviour
3352
+ */
3353
+ align?: CSSProperties['alignItems'];
3354
+ justify?: CSSProperties['justifyContent'];
3355
+ children: React.ReactNode;
3356
+ /** for use when fieldset is applied to the tag prop */
3357
+ disabled?: boolean;
3358
+ ref?: Ref<HTMLDivElement>;
3359
+ };
3360
+
3361
+ type ContainerProps = CommonContainerProps & React$1.HTMLAttributes<HTMLDivElement> & {
3362
+ tag?: HtmlTagProps;
3363
+ children: React$1.ReactNode;
3364
+ };
3365
+ declare const Container: ({ tag, backgroundColor, border, rounded, padding, margin, children, ...props }: ContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
3366
+
3367
+ declare const HorizontalRhythm: ({ align, justify, tag, gap, children, ref, ...props }: RhythmProps) => _emotion_react_jsx_runtime.JSX.Element;
3368
+
3369
+ type TwoColumnLayoutProps = {
3370
+ /** sets the full bleed background colour
3371
+ * @default 'var(--white)'
3372
+ */
3373
+ bgColor?: 'var(--white)' | 'var(--gray-50)';
3374
+ /** sets child components in the aside / supporting column */
3375
+ supportingContent?: ReactNode;
3376
+ /** sets child components in the section / main content column */
3377
+ children?: ReactNode;
3378
+ /** inverts the layout placing the aside container on the left
3379
+ * @default false
3380
+ */
3381
+ invertLayout?: boolean;
3382
+ };
3383
+ /** @example <TwoColumnLayout supportingContent={<div>supporting content</div>}><h1>title</h1></TwoColumnLayout> */
3384
+ declare const TwoColumnLayout: ({ bgColor, invertLayout, supportingContent, children, }: TwoColumnLayoutProps) => _emotion_react_jsx_runtime.JSX.Element;
3385
+
3386
+ declare const VerticalRhythm: ({ align, justify, tag, gap, children, ref, ...props }: RhythmProps) => _emotion_react_jsx_runtime.JSX.Element;
3387
+
3388
+ type LimitsBarProps = {
3389
+ /** The current value of used limits */
3390
+ current: number;
3391
+ /** The maximum number of limits */
3392
+ max: number;
3393
+ /** @deprecated No longer used */
3394
+ label?: string;
3395
+ /** Optional popover content for info icon */
3396
+ popoverContent?: ReactNode;
3397
+ /** Optional css value passed to the background color of the bar. Leave empty for dynamic color based on usage percentage. */
3398
+ barColor?: string;
3399
+ } & React.HTMLAttributes<HTMLDivElement>;
3400
+ /**
3401
+ * Uniform Limits Bar Component
3402
+ * @example <LimitsBar current={3} max={5} />
3403
+ */
3404
+ declare const LimitsBar: ({ current, max, popoverContent, barColor, ...props }: LimitsBarProps) => _emotion_react_jsx_runtime.JSX.Element;
3405
+
3406
+ type LinkListProps = React$1.HTMLAttributes<HTMLDivElement> & {
3407
+ /** sets the title field */
3408
+ title: string;
3409
+ /** (optional) sets react child component */
3410
+ children?: React$1.ReactNode;
3411
+ };
3412
+ declare const LinkList: ({ title, children, ...props }: LinkListProps) => _emotion_react_jsx_runtime.JSX.Element;
3413
+
3414
+ type ScrollableListProps = React$1.HTMLAttributes<HTMLDivElement> & {
3415
+ /** (optional) sets the label value */
3416
+ label?: string;
3417
+ /** (optional) allows users to add child components within the container */
3418
+ children?: React$1.ReactNode;
3419
+ };
3420
+ /**
3421
+ * Component that sets the base structure for scrollable content in a max height container
3422
+ * @example <ScrollableList label="allowed content types"><button>say hello</button></ScrollableList>
3423
+ */
3424
+ declare const ScrollableList: ({ label, children, ...props }: ScrollableListProps) => _emotion_react_jsx_runtime.JSX.Element;
3425
+
3426
+ type ScrollableListContainerProps = {
3427
+ /** sets whether to show or hide the shadow around the element
3428
+ * @default 'false'
3429
+ */
3430
+ disableShadow?: boolean;
3431
+ /** sets the active style of the button */
3432
+ active: boolean;
3433
+ };
3434
+
3435
+ type ScrollableItemProps = {
3436
+ /** sets an element within the label > span element */
3437
+ icon?: React.ReactElement;
3438
+ /**sets the label value */
3439
+ label: string | React.ReactElement;
3440
+ /** sets a data-testid on the label */
3441
+ labelTestId?: string;
3442
+ /** recommended to use a form input element of type radio or checkbox */
3443
+ children: React.ReactNode;
3444
+ } & ScrollableListContainerProps;
3445
+ /** @example <ScrollableListInputItem label="my label" active={true}><input type="radio" name="age" /></ScrollableListInputItem>*/
3446
+ declare const ScrollableListInputItem: ({ label, icon, active, disableShadow, children, labelTestId, ...props }: ScrollableItemProps) => _emotion_react_jsx_runtime.JSX.Element;
3447
+
3448
+ type ScrollableListItemProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
3449
+ /** sets the button text value */
3450
+ buttonText: string;
3451
+ icon?: React$1.ReactElement;
3452
+ } & ScrollableListContainerProps;
3453
+ /**
3454
+ * Component used within <ScrollableList /> for adding interactive button components with predefined styles
3455
+ * @example <ScrollableListItem buttontext="my button" active={false} />
3456
+ */
3457
+ declare const ScrollableListItem: ({ buttonText, icon, active, disableShadow, ...props }: ScrollableListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
3458
+
3459
+ type LoadingIndicatorProps = {
3460
+ color?: 'gray' | 'accent-alt';
3461
+ size?: 'lg' | 'sm';
3462
+ } & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
3463
+ /**
3464
+ * Loading Indicator
3465
+ * @example <LoadingIndicator />
3466
+ */
3467
+ declare const LoadingIndicator: ({ size, color, ...props }: LoadingIndicatorProps) => _emotion_react_jsx_runtime.JSX.Element;
3468
+
3469
+ interface LoadingOverlayProps {
3470
+ /** sets whether to display the loading overlay components */
3471
+ isActive: boolean;
3472
+ /** (optional) type that sets a text value or React component under the loading icon */
3473
+ statusMessage?: string | ReactNode;
3474
+ /** (optional) the z-index value of the overlay
3475
+ * @default 9999
3476
+ */
3477
+ zIndex?: number;
3478
+ /** (optional) sets the width and height of the loader
3479
+ * @default 128
3480
+ */
3481
+ loaderSize?: number;
3482
+ /** (optional) sets the loading overlay background color
3483
+ * @default 'var(--white)'
3484
+ */
3485
+ overlayBackgroundColor?: 'transparent' | 'var(--white)';
3486
+ /** (optional) if set to true, the animation of the loading indicator is paused
3487
+ * @default false
3488
+ */
3489
+ isPaused?: boolean;
3490
+ /** (optional) aligns the content of the overlay to the top instead of having it centered
3491
+ * @default false
3492
+ */
3493
+ isTopAligned?: boolean;
3494
+ children?: React.ReactNode;
3495
+ /** (optional) sets the position of the overlay
3496
+ * @default 'absolute'
3497
+ */
3498
+ position?: 'absolute' | 'fixed';
3499
+ }
3500
+ /**
3501
+ * Loading Overlay.
3502
+ * NOTE: the container/parent element must have a non-static `position` value for the overlay to work properly.
3503
+ * @example <LoadingOverlay isActive={true} statusMessage="Loading..." />
3504
+ */
3505
+ declare const LoadingOverlay: ({ isActive, statusMessage, zIndex, loaderSize, overlayBackgroundColor, isTopAligned, isPaused, children, position, }: LoadingOverlayProps) => _emotion_react_jsx_runtime.JSX.Element;
3506
+ interface LoadingIconProps extends HTMLAttributes<SVGSVGElement> {
3507
+ /** (optional) prop that sets a number value for the height of the icon */
3508
+ width?: number;
3509
+ /** (optional) prop that sets a number value for the width of the icon */
3510
+ height?: number;
3511
+ }
3512
+ /**
3513
+ * Loading Icon
3514
+ * @example <LoadingIcon height={128} width={128} />
3515
+ */
3516
+ declare const LoadingIcon: ({ height, width, ...props }: LoadingIconProps) => _emotion_react_jsx_runtime.JSX.Element;
3115
3517
 
3116
3518
  type ModalProps = {
3117
3519
  header?: React__default.ReactNode;
@@ -3152,120 +3554,316 @@ declare const Modal: React__default.ForwardRefExoticComponent<Omit<ModalProps, "
3152
3554
  type ModalDialogProps = Omit<ModalProps, 'width'>;
3153
3555
  declare const ModalDialog: React$1.ForwardRefExoticComponent<Omit<ModalDialogProps, "ref"> & React$1.RefAttributes<HTMLDialogElement>>;
3154
3556
 
3557
+ /**
3558
+ * Context for passing a portal container element to child popover/menu components
3559
+ * rendered inside a Modal or the docked/fullscreen Scout side chat panel. Ensures
3560
+ * floating elements render into that element instead of document.body, preventing
3561
+ * clipping by overflow and incorrect stacking (e.g. menus behind --z-side-chat).
3562
+ */
3563
+ declare const ModalPortalContext: React$1.Context<HTMLElement | null>;
3564
+ declare function useModalPortalContainer(): HTMLElement | null;
3565
+
3566
+ /**
3567
+ * Tracks the stack of currently open native `<dialog>` elements that have been
3568
+ * promoted to the browser's top layer via `HTMLDialogElement.showModal()`.
3569
+ *
3570
+ * Anything portalled to `document.body` is rendered behind any top-layer
3571
+ * dialog, which means toasts (whose Base UI portal defaults to `body`) would
3572
+ * be hidden behind an open modal. By keeping a shared stack here we can hand
3573
+ * the topmost dialog to `BaseToast.Portal`'s `container` prop and have toasts
3574
+ * portal _into_ that dialog while it is open, then fall back to `body` when no
3575
+ * modal is on screen.
3576
+ *
3577
+ * The stack supports nested modals — each `Modal` registers on mount /
3578
+ * `showModal()` and unregisters on cleanup, and listeners always receive the
3579
+ * topmost (last-pushed) entry.
3580
+ */
3581
+ /**
3582
+ * Push a dialog element onto the stack. Intended to be called by `Modal`
3583
+ * immediately after `showModal()` so the dialog can become the active toast
3584
+ * portal target.
3585
+ */
3586
+ declare const pushTopLayerDialog: (dialog: HTMLDialogElement) => void;
3587
+ /**
3588
+ * Remove a dialog element from the stack. Safe to call even if the dialog is
3589
+ * not currently in the stack (no-op in that case).
3590
+ */
3591
+ declare const popTopLayerDialog: (dialog: HTMLDialogElement) => void;
3592
+ /**
3593
+ * Subscribe to changes to the topmost open dialog. The listener is invoked
3594
+ * immediately with the current top (or `null` if no dialog is open) so
3595
+ * subscribers don't need a separate initial read.
3596
+ *
3597
+ * @returns A teardown function that removes the listener.
3598
+ */
3599
+ declare const subscribeTopLayerDialog: (listener: (top: HTMLDialogElement | null) => void) => (() => void);
3600
+
3601
+ /** Props for {@link ObjectGridContainer}. */
3155
3602
  type ObjectGridContainerProps = {
3156
- /** The number of columns in the grid
3603
+ /** Number of columns in the grid, passed to CSS `repeat()`.
3604
+ * Accepts a number (e.g. `3`) or any valid `repeat()` track value (e.g. `'auto-fill, minmax(200px, 1fr)'`).
3157
3605
  * @default 3
3158
- * the expected values should follow css repeat() function values
3159
- * see https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#syntax for examples
3606
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#syntax
3160
3607
  */
3161
3608
  gridCount?: string | number;
3162
- /** The children to render */
3609
+ /** Grid item children typically {@link ObjectGridItem} or {@link ObjectGridItemLoadingSkeleton} elements. */
3163
3610
  children: React.ReactNode;
3164
3611
  };
3612
+ /**
3613
+ * CSS Grid container for laying out {@link ObjectGridItem} elements in a responsive grid.
3614
+ * Supports forwarding a ref to the underlying `<div>`.
3615
+ *
3616
+ * @example
3617
+ * ```tsx
3618
+ * <ObjectGridContainer gridCount={4}>
3619
+ * <ObjectGridItem header={<ObjectGridItemHeading heading="Item" />} cover={...} />
3620
+ * </ObjectGridContainer>
3621
+ * ```
3622
+ */
3165
3623
  declare const ObjectGridContainer: React$1.ForwardRefExoticComponent<ObjectGridContainerProps & React$1.RefAttributes<HTMLDivElement>>;
3166
3624
 
3625
+ /** Shared props for heading components used across list and grid Object items. */
3167
3626
  type ObjectHeadingProps = {
3168
- /** sets the heading value */
3627
+ /** The heading content to display. */
3169
3628
  heading: ReactNode;
3170
- /** Slot that renders a component before the heading */
3629
+ /** Slot rendered before the heading text (e.g. an icon or status indicator). */
3171
3630
  beforeHeadingSlot?: ReactNode;
3172
- /** Slot that renders a component after the heading */
3631
+ /** Slot rendered after the heading text (e.g. a badge or chip). */
3173
3632
  afterHeadingSlot?: ReactNode;
3174
- /** sets the heading tooltip */
3633
+ /** Tooltip text shown on hover when the heading is truncated. */
3175
3634
  tooltip?: string;
3176
3635
  };
3636
+ /**
3637
+ * Shared props for Object item components ({@link ObjectListItem} and {@link ObjectGridItem}).
3638
+ * Defines the common slot-based API for composing item layouts.
3639
+ */
3177
3640
  type ObjectItemProps = {
3178
3641
  /** Slot for the header component, we recommend using <ObjectGridItemHeading /> or <ObjectListItemHeading /> */
3179
- header: ReactNode;
3642
+ header?: ReactNode;
3180
3643
  /** Slot for the cover component, we recommend using <ObjectGridItemCoverButton />, <ObjectGridItemCover /> or <ObjectListItemCover /> */
3181
3644
  cover: ReactNode;
3182
- /** Slot for the right component */
3645
+ /** Slot rendered on the right side of the item (e.g. timestamps, status badges). */
3183
3646
  rightSlot?: React.ReactNode;
3184
- /** Slot for the menu items, <MenuItem /> component should be used here */
3647
+ /** Slot for the left component */
3648
+ leftSlot?: React.ReactNode;
3649
+ /** Slot for context menu items — pass `<MenuItem />` elements here. When provided, a three-dot menu trigger is rendered automatically. */
3185
3650
  menuItems?: React.ReactNode;
3186
- /** If the item is selected */
3651
+ /** Whether the item is visually marked as selected via `aria-selected`. */
3187
3652
  isSelected?: boolean;
3188
- /** Slot for the children */
3653
+ /** Additional child content rendered below the header (only visible in `renderAs="multi"` mode for list items). */
3189
3654
  children?: React.ReactNode;
3190
3655
  };
3191
3656
 
3192
- type ObjectGridItemProps = ObjectItemProps & {
3657
+ /** Props for {@link ObjectGridItem}. */
3658
+ type ObjectGridItemProps = Omit<ObjectItemProps, 'leftSlot'> & {
3659
+ /** Whether the item is visually marked as selected. */
3193
3660
  isSelected?: boolean;
3194
- /** sets the menu test id
3195
- * @default object-grid-item-menu-btn
3661
+ /** Override the `data-testid` on the context menu trigger button.
3662
+ * @default 'object-grid-item-menu-btn'
3196
3663
  */
3197
3664
  menuTestId?: string;
3198
3665
  } & HTMLAttributes<HTMLDivElement>;
3666
+ /**
3667
+ * A card-style grid item for displaying an object with cover media, heading, subtitle, and optional context menu.
3668
+ *
3669
+ * When an `onClick` handler is provided, the entire card becomes clickable with hover styles.
3670
+ * Menu and right-slot interactions use `stopPropagation` to prevent triggering the card click.
3671
+ * Wrap items with {@link ObjectGridContainer} for responsive grid layout.
3672
+ *
3673
+ * @example
3674
+ * ```tsx
3675
+ * <ObjectGridItem
3676
+ * cover={<ObjectGridItemCover imageUrl="/thumb.jpg" icon={uniformComposition} />}
3677
+ * header={<ObjectGridItemHeading heading="My composition" tooltip="My composition" />}
3678
+ * rightSlot={<StatusBullet status="published" />}
3679
+ * menuItems={<MenuItem onClick={onEdit}>Edit</MenuItem>}
3680
+ * onClick={handleOpen}
3681
+ * />
3682
+ * ```
3683
+ */
3199
3684
  declare const ObjectGridItem: ({ header, cover, rightSlot, menuItems, isSelected, children, menuTestId, ...props }: ObjectGridItemProps) => _emotion_react_jsx_runtime.JSX.Element;
3200
3685
 
3686
+ /**
3687
+ * Props for {@link ObjectGridItemCardCover}.
3688
+ * Pass **either** an `icon` or an `imageUrl` — the component renders the appropriate variant.
3689
+ */
3201
3690
  type ObjectGridItemCardCoverProps = {
3202
- icon: IconType;
3203
- iconColor?: 'currentColor' | 'accent-dark' | 'accent-alt-dark';
3691
+ /** Icon to render as the card cover. */ icon: IconType;
3692
+ /** Color applied to the icon. */ iconColor?: 'currentColor' | 'accent-dark' | 'accent-alt-dark';
3204
3693
  } | {
3205
- imageUrl: string;
3206
- srcSet?: string;
3207
- alt?: string;
3208
- errorFallbackSrc?: string;
3694
+ /** URL of the image to render as the card cover. */ imageUrl: string;
3695
+ /** Optional `srcSet` for responsive images. */ srcSet?: string;
3696
+ /** Alt text for the image. */ alt?: string;
3697
+ /** Fallback image URL shown when the primary image fails to load. */ errorFallbackSrc?: string;
3209
3698
  };
3699
+ /**
3700
+ * Low-level cover media for a grid card — renders either a lazy-loaded image
3701
+ * or an icon with a ghost background. Typically used via {@link ObjectGridItemCover}
3702
+ * rather than directly.
3703
+ */
3210
3704
  declare const ObjectGridItemCardCover: (props: ObjectGridItemCardCoverProps) => _emotion_react_jsx_runtime.JSX.Element | undefined;
3705
+ /**
3706
+ * Props for {@link ObjectGridItemCover}.
3707
+ * Extends {@link ObjectGridItemCardCoverProps} with overlay slots at each corner.
3708
+ */
3211
3709
  type ObjectGridItemCoverProps = {
3212
- /** The left slot to render components */
3710
+ /** Slot positioned at the top-left of the cover (e.g. a selection checkbox). */
3213
3711
  coverSlotLeft?: React.ReactNode;
3214
- /** The right slot to render components */
3712
+ /** Slot positioned at the top-right of the cover (e.g. a favourite icon). */
3215
3713
  coverSlotRight?: React.ReactNode;
3216
- /** The bottom left slot to render components */
3714
+ /** Slot positioned at the bottom-left of the cover. */
3217
3715
  coverSlotBottomLeft?: React.ReactNode;
3218
- /** The bottom right slot to render components */
3716
+ /** Slot positioned at the bottom-right of the cover (e.g. a status chip). */
3219
3717
  coverSlotBottomRight?: React.ReactNode;
3220
3718
  } & ObjectGridItemCardCoverProps;
3719
+ /**
3720
+ * Grid item cover with corner overlay slots for badges, checkboxes, or status indicators.
3721
+ * Wraps {@link ObjectGridItemCardCover} and positions slot content at each corner.
3722
+ *
3723
+ * @example
3724
+ * ```tsx
3725
+ * <ObjectGridItemCover
3726
+ * imageUrl="/thumb.jpg"
3727
+ * coverSlotRight={<Chip text="New" />}
3728
+ * />
3729
+ * ```
3730
+ */
3221
3731
  declare const ObjectGridItemCover: ({ coverSlotLeft, coverSlotRight, coverSlotBottomLeft, coverSlotBottomRight, ...props }: ObjectGridItemCoverProps) => _emotion_react_jsx_runtime.JSX.Element;
3732
+ /**
3733
+ * Props for {@link ObjectGridItemCoverButton}.
3734
+ * The `coverSlotBottomRight` is reserved for the selection chip and cannot be overridden.
3735
+ */
3222
3736
  type ObjectGridItemCoverButtonProps = {
3737
+ /** Unique identifier passed back to `onSelection` when the cover is clicked. */
3223
3738
  id: string;
3739
+ /** Callback fired when the cover button is clicked. */
3224
3740
  onSelection: (id: string) => void;
3741
+ /** Whether this cover is currently selected — renders a chip in the bottom-right corner. */
3225
3742
  isSelected?: boolean;
3743
+ /** Label text shown on the selection chip.
3744
+ * @default 'selected'
3745
+ */
3226
3746
  selectedText?: string;
3227
- } & Omit<ObjectGridItemCoverProps, 'coverSlotBottomRight'> & ObjectGridItemCardCoverProps;
3228
- declare const ObjectGridItemCoverButton: ({ id, isSelected, onSelection, selectedText, ...props }: ObjectGridItemCoverButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
3747
+ } & ObjectGridItemCoverProps & ObjectGridItemCardCoverProps;
3748
+ /**
3749
+ * Clickable variant of {@link ObjectGridItemCover} that acts as a selection toggle.
3750
+ * When selected, a chip with `selectedText` appears in the bottom-right corner.
3751
+ * Click events are stopped from propagating to parent elements.
3752
+ *
3753
+ * @example
3754
+ * ```tsx
3755
+ * <ObjectGridItemCoverButton
3756
+ * id={item.id}
3757
+ * imageUrl={item.thumbnail}
3758
+ * isSelected={selectedId === item.id}
3759
+ * onSelection={setSelectedId}
3760
+ * />
3761
+ * ```
3762
+ */
3763
+ declare const ObjectGridItemCoverButton: ({ id, isSelected, onSelection, selectedText, coverSlotBottomRight, ...props }: ObjectGridItemCoverButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
3229
3764
 
3765
+ /** Props for {@link ObjectGridItemHeading}. */
3230
3766
  type ObjectGridItemTitleProps = ObjectHeadingProps & HTMLAttributes<HTMLDivElement>;
3767
+ /**
3768
+ * Heading component designed for use inside {@link ObjectGridItem}'s `header` slot.
3769
+ *
3770
+ * Automatically detects when the heading text is truncated (via a `ResizeObserver`)
3771
+ * and shows the `tooltip` on hover so users can still read the full title.
3772
+ * Click events on `beforeHeadingSlot` and `afterHeadingSlot` are stopped from propagating
3773
+ * to the parent grid item.
3774
+ *
3775
+ * @example
3776
+ * ```tsx
3777
+ * <ObjectGridItemHeading
3778
+ * heading="My composition"
3779
+ * tooltip="My composition"
3780
+ * beforeHeadingSlot={<Icon icon={uniformComposition} />}
3781
+ * />
3782
+ * ```
3783
+ */
3231
3784
  declare const ObjectGridItemHeading: ({ heading, beforeHeadingSlot, afterHeadingSlot, tooltip, ...props }: ObjectGridItemTitleProps) => _emotion_react_jsx_runtime.JSX.Element;
3232
3785
 
3786
+ /** Props for {@link ObjectGridItemIconWithTooltip}. */
3233
3787
  type ObjectGridItemIconWithTooltipProps = {
3234
- /** The title of the tooltip */
3788
+ /** Text shown inside the tooltip on hover. */
3235
3789
  tooltipTitle: string;
3236
- /** The icon to display */
3790
+ /** The icon to render. */
3237
3791
  icon: IconType;
3238
- /** The color of the icon */
3792
+ /** Color applied to the icon.
3793
+ * @default 'accent-dark'
3794
+ */
3239
3795
  iconColor?: IconColor;
3240
3796
  } & Pick<TooltipProps, 'placement' | 'withoutPortal'>;
3797
+ /**
3798
+ * Small icon with a tooltip, designed for the `rightSlot` of {@link ObjectGridItem}.
3799
+ * Useful for showing contextual indicators (e.g. entry type, locale) without taking up text space.
3800
+ *
3801
+ * @example
3802
+ * ```tsx
3803
+ * <ObjectGridItemIconWithTooltip
3804
+ * tooltipTitle="Composition"
3805
+ * icon={uniformComposition}
3806
+ * />
3807
+ * ```
3808
+ */
3241
3809
  declare const ObjectGridItemIconWithTooltip: ({ tooltipTitle, placement, icon, iconColor, ...props }: ObjectGridItemIconWithTooltipProps) => _emotion_react_jsx_runtime.JSX.Element;
3242
3810
 
3243
- /** @deprecated - Beta Object grid loading skeleton component
3244
- * @example <ObjectGridItemLoadingSkeleton />
3811
+ /**
3812
+ * Animated skeleton placeholder for {@link ObjectGridItem}, displayed while data is loading.
3813
+ * Renders a simulated cover image and two text lines matching the visual dimensions
3814
+ * of a real grid card so the layout doesn't shift on load.
3815
+ *
3816
+ * @example
3817
+ * ```tsx
3818
+ * <ObjectGridContainer gridCount={3}>
3819
+ * <ObjectGridItemLoadingSkeleton />
3820
+ * <ObjectGridItemLoadingSkeleton />
3821
+ * <ObjectGridItemLoadingSkeleton />
3822
+ * </ObjectGridContainer>
3823
+ * ```
3245
3824
  */
3246
3825
  declare const ObjectGridItemLoadingSkeleton: () => _emotion_react_jsx_runtime.JSX.Element;
3247
3826
 
3248
- /** @deprecated - Beta Object item loading skeleton component */
3827
+ /** Props for {@link ObjectItemLoadingSkeleton}. */
3249
3828
  type ObjectItemLoadingSkeletonProps = {
3250
- /** Show cover image loading skeleton */
3829
+ /** When `true`, renders an additional 80×55 animated rectangle representing a cover image. */
3251
3830
  showCover?: boolean;
3252
- /** Render as single or multi
3831
+ /** Controls the skeleton layout to match the corresponding {@link ObjectListItem} mode.
3832
+ * - `"single"` — single text line (vertically centered).
3833
+ * - `"multi"` — two text lines (top-aligned).
3253
3834
  * @default 'single'
3254
3835
  */
3255
3836
  renderAs?: 'single' | 'multi';
3256
3837
  };
3257
- /** @deprecated - Beta Object item loading skeleton component
3258
- * @example <ObjectItemLoadingSkeleton showCover />
3838
+ /**
3839
+ * Animated skeleton placeholder for {@link ObjectListItem}, displayed while data is loading.
3840
+ * Matches the visual dimensions of a real list item so the layout doesn't shift on load.
3841
+ *
3842
+ * @example
3843
+ * ```tsx
3844
+ * <ObjectListItemContainer>
3845
+ * <ObjectItemLoadingSkeleton />
3846
+ * <ObjectItemLoadingSkeleton showCover renderAs="multi" />
3847
+ * </ObjectListItemContainer>
3848
+ * ```
3259
3849
  */
3260
3850
  declare const ObjectItemLoadingSkeleton: ({ showCover, renderAs, }: ObjectItemLoadingSkeletonProps) => _emotion_react_jsx_runtime.JSX.Element;
3261
3851
 
3262
- /** @deprecated - Beta Object list item component */
3852
+ /**
3853
+ * Props for {@link ObjectListItem}.
3854
+ *
3855
+ * Supports two layout modes via `renderAs`:
3856
+ * - `"single"` (default) — header and right slot vertically centered on one line.
3857
+ * - `"multi"` — header aligned to top with additional `children` rendered below it.
3858
+ */
3263
3859
  type ObjectListItemProps = {
3264
- /** Optional ref to the stacked route container to scope all components rendered via portal to be inside the stacked route container */
3860
+ /** Portal target for the context menu, useful inside stacked route containers to prevent clipping. */
3265
3861
  portalElement?: MenuProps['portalElement'];
3862
+ /** Optional cover media rendered to the left of the header (e.g. {@link ObjectListItemCover}). */
3266
3863
  cover?: ReactNode;
3864
+ /** Optional drag handle rendered at the leading edge (e.g. `<DragHandle />`). */
3267
3865
  dragHandle?: ReactNode;
3268
- /** Sets the container query width for wrapping container
3866
+ /** Minimum width at which the container query breakpoint activates to lay out columns side-by-side.
3269
3867
  * @default '34rem'
3270
3868
  */
3271
3869
  minContainerQueryWidth?: string;
@@ -3277,29 +3875,93 @@ type ObjectListItemMultiProps = Omit<ObjectItemProps, 'cover'> & {
3277
3875
  renderAs?: 'multi';
3278
3876
  children?: ReactNode;
3279
3877
  };
3280
- /** @deprecated - beta Object list item component */
3878
+ /**
3879
+ * A horizontal list item for displaying an object with header, cover, right slot, and optional context menu.
3880
+ *
3881
+ * Uses container queries so the layout adapts to its parent width rather than the viewport.
3882
+ * Wrap items with {@link ObjectListItemContainer} to get proper list semantics and dividers.
3883
+ *
3884
+ * @example
3885
+ * ```tsx
3886
+ * <ObjectListItem
3887
+ * header={<ObjectListItemHeading heading="My entry" />}
3888
+ * rightSlot={<StatusBullet status="published" />}
3889
+ * menuItems={<MenuItem onClick={onDelete}>Delete</MenuItem>}
3890
+ * />
3891
+ * ```
3892
+ */
3281
3893
  declare const ObjectListItem: ({ minContainerQueryWidth, ...props }: ObjectListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
3282
3894
 
3283
- /** @deprecated - Beta Object list item container component */
3895
+ /**
3896
+ * Vertical container that wraps {@link ObjectListItem} elements with `role="list"` semantics
3897
+ * and renders a top-border divider between each item.
3898
+ *
3899
+ * @example
3900
+ * ```tsx
3901
+ * <ObjectListItemContainer>
3902
+ * <ObjectListItem header={<ObjectListItemHeading heading="Item 1" />} />
3903
+ * <ObjectListItem header={<ObjectListItemHeading heading="Item 2" />} />
3904
+ * </ObjectListItemContainer>
3905
+ * ```
3906
+ */
3284
3907
  declare const ObjectListItemContainer: ({ children, gap, ...props }: RhythmProps) => _emotion_react_jsx_runtime.JSX.Element;
3285
3908
 
3286
- /** @deprecated - Beta Object list item cover component */
3909
+ /** Props for {@link ObjectListItemCover}. */
3287
3910
  type ObjectListItemCoverProps = {
3911
+ /** URL of the thumbnail image. When omitted, a placeholder with `noImageText` is shown instead. */
3288
3912
  imageUrl?: string;
3289
- /** (optional) sets the text to display when there is no image
3913
+ /** Placeholder text displayed when `imageUrl` is not provided.
3290
3914
  * @default 'Image not available'
3291
3915
  */
3292
3916
  noImageText?: string;
3917
+ /** (optional) sets the icon to display when there is no image */
3918
+ icon?: IconType | undefined;
3293
3919
  } & HTMLAttributes<HTMLImageElement>;
3294
- /** @deprecated - beta Object list item cover component */
3295
- declare const ObjectListItemCover: ({ imageUrl, noImageText, ...props }: ObjectListItemCoverProps) => _emotion_react_jsx_runtime.JSX.Element;
3920
+ /**
3921
+ * Thumbnail cover image for use inside {@link ObjectListItem}'s `cover` slot.
3922
+ * Renders a fixed-size (80×45) container with a lazy-loaded image, or a
3923
+ * text placeholder when no `imageUrl` is available.
3924
+ *
3925
+ * @example
3926
+ * ```tsx
3927
+ * <ObjectListItem
3928
+ * cover={<ObjectListItemCover imageUrl="https://example.com/thumb.jpg" />}
3929
+ * header={<ObjectListItemHeading heading="My entry" />}
3930
+ * />
3931
+ * ```
3932
+ */
3933
+ declare const ObjectListItemCover: ({ imageUrl, noImageText, icon, ...props }: ObjectListItemCoverProps) => _emotion_react_jsx_runtime.JSX.Element;
3296
3934
 
3297
- /** @deprecated - Beta Object list item heading component */
3935
+ /** Props for {@link ObjectListItemHeading}. */
3298
3936
  type ObjectListItemHeadingProps = Omit<ObjectHeadingProps, 'heading' | 'tooltip'> & HTMLAttributes<HTMLDivElement> & {
3937
+ /** The heading content — typically a string, link, or inline element. */
3299
3938
  heading: ReactNode;
3939
+ /** Override the `data-testid` on the heading element.
3940
+ * @default 'reference-item-name'
3941
+ */
3942
+ headingTestId?: string;
3300
3943
  };
3301
- /** @deprecated - beta Object list item heading component */
3302
- declare const ObjectListItemHeading: ({ heading, beforeHeadingSlot, afterHeadingSlot, ...props }: ObjectListItemHeadingProps) => _emotion_react_jsx_runtime.JSX.Element;
3944
+ /**
3945
+ * Heading component designed for use inside {@link ObjectListItem}'s `header` slot.
3946
+ *
3947
+ * Renders a responsive heading row that stacks vertically on narrow containers
3948
+ * and switches to a horizontal layout at wider widths (controlled by a container query).
3949
+ *
3950
+ * @example
3951
+ * ```tsx
3952
+ * <ObjectListItemHeading
3953
+ * heading={<a href="/entries/123">My entry</a>}
3954
+ * beforeHeadingSlot={<Icon icon={uniformComposition} />}
3955
+ * afterHeadingSlot={<Chip text="Draft" />}
3956
+ * />
3957
+ * ```
3958
+ */
3959
+ declare const ObjectListItemHeading: ({ heading, beforeHeadingSlot, afterHeadingSlot, headingTestId, ...props }: ObjectListItemHeadingProps) => _emotion_react_jsx_runtime.JSX.Element;
3960
+
3961
+ type ObjectListSubTextProps = {
3962
+ children: React.ReactNode;
3963
+ } & React.HTMLAttributes<HTMLDivElement>;
3964
+ declare const ObjectListSubText: ({ children, ...props }: ObjectListSubTextProps) => _emotion_react_jsx_runtime.JSX.Element;
3303
3965
 
3304
3966
  declare function Pagination({ limit, offset, total, onPageChange, }: {
3305
3967
  limit: number;
@@ -3389,6 +4051,7 @@ type BaseParameterActionButtonProps = {
3389
4051
  * If a React element is provided, it will be displayed as a tooltip.
3390
4052
  */
3391
4053
  tooltip?: string | React__default.ReactNode;
4054
+ tooltipProps?: Partial<TooltipProps>;
3392
4055
  /**
3393
4056
  * The component to render the button as.
3394
4057
  * There maybe a scenario where we want to render the button as a div
@@ -3407,7 +4070,7 @@ interface FilledVariant extends BaseParameterActionButtonProps {
3407
4070
  inverted?: boolean;
3408
4071
  }
3409
4072
  type ParameterActionButtonProps = OutlineVariant | FilledVariant;
3410
- declare const ParameterActionButton: ({ children, themeType, tooltip, renderAs, disabled, ...props }: ParameterActionButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
4073
+ declare const ParameterActionButton: ({ children, themeType, tooltip, tooltipProps, renderAs, disabled, ...props }: ParameterActionButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
3411
4074
 
3412
4075
  type ParameterDrawerHeaderProps = {
3413
4076
  title: string;
@@ -3496,6 +4159,44 @@ type ParameterLabelProps = HTMLAttributes<HTMLLabelElement> & {
3496
4159
  /** @example <ParameterLabel id="my-label">my label</ParameterLabel> */
3497
4160
  declare const ParameterLabel: ({ id, asSpan, children, testId, ...props }: ParameterLabelProps) => _emotion_react_jsx_runtime.JSX.Element;
3498
4161
 
4162
+ /** Extended option type that supports label-specific properties */
4163
+ type LabelOption = InputComboBoxOption & {
4164
+ /** The color variant for the label swatch */
4165
+ color?: SwatchVariant;
4166
+ /** Whether this option represents a group header */
4167
+ isGroup?: boolean;
4168
+ /** The parent group ID if this label belongs to a group */
4169
+ parent?: string;
4170
+ /** Tooltip content for the label */
4171
+ tooltip?: string | React.ReactElement;
4172
+ };
4173
+ type ParameterLabelsInnerProps = Pick<InputComboBoxProps<LabelOption, true>, 'options' | 'value' | 'defaultValue' | 'onChange' | 'onBlur' | 'isClearable' | 'isDisabled'> & {
4174
+ /** Callback when an item is removed from the selection */
4175
+ onItemRemoved?: (id: string) => void;
4176
+ /** Callback when a new label is created */
4177
+ onCreateLabel?: (label: string) => void;
4178
+ /** Override the text displayed on the filter button */
4179
+ buttonText?: string;
4180
+ /** Override the text displayed on the add button */
4181
+ addButtonText?: string | null;
4182
+ /** the function to call when the quick filter is opened */
4183
+ onOpen?: () => void;
4184
+ /** the function to call when the quick filter is closed */
4185
+ onClose?: () => void;
4186
+ /** The maximum number of labels that can be selected */
4187
+ maxCount?: number;
4188
+ };
4189
+ type ParameterLabelsProps = CommonParameterInputProps & ParameterLabelsInnerProps & {
4190
+ disabled?: boolean;
4191
+ };
4192
+ /**
4193
+ * A parameter input component for selecting multiple labels with swatch colors.
4194
+ * Supports grouped labels with nested menus.
4195
+ * @example <ParameterLabels id="labels" label="Labels" options={[]} value={[]} onChange={() => {}} />
4196
+ */
4197
+ declare const ParameterLabels: ({ disabled, ...props }: ParameterLabelsProps) => _emotion_react_jsx_runtime.JSX.Element;
4198
+ declare const ParameterLabelsInner: (props: ParameterLabelsInnerProps) => _emotion_react_jsx_runtime.JSX.Element;
4199
+
3499
4200
  type ParameterLinkProps = CommonParameterInputProps & React.InputHTMLAttributes<HTMLInputElement> & {
3500
4201
  /** (optional) sets the button text when value is empty
3501
4202
  * @default 'Configure link'
@@ -3900,7 +4601,9 @@ declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hid
3900
4601
  declare const ParameterShellPlaceholder: ({ children }: {
3901
4602
  children?: ReactNode;
3902
4603
  }) => _emotion_react_jsx_runtime.JSX.Element;
3903
- declare const ParameterOverrideMarker: (props: HTMLAttributes<HTMLButtonElement>) => _emotion_react_jsx_runtime.JSX.Element;
4604
+ declare const ParameterOverrideMarker: (props: HTMLAttributes<HTMLButtonElement> & {
4605
+ tooltipProps?: Partial<TooltipProps>;
4606
+ }) => _emotion_react_jsx_runtime.JSX.Element;
3904
4607
 
3905
4608
  type ParameterTextareaProps = CommonParameterInputProps & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
3906
4609
  /** @example <ParameterTextarea label="label value" id="my-textarea" /> */
@@ -3941,8 +4644,7 @@ declare const ParameterToggleInner: React$1.ForwardRefExoticComponent<Omit<React
3941
4644
  withoutIndeterminateState?: boolean;
3942
4645
  } & React$1.RefAttributes<HTMLInputElement>>;
3943
4646
 
3944
- type PopoverProps = Omit<PopoverProps$1, 'unmountOnHide'> & {
3945
- /** sets the aria-controls and id value of the matching popover set */
4647
+ type PopoverProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'tabIndex' | 'id'> & {
3946
4648
  /** sets the icon color
3947
4649
  * @default 'action'
3948
4650
  */
@@ -3962,7 +4664,7 @@ type PopoverProps = Omit<PopoverProps$1, 'unmountOnHide'> & {
3962
4664
  /** sets the placement of the popover
3963
4665
  * @default 'bottom'
3964
4666
  */
3965
- placement?: PopoverProviderProps['placement'];
4667
+ placement?: Placement;
3966
4668
  /** sets a test id for e2e tests */
3967
4669
  testId?: string;
3968
4670
  children: ReactNode;
@@ -3979,15 +4681,36 @@ type PopoverProps = Omit<PopoverProps$1, 'unmountOnHide'> & {
3979
4681
  * @default 'small'
3980
4682
  */
3981
4683
  variant?: 'large' | 'small';
4684
+ /**
4685
+ * Distance between the anchor and the popover in pixels.
4686
+ * @default 0
4687
+ */
4688
+ gutter?: number;
4689
+ /**
4690
+ * Whether to render the popover in a portal.
4691
+ * @default true
4692
+ */
4693
+ portal?: boolean;
4694
+ /** Controls the popover open state externally. */
4695
+ open?: boolean;
4696
+ /** Called when the popover open state changes. */
4697
+ onOpenChange?: (open: boolean) => void;
4698
+ /** Disables the popover trigger */
4699
+ disabled?: boolean;
3982
4700
  };
3983
- declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, onInit, variant, maxWidth, ...otherProps }: PopoverProps) => _emotion_react_jsx_runtime.JSX.Element;
4701
+ interface PopoverComponentContextValue {
4702
+ open: boolean;
4703
+ setOpen: (open: boolean) => void;
4704
+ hide: () => void;
4705
+ show: () => void;
4706
+ }
4707
+ declare const Popover: ({ iconColor, icon, iconSize, buttonText, ariaLabel, placement, testId, trigger, children, onInit, variant, maxWidth, gutter, portal, open: controlledOpen, onOpenChange: controlledOnOpenChange, className, style, tabIndex, id, disabled, }: PopoverProps) => _emotion_react_jsx_runtime.JSX.Element;
3984
4708
  /**
3985
- * Hook to get the current popover context
3986
- * @description This hook is used to get the current popover context
3987
- * useful for closing the popover with a nested button or interactive element
3988
- * @example const currentPopoverContext = usePopoverComponentContext();
4709
+ * Hook to get the current popover context.
4710
+ * Useful for closing the popover with a nested button or interactive element.
4711
+ * @example const popoverContext = usePopoverComponentContext();
3989
4712
  */
3990
- declare const usePopoverComponentContext: () => PopoverStore | undefined;
4713
+ declare const usePopoverComponentContext: () => PopoverComponentContextValue | null;
3991
4714
 
3992
4715
  type PopoverBodyProps = React.HTMLAttributes<HTMLDivElement> & {
3993
4716
  /**
@@ -4052,6 +4775,118 @@ type ProgressListItem<IdType extends string = string> = {
4052
4775
  };
4053
4776
  declare const ProgressListItem: ({ children, status, error, errorLevel, autoEllipsis, }: ProgressListItemProps) => _emotion_react_jsx_runtime.JSX.Element;
4054
4777
 
4778
+ type QuickFilterSelectedItem = {
4779
+ /** Unique identifier for the selected item */
4780
+ id: string;
4781
+ /** Display name for the selected item */
4782
+ name: string;
4783
+ /** Optional swatch variant color */
4784
+ variant?: SwatchVariant | string;
4785
+ /** The tooltip to display inside the selected item */
4786
+ tooltip?: string | React.ReactElement;
4787
+ /** Optional icon to display on the left of the selected item */
4788
+ icon?: IconType;
4789
+ };
4790
+ type QuickFilterProps = {
4791
+ /** the icon to display on the left of the quick filter */
4792
+ iconLeft?: IconType;
4793
+ /** the text to display on the quick filter */
4794
+ buttonText: string;
4795
+ /** the function to call when the quick filter is clicked */
4796
+ /** the size of the quick filter
4797
+ * @default 'sm'
4798
+ */
4799
+ size?: ButtonSizeProps;
4800
+ /** the test id to use for the quick filter */
4801
+ testId?: string;
4802
+ /** the aria label to use for the quick filter */
4803
+ ariaLabel?: string;
4804
+ /** the children to display inside the quick filter */
4805
+ children: ReactNode;
4806
+ /** whether the quick filter is disabled */
4807
+ disabled?: boolean;
4808
+ /** the selected items to display inside the quick filter */
4809
+ selectedItems?: QuickFilterSelectedItem[];
4810
+ /** the function to call when the search term is changed */
4811
+ onSearchTermChanged: (searchTerm: string) => void;
4812
+ /** addButtonText to use for the add button
4813
+ * @default 'Add'
4814
+ */
4815
+ addButtonText?: string | null;
4816
+ /** the css to use for the swatch colors
4817
+ * @default swatchColors from the Swatch component
4818
+ */
4819
+ swatchColorsCss?: SerializedStyles;
4820
+ /** the function to call when an item is removed */
4821
+ onItemRemoved?: (id: string) => void;
4822
+ /** the total number of results */
4823
+ totalResults: number;
4824
+ /** the maximum height of the menu
4825
+ * @default '320px'
4826
+ */
4827
+ maxMenuHeight?: string;
4828
+ /** the maximum number of results to display
4829
+ * @default 5
4830
+ */
4831
+ maxCount?: number;
4832
+ /** the css to use for the container
4833
+ * @default swatchColors from the Swatch component
4834
+ */
4835
+ containerCss?: SerializedStyles;
4836
+ /** Render function for displaying selected items. Receives selectedItems and onItemRemoved.
4837
+ * @default Renders SwatchLabel components
4838
+ */
4839
+ resultsComponent?: (props: {
4840
+ selectedItems: QuickFilterSelectedItem[];
4841
+ onItemRemoved?: (id: string) => void;
4842
+ }) => ReactNode;
4843
+ /** the message to display when there are no results
4844
+ * @default ''
4845
+ */
4846
+ hasNoResultsMessage?: string;
4847
+ /** the placeholder text to display in the search input
4848
+ * @default 'Search...'
4849
+ */
4850
+ searchPlaceholderText?: string;
4851
+ /**
4852
+ * The maximum width of the quick filter container.
4853
+ * Useful for controlling the maximum width of the filter in different layouts (e.g., responsive sidebars).
4854
+ * @default '4rem'
4855
+ */
4856
+ maxContainerSize?: string;
4857
+ /** the icon to display on the left of the quick filter when collapsed */
4858
+ collapsedIcon?: IconType;
4859
+ /** the function to call when the quick filter is opened */
4860
+ onOpen?: () => void;
4861
+ /** the function to call when the quick filter is closed */
4862
+ onClose?: () => void;
4863
+ /**
4864
+ * Override the placement of the dropdown menu.
4865
+ * @default 'right-start'
4866
+ */
4867
+ menuPlacement?: MenuProps['placement'];
4868
+ /**
4869
+ * Override the anchor rect for custom menu positioning.
4870
+ * Pass `null` to disable the built-in default and use standard positioning.
4871
+ * @default Anchors to the container's right edge
4872
+ */
4873
+ menuGetAnchorRect?: ((anchor: HTMLElement | null) => {
4874
+ x?: number;
4875
+ y?: number;
4876
+ width?: number;
4877
+ height?: number;
4878
+ }) | null;
4879
+ /**
4880
+ * Override the updatePosition callback to control when the menu repositions.
4881
+ * Pass `null` to disable the built-in default (position freezing) and allow normal repositioning.
4882
+ * @default Freezes position after initial placement
4883
+ */
4884
+ menuUpdatePosition?: MenuProps['updatePosition'] | null;
4885
+ /** Called when Enter is pressed in the search input and no active menu item handles the event */
4886
+ onSearchEnterKeyDown?: () => void;
4887
+ };
4888
+ declare const QuickFilter: ({ iconLeft, collapsedIcon, buttonText, testId, ariaLabel, children, size, disabled, selectedItems, onSearchTermChanged, addButtonText, onItemRemoved, totalResults, maxMenuHeight, maxCount, containerCss, resultsComponent, hasNoResultsMessage, searchPlaceholderText, maxContainerSize, onOpen, onClose, menuPlacement, menuGetAnchorRect, menuUpdatePosition, onSearchEnterKeyDown, }: QuickFilterProps) => _emotion_react_jsx_runtime.JSX.Element;
4889
+
4055
4890
  type SegmentedControlOption<TValue extends string = string> = {
4056
4891
  value: TValue;
4057
4892
  label?: string;
@@ -4121,6 +4956,123 @@ declare const Spinner: ({ width, label, isPaused, }: {
4121
4956
  isPaused?: boolean;
4122
4957
  }) => _emotion_react_jsx_runtime.JSX.Element;
4123
4958
 
4959
+ /** The direction of a step transition, determining which slide animation to play. */
4960
+ type StackedModalDirection = 'forward' | 'backward';
4961
+ /** The full navigation state exposed by the `useStackedModal` hook. */
4962
+ type StackedModalContextValue = {
4963
+ /** The zero-indexed active step. */
4964
+ currentStep: number;
4965
+ /** The total number of steps. */
4966
+ totalSteps: number;
4967
+ /** The direction of the last navigation, used to drive slide animations. */
4968
+ direction: StackedModalDirection;
4969
+ /** The zero-indexed step that was active before the last navigation. Used internally for animation. */
4970
+ previousStep: number;
4971
+ /** Navigate to the next step. No-op if already on the last step. */
4972
+ nextStep: () => void;
4973
+ /** Navigate to the previous step. No-op if already on the first step. */
4974
+ goBack: () => void;
4975
+ /** Navigate to a specific step by index. */
4976
+ goToStep: (index: number) => void;
4977
+ };
4978
+ /**
4979
+ * Hook to access the stacked modal navigation context.
4980
+ * Provides the current step, total steps, navigation direction, and functions to navigate between steps.
4981
+ *
4982
+ * @throws If used outside of a `<StackedModal>` component tree.
4983
+ */
4984
+ declare function useStackedModal(): StackedModalContextValue;
4985
+ /** The semantic transition state for a single step, derived from the navigation context. */
4986
+ type StepTransitionState = {
4987
+ /** Whether this step is the currently visible step. */
4988
+ isActive: boolean;
4989
+ /** Whether this step is animating out after being replaced by a new active step. */
4990
+ isExiting: boolean;
4991
+ /** Whether the modal is idle (no transition in progress). True on initial render and after animations complete. */
4992
+ isIdle: boolean;
4993
+ /** The direction of the current or most recent transition. */
4994
+ direction: StackedModalDirection;
4995
+ };
4996
+
4997
+ type StackedModalProps = {
4998
+ /** The step content. Each child should be a `StackedModalStep` component. */
4999
+ children: ReactNode;
5000
+ /**
5001
+ * Called when the close button is clicked, the Escape button is pressed, or when the modal's backdrop is clicked.
5002
+ * If undefined is passed, the modal will not be closable by the user and the close button will not be rendered.
5003
+ */
5004
+ onRequestClose: ModalProps['onRequestClose'];
5005
+ /**
5006
+ * The size sets the modal width to one of three options sm = 400px, md = 600px and lg = 800px.
5007
+ * If a width attribute is used the size will be overridden by the width attribute.
5008
+ * @default 'lg'
5009
+ */
5010
+ modalSize?: ModalProps['modalSize'];
5011
+ /** A valid CSS width. Overrides `modalSize` when provided. */
5012
+ width?: string;
5013
+ /** A valid CSS height. */
5014
+ height?: string;
5015
+ /**
5016
+ * The zero-indexed step to display initially.
5017
+ * @default 0
5018
+ */
5019
+ initialStep?: number;
5020
+ /** Sets the test ID on the underlying dialog. */
5021
+ 'data-testid'?: string;
5022
+ };
5023
+ /**
5024
+ * A modal component that supports multi-step content with sliding transitions.
5025
+ * Each child should be a `StackedModalStep` component that defines its own header,
5026
+ * content, and button group.
5027
+ *
5028
+ * Use the `useStackedModal` hook inside step content to navigate between steps.
5029
+ *
5030
+ * @example
5031
+ * <StackedModal onRequestClose={handleClose} modalSize="lg">
5032
+ * <StackedModalStep header="Step 1" buttonGroup={<Buttons />}>
5033
+ * <StepOneContent />
5034
+ * </StackedModalStep>
5035
+ * <StackedModalStep header="Step 2" buttonGroup={<Buttons />}>
5036
+ * <StepTwoContent />
5037
+ * </StackedModalStep>
5038
+ * </StackedModal>
5039
+ */
5040
+ declare const StackedModal: React__default.ForwardRefExoticComponent<StackedModalProps & React__default.RefAttributes<HTMLDialogElement>>;
5041
+
5042
+ type StackedModalHeaderProps = {
5043
+ children: ReactNode;
5044
+ onBack?: () => void;
5045
+ icon?: IconType;
5046
+ };
5047
+ declare const StackedModalHeader: ({ children, onBack, icon }: StackedModalHeaderProps) => _emotion_react_jsx_runtime.JSX.Element;
5048
+
5049
+ /** Props for a single step within a `StackedModal`. */
5050
+ type StackedModalStepProps = {
5051
+ /**
5052
+ * Header content displayed in the modal's header row, inline with the close icon.
5053
+ * This prop is extracted by the parent `StackedModal` and rendered in the
5054
+ * modal chrome -- it is **not** rendered by `StackedModalStep` itself.
5055
+ */
5056
+ header?: ReactNode;
5057
+ /** Optional button group rendered at the bottom of the step, typically navigation or submit buttons. */
5058
+ buttonGroup?: ReactNode;
5059
+ /** The main body content of the step. */
5060
+ children: ReactNode;
5061
+ };
5062
+ /**
5063
+ * Defines a single step inside a `StackedModal`.
5064
+ *
5065
+ * Renders a scrollable content area and an optional bottom button group.
5066
+ * The `header` prop is read by the parent `StackedModal` and displayed in the
5067
+ * modal header row with a matching slide animation.
5068
+ *
5069
+ * @example
5070
+ * <StackedModalStep header="Account details" buttonGroup={<Button>Next</Button>}>
5071
+ * <FormFields />
5072
+ * </StackedModalStep>
5073
+ */
5074
+ declare function StackedModalStep({ children, buttonGroup }: StackedModalStepProps): _emotion_react_jsx_runtime.JSX.Element;
5075
+
4124
5076
  type SwitchProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
4125
5077
  /** sets the label value */
4126
5078
  label: ReactNode;
@@ -4214,30 +5166,57 @@ declare const TableRow: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedH
4214
5166
  declare const TableCellHead: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
4215
5167
  declare const TableCellData: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & React$1.RefAttributes<HTMLTableCellElement>>;
4216
5168
 
4217
- declare const useCurrentTab: () => _ariakit_react.TabStore;
5169
+ interface TabsContextValue {
5170
+ value: string | undefined;
5171
+ setValue: (value: string | undefined) => void;
5172
+ }
5173
+ /** Returns the current tabs context with `value` and `setValue`. Must be used inside `<Tabs>`. */
5174
+ declare const useCurrentTab: () => TabsContextValue;
4218
5175
  type TabsProps<TTabName extends string = string> = {
4219
5176
  children: React__default.ReactNode;
4220
5177
  selectedId?: TTabName;
4221
5178
  manual?: boolean;
4222
- orientation?: TabStoreState['orientation'];
5179
+ orientation?: 'horizontal' | 'vertical';
4223
5180
  onSelectedIdChange?: (tabName: TTabName | undefined) => void;
4224
5181
  /**
4225
5182
  * @deprecated you can control the route state on the application level.
4226
5183
  */
4227
5184
  useHashForState?: boolean;
5185
+ /** Forwarded to the root element. Receives the `className` generated by Emotion's `css` prop. */
5186
+ className?: string;
5187
+ /** Forwarded to the root element. */
5188
+ style?: React__default.CSSProperties;
5189
+ };
5190
+ declare const Tabs: <TTabName extends string = string>({ children, onSelectedIdChange, useHashForState, selectedId, manual, orientation, className, style, }: TabsProps<TTabName>) => _emotion_react_jsx_runtime.JSX.Element;
5191
+ type TabButtonGroupProps = React__default.HTMLAttributes<HTMLDivElement> & {
5192
+ children?: React__default.ReactNode;
4228
5193
  };
4229
- declare const Tabs: <TTabName extends string = string>({ children, onSelectedIdChange, useHashForState, selectedId, manual, ...props }: TabsProps<TTabName>) => _emotion_react_jsx_runtime.JSX.Element;
4230
- declare const TabButtonGroup: ({ children, ...props }: Partial<TabListProps>) => _emotion_react_jsx_runtime.JSX.Element;
4231
- type TabButtonProps<TTabName extends string = string> = Partial<TabProps> & {
5194
+ declare const TabButtonGroup: ({ children, ...props }: TabButtonGroupProps) => _emotion_react_jsx_runtime.JSX.Element;
5195
+ type TabButtonProps<TTabName extends string = string> = React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
4232
5196
  id: TTabName;
4233
5197
  children: React__default.ReactNode;
4234
5198
  };
4235
5199
  declare const TabButton: <TTabName extends string = string>({ children, id, ...props }: TabButtonProps<TTabName>) => _emotion_react_jsx_runtime.JSX.Element;
4236
- type TabContentProps<TTabName extends string = string> = Partial<TabPanelProps> & {
5200
+ type TabContentProps<TTabName extends string = string> = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'id'> & {
5201
+ /**
5202
+ * When `tabId` is not set, this identifies which tab the panel belongs to.
5203
+ * When `tabId` IS set, this is just the HTML `id` attribute on the panel element.
5204
+ * @deprecated Pass `tabId` for tab identification; use `id` only as an HTML id.
5205
+ */
5206
+ id?: TTabName | (string & {});
5207
+ /** Identifies which tab this content panel belongs to. Matches the `id` on the corresponding `TabButton`. */
4237
5208
  tabId?: TTabName;
5209
+ /**
5210
+ * Whether to keep the panel mounted in the DOM when its tab is inactive.
5211
+ * Defaults to `true` so that embedded forms (e.g. Formik with debounced
5212
+ * auto-submit) preserve their state and pending work across tab switches.
5213
+ * Pass `false` only when you explicitly want inactive panels unmounted.
5214
+ * @default true
5215
+ */
5216
+ keepMounted?: boolean;
4238
5217
  children: React__default.ReactNode;
4239
5218
  };
4240
- declare const TabContent: <TTabName extends string = string>({ children, ...props }: TabContentProps<TTabName>) => _emotion_react_jsx_runtime.JSX.Element;
5219
+ declare const TabContent: <TTabName extends string = string>({ children, tabId, id, keepMounted, ...props }: TabContentProps<TTabName>) => _emotion_react_jsx_runtime.JSX.Element;
4241
5220
 
4242
5221
  type CreateTeamIntegrationTileProps = React.HTMLAttributes<HTMLDivElement> & {
4243
5222
  /** (optional) sets the title value
@@ -4404,8 +5383,14 @@ type PageHeaderSectionProps = Omit<React$1.HTMLAttributes<HTMLHeadingElement>, '
4404
5383
  linkText?: string;
4405
5384
  level?: LevelProps;
4406
5385
  linkManagerComponent?: LinkManagerWithRefType;
5386
+ /** The content to render after the title. */
5387
+ afterTitle?: React$1.ReactNode;
5388
+ /** The gap between the title and the afterTitle. */
5389
+ afterTitleGap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
5390
+ /** The alignment of the afterTitle. */
5391
+ afterTitleAlign?: 'left' | 'center' | 'right';
4407
5392
  };
4408
- declare const PageHeaderSection: ({ title, desc, children, linkText, level, linkProps, linkManagerComponent, ...htmlProps }: PageHeaderSectionProps) => _emotion_react_jsx_runtime.JSX.Element;
5393
+ declare const PageHeaderSection: ({ title, desc, children, linkText, level, linkProps, linkManagerComponent, afterTitle, afterTitleGap, afterTitleAlign, ...htmlProps }: PageHeaderSectionProps) => _emotion_react_jsx_runtime.JSX.Element;
4409
5394
 
4410
5395
  type ParagraphProps = {
4411
5396
  /** (optional) adds child elements to the paragraph tag */
@@ -4500,16 +5485,143 @@ type TileTitleProps = {
4500
5485
  } & HTMLAttributes<HTMLSpanElement>;
4501
5486
  declare const TileText: ({ as, children, ...props }: TileTitleProps) => _emotion_react_jsx_runtime.JSX.Element;
4502
5487
 
5488
+ /**
5489
+ * Identifier returned by `toast.*` calls. Kept as `string | number` for
5490
+ * backwards compatibility with the previous react-toastify `Id` type that
5491
+ * several consumers store in `useRef<number | string>`. Internally the
5492
+ * underlying Base UI manager always uses `string`.
5493
+ */
5494
+ type ToastId = string | number;
5495
+ /**
5496
+ * The shape consumers can store on a toast via the `data` field. Recognised
5497
+ * by the default `<ToastList>` renderer to render either a progress bar or
5498
+ * an inline Undo affordance, while keeping the imperative `toast.*` API
5499
+ * unchanged for the rest of the codebase.
5500
+ */
5501
+ type ToastData = {
5502
+ /** Progress-bar toast (used by `CopyValuesToLocales`). */
5503
+ kind: 'progress';
5504
+ /** Label rendered above the progress bar. */
5505
+ label: React__default.ReactNode;
5506
+ /** Completion ratio in the closed interval [0, 1]. */
5507
+ progress: number;
5508
+ } | {
5509
+ /** Toast with an inline 'Undo' button (used by the InlineAI popovers). */
5510
+ kind: 'undoable';
5511
+ /** Description rendered next to the Undo button. */
5512
+ description: React__default.ReactNode;
5513
+ /** Invoked when the user clicks the Undo button. */
5514
+ onUndo: () => void;
5515
+ /** Custom label for the Undo button. */
5516
+ undoLabel?: string;
5517
+ };
5518
+ /**
5519
+ * Per-call options accepted by every `toast.*` method. The shape mirrors the
5520
+ * legacy react-toastify options the design system used to forward.
5521
+ */
5522
+ type ToastOptions = {
5523
+ /**
5524
+ * Time in milliseconds before the toast is auto-dismissed. Pass `false` to
5525
+ * keep the toast open until it is dismissed manually (maps to Base UI's
5526
+ * `timeout: 0`).
5527
+ */
5528
+ autoClose?: number | false;
5529
+ /**
5530
+ * Stable id for the toast. When provided, calling a toast method again with
5531
+ * the same id updates the existing toast in place (and refreshes its
5532
+ * auto-dismiss timer) instead of stacking a new one. Useful for deduping
5533
+ * toasts triggered by repeated user actions.
5534
+ */
5535
+ toastId?: string;
5536
+ };
5537
+ /**
5538
+ * Promise-toast options accepted by `toast.promise`. Each handler may be a
5539
+ * static description string or a function that receives the resolved value /
5540
+ * rejection error and returns a description. All three keys are optional to
5541
+ * mirror react-toastify's behaviour where any unset state simply rendered an
5542
+ * empty toast (or none at all when the promise settled fast enough).
5543
+ */
5544
+ type ToastPromiseOptions<TValue, TError = unknown> = {
5545
+ /** Description shown while the promise is pending. */
5546
+ pending?: React__default.ReactNode;
5547
+ /** Description shown when the promise resolves. */
5548
+ success?: React__default.ReactNode | ((value: TValue) => React__default.ReactNode);
5549
+ /** Description shown when the promise rejects. */
5550
+ error?: React__default.ReactNode | ((error: TError) => React__default.ReactNode);
5551
+ };
5552
+ /**
5553
+ * Patch shape accepted by `toast.update`. A subset of Base UI's
5554
+ * `ToastManagerUpdateOptions<ToastData>` that consumers actually use.
5555
+ */
5556
+ type ToastUpdate = {
5557
+ type?: string;
5558
+ description?: React__default.ReactNode;
5559
+ timeout?: number;
5560
+ data?: ToastData;
5561
+ };
5562
+ /**
5563
+ * Imperative API for showing toasts from anywhere in the app. Mirrors the
5564
+ * historical react-toastify surface (`toast`, `.success`, `.error`, `.info`,
5565
+ * `.warning`, `.loading`, `.dismiss`, `.update`, `.done`, `.promise`) so the
5566
+ * ~200 existing call sites continue to work unchanged. Internally delegates
5567
+ * to the singleton Base UI `toastManager` mounted by `<ToastContainer />`.
5568
+ */
5569
+ declare const toast: ((description: React__default.ReactNode, options?: ToastOptions) => ToastId) & {
5570
+ success: (description: React__default.ReactNode, options?: ToastOptions) => ToastId;
5571
+ error: (description: React__default.ReactNode, options?: ToastOptions) => ToastId;
5572
+ info: (description: React__default.ReactNode, options?: ToastOptions) => ToastId;
5573
+ warning: (description: React__default.ReactNode, options?: ToastOptions) => ToastId;
5574
+ loading: (description: React__default.ReactNode) => ToastId;
5575
+ dismiss: (id?: ToastId) => void;
5576
+ update: (id: ToastId, patch: ToastUpdate) => void;
5577
+ /**
5578
+ * Closes the toast. Carried forward from the react-toastify API where
5579
+ * `done()` ended a `loading` toast — Base UI has no separate concept,
5580
+ * so this is an alias for `dismiss(id)`.
5581
+ */
5582
+ done: (id: ToastId) => void;
5583
+ /**
5584
+ * Wraps an async operation in a 3-state toast (loading / success / error).
5585
+ * Accepts either a `Promise` or a thunk returning a `Promise` to match the
5586
+ * historical react-toastify usage. The optional `TError` type argument
5587
+ * narrows the parameter type of the `error` callback for call sites that
5588
+ * historically supplied an explicit error type (e.g. `toast.promise<void, Error>`).
5589
+ *
5590
+ * Unlike Base UI's built-in `toastManager.promise`, this implementation
5591
+ * skips rendering toasts for states whose option is `undefined`. This
5592
+ * preserves the legacy react-toastify behaviour many call sites depend on
5593
+ * (e.g. save-draft flows omit `pending`/`success` and only want a toast
5594
+ * when the operation fails).
5595
+ */
5596
+ promise: <TValue, TError = unknown>(input: Promise<TValue> | (() => Promise<TValue>), options: ToastPromiseOptions<TValue, TError>) => Promise<TValue>;
5597
+ };
4503
5598
  type ToastContainerProps = {
5599
+ /**
5600
+ * Maximum number of toasts visible at once. Older toasts are dismissed when
5601
+ * the limit is exceeded.
5602
+ * @default 4
5603
+ */
4504
5604
  limit?: number;
4505
- /** sets the auto close delay in seconds normal: 5 seconds, medium: 8 seconds, long: 10 seconds
5605
+ /**
5606
+ * Default auto-close duration applied to every toast that does not specify
5607
+ * its own `autoClose` option.
5608
+ * - `'normal'` — 5 seconds
5609
+ * - `'medium'` — 8 seconds
5610
+ * - `'long'` — 10 seconds
4506
5611
  * @default 'normal'
4507
5612
  */
4508
5613
  autoCloseDelay?: 'normal' | 'medium' | 'long';
4509
5614
  };
4510
5615
  /**
4511
- * A component to render toasts in your app. This component is supposed to be used just once in your app. Typically inside _app.tsx
4512
- * @example <App><ToastContainer autoCloseDelay="normal" /></App>
5616
+ * Renders the global toast viewport. Intended to be mounted exactly once near
5617
+ * the root of the app (typically in `_app.tsx`).
5618
+ *
5619
+ * @example
5620
+ * ```tsx
5621
+ * <App>
5622
+ * <ToastContainer autoCloseDelay="normal" />
5623
+ * </App>
5624
+ * ```
4513
5625
  */
4514
5626
  declare const ToastContainer: ({ limit, autoCloseDelay }: ToastContainerProps) => _emotion_react_jsx_runtime.JSX.Element;
4515
5627
 
@@ -4536,4 +5648,4 @@ declare const StatusBullet: ({ status, hideText, size, message, compact, ...prop
4536
5648
 
4537
5649
  declare const actionBarVisibilityStyles: _emotion_react.SerializedStyles;
4538
5650
 
4539
- export { type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AsideAndSectionLayout, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Banner, type BannerProps, type BannerType, BetaDecorator, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps, type ButtonSoftThemeProps, type ButtonThemeProps, ButtonWithMenu, type ButtonWithMenuProps, Calendar, type CalendarProps, Callout, type CalloutProps, type CalloutType, Caption, type CaptionProps, Card, CardContainer, type CardContainerBgColorProps, type CardContainerProps, type CardProps, CardTitle, type CardTitleProps, CheckboxWithInfo, type CheckboxWithInforProps, type ChildFunction, Chip, type ChipProps, type ChipTheme, type ComboBoxGroupBase, type ComboBoxSelectableGroup, type ComboBoxSelectableItem, type ComboBoxSelectableOption, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterBgColors, type CounterIconColors, type CounterProps, CreateTeamIntegrationTile, type CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, type DashedBoxProps, DateTimePicker, type DateTimePickerProps, DateTimePickerSummary, type DateTimePickerValue, DateTimePickerVariant, DebouncedInputKeywordSearch, type DebouncedInputKeywordSearchProps, DescriptionList, type DescriptionListProps, Details, type DetailsProps, DismissibleChipAction, DragHandle, type DraggableHandleProps, Drawer, DrawerContent, type DrawerContentProps, type DrawerContextValue, type DrawerItem, type DrawerProps, DrawerProvider, DrawerRenderer, type DrawerRendererItemProps, type DrawerRendererProps, type DrawersRegistryRecord, DropdownStyleMenuTrigger, type DropdownStyleMenuTriggerProps, EditTeamIntegrationTile, type EditTeamIntegrationTileProps, ErrorMessage, type ErrorMessageProps, FieldMessage, type FieldMessageProps, Fieldset, type FieldsetProps, FilterChip, FlexiCard, FlexiCardTitle, type GroupedOption, Heading, type HeadingProps, HexModalBackground, HorizontalRhythm, Icon, IconButton, type IconButtonProps, type IconColor, type IconName, type IconProps, type IconType, IconsProvider, Image, ImageBroken, type ImageProps, InfoMessage, type InfoMessageProps, Input, InputComboBox, type InputComboBoxOption, type InputComboBoxProps, InputCreatableComboBox, type InputCreatableComboBoxProps, InputInlineSelect, type InputInlineSelectOption, type InputInlineSelectProps, InputKeywordSearch, type InputKeywordSearchProps, type InputProps, InputSelect, type InputSelectProps, InputTime, type InputTimeProps, InputToggle, type InputToggleProps, IntegrationComingSoon, type IntegrationComingSoonProps, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, KeyValueInput, type KeyValueInputProps, type KeyValueItem, Label, LabelLeadingIcon, type LabelLeadingIconProps, type LabelProps, Legend, type LegendProps, type LevelProps, LimitsBar, type LimitsBarProps, Link, type LinkColorProps, LinkList, type LinkListProps, type LinkManagerWithRefType, LinkNode, type LinkProps, LinkTile, type LinkTileWithRefProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, type LoadingIconProps, LoadingIndicator, LoadingOverlay, type LoadingOverlayProps, Menu, MenuButton, type MenuButtonProp, MenuGroup, type MenuGroupProps, MenuItem, MenuItemEmptyIcon, MenuItemIcon, MenuItemInner, type MenuItemProps, MenuItemSeparator, type MenuItemTextThemeProps, type MenuProps, MenuSelect, MenuThreeDots, type MenuThreeDotsProps, Modal, ModalDialog, type ModalDialogProps, type ModalProps, MultilineChip, type MultilineChipProps, ObjectGridContainer, type ObjectGridContainerProps, ObjectGridItem, ObjectGridItemCardCover, type ObjectGridItemCardCoverProps, ObjectGridItemCover, ObjectGridItemCoverButton, type ObjectGridItemCoverButtonProps, type ObjectGridItemCoverProps, ObjectGridItemHeading, ObjectGridItemIconWithTooltip, type ObjectGridItemIconWithTooltipProps, ObjectGridItemLoadingSkeleton, type ObjectGridItemProps, type ObjectGridItemTitleProps, ObjectItemLoadingSkeleton, type ObjectItemLoadingSkeletonProps, ObjectListItem, ObjectListItemContainer, ObjectListItemCover, type ObjectListItemCoverProps, ObjectListItemHeading, type ObjectListItemHeadingProps, type ObjectListItemProps, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, ParameterActionButton, type ParameterActionButtonProps, ParameterDrawerHeader, type ParameterDrawerHeaderProps, ParameterGroup, type ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, type ParameterImageProps, ParameterInput, ParameterInputInner, type ParameterInputProps, ParameterLabel, type ParameterLabelProps, ParameterLink, ParameterLinkInner, type ParameterLinkProps, ParameterMenuButton, type ParameterMenuButtonProps, ParameterMultiSelect, ParameterMultiSelectInner, type ParameterMultiSelectOption, type ParameterMultiSelectProps, ParameterNameAndPublicIdInput, type ParameterNameAndPublicIdInputProps, ParameterNumberSlider, ParameterNumberSliderInner, type ParameterNumberSliderProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, type ParameterRichTextInnerProps, type ParameterRichTextProps, ParameterSelect, ParameterSelectInner, type ParameterSelectProps, ParameterSelectSlider, ParameterSelectSliderInner, type ParameterSelectSliderProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, type ParameterShellProps, ParameterTextarea, ParameterTextareaInner, type ParameterTextareaProps, ParameterToggle, ParameterToggleInner, type ParameterToggleProps, Popover, PopoverBody, type PopoverBodyProps, type PopoverProps, ProgressBar, type ProgressBarProps, ProgressList, ProgressListItem, type ProgressListItemProps, type ProgressListProps, type RegisterDrawerProps, ResolveIcon, type ResolveIconProps, ResponsiveTableContainer, type RhythmProps, type RichTextParamValue, RichTextToolbarIcon, type ScrollableItemProps, ScrollableList, type ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, type ScrollableListItemProps, type ScrollableListProps, SearchableMenu, type SearchableMenuProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SelectableMenuItem, type SelectableMenuItemProps, type SerializedLinkNode, type ShortcutReference, Skeleton, type SkeletonProps, Slider, SliderLabels, type SliderLabelsProps, type SliderOption, type SliderProps, Spinner, StatusBullet, type StatusBulletProps, type StatusTypeProps, SuccessMessage, type SuccessMessageProps, Switch, type SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, type TabButtonProps, TabContent, type TabContentProps, Table, TableBody, type TableBodyProps, TableCellData, type TableCellDataProps, TableCellHead, type TableCellHeadProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, TakeoverDrawerRenderer, type TextAlignProps, Textarea, type TextareaProps, Theme, type ThemeProps, type TickMark, Tile, TileContainer, type TileContainerProps, type TileProps, TileText, type TileTitleProps, ToastContainer, type ToastContainerProps, Tooltip, type TooltipProps, TwoColumnLayout, type TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, type UniformLogoProps, type UseShortcutOptions, type UseShortcutResult, VerticalRhythm, WarningMessage, type WarningMessageProps, accessibleHidden, actionBarVisibilityStyles, addPathSegmentToPathname, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonDisabled, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonSoftAccentPrimary, buttonSoftAlt, buttonSoftDestructive, buttonSoftPrimary, buttonSoftTertiary, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, chatIcon, convertComboBoxGroupsToSelectableGroups, cq, customIcons, debounce, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getButtonSize, getButtonStyles, getComboBoxSelectedSelectableGroups, getDrawerAttributes, getFormattedShortcut, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isSecureURL, isValidUrl, jsonIcon, labelText, mq, numberInput, prefersReducedMotion, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInRtl, slideInTtb, spin, structurePanelIcon, supports, textInput, uniformAiIcon, uniformComponentIcon, uniformComponentPatternIcon, uniformCompositionPatternIcon, uniformConditionalValuesIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, uniformLocaleDisabledIcon, uniformLocaleIcon, uniformStatusDraftIcon, uniformStatusModifiedIcon, uniformStatusPublishedIcon, uniformUsageStatusIcon, useBreakpoint, useButtonStyles, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useImageLoadFallback, useOutsideClick, useParameterShell, usePopoverComponentContext, useRichTextToolbarState, useShortcut, functionalColors as utilityColors, warningIcon, yesNoIcon, zigZag, zigZagThick };
5651
+ export { AVATAR_SIZE_2XL, AVATAR_SIZE_2XS, AVATAR_SIZE_3XL, AVATAR_SIZE_LG, AVATAR_SIZE_MD, AVATAR_SIZE_SM, AVATAR_SIZE_XL, AVATAR_SIZE_XS, type ActionButtonsProps, AddButton, type AddButtonProps, AddListButton, type AddListButtonProps, type AddListButtonThemeProps, AsideAndSectionLayout, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Banner, type BannerProps, type BannerType, BetaDecorator, type BoxHeightProps, type BreakpointSize, type BreakpointsMap, Button, type ButtonProps, type ButtonSizeProps, type ButtonSoftThemeProps, type ButtonThemeProps, ButtonWithMenu, type ButtonWithMenuProps, Calendar, type CalendarCellCss, type CalendarProps, type CalendarStyles, Callout, type CalloutProps, type CalloutType, Caption, type CaptionProps, Card, CardContainer, type CardContainerBgColorProps, type CardContainerProps, type CardProps, CardTitle, type CardTitleProps, CheckboxWithInfo, type CheckboxWithInforProps, type ChildFunction, Chip, type ChipProps, type ChipTheme, type ComboBoxGroupBase, type ComboBoxSelectableGroup, type ComboBoxSelectableItem, type ComboBoxSelectableOption, Container, type ContainerProps, type ConvertComboBoxGroupsToSelectableGroupsOptions, Counter, type CounterBgColors, type CounterIconColors, type CounterProps, CreateTeamIntegrationTile, type CreateTeamIntegrationTileProps, CurrentDrawerContext, DashedBox, type DashedBoxProps, DateTimePicker, type DateTimePickerProps, DateTimePickerSummary, type DateTimePickerValue, DateTimePickerVariant, DebouncedInputKeywordSearch, type DebouncedInputKeywordSearchProps, DescriptionList, type DescriptionListProps, Details, type DetailsProps, DismissibleChipAction, DragHandle, type DraggableHandleProps, Drawer, DrawerContent, type DrawerContentProps, type DrawerContextValue, type DrawerItem, type DrawerProps, DrawerProvider, DrawerRenderer, type DrawerRendererItemProps, type DrawerRendererProps, type DrawersRegistryRecord, DropdownStyleMenuTrigger, type DropdownStyleMenuTriggerProps, EditTeamIntegrationTile, type EditTeamIntegrationTileProps, ErrorMessage, type ErrorMessageProps, FieldMessage, type FieldMessageProps, Fieldset, type FieldsetProps, FilterChip, FlexiCard, FlexiCardTitle, type GroupedOption, Heading, type HeadingProps, HorizontalRhythm, Icon, IconButton, type IconButtonProps, type IconColor, type IconName, type IconProps, type IconType, IconsProvider, Image, ImageBroken, type ImageProps, InfoMessage, type InfoMessageProps, Input, InputComboBox, type InputComboBoxOption, type InputComboBoxProps, InputCreatableComboBox, type InputCreatableComboBoxProps, InputInlineSelect, type InputInlineSelectOption, type InputInlineSelectProps, InputKeywordSearch, type InputKeywordSearchProps, type InputProps, InputSelect, type InputSelectProps, InputTime, type InputTimeProps, InputToggle, type InputToggleProps, IntegrationComingSoon, type IntegrationComingSoonProps, IntegrationLoadingTile, type IntegrationLoadingTileProps, IntegrationModalHeader, type IntegrationModalHeaderProps, IntegrationModalIcon, type IntegrationModalIconProps, IntegrationTile, type IntegrationTileProps, type IsoDateString, type IsoDateTimeString, type IsoTimeString, JsonEditor, type JsonEditorProps, KeyValueInput, type KeyValueInputProps, type KeyValueItem, Label, LabelLeadingIcon, type LabelLeadingIconProps, type LabelOption, type LabelProps, LabelsQuickFilter, type LabelsQuickFilterItem, type LabelsQuickFilterProps, Legend, type LegendProps, type LevelProps, LimitsBar, type LimitsBarProps, Link, LinkButton, type LinkButtonProps, type LinkColorProps, LinkList, type LinkListProps, type LinkManagerWithRefType, LinkNode, type LinkProps, LinkTile, type LinkTileWithRefProps, LinkWithRef, LoadingCardSkeleton, LoadingIcon, type LoadingIconProps, LoadingIndicator, LoadingOverlay, type LoadingOverlayProps, Menu, MenuButton, type MenuButtonProp, MenuGroup, type MenuGroupProps, MenuItem, MenuItemEmptyIcon, MenuItemIcon, MenuItemInner, type MenuItemProps, MenuItemSeparator, type MenuItemTextThemeProps, type MenuProps, MenuSelect, MenuThreeDots, type MenuThreeDotsProps, Modal, ModalDialog, type ModalDialogProps, ModalPortalContext, type ModalProps, MultilineChip, type MultilineChipProps, ObjectGridContainer, type ObjectGridContainerProps, ObjectGridItem, ObjectGridItemCardCover, type ObjectGridItemCardCoverProps, ObjectGridItemCover, ObjectGridItemCoverButton, type ObjectGridItemCoverButtonProps, type ObjectGridItemCoverProps, ObjectGridItemHeading, ObjectGridItemIconWithTooltip, type ObjectGridItemIconWithTooltipProps, ObjectGridItemLoadingSkeleton, type ObjectGridItemProps, type ObjectGridItemTitleProps, ObjectItemLoadingSkeleton, type ObjectItemLoadingSkeletonProps, ObjectListItem, ObjectListItemContainer, ObjectListItemCover, type ObjectListItemCoverProps, ObjectListItemHeading, type ObjectListItemHeadingProps, type ObjectListItemProps, ObjectListSubText, PageHeaderSection, type PageHeaderSectionProps, Pagination, Paragraph, type ParagraphProps, ParameterActionButton, type ParameterActionButtonProps, ParameterDrawerHeader, type ParameterDrawerHeaderProps, ParameterGroup, type ParameterGroupProps, ParameterImage, ParameterImageInner, ParameterImagePreview, type ParameterImageProps, ParameterInput, ParameterInputInner, type ParameterInputProps, ParameterLabel, type ParameterLabelProps, ParameterLabels, ParameterLabelsInner, ParameterLink, ParameterLinkInner, type ParameterLinkProps, ParameterMenuButton, type ParameterMenuButtonProps, ParameterMultiSelect, ParameterMultiSelectInner, type ParameterMultiSelectOption, type ParameterMultiSelectProps, ParameterNameAndPublicIdInput, type ParameterNameAndPublicIdInputProps, ParameterNumberSlider, ParameterNumberSliderInner, type ParameterNumberSliderProps, ParameterOverrideMarker, ParameterRichText, ParameterRichTextInner, type ParameterRichTextInnerProps, type ParameterRichTextProps, ParameterSelect, ParameterSelectInner, type ParameterSelectProps, ParameterSelectSlider, ParameterSelectSliderInner, type ParameterSelectSliderProps, ParameterShell, ParameterShellContext, ParameterShellPlaceholder, type ParameterShellProps, ParameterTextarea, ParameterTextareaInner, type ParameterTextareaProps, ParameterToggle, ParameterToggleInner, type ParameterToggleProps, Popover, PopoverBody, type PopoverBodyProps, type PopoverProps, type PopoverStore, ProgressBar, type ProgressBarProps, ProgressList, ProgressListItem, type ProgressListItemProps, type ProgressListProps, QuickFilter, type QuickFilterSelectedItem, type RegisterDrawerProps, ResolveIcon, type ResolveIconProps, ResponsiveTableContainer, type RhythmProps, type RichTextParamValue, RichTextToolbarIcon, type ScrollableItemProps, ScrollableList, type ScrollableListContainerProps, ScrollableListInputItem, ScrollableListItem, type ScrollableListItemProps, type ScrollableListProps, SearchableMenu, type SearchableMenuProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, SelectableMenuItem, type SelectableMenuItemProps, type SerializedLinkNode, type ShortcutReference, Skeleton, type SkeletonProps, Slider, SliderLabels, type SliderLabelsProps, type SliderOption, type SliderProps, Spinner, StackedModal, StackedModalHeader, type StackedModalProps, StackedModalStep, type StackedModalStepProps, StatusBullet, type StatusBulletProps, type StatusTypeProps, type StepTransitionState, SuccessMessage, type SuccessMessageProps, Swatch, SwatchComboBox, SwatchComboBoxLabelStyles, SwatchLabel, type SwatchLabelProps, SwatchLabelRemoveButton, SwatchLabelTooltip, type SwatchProps, type SwatchSize, type SwatchVariant, Switch, type SwitchProps, TAKEOVER_STACK_ID, TabButton, TabButtonGroup, type TabButtonGroupProps, type TabButtonProps, TabContent, type TabContentProps, Table, TableBody, type TableBodyProps, TableCellData, type TableCellDataProps, TableCellHead, type TableCellHeadProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, TakeoverDrawerRenderer, type TextAlignProps, Textarea, type TextareaProps, Theme, type ThemeProps, type TickMark, Tile, TileContainer, type TileContainerProps, type TileProps, TileText, type TileTitleProps, ToastContainer, type ToastContainerProps, type ToastData, type ToastId, type ToastOptions, type ToastPromiseOptions, type ToastUpdate, Tooltip, type TooltipProps, TwoColumnLayout, type TwoColumnLayoutProps, UniformBadge, UniformLogo, UniformLogoLarge, type UniformLogoProps, type UseShortcutOptions, type UseShortcutResult, VerticalRhythm, WarningMessage, type WarningMessageProps, accessibleHidden, actionBarVisibilityStyles, addPathSegmentToPathname, avatarImageStyles, avatarSize2xlStyles, avatarSize2xsStyles, avatarSize3xlStyles, avatarSizeLgStyles, avatarSizeMdStyles, avatarSizeSmStyles, avatarSizeXlStyles, avatarSizeXsStyles, avatarStyles, borderTopIcon, breakpoints, button, buttonAccentAltDark, buttonAccentAltDarkOutline, buttonDestructive, buttonDisabled, buttonGhost, buttonGhostDestructive, buttonGhostUnimportant, buttonPrimary, buttonPrimaryInvert, buttonRippleEffect, buttonSecondary, buttonSecondaryInvert, buttonSoftAccentPrimary, buttonSoftAlt, buttonSoftDestructive, buttonSoftPrimary, buttonSoftTertiary, buttonTertiary, buttonTertiaryOutline, buttonUnimportant, canvasAlertIcon, cardIcon, chatIcon, convertComboBoxGroupsToSelectableGroups, cq, customIcons, debounce, extractParameterProps, fadeIn, fadeInBottom, fadeInLtr, fadeInRtl, fadeInTop, fadeOutBottom, fullWidthScreenIcon, getButtonSize, getButtonStyles, getComboBoxSelectedSelectableGroups, getDrawerAttributes, getFormattedShortcut, getParentPath, getPathSegment, growSubtle, imageTextIcon, infoFilledIcon, input, inputError, inputSelect, isSecureURL, isValidUrl, jsonIcon, labelText, mq, numberInput, popTopLayerDialog, prefersReducedMotion, pushTopLayerDialog, queryStringIcon, rectangleRoundedIcon, replaceUnderscoreInString, richTextToolbarButton, richTextToolbarButtonActive, ripple, scrollbarStyles, settings, settingsIcon, skeletonLoading, slideInRtl, slideInTtb, spin, structurePanelIcon, subscribeTopLayerDialog, supports, swatchColors, swatchVariant, textInput, toast, uniformAiIcon, uniformComponentIcon, uniformComponentPatternIcon, uniformCompositionPatternIcon, uniformConditionalValuesIcon, uniformContentTypeIcon, uniformEntryIcon, uniformEntryPatternIcon, uniformLocaleDisabledIcon, uniformLocaleIcon, uniformStatusDraftIcon, uniformStatusModifiedIcon, uniformStatusPublishedIcon, uniformUsageStatusIcon, useBreakpoint, useButtonStyles, useCloseCurrentDrawer, useCurrentDrawer, useCurrentTab, useDateTimePickerContext, useDrawer, useIconContext, useImageLoadFallback, useIsSubmenuTriggerMode, useModalPortalContainer, useOutsideClick, useParameterShell, usePopoverComponentContext, useRichTextToolbarState, useShortcut, useStackedModal, functionalColors as utilityColors, warningIcon, yesNoIcon, zigZag, zigZagThick };