@luscii-healthtech/web-ui 60.0.0 → 60.2.0

package/dist/src/components/Checkbox/LabeledCheckboxCardGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
-type Props = React.ComponentPropsWithoutRef<"fieldset"> & {
+type Props = Omit<React.ComponentPropsWithoutRef<"fieldset">, "title"> & {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Over how many columns the checkbox cards should be distributed.

package/dist/src/components/Checkbox/LabeledCheckboxGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Any additional information to show underneath the radio group.

package/dist/src/{generated/components/Table/Table.d.ts → components/DataGrid/DataGrid.d.ts}

@@ -1,13 +1,13 @@
 import type { HTMLAttributes, ReactNode } from "react";
 import { type PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
-import { type TableFieldConfig } from "./Table.types";
+import { type DataGridFieldConfig } from "./DataGrid.types";
 type SelectableTableRow<Item> = {
     index: number;
     value: Item;
 };
-export interface TableProps<Item> extends HTMLAttributes<HTMLTableElement> {
+export interface DataGridProps<Item> extends HTMLAttributes<HTMLTableElement> {
     items?: Item[];
-    fieldConfigurations: TableFieldConfig<Item>[];
+    fieldConfigurations: DataGridFieldConfig<Item>[];
     emptyRowsText: string;
     emptyFieldContentText?: string;
     isLoading?: boolean;
@@ -49,7 +49,16 @@ export interface TableProps<Item> extends HTMLAttributes<HTMLTableElement> {
     onSelectedRowsChange?: (params: Array<SelectableTableRow<Item>>) => void;
 }
 /**
- * @deprecated Use `TableNew` instead.
+ * Config-driven data grid: `items` plus `fieldConfigurations` render the rows, with pagination,
+ * selection, loading and empty states built in. For a table with custom structure (colspan,
+ * grouped rows, sticky columns), use `TableNew`.
  */
-export declare function Table<Item>({ items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading, showHeader, paginationMenuProps, onRowClick, className, dataTestId, isSelectable, selectedItems, onSelectedRowsChange, rowSelectionHeaderAccessories, ...otherAttributes }: TableProps<Item>): import("react").JSX.Element;
+export declare function DataGrid<Item>({ items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading, showHeader, paginationMenuProps, onRowClick, className, dataTestId, isSelectable, selectedItems, onSelectedRowsChange, rowSelectionHeaderAccessories, ...otherAttributes }: DataGridProps<Item>): import("react").JSX.Element;
+/**
+ * @deprecated Renamed to `DataGrid`. In the next major, `Table` becomes the compositional table
+ * that is now `TableNew`.
+ */
+export declare const Table: typeof DataGrid;
+/** @deprecated Renamed to `DataGridProps`. */
+export type TableProps<Item> = DataGridProps<Item>;
 export {};

package/dist/src/components/{Table/Table.types.d.ts → DataGrid/DataGrid.types.d.ts}

@@ -6,7 +6,7 @@ type TableFieldConfigBase = {
     onlyShowContentOnHovering?: boolean;
 };
 type TableFieldConfigWithContent<Item> = TableFieldConfigBase & {
-    content: (item: Item) => TableFieldContent<Item>;
+    content: (item: Item) => DataGridFieldContent<Item>;
     render?: never;
 };
 type TableFieldConfigWithComponent<Item> = TableFieldConfigBase & {
@@ -17,9 +17,9 @@ type TableFieldConfigWithComponent<Item> = TableFieldConfigBase & {
  * By adding the `content` property, it will use an opinionated layout with the <Text /> and optionally the <Tag /> component.
  * By adding the `render` property, it will render any component returned in the function, based on the item (with type) passed.
  */
-export type TableFieldConfig<Item> = TableFieldConfigWithComponent<Item> | TableFieldConfigWithContent<Item>;
-export type TableFieldContent<Item> = TableFieldText | [TableFieldAction<Item>?, TableFieldAction<Item>?];
-export interface TableFieldText {
+export type DataGridFieldConfig<Item> = TableFieldConfigWithComponent<Item> | TableFieldConfigWithContent<Item>;
+export type DataGridFieldContent<Item> = DataGridFieldText | [DataGridFieldAction<Item>?, DataGridFieldAction<Item>?];
+export interface DataGridFieldText {
     text?: string;
     description?: {
         content: string;
@@ -31,7 +31,7 @@ export interface TableFieldText {
         color: "red" | "amber" | "green" | "gray" | "blue";
     };
 }
-export type TableFieldAction<Item> = {
+export type DataGridFieldAction<Item> = {
     isDisabled?: boolean;
     title?: string;
     icon?: FC<IconProps> | IconKey;
@@ -42,4 +42,12 @@ export type TableFieldAction<Item> = {
      */
     handleClick: (item: Item) => void;
 };
+/** @deprecated Renamed to `DataGridFieldConfig`. */
+export type TableFieldConfig<Item> = DataGridFieldConfig<Item>;
+/** @deprecated Renamed to `DataGridFieldContent`. */
+export type TableFieldContent<Item> = DataGridFieldContent<Item>;
+/** @deprecated Renamed to `DataGridFieldText`. */
+export type TableFieldText = DataGridFieldText;
+/** @deprecated Renamed to `DataGridFieldAction`. */
+export type TableFieldAction<Item> = DataGridFieldAction<Item>;
 export {};

package/dist/src/{generated/components/Table/Table.utils.d.ts → components/DataGrid/DataGrid.utils.d.ts}

@@ -1,7 +1,7 @@
 import { type PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
-import { type TableFieldText, type TableFieldAction, type TableFieldContent } from "./Table.types";
-export declare function isTableFieldText<Item>(content: TableFieldContent<Item>): content is TableFieldText;
-export declare function isTableFieldAction<Item>(content: TableFieldContent<Item>): content is [TableFieldAction<Item>?, TableFieldAction<Item>?];
+import { type DataGridFieldText, type DataGridFieldAction, type DataGridFieldContent } from "./DataGrid.types";
+export declare function isTableFieldText<Item>(content: DataGridFieldContent<Item>): content is DataGridFieldText;
+export declare function isTableFieldAction<Item>(content: DataGridFieldContent<Item>): content is [DataGridFieldAction<Item>?, DataGridFieldAction<Item>?];
 export declare const shouldShowPagination: (paginationMenuProps: PaginationMenuProps | undefined) => paginationMenuProps is PaginationMenuProps;
 /**
  * This function is to be used when the data we need can be completely on the client side.

package/dist/src/{generated/components/Table → components/DataGrid}/TableBody.d.ts

@@ -1,10 +1,10 @@
-import { type TableFieldConfig } from "./Table.types";
+import { type DataGridFieldConfig } from "./DataGrid.types";
 export interface TableBody<RowData> {
     items?: RowData[];
     selectedItems?: {
         index: number;
     }[];
-    fieldConfigurations: TableFieldConfig<RowData>[];
+    fieldConfigurations: DataGridFieldConfig<RowData>[];
     emptyItemsText: string;
     emptyFieldContentText?: string;
     isLoading: boolean;

package/dist/src/components/{Table → DataGrid}/TableBodyRowDataCell.d.ts

@@ -1,7 +1,7 @@
-import { type TableFieldConfig } from "./Table.types";
+import { type DataGridFieldConfig } from "./DataGrid.types";
 export interface TableBodyRowDataCellProps<Item> {
     item: Item;
-    fieldConfig: TableFieldConfig<Item>;
+    fieldConfig: DataGridFieldConfig<Item>;
     emptyFieldContentText?: string;
 }
 export declare function TableBodyRowDataCell<Item>(props: TableBodyRowDataCellProps<Item>): import("react").JSX.Element;

package/dist/src/{generated/components/Table → components/DataGrid}/TableHeader.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
-import { type TableFieldConfig } from "./Table.types";
+import { type DataGridFieldConfig } from "./DataGrid.types";
 export type TableHeaderProps<Item> = {
-    fieldConfigurations: TableFieldConfig<Item>[];
+    fieldConfigurations: DataGridFieldConfig<Item>[];
     className?: string;
     /**
      * The combination of checkbox and action button above the table,

package/dist/src/components/DatePicker/LabeledDatePicker.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 import { type DatePickerProps } from "./DatePicker";
 type Props = DatePickerProps & {
-    label?: string;
+    /**
+     * The visible label above the date picker.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     helperText?: React.ReactNode;
     errorText?: React.ReactNode;
     /**

package/dist/src/components/Input/LabeledInput.d.ts

@@ -12,7 +12,16 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<Omit<Omit<Omi
     isClearIconVisible?: boolean;
     onClickClearField?: () => void;
 } & React.RefAttributes<HTMLInputElement>, "ref">, "width" | "icon"> & {
-    label?: string;
+    /**
+     * The visible label, linked to the input with `htmlFor`. When omitted, give
+     * the input an accessible name with `aria-label` or `aria-labelledby`.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     icon?: React.FC<IconProps>;
     /**
      * Any additional information to show underneath the input.

package/dist/src/components/Radio/LabeledRadioCardGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
-type Props = React.ComponentPropsWithoutRef<"fieldset"> & {
+type Props = Omit<React.ComponentPropsWithoutRef<"fieldset">, "title"> & {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Over how many columns the radio cards should be distributed.

package/dist/src/components/Radio/LabeledRadioGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * The orientation of the radio buttons in the group. This only has a

package/dist/src/components/Select/LabeledSelect.d.ts

@@ -8,7 +8,15 @@ export declare const LabeledSelect: React.ForwardRefExoticComponent<Omit<Omit<Om
     height?: import("../../system/Sizes").FormHeightNames;
     isError?: boolean;
 } & React.RefAttributes<HTMLSelectElement>, "ref">, "width" | "icon"> & {
-    label?: string;
+    /**
+     * The visible label above the select.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     icon?: React.FC<IconProps>;
     /**
      * Any additional information to show underneath the input.

package/dist/src/components/Select/LabeledSelectSearchable.d.ts

@@ -1,7 +1,14 @@
 import React from "react";
 import { type SelectProps } from "./Select";
 export declare const LabeledSelectSearchable: React.ForwardRefExoticComponent<Omit<SelectProps<import("./Select.types").OptionMinimal, any, import("react-select").GroupBase<import("./Select.types").OptionMinimal>>, "isError"> & {
-    label?: string;
+    /**
+     * The visible label above the select, linked to it with `aria-labelledby`.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. Keep it phrasing content (no headings or blocks) and
+     * non-interactive: all of its text becomes the select's accessible name.
+     */
+    label?: React.ReactNode;
     /**
      * Any additional information to show underneath the select.
      */

package/dist/src/components/forms/shared/FieldsetLegend.d.ts

@@ -0,0 +1,22 @@
+import { type FC, type ReactNode } from "react";
+type Props = {
+    /**
+     * A string is rendered as body text. Any other node is rendered as-is, so
+     * it can be a `Heading` or contain an icon. A `<legend>` may contain
+     * phrasing and heading content.
+     */
+    children: ReactNode;
+};
+/**
+ * The title of a labelled group (radio group, checkbox group, …), rendered as
+ * the `<legend>` of its `<fieldset>`, so it names the group.
+ *
+ * Browsers render a fieldset's legend outside of the fieldset's (flex)
+ * layout, so the legend gets `display: contents` and its content becomes the
+ * flex item instead. That content must be a single element to stay one item
+ * that follows the parent `Stack`'s gap: a string is wrapped in `Text`, a
+ * single element is rendered as-is, and anything else (a fragment, several
+ * nodes) is wrapped in a block `span`.
+ */
+export declare const FieldsetLegend: FC<Props>;
+export {};

package/dist/src/generated/components/Checkbox/LabeledCheckboxCardGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
-type Props = React.ComponentPropsWithoutRef<"fieldset"> & {
+type Props = Omit<React.ComponentPropsWithoutRef<"fieldset">, "title"> & {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Over how many columns the checkbox cards should be distributed.

package/dist/src/generated/components/Checkbox/LabeledCheckboxGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Any additional information to show underneath the radio group.

package/dist/src/{components/Table/Table.d.ts → generated/components/DataGrid/DataGrid.d.ts}

@@ -1,13 +1,13 @@
 import type { HTMLAttributes, ReactNode } from "react";
 import { type PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
-import { type TableFieldConfig } from "./Table.types";
+import { type DataGridFieldConfig } from "./DataGrid.types";
 type SelectableTableRow<Item> = {
     index: number;
     value: Item;
 };
-export interface TableProps<Item> extends HTMLAttributes<HTMLTableElement> {
+export interface DataGridProps<Item> extends HTMLAttributes<HTMLTableElement> {
     items?: Item[];
-    fieldConfigurations: TableFieldConfig<Item>[];
+    fieldConfigurations: DataGridFieldConfig<Item>[];
     emptyRowsText: string;
     emptyFieldContentText?: string;
     isLoading?: boolean;
@@ -49,7 +49,16 @@ export interface TableProps<Item> extends HTMLAttributes<HTMLTableElement> {
     onSelectedRowsChange?: (params: Array<SelectableTableRow<Item>>) => void;
 }
 /**
- * @deprecated Use `TableNew` instead.
+ * Config-driven data grid: `items` plus `fieldConfigurations` render the rows, with pagination,
+ * selection, loading and empty states built in. For a table with custom structure (colspan,
+ * grouped rows, sticky columns), use `TableNew`.
  */
-export declare function Table<Item>({ items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading, showHeader, paginationMenuProps, onRowClick, className, dataTestId, isSelectable, selectedItems, onSelectedRowsChange, rowSelectionHeaderAccessories, ...otherAttributes }: TableProps<Item>): import("react").JSX.Element;
+export declare function DataGrid<Item>({ items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading, showHeader, paginationMenuProps, onRowClick, className, dataTestId, isSelectable, selectedItems, onSelectedRowsChange, rowSelectionHeaderAccessories, ...otherAttributes }: DataGridProps<Item>): import("react").JSX.Element;
+/**
+ * @deprecated Renamed to `DataGrid`. In the next major, `Table` becomes the compositional table
+ * that is now `TableNew`.
+ */
+export declare const Table: typeof DataGrid;
+/** @deprecated Renamed to `DataGridProps`. */
+export type TableProps<Item> = DataGridProps<Item>;
 export {};

package/dist/src/generated/components/{Table/Table.types.d.ts → DataGrid/DataGrid.types.d.ts}

@@ -6,7 +6,7 @@ type TableFieldConfigBase = {
     onlyShowContentOnHovering?: boolean;
 };
 type TableFieldConfigWithContent<Item> = TableFieldConfigBase & {
-    content: (item: Item) => TableFieldContent<Item>;
+    content: (item: Item) => DataGridFieldContent<Item>;
     render?: never;
 };
 type TableFieldConfigWithComponent<Item> = TableFieldConfigBase & {
@@ -17,9 +17,9 @@ type TableFieldConfigWithComponent<Item> = TableFieldConfigBase & {
  * By adding the `content` property, it will use an opinionated layout with the <Text /> and optionally the <Tag /> component.
  * By adding the `render` property, it will render any component returned in the function, based on the item (with type) passed.
  */
-export type TableFieldConfig<Item> = TableFieldConfigWithComponent<Item> | TableFieldConfigWithContent<Item>;
-export type TableFieldContent<Item> = TableFieldText | [TableFieldAction<Item>?, TableFieldAction<Item>?];
-export interface TableFieldText {
+export type DataGridFieldConfig<Item> = TableFieldConfigWithComponent<Item> | TableFieldConfigWithContent<Item>;
+export type DataGridFieldContent<Item> = DataGridFieldText | [DataGridFieldAction<Item>?, DataGridFieldAction<Item>?];
+export interface DataGridFieldText {
     text?: string;
     description?: {
         content: string;
@@ -31,7 +31,7 @@ export interface TableFieldText {
         color: "red" | "amber" | "green" | "gray" | "blue";
     };
 }
-export type TableFieldAction<Item> = {
+export type DataGridFieldAction<Item> = {
     isDisabled?: boolean;
     title?: string;
     icon?: FC<IconProps> | IconKey;
@@ -42,4 +42,12 @@ export type TableFieldAction<Item> = {
      */
     handleClick: (item: Item) => void;
 };
+/** @deprecated Renamed to `DataGridFieldConfig`. */
+export type TableFieldConfig<Item> = DataGridFieldConfig<Item>;
+/** @deprecated Renamed to `DataGridFieldContent`. */
+export type TableFieldContent<Item> = DataGridFieldContent<Item>;
+/** @deprecated Renamed to `DataGridFieldText`. */
+export type TableFieldText = DataGridFieldText;
+/** @deprecated Renamed to `DataGridFieldAction`. */
+export type TableFieldAction<Item> = DataGridFieldAction<Item>;
 export {};

package/dist/src/{components/Table/Table.utils.d.ts → generated/components/DataGrid/DataGrid.utils.d.ts}

@@ -1,7 +1,7 @@
 import { type PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
-import { type TableFieldText, type TableFieldAction, type TableFieldContent } from "./Table.types";
-export declare function isTableFieldText<Item>(content: TableFieldContent<Item>): content is TableFieldText;
-export declare function isTableFieldAction<Item>(content: TableFieldContent<Item>): content is [TableFieldAction<Item>?, TableFieldAction<Item>?];
+import { type DataGridFieldText, type DataGridFieldAction, type DataGridFieldContent } from "./DataGrid.types";
+export declare function isTableFieldText<Item>(content: DataGridFieldContent<Item>): content is DataGridFieldText;
+export declare function isTableFieldAction<Item>(content: DataGridFieldContent<Item>): content is [DataGridFieldAction<Item>?, DataGridFieldAction<Item>?];
 export declare const shouldShowPagination: (paginationMenuProps: PaginationMenuProps | undefined) => paginationMenuProps is PaginationMenuProps;
 /**
  * This function is to be used when the data we need can be completely on the client side.

package/dist/src/{components/Table → generated/components/DataGrid}/TableBody.d.ts

@@ -1,10 +1,10 @@
-import { type TableFieldConfig } from "./Table.types";
+import { type DataGridFieldConfig } from "./DataGrid.types";
 export interface TableBody<RowData> {
     items?: RowData[];
     selectedItems?: {
         index: number;
     }[];
-    fieldConfigurations: TableFieldConfig<RowData>[];
+    fieldConfigurations: DataGridFieldConfig<RowData>[];
     emptyItemsText: string;
     emptyFieldContentText?: string;
     isLoading: boolean;

package/dist/src/generated/components/{Table → DataGrid}/TableBodyRowDataCell.d.ts

@@ -1,7 +1,7 @@
-import { type TableFieldConfig } from "./Table.types";
+import { type DataGridFieldConfig } from "./DataGrid.types";
 export interface TableBodyRowDataCellProps<Item> {
     item: Item;
-    fieldConfig: TableFieldConfig<Item>;
+    fieldConfig: DataGridFieldConfig<Item>;
     emptyFieldContentText?: string;
 }
 export declare function TableBodyRowDataCell<Item>(props: TableBodyRowDataCellProps<Item>): import("react").JSX.Element;

package/dist/src/{components/Table → generated/components/DataGrid}/TableHeader.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
-import { type TableFieldConfig } from "./Table.types";
+import { type DataGridFieldConfig } from "./DataGrid.types";
 export type TableHeaderProps<Item> = {
-    fieldConfigurations: TableFieldConfig<Item>[];
+    fieldConfigurations: DataGridFieldConfig<Item>[];
     className?: string;
     /**
      * The combination of checkbox and action button above the table,

package/dist/src/generated/components/DatePicker/LabeledDatePicker.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 import { type DatePickerProps } from "./DatePicker";
 type Props = DatePickerProps & {
-    label?: string;
+    /**
+     * The visible label above the date picker.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     helperText?: React.ReactNode;
     errorText?: React.ReactNode;
     /**

package/dist/src/generated/components/Input/LabeledInput.d.ts

@@ -12,7 +12,16 @@ export declare const LabeledInput: React.ForwardRefExoticComponent<Omit<Omit<Omi
     isClearIconVisible?: boolean;
     onClickClearField?: () => void;
 } & React.RefAttributes<HTMLInputElement>, "ref">, "width" | "icon"> & {
-    label?: string;
+    /**
+     * The visible label, linked to the input with `htmlFor`. When omitted, give
+     * the input an accessible name with `aria-label` or `aria-labelledby`.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     icon?: React.FC<IconProps>;
     /**
      * Any additional information to show underneath the input.

package/dist/src/generated/components/Radio/LabeledRadioCardGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
-type Props = React.ComponentPropsWithoutRef<"fieldset"> & {
+type Props = Omit<React.ComponentPropsWithoutRef<"fieldset">, "title"> & {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * Over how many columns the radio cards should be distributed.

package/dist/src/generated/components/Radio/LabeledRadioGroup.d.ts

@@ -1,7 +1,15 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
-    title?: string;
+    /**
+     * The group's title, rendered as the fieldset's `<legend>`. A string is
+     * rendered as body text; pass a node for anything else, such as a
+     * `Heading` or an info icon next to the text.
+     *
+     * All of the title's text names the group, including the label of an
+     * (info) button inside it.
+     */
+    title?: React.ReactNode;
     className?: string;
     /**
      * The orientation of the radio buttons in the group. This only has a

package/dist/src/generated/components/Select/LabeledSelect.d.ts

@@ -8,7 +8,15 @@ export declare const LabeledSelect: React.ForwardRefExoticComponent<Omit<Omit<Om
     height?: import("../../system/Sizes").FormHeightNames;
     isError?: boolean;
 } & React.RefAttributes<HTMLSelectElement>, "ref">, "width" | "icon"> & {
-    label?: string;
+    /**
+     * The visible label above the select.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. It's rendered inside a `<label>`, so keep it phrasing content
+     * (no headings or blocks) and non-interactive: interactive content would
+     * become part of the field's accessible name.
+     */
+    label?: React.ReactNode;
     icon?: React.FC<IconProps>;
     /**
      * Any additional information to show underneath the input.

package/dist/src/generated/components/Select/LabeledSelectSearchable.d.ts

@@ -1,7 +1,14 @@
 import React from "react";
 import { type SelectProps } from "./Select";
 export declare const LabeledSelectSearchable: React.ForwardRefExoticComponent<Omit<SelectProps<import("./Select.types").OptionMinimal, any, import("react-select").GroupBase<import("./Select.types").OptionMinimal>>, "isError"> & {
-    label?: string;
+    /**
+     * The visible label above the select, linked to it with `aria-labelledby`.
+     *
+     * Besides a string, this can be a node, for example to add an icon next to
+     * the text. Keep it phrasing content (no headings or blocks) and
+     * non-interactive: all of its text becomes the select's accessible name.
+     */
+    label?: React.ReactNode;
     /**
      * Any additional information to show underneath the select.
      */

package/dist/src/generated/components/forms/shared/FieldsetLegend.d.ts

@@ -0,0 +1,22 @@
+import { type FC, type ReactNode } from "react";
+type Props = {
+    /**
+     * A string is rendered as body text. Any other node is rendered as-is, so
+     * it can be a `Heading` or contain an icon. A `<legend>` may contain
+     * phrasing and heading content.
+     */
+    children: ReactNode;
+};
+/**
+ * The title of a labelled group (radio group, checkbox group, …), rendered as
+ * the `<legend>` of its `<fieldset>`, so it names the group.
+ *
+ * Browsers render a fieldset's legend outside of the fieldset's (flex)
+ * layout, so the legend gets `display: contents` and its content becomes the
+ * flex item instead. That content must be a single element to stay one item
+ * that follows the parent `Stack`'s gap: a string is wrapped in `Text`, a
+ * single element is rendered as-is, and anything else (a fragment, several
+ * nodes) is wrapped in a block `span`.
+ */
+export declare const FieldsetLegend: FC<Props>;
+export {};

package/dist/src/generated/index.d.ts

@@ -57,10 +57,10 @@ export { Tooltip, TooltipProvider } from "./components/Tooltip";
 export { Tabs } from "./components/Tabs";
 export { PrimaryTabBar } from "./components/PrimaryTabBar/PrimaryTabBar";
 export { default as Line } from "./components/Line/Line";
-export { Table, type TableProps } from "./components/Table/Table";
-export { prepareClientSidePagination } from "./components/Table/Table.utils";
+export { DataGrid, type DataGridProps, Table, type TableProps, } from "./components/DataGrid/DataGrid";
+export { prepareClientSidePagination } from "./components/DataGrid/DataGrid.utils";
 export { TableNew } from "./components/TableNew/TableNew";
-export { type TableFieldConfig, type TableFieldContent, type TableFieldText, type TableFieldAction, } from "./components/Table/Table.types";
+export { type DataGridFieldConfig, type DataGridFieldContent, type DataGridFieldText, type DataGridFieldAction, type TableFieldConfig, type TableFieldContent, type TableFieldText, type TableFieldAction, } from "./components/DataGrid/DataGrid.types";
 export { LoadingIndicator, type LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
 export { CheckboxList, type CheckboxListProps, } from "./components/CheckboxList/CheckboxList";
 export { NavLayout, type Props as NavLayoutProps, } from "./components/NavMenu/NavLayout";

package/dist/src/index.d.ts

@@ -57,10 +57,10 @@ export { Tooltip, TooltipProvider } from "./components/Tooltip";
 export { Tabs } from "./components/Tabs";
 export { PrimaryTabBar } from "./components/PrimaryTabBar/PrimaryTabBar";
 export { default as Line } from "./components/Line/Line";
-export { Table, type TableProps } from "./components/Table/Table";
-export { prepareClientSidePagination } from "./components/Table/Table.utils";
+export { DataGrid, type DataGridProps, Table, type TableProps, } from "./components/DataGrid/DataGrid";
+export { prepareClientSidePagination } from "./components/DataGrid/DataGrid.utils";
 export { TableNew } from "./components/TableNew/TableNew";
-export { type TableFieldConfig, type TableFieldContent, type TableFieldText, type TableFieldAction, } from "./components/Table/Table.types";
+export { type DataGridFieldConfig, type DataGridFieldContent, type DataGridFieldText, type DataGridFieldAction, type TableFieldConfig, type TableFieldContent, type TableFieldText, type TableFieldAction, } from "./components/DataGrid/DataGrid.types";
 export { LoadingIndicator, type LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
 export { CheckboxList, type CheckboxListProps, } from "./components/CheckboxList/CheckboxList";
 export { NavLayout, type Props as NavLayoutProps, } from "./components/NavMenu/NavLayout";