@backstage/ui 0.14.3 → 0.15.0-next.1

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { ReactNode, CSSProperties, HTMLAttributes, ComponentPropsWithoutRef, ReactElement, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
-import { DisclosureProps, DisclosureGroupProps, DisclosurePanelProps, HeadingProps, ButtonProps as ButtonProps$1, ModalOverlayProps, DialogTriggerProps as DialogTriggerProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SliderProps as SliderProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, RowProps as RowProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, TableHeaderProps as TableHeaderProps$1, TagProps as TagProps$1, TagListProps, TagGroupProps as TagGroupProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, PopoverProps as PopoverProps$1, MenuProps as MenuProps$1, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, SearchFieldProps as SearchFieldProps$1, GridListProps, GridListItemProps, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components';
+import { CSSProperties, ReactNode, HTMLAttributes, ComponentPropsWithoutRef, ReactElement, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
+import { DisclosureProps, DisclosureGroupProps, DisclosurePanelProps, HeadingProps, ButtonProps as ButtonProps$1, DateRangePickerProps as DateRangePickerProps$1, ModalOverlayProps, DialogTriggerProps as DialogTriggerProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SliderProps as SliderProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, RowProps as RowProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, TableHeaderProps as TableHeaderProps$1, TagProps as TagProps$1, TagListProps, TagGroupProps as TagGroupProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, PopoverProps as PopoverProps$1, MenuProps as MenuProps$1, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, SearchFieldProps as SearchFieldProps$1, GridListProps, GridListItemProps, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components';
+import { DateValue } from '@internationalized/date';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NavigateOptions } from 'react-router-dom';
 import { ColumnSize, ColumnStaticSize, SortDescriptor as SortDescriptor$1 } from 'react-stately';
@@ -54,6 +55,19 @@ interface PaddingProps {
 /** @public */
 interface SpaceProps extends MarginProps, PaddingProps {
 }
+/**
+ * Flex item properties.
+ *
+ * @public
+ */
+interface FlexItemProps {
+    /** Controls the flex-grow property. Values of `true` or `false` are converted to `1` or `0` respectively. */
+    grow?: Responsive<number | boolean>;
+    /** Controls the flex-shrink property. Values of `true` or `false` are converted to `1` or `0` respectively. */
+    shrink?: Responsive<number | boolean>;
+    /** Controls the flex-basis property. */
+    basis?: Responsive<CSSProperties['flexBasis']>;
+}
 /** @public */
 type TextVariants = 'title-large' | 'title-medium' | 'title-small' | 'title-x-small' | 'body-large' | 'body-medium' | 'body-small' | 'body-x-small';
 /** @public */
@@ -143,7 +157,7 @@ type BoxUtilityProps = {
     maxHeight?: Responsive<string>;
 };
 /** @public */
-interface BoxProps extends SpaceProps, BoxOwnProps, BoxUtilityProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+interface BoxProps extends SpaceProps, FlexItemProps, BoxOwnProps, BoxUtilityProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
 }
 
 /**
@@ -176,7 +190,7 @@ declare const BoxDefinition: {
         readonly className: {};
         readonly style: {};
     };
-    readonly utilityProps: readonly ["m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py", "position", "display", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"];
+    readonly utilityProps: readonly ["m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py", "position", "display", "grow", "shrink", "basis", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"];
 };
 
 /** @public */
@@ -187,7 +201,7 @@ type GridOwnProps = {
     bg?: Responsive<ProviderBg>;
 };
 /** @public */
-interface GridProps extends SpaceProps, GridOwnProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+interface GridProps extends SpaceProps, FlexItemProps, GridOwnProps, Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     columns?: Responsive<Columns>;
     gap?: Responsive<Space>;
 }
@@ -232,7 +246,7 @@ declare const GridDefinition: {
         readonly className: {};
         readonly style: {};
     };
-    readonly utilityProps: readonly ["columns", "gap", "m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py"];
+    readonly utilityProps: readonly ["columns", "gap", "m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py", "grow", "shrink", "basis"];
 };
 /**
  * Component definition for GridItem
@@ -265,7 +279,7 @@ type FlexOwnProps = {
     bg?: Responsive<ProviderBg>;
 };
 /** @public */
-interface FlexProps extends SpaceProps, FlexOwnProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+interface FlexProps extends SpaceProps, FlexItemProps, FlexOwnProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     gap?: Responsive<Space>;
     align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;
     justify?: Responsive<'start' | 'center' | 'end' | 'between'>;
@@ -299,7 +313,7 @@ declare const FlexDefinition: {
         readonly className: {};
         readonly style: {};
     };
-    readonly utilityProps: readonly ["m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py", "gap", "align", "justify", "direction"];
+    readonly utilityProps: readonly ["m", "mb", "ml", "mr", "mt", "mx", "my", "p", "pb", "pl", "pr", "pt", "px", "py", "gap", "align", "justify", "direction", "grow", "shrink", "basis"];
 };
 
 /** @public */
@@ -553,6 +567,8 @@ declare const AccordionGroupDefinition: {
 type AlertOwnProps = {
     status?: Responsive<'info' | 'success' | 'warning' | 'danger'>;
     icon?: boolean | ReactElement;
+    isPending?: boolean;
+    /** @deprecated Use `isPending` instead. */
     loading?: boolean;
     customActions?: ReactNode;
     title?: ReactNode;
@@ -573,7 +589,7 @@ interface AlertProps extends MarginProps, AlertOwnProps, Omit<React.ComponentPro
  *
  * @remarks
  * The Alert component supports multiple status variants (info, success, warning, danger)
- * and can display icons, loading states, and custom actions. It automatically handles
+ * and can display icons, pending states, and custom actions. It automatically handles
  * icon selection based on status when the icon prop is set to true.
  *
  * @example
@@ -594,14 +610,14 @@ interface AlertProps extends MarginProps, AlertOwnProps, Omit<React.ComponentPro
  * ```
  *
  * @example
- * With custom actions and loading state:
+ * With custom actions and pending state:
  * ```tsx
  * <Alert
  *   status="success"
  *   icon={true}
  *   title="Operation completed"
  *   description="Your changes have been saved successfully."
- *   loading={isProcessing}
+ *   isPending={isProcessing}
  *   customActions={
  *     <>
  *       <Button size="small" variant="tertiary">Dismiss</Button>
@@ -638,6 +654,9 @@ declare const AlertDefinition: {
             readonly dataAttribute: true;
             readonly default: "info";
         };
+        readonly isPending: {
+            readonly dataAttribute: true;
+        };
         readonly loading: {
             readonly dataAttribute: true;
         };
@@ -776,6 +795,8 @@ type ButtonOwnProps = {
     destructive?: boolean;
     iconStart?: ReactElement;
     iconEnd?: ReactElement;
+    isPending?: boolean;
+    /** @deprecated Use `isPending` instead. */
     loading?: boolean;
     children?: ReactNode;
     className?: string;
@@ -810,7 +831,7 @@ interface ButtonProps extends Omit<ButtonProps$1, keyof ButtonOwnProps>, ButtonO
  *   variant="primary"
  *   size="medium"
  *   iconStart={<IconComponent />}
- *   loading={isSubmitting}
+ *   isPending={isSubmitting}
  * >
  *   Submit
  * </Button>
@@ -846,6 +867,9 @@ declare const ButtonDefinition: {
         readonly destructive: {
             readonly dataAttribute: true;
         };
+        readonly isPending: {
+            readonly dataAttribute: true;
+        };
         readonly loading: {
             readonly dataAttribute: true;
         };
@@ -860,6 +884,7 @@ declare const ButtonDefinition: {
 type CardBaseProps = {
     children?: ReactNode;
     className?: string;
+    style?: CSSProperties;
 };
 /** @public */
 type CardButtonVariant = {
@@ -900,13 +925,13 @@ type CardStaticVariant = {
  *
  * @public
  */
-type CardProps = CardBaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> & (CardButtonVariant | CardLinkVariant | CardStaticVariant);
+type CardProps = CardBaseProps & FlexItemProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> & (CardButtonVariant | CardLinkVariant | CardStaticVariant);
 /**
  * Flat own-props shape used by the component definition system.
  * Derived from the Card variant types so it automatically stays in sync with CardProps.
  * @public
  */
-type CardOwnProps = Pick<CardBaseProps & (CardButtonVariant | CardLinkVariant | CardStaticVariant), 'children' | 'className' | 'onPress' | 'href' | 'label' | 'target' | 'rel' | 'download'>;
+type CardOwnProps = Pick<CardBaseProps & (CardButtonVariant | CardLinkVariant | CardStaticVariant), 'children' | 'className' | 'onPress' | 'href' | 'label' | 'target' | 'rel' | 'download' | 'style'>;
 /** @public */
 type CardHeaderOwnProps = {
     children?: ReactNode;
@@ -990,7 +1015,9 @@ declare const CardDefinition: {
         readonly target: {};
         readonly rel: {};
         readonly download: {};
+        readonly style: {};
     };
+    readonly utilityProps: readonly ["grow", "shrink", "basis"];
 };
 /**
  * Component definition for CardHeader
@@ -1041,6 +1068,90 @@ declare const CardFooterDefinition: {
     };
 };
 
+/** @public */
+type FieldLabelOwnProps = {
+    /**
+     * The label of the text field
+     */
+    label?: string | null;
+    /**
+     * The secondary label of the text field
+     */
+    secondaryLabel?: string | null;
+    /**
+     * The description of the text field
+     */
+    description?: string | null;
+    /**
+     * The HTML for attribute of the text field
+     */
+    htmlFor?: string;
+    /**
+     * The id of the text field
+     */
+    id?: string;
+    /**
+     * The id to apply to the description element for aria-describedby
+     */
+    descriptionId?: string;
+    /**
+     * The slot name to set on the description's React Aria `<Text>` element.
+     */
+    descriptionSlot?: string;
+    className?: string;
+};
+/** @public */
+interface FieldLabelProps extends FieldLabelOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FieldLabelOwnProps> {
+}
+
+/** @public */
+type DateRangePickerOwnProps = {
+    /**
+     * The size of the date range picker
+     * @defaultValue 'small'
+     */
+    size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
+    className?: string;
+    label?: FieldLabelProps['label'];
+    description?: FieldLabelProps['description'];
+    secondaryLabel?: FieldLabelProps['secondaryLabel'];
+};
+/** @public */
+interface DateRangePickerProps extends Omit<DateRangePickerProps$1<DateValue>, 'className' | 'children'>, DateRangePickerOwnProps {
+}
+
+/**
+ * A date range picker that combines two date fields and a calendar popover,
+ * allowing users to enter or select a date range with full keyboard and
+ * screen reader accessibility.
+ *
+ * @public
+ */
+declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Component definition for DateRangePicker
+ * @public
+ */
+declare const DateRangePickerDefinition: {
+    readonly styles: {
+        readonly [key: string]: string;
+    };
+    readonly classNames: {
+        readonly root: "bui-DateRangePicker";
+    };
+    readonly propDefs: {
+        readonly size: {
+            readonly dataAttribute: true;
+            readonly default: "small";
+        };
+        readonly className: {};
+        readonly label: {};
+        readonly description: {};
+        readonly secondaryLabel: {};
+    };
+};
+
 /**
  * Props for the DialogTrigger component.
  * @public
@@ -1198,42 +1309,6 @@ declare const DialogFooterDefinition: {
     };
 };
 
-/** @public */
-type FieldLabelOwnProps = {
-    /**
-     * The label of the text field
-     */
-    label?: string | null;
-    /**
-     * The secondary label of the text field
-     */
-    secondaryLabel?: string | null;
-    /**
-     * The description of the text field
-     */
-    description?: string | null;
-    /**
-     * The HTML for attribute of the text field
-     */
-    htmlFor?: string;
-    /**
-     * The id of the text field
-     */
-    id?: string;
-    /**
-     * The id to apply to the description element for aria-describedby
-     */
-    descriptionId?: string;
-    /**
-     * The slot name to set on the description's React Aria `<Text>` element.
-     */
-    descriptionSlot?: string;
-    className?: string;
-};
-/** @public */
-interface FieldLabelProps extends FieldLabelOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof FieldLabelOwnProps> {
-}
-
 /**
  * Renders a label for a form field with optional secondary label and description text.
  *
@@ -1493,6 +1568,44 @@ interface HeaderNavTabGroup {
  * @public
  */
 type HeaderNavTabItem = HeaderNavTab | HeaderNavTabGroup;
+/**
+ * Represents a tag item in the header.
+ *
+ * @public
+ */
+interface HeaderTag {
+    label: string;
+    href?: string;
+}
+/**
+ * Represents a metadata key-value pair in the header.
+ *
+ * @public
+ */
+interface HeaderMetadataItem {
+    label: string;
+    value: React.ReactNode;
+}
+/**
+ * Represents a user in the HeaderMetadataUsers component.
+ *
+ * @public
+ */
+interface HeaderMetadataUser {
+    name: string;
+    src?: string;
+    href?: string;
+}
+/**
+ * Represents a status item in the HeaderMetadataStatus component.
+ *
+ * @public
+ */
+interface HeaderMetadataStatusProps {
+    label: string;
+    color: 'danger' | 'warning' | 'success' | 'info';
+    href?: string;
+}
 /**
  * Own props for the Header component.
  *
@@ -1503,8 +1616,23 @@ interface HeaderOwnProps {
     customActions?: React.ReactNode;
     tabs?: HeaderNavTabItem[];
     activeTabId?: string | null;
+    /**
+     * @deprecated The breadcrumbs prop will be removed in a future release.
+     */
     breadcrumbs?: HeaderBreadcrumb[];
+    /**
+     * Markdown string rendered below the title. Only inline links are supported.
+     * Bold, italic, and block-level markdown are not rendered.
+     */
+    description?: string;
+    tags?: HeaderTag[];
+    metadata?: HeaderMetadataItem[];
     className?: string;
+    /**
+     * Makes the title-and-actions row stick to the top of its nearest scroll
+     * container while the rest of the header content scrolls away.
+     */
+    sticky?: boolean;
 }
 /**
  * Props for the Header component.
@@ -1558,12 +1686,27 @@ declare const HeaderDefinition: {
     readonly styles: {
         readonly [key: string]: string;
     };
+    readonly bg: "consumer";
     readonly classNames: {
-        readonly root: "bui-Header";
+        readonly headerTop: "bui-HeaderTop";
+        readonly stickySentinel: "bui-HeaderStickySentinel";
         readonly content: "bui-HeaderContent";
+        readonly headerBottom: "bui-HeaderBottom";
         readonly breadcrumbs: "bui-HeaderBreadcrumbs";
+        readonly breadcrumbsSmall: "bui-HeaderBreadcrumbsSmall";
+        readonly breadcrumbLink: "bui-HeaderBreadcrumbLink";
+        readonly breadcrumbLinkSmall: "bui-HeaderBreadcrumbLinkSmall";
+        readonly breadcrumbSeparator: "bui-HeaderBreadcrumbSeparator";
+        readonly titleStack: "bui-HeaderTitleStack";
+        readonly title: "bui-HeaderTitle";
+        readonly titleSmall: "bui-HeaderTitleSmall";
         readonly tabsWrapper: "bui-HeaderTabsWrapper";
         readonly controls: "bui-HeaderControls";
+        readonly tags: "bui-HeaderTags";
+        readonly tag: "bui-HeaderTag";
+        readonly description: "bui-HeaderDescription";
+        readonly metaRow: "bui-HeaderMetaRow";
+        readonly metaItem: "bui-HeaderMetaItem";
     };
     readonly propDefs: {
         readonly title: {};
@@ -1571,7 +1714,11 @@ declare const HeaderDefinition: {
         readonly tabs: {};
         readonly activeTabId: {};
         readonly breadcrumbs: {};
+        readonly description: {};
+        readonly tags: {};
+        readonly metadata: {};
         readonly className: {};
+        readonly sticky: {};
     };
 };
 /**
@@ -1582,12 +1729,27 @@ declare const HeaderPageDefinition: {
     readonly styles: {
         readonly [key: string]: string;
     };
+    readonly bg: "consumer";
     readonly classNames: {
-        readonly root: "bui-Header";
+        readonly headerTop: "bui-HeaderTop";
+        readonly stickySentinel: "bui-HeaderStickySentinel";
         readonly content: "bui-HeaderContent";
+        readonly headerBottom: "bui-HeaderBottom";
         readonly breadcrumbs: "bui-HeaderBreadcrumbs";
+        readonly breadcrumbsSmall: "bui-HeaderBreadcrumbsSmall";
+        readonly breadcrumbLink: "bui-HeaderBreadcrumbLink";
+        readonly breadcrumbLinkSmall: "bui-HeaderBreadcrumbLinkSmall";
+        readonly breadcrumbSeparator: "bui-HeaderBreadcrumbSeparator";
+        readonly titleStack: "bui-HeaderTitleStack";
+        readonly title: "bui-HeaderTitle";
+        readonly titleSmall: "bui-HeaderTitleSmall";
         readonly tabsWrapper: "bui-HeaderTabsWrapper";
         readonly controls: "bui-HeaderControls";
+        readonly tags: "bui-HeaderTags";
+        readonly tag: "bui-HeaderTag";
+        readonly description: "bui-HeaderDescription";
+        readonly metaRow: "bui-HeaderMetaRow";
+        readonly metaItem: "bui-HeaderMetaItem";
     };
     readonly propDefs: {
         readonly title: {};
@@ -1595,7 +1757,11 @@ declare const HeaderPageDefinition: {
         readonly tabs: {};
         readonly activeTabId: {};
         readonly breadcrumbs: {};
+        readonly description: {};
+        readonly tags: {};
+        readonly metadata: {};
         readonly className: {};
+        readonly sticky: {};
     };
 };
 
@@ -1650,11 +1816,33 @@ declare const HeaderNavGroupDefinition: {
     };
 };
 
+/**
+ * Displays a list of users as avatars inside a Header metadata value.
+ * A single user shows the avatar with their name beside it.
+ * Multiple users show avatars in a row with the name revealed on hover via tooltip.
+ * When a user has an `href`, the avatar and name become links.
+ *
+ * @public
+ */
+declare const HeaderMetadataUsers: ({ users, }: {
+    users: HeaderMetadataUser[];
+}) => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Displays a single status indicator as a coloured dot with a label inside a
+ * Header metadata value. Optionally renders the label as a link when href is provided.
+ *
+ * @public
+ */
+declare const HeaderMetadataStatus: ({ label, color, href, }: HeaderMetadataStatusProps) => react_jsx_runtime.JSX.Element;
+
 /** @public */
 type ButtonIconOwnProps = {
     size?: Responsive<'small' | 'medium'>;
     variant?: Responsive<'primary' | 'secondary' | 'tertiary'>;
     icon?: ReactElement;
+    isPending?: boolean;
+    /** @deprecated Use `isPending` instead. */
     loading?: boolean;
     className?: string;
 };
@@ -1696,6 +1884,9 @@ declare const ButtonIconDefinition: {
             readonly dataAttribute: true;
             readonly default: "primary";
         };
+        readonly isPending: {
+            readonly dataAttribute: true;
+        };
         readonly loading: {
             readonly dataAttribute: true;
         };
@@ -2044,6 +2235,8 @@ interface SortState {
 /** @public */
 type TableRootOwnProps = {
     stale?: boolean;
+    isPending?: boolean;
+    /** @deprecated Use `isPending` instead. */
     loading?: boolean;
 };
 /** @public */
@@ -2233,6 +2426,8 @@ type VirtualizedProp = boolean | {
 interface TableProps<T extends TableItem> {
     columnConfig: readonly ColumnConfig<T>[];
     data: T[] | undefined;
+    isPending?: boolean;
+    /** @deprecated Use `isPending` instead. */
     loading?: boolean;
     isStale?: boolean;
     error?: Error;
@@ -2252,7 +2447,7 @@ interface TableProps<T extends TableItem> {
  *
  * @public
  */
-declare function Table<T extends TableItem>({ columnConfig, data, loading, isStale, error, pagination, sort, rowConfig, selection, emptyState, className, style, virtualized, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+declare function Table<T extends TableItem>({ columnConfig, data, isPending, loading, isStale, error, pagination, sort, rowConfig, selection, emptyState, className, style, virtualized, }: TableProps<T>): react_jsx_runtime.JSX.Element;
 
 /**
  * The low-level table root element for building custom table layouts from atomic components.
@@ -2456,6 +2651,9 @@ declare const TableDefinition: {
         readonly stale: {
             readonly dataAttribute: true;
         };
+        readonly isPending: {
+            readonly dataAttribute: true;
+        };
         readonly loading: {
             readonly dataAttribute: true;
         };
@@ -3359,6 +3557,11 @@ type Option = {
     disabled?: boolean;
 };
 /** @public */
+type OptionSection = {
+    title: string;
+    options: Option[];
+};
+/** @public */
 type SelectOwnProps = {
     /**
      * An icon to render before the input
@@ -3370,9 +3573,10 @@ type SelectOwnProps = {
      */
     size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
     /**
-     * The options of the select field
+     * The options of the select field. Pass flat options, option sections for
+     * grouped display, or a mix of both in the same array.
      */
-    options?: Array<Option>;
+    options?: Array<Option | OptionSection>;
     /**
      * Enable search/filter functionality in the dropdown
      * @defaultValue false
@@ -3771,5 +3975,5 @@ declare function useAnalytics(): AnalyticsTracker;
  */
 declare function getNodeText(node: ReactNode | ((...args: any[]) => ReactNode)): string | undefined;
 
-export { Accordion, AccordionDefinition, AccordionGroup, AccordionGroupDefinition, AccordionPanel, AccordionPanelDefinition, AccordionTrigger, AccordionTriggerDefinition, Alert, AlertDefinition, Avatar, AvatarDefinition, BUIProvider, Badge, BadgeDefinition, BgProvider, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardBodyDefinition, CardDefinition, CardFooter, CardFooterDefinition, CardHeader, CardHeaderDefinition, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, CheckboxGroup, CheckboxGroupDefinition, Column, Container, ContainerDefinition, Dialog, DialogBody, DialogBodyDefinition, DialogDefinition, DialogFooter, DialogFooterDefinition, DialogHeader, DialogHeaderDefinition, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, FullPage, FullPageDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, List, ListDefinition, ListRow, ListRowDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, PasswordField, PasswordFieldDefinition, PluginHeader, PluginHeaderDefinition, Popover, PopoverDefinition, Radio, RadioDefinition, RadioGroup, RadioGroupDefinition, Row, SearchAutocomplete, SearchAutocompleteDefinition, SearchAutocompleteItem, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, Slider, SliderDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableBodySkeleton, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, getNodeText, useAnalytics, useBgConsumer, useBgProvider, useBreakpoint, useTable };
-export type { AccordionGroupOwnProps, AccordionGroupProps, AccordionOwnProps, AccordionPanelOwnProps, AccordionPanelProps, AccordionProps, AccordionTriggerOwnProps, AccordionTriggerProps, AlertOwnProps, AlertProps, AlignItems, AnalyticsEventAttributes, AnalyticsTracker, AvatarOwnProps, AvatarProps, BUIProviderProps, BadgeOwnProps, BadgeProps, BgContextValue, BgProviderProps, Border, BorderRadius, BoxOwnProps, BoxProps, BoxUtilityProps, Breakpoint, ButtonIconOwnProps, ButtonIconProps, ButtonLinkOwnProps, ButtonLinkProps, ButtonOwnProps, ButtonProps, CardBaseProps, CardBodyOwnProps, CardBodyProps, CardButtonVariant, CardFooterOwnProps, CardFooterProps, CardHeaderOwnProps, CardHeaderProps, CardLinkVariant, CardOwnProps, CardProps, CardStaticVariant, CellOwnProps, CellProfileOwnProps, CellProfileProps, CellProps, CellTextOwnProps, CellTextProps, CheckboxGroupOwnProps, CheckboxGroupProps, CheckboxOwnProps, CheckboxProps, ColumnConfig, ColumnOwnProps, ColumnProps, Columns, CompletePaginationOptions, ContainerBg, ContainerOwnProps, ContainerProps, CursorParams, CursorResponse, DialogBodyOwnProps, DialogBodyProps, DialogFooterOwnProps, DialogFooterProps, DialogHeaderOwnProps, DialogHeaderProps, DialogOwnProps, DialogProps, DialogTriggerProps, Display, FieldLabelOwnProps, FieldLabelProps, FilterState, FlexDirection, FlexOwnProps, FlexProps, FlexWrap, FullPageOwnProps, FullPageProps, GridItemOwnProps, GridItemProps, GridOwnProps, GridProps, HeaderBreadcrumb, HeaderNavTab, HeaderNavTabGroup, HeaderNavTabItem, HeaderOwnProps, HeaderPageBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderProps, HeaderTab, JustifyContent, LinkOwnProps, LinkProps, ListOwnProps, ListProps, ListRowOwnProps, ListRowProps, MarginProps, MenuAutocompleteListBoxOwnProps, MenuAutocompleteListBoxProps, MenuAutocompleteOwnProps, MenuAutocompleteProps, MenuItemOwnProps, MenuItemProps, MenuListBoxItemOwnProps, MenuListBoxItemProps, MenuListBoxOwnProps, MenuListBoxProps, MenuOwnProps, MenuPopoverOwnProps, MenuProps, MenuSectionOwnProps, MenuSectionProps, MenuSeparatorOwnProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, PaddingProps, PagePagination, PageSizeOption, PaginationOptions, PasswordFieldOwnProps, PasswordFieldProps, PluginHeaderOwnProps, PluginHeaderProps, PopoverOwnProps, PopoverProps, ProviderBg, QueryOptions, RadioGroupOwnProps, RadioGroupProps, RadioOwnProps, RadioProps, Responsive, RowConfig, RowOwnProps, RowProps, RowRenderFn, SearchAutocompleteItemOwnProps, SearchAutocompleteItemProps, SearchAutocompleteOwnProps, SearchAutocompleteProps, SearchFieldOwnProps, SearchFieldProps, SearchState, SelectOwnProps, SelectProps, SkeletonOwnProps, SkeletonProps, SliderOwnProps, SliderProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, SwitchOwnProps, SwitchProps, TabListOwnProps, TabListProps, TabMatchStrategy, TabOwnProps, TabPanelOwnProps, TabPanelProps, TabProps, TableBodyOwnProps, TableBodyProps, TableHeaderOwnProps, TableHeaderProps, TableItem, TablePaginationOwnProps, TablePaginationProps, TablePaginationType, TableProps, TableRootOwnProps, TableRootProps, TableSelection, TabsOwnProps, TabsProps, TagGroupOwnProps, TagGroupProps, TagOwnProps, TagProps, TextColorStatus, TextColors, TextFieldOwnProps, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupOwnProps, ToggleButtonGroupProps, ToggleButtonOwnProps, ToggleButtonProps, TooltipOwnProps, TooltipProps, UseAnalyticsFn, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VirtualizedProp, VisuallyHiddenOwnProps, VisuallyHiddenProps };
+export { Accordion, AccordionDefinition, AccordionGroup, AccordionGroupDefinition, AccordionPanel, AccordionPanelDefinition, AccordionTrigger, AccordionTriggerDefinition, Alert, AlertDefinition, Avatar, AvatarDefinition, BUIProvider, Badge, BadgeDefinition, BgProvider, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardBodyDefinition, CardDefinition, CardFooter, CardFooterDefinition, CardHeader, CardHeaderDefinition, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, CheckboxGroup, CheckboxGroupDefinition, Column, Container, ContainerDefinition, DateRangePicker, DateRangePickerDefinition, Dialog, DialogBody, DialogBodyDefinition, DialogDefinition, DialogFooter, DialogFooterDefinition, DialogHeader, DialogHeaderDefinition, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, FullPage, FullPageDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderMetadataStatus, HeaderMetadataUsers, HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, List, ListDefinition, ListRow, ListRowDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, PasswordField, PasswordFieldDefinition, PluginHeader, PluginHeaderDefinition, Popover, PopoverDefinition, Radio, RadioDefinition, RadioGroup, RadioGroupDefinition, Row, SearchAutocomplete, SearchAutocompleteDefinition, SearchAutocompleteItem, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, Slider, SliderDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableBodySkeleton, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, getNodeText, useAnalytics, useBgConsumer, useBgProvider, useBreakpoint, useTable };
+export type { AccordionGroupOwnProps, AccordionGroupProps, AccordionOwnProps, AccordionPanelOwnProps, AccordionPanelProps, AccordionProps, AccordionTriggerOwnProps, AccordionTriggerProps, AlertOwnProps, AlertProps, AlignItems, AnalyticsEventAttributes, AnalyticsTracker, AvatarOwnProps, AvatarProps, BUIProviderProps, BadgeOwnProps, BadgeProps, BgContextValue, BgProviderProps, Border, BorderRadius, BoxOwnProps, BoxProps, BoxUtilityProps, Breakpoint, ButtonIconOwnProps, ButtonIconProps, ButtonLinkOwnProps, ButtonLinkProps, ButtonOwnProps, ButtonProps, CardBaseProps, CardBodyOwnProps, CardBodyProps, CardButtonVariant, CardFooterOwnProps, CardFooterProps, CardHeaderOwnProps, CardHeaderProps, CardLinkVariant, CardOwnProps, CardProps, CardStaticVariant, CellOwnProps, CellProfileOwnProps, CellProfileProps, CellProps, CellTextOwnProps, CellTextProps, CheckboxGroupOwnProps, CheckboxGroupProps, CheckboxOwnProps, CheckboxProps, ColumnConfig, ColumnOwnProps, ColumnProps, Columns, CompletePaginationOptions, ContainerBg, ContainerOwnProps, ContainerProps, CursorParams, CursorResponse, DateRangePickerOwnProps, DateRangePickerProps, DialogBodyOwnProps, DialogBodyProps, DialogFooterOwnProps, DialogFooterProps, DialogHeaderOwnProps, DialogHeaderProps, DialogOwnProps, DialogProps, DialogTriggerProps, Display, FieldLabelOwnProps, FieldLabelProps, FilterState, FlexDirection, FlexItemProps, FlexOwnProps, FlexProps, FlexWrap, FullPageOwnProps, FullPageProps, GridItemOwnProps, GridItemProps, GridOwnProps, GridProps, HeaderBreadcrumb, HeaderMetadataItem, HeaderMetadataStatusProps, HeaderMetadataUser, HeaderNavTab, HeaderNavTabGroup, HeaderNavTabItem, HeaderOwnProps, HeaderPageBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderProps, HeaderTab, HeaderTag, JustifyContent, LinkOwnProps, LinkProps, ListOwnProps, ListProps, ListRowOwnProps, ListRowProps, MarginProps, MenuAutocompleteListBoxOwnProps, MenuAutocompleteListBoxProps, MenuAutocompleteOwnProps, MenuAutocompleteProps, MenuItemOwnProps, MenuItemProps, MenuListBoxItemOwnProps, MenuListBoxItemProps, MenuListBoxOwnProps, MenuListBoxProps, MenuOwnProps, MenuPopoverOwnProps, MenuProps, MenuSectionOwnProps, MenuSectionProps, MenuSeparatorOwnProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, OptionSection, PaddingProps, PagePagination, PageSizeOption, PaginationOptions, PasswordFieldOwnProps, PasswordFieldProps, PluginHeaderOwnProps, PluginHeaderProps, PopoverOwnProps, PopoverProps, ProviderBg, QueryOptions, RadioGroupOwnProps, RadioGroupProps, RadioOwnProps, RadioProps, Responsive, RowConfig, RowOwnProps, RowProps, RowRenderFn, SearchAutocompleteItemOwnProps, SearchAutocompleteItemProps, SearchAutocompleteOwnProps, SearchAutocompleteProps, SearchFieldOwnProps, SearchFieldProps, SearchState, SelectOwnProps, SelectProps, SkeletonOwnProps, SkeletonProps, SliderOwnProps, SliderProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, SwitchOwnProps, SwitchProps, TabListOwnProps, TabListProps, TabMatchStrategy, TabOwnProps, TabPanelOwnProps, TabPanelProps, TabProps, TableBodyOwnProps, TableBodyProps, TableHeaderOwnProps, TableHeaderProps, TableItem, TablePaginationOwnProps, TablePaginationProps, TablePaginationType, TableProps, TableRootOwnProps, TableRootProps, TableSelection, TabsOwnProps, TabsProps, TagGroupOwnProps, TagGroupProps, TagOwnProps, TagProps, TextColorStatus, TextColors, TextFieldOwnProps, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupOwnProps, ToggleButtonGroupProps, ToggleButtonOwnProps, ToggleButtonProps, TooltipOwnProps, TooltipProps, UseAnalyticsFn, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VirtualizedProp, VisuallyHiddenOwnProps, VisuallyHiddenProps };

package/dist/index.esm.js

@@ -20,6 +20,8 @@ export { Button } from './components/Button/Button.esm.js';
 export { ButtonDefinition } from './components/Button/definition.esm.js';
 export { Card, CardBody, CardFooter, CardHeader } from './components/Card/Card.esm.js';
 export { CardBodyDefinition, CardDefinition, CardFooterDefinition, CardHeaderDefinition } from './components/Card/definition.esm.js';
+export { DateRangePicker } from './components/DateRangePicker/DateRangePicker.esm.js';
+export { DateRangePickerDefinition } from './components/DateRangePicker/definition.esm.js';
 export { Dialog, DialogBody, DialogFooter, DialogHeader, DialogTrigger } from './components/Dialog/Dialog.esm.js';
 export { DialogBodyDefinition, DialogDefinition, DialogFooterDefinition, DialogHeaderDefinition } from './components/Dialog/definition.esm.js';
 export { FieldLabel } from './components/FieldLabel/FieldLabel.esm.js';
@@ -29,6 +31,8 @@ export { PluginHeaderDefinition } from './components/PluginHeader/definition.esm
 export { Header, HeaderPage } from './components/Header/Header.esm.js';
 export { HeaderDefinition, HeaderPageDefinition } from './components/Header/definition.esm.js';
 export { HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition } from './components/Header/HeaderNavDefinition.esm.js';
+export { HeaderMetadataUsers } from './components/Header/HeaderMetadataUsers.esm.js';
+export { HeaderMetadataStatus } from './components/Header/HeaderMetadataStatus.esm.js';
 export { ButtonIcon } from './components/ButtonIcon/ButtonIcon.esm.js';
 export { ButtonIconDefinition } from './components/ButtonIcon/definition.esm.js';
 export { ButtonLink } from './components/ButtonLink/ButtonLink.esm.js';

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/utilityClassMap.esm.js

@@ -182,6 +182,24 @@ const utilityClassMap = {
   rowSpan: {
     class: "bui-row-span",
     values: columnsValues
+  },
+  grow: {
+    class: "bui-grow",
+    cssVar: "--grow",
+    values: [],
+    transform: (input) => typeof input === "boolean" ? Number(input) : input
+  },
+  shrink: {
+    class: "bui-shrink",
+    cssVar: "--shrink",
+    values: [],
+    transform: (input) => typeof input === "boolean" ? Number(input) : input
+  },
+  basis: {
+    class: "bui-basis",
+    cssVar: "--basis",
+    values: [],
+    transform: (input) => typeof input === "number" ? `${input}px` : input
   }
 };