@epam/ai-dial-ui-kit 0.14.0-dev.2 → 0.14.0-dev.22

package/dist/src/components/New/CollapsibleSidebar/CollapsibleSidebar.d.ts

@@ -0,0 +1,82 @@
+import { FC, MouseEvent, ReactNode } from 'react';
+export interface CollapsibleSidebarProps {
+    /** Content shown while the sidebar is expanded. */
+    children: ReactNode;
+    /** Name of the panel, rendered as vertical text while collapsed. */
+    title: ReactNode;
+    /** Width in px while expanded. Defaults to `280`. */
+    width?: number;
+    /** Width in px while collapsed. Defaults to `48`. */
+    collapsedWidth?: number;
+    /** Controlled open state. When provided, the component becomes controlled. */
+    isOpened?: boolean;
+    /** Initial open state when uncontrolled. Defaults to `true`. */
+    defaultOpened?: boolean;
+    /** Fired when the toggle is clicked. Receives the next open state. */
+    onToggle?: (nextOpened: boolean, e: MouseEvent<HTMLButtonElement>) => void;
+    /** Extra controls rendered in the footer next to the toggle, expanded only. */
+    additionalButtons?: ReactNode;
+    /** Accessible name of the sidebar region. Defaults to `'Sidebar'`. */
+    ariaLabel?: string;
+    /** Name and tooltip of the toggle while expanded. Defaults to `'Collapse sidebar'`. */
+    collapseLabel?: string;
+    /** Name and tooltip of the toggle while collapsed. Defaults to `'Expand sidebar'`. */
+    expandLabel?: string;
+    /** Additional CSS classes for the outer container. */
+    className?: string;
+    /** Additional CSS classes for the vertical title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the content region. */
+    contentClassName?: string;
+    /** Additional CSS classes for the footer holding the toggle. */
+    footerClassName?: string;
+}
+/**
+ * A side panel that collapses to a narrow rail carrying its title vertically.
+ * aliases: ToggleSidebar|CollapsiblePanel|SidePanel
+ * Design system 2.0
+ *
+ * Works as a controlled component when `isOpened` is provided, otherwise it keeps
+ * its own state from `defaultOpened`. The width is derived from the open state, so
+ * changing `width` on an open sidebar takes effect immediately.
+ *
+ * The panel is an `aside` named by `ariaLabel`, and the toggle is a real
+ * `aria-expanded` control pointing at the content region. Content stays mounted
+ * while collapsed — hidden with `display: none` — so scroll position and any
+ * form state inside it survive a collapse.
+ *
+ * The container paints no background and no radius: it is meant to sit on the
+ * surface it belongs to. Pass `className` for either.
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleSidebar title="Filters" width={320}>
+ *   <FilterForm />
+ * </CollapsibleSidebar>
+ *
+ * <CollapsibleSidebar
+ *   title="Filters"
+ *   isOpened={opened}
+ *   onToggle={setOpened}
+ * >
+ *   <FilterForm />
+ * </CollapsibleSidebar>
+ * ```
+ *
+ * @param children - Content shown while the sidebar is expanded.
+ * @param title - Name of the panel, rendered as vertical text while collapsed.
+ * @param [width=280] - Width in px while expanded.
+ * @param [collapsedWidth=48] - Width in px while collapsed.
+ * @param [isOpened] - Controlled open state.
+ * @param [defaultOpened=true] - Initial open state when uncontrolled.
+ * @param [onToggle] - Fired when the toggle is clicked. Receives the next open state.
+ * @param [additionalButtons] - Extra footer controls, rendered while expanded.
+ * @param [ariaLabel='Sidebar'] - Accessible name of the sidebar region.
+ * @param [collapseLabel='Collapse sidebar'] - Name and tooltip of the toggle while expanded.
+ * @param [expandLabel='Expand sidebar'] - Name and tooltip of the toggle while collapsed.
+ * @param [className] - Additional CSS classes for the outer container.
+ * @param [titleClassName] - Additional CSS classes for the vertical title.
+ * @param [contentClassName] - Additional CSS classes for the content region.
+ * @param [footerClassName] - Additional CSS classes for the footer.
+ */
+export declare const CollapsibleSidebar: FC<CollapsibleSidebarProps>;

package/dist/src/components/New/Dropdown/constants.d.ts

@@ -2,8 +2,10 @@ export declare const dropdownBaseClassName: string;
 export declare const dropdownListBaseClassName: string;
 export declare const dropdownSubMenuClassName: string;
 export declare const dropdownItemBaseClassName: string;
+/** Tint marking a checked multiselect row. */
+export declare const dropdownItemSelectedClassName = "bg-control-accent-alpha";
 export declare const dropdownItemDisabledClassName: string;
 export declare const dropdownItemDangerClassName = "text-error";
-export declare const dropdownDividerClassName = "my-1 border-t border-secondary";
+export declare const dropdownDividerClassName = "my-1 border-t border-tertiary";
 export declare const dropdownGap = 4;
 export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;

package/dist/src/components/New/EllipsisTooltip/EllipsisTooltip.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from 'react';
+import { TooltipContainerOptions } from '../Tooltip/TooltipContext';
+export interface EllipsisTooltipProps extends TooltipContainerOptions {
+    text: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    hideTooltip?: boolean;
+    id?: string;
+    customTooltipContent?: ReactNode;
+}
+/**
+ * Single-line text with a CSS ellipsis that reveals the full string in a
+ * tooltip **only when it is actually clipped**.
+ * aliases: TruncatedText|TruncationTooltip
+ * Design system 2.0
+ *
+ * Text that fits gets no tooltip at all, so a row of labels does not sprout
+ * tooltips that repeat what is already on screen.
+ *
+ * The width has to be finite for anything to truncate: the element is a
+ * `min-w-0`, `flex-1` block, and `className` sets the width it should fit into.
+ *
+ * a11y: while truncated, the full string is exposed as the element's
+ * `aria-label`, so a screen reader reads the whole label even though the
+ * tooltip itself renders nothing on mobile screens.
+ *
+ * @example
+ * ```tsx
+ * <EllipsisTooltip text="Very long message that will be truncated" />
+ *
+ * <EllipsisTooltip
+ *   text={<span className="dial-small-semi-text">Custom node</span>}
+ *   className="max-w-[160px]"
+ * />
+ *
+ * <EllipsisTooltip text="Tooltip suppressed even when clipped" hideTooltip />
+ * ```
+ *
+ * @param text - The text or node to display, truncated with an ellipsis when it does not fit
+ * @param [className] - Additional CSS classes for the text element, typically its width
+ * @param [contentClassName] - Additional CSS classes for the tooltip bubble
+ * @param [hideTooltip=false] - Suppress the tooltip even while the text is truncated
+ * @param [id] - `id` of the text element
+ * @param [customTooltipContent] - Shown instead of the full text while truncated
+ * @param [placement=TooltipPlacement.Bottom] - Side of the text the tooltip is placed on
+ * @param [initialOpen=false] - Whether the tooltip starts open (uncontrolled only)
+ * @param [isTriggerClickable=false] - Restrict hover handling to mouse input, ignoring touch
+ * @param [open] - Controlled open state; disables the hover and focus triggers
+ * @param [onOpenChange] - Callback fired when the open state should change
+ */
+export declare const EllipsisTooltip: FC<EllipsisTooltipProps>;

package/dist/src/components/New/EllipsisTooltip/use-truncation.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+/**
+ * Reports whether an element's text is being cut off by `text-overflow`, so a
+ * tooltip can carry the full string only when there is something to reveal.
+ *
+ * Truncation is a layout fact, not a prop: it depends on the width the element
+ * ends up with. The measurement therefore re-runs on every text change, on
+ * window resize, and — since a parent can resize without the window doing so —
+ * whenever the element's own box changes size.
+ *
+ * All of that goes through the shared observer in
+ * `@/utils/element-size-observer`, so a screen full of truncating labels costs
+ * one `ResizeObserver`, one resize listener and one animation frame in total
+ * rather than a set per label.
+ *
+ * @param text - The rendered content; a change to it re-measures
+ * @returns `ref` to attach to the truncating element, whether it `isTruncated`,
+ * its `textContent` (the full string even when `text` is a node), and
+ * `remeasure` to force a fresh read before an interaction reads the result
+ */
+export declare const useTruncation: <T extends HTMLElement>(text: ReactNode) => {
+    ref: import('react').RefObject<T | null>;
+    isTruncated: boolean;
+    textContent: string;
+    remeasure: () => void;
+};

package/dist/src/components/New/Grid/Grid.d.ts

@@ -0,0 +1,124 @@
+import { ColDef, GridApi, GridOptions } from 'ag-grid-community';
+import { ReactNode } from 'react';
+import { DropdownItem } from '../../../models/dropdown';
+import { GridSelectionMode } from '../../../models/selection-mode';
+/** Column id of the selection column this component prepends itself. */
+export declare const GRID_SELECTION_COLUMN_ID = "dial-kit-grid-selection";
+export interface GridProps<T extends object = Record<string, unknown>> {
+    /** Column definitions, in ag-Grid `ColDef` format. */
+    columnDefs?: ColDef<T>[];
+    /** Rows to display. */
+    rowData?: T[];
+    /** Extra ag-Grid options, merged over the defaults. */
+    additionalGridOptions?: GridOptions<T>;
+    /** Items of the row context menu. Omit it to render no context menu at all. */
+    getContextMenuItems?: (row: T) => DropdownItem[];
+    /** Additional CSS classes for the grid container. */
+    className?: string;
+    /** Accessible name of the grid region. Defaults to `'Data grid'`. */
+    ariaLabel?: string;
+    /** Whether custom cell renderers are wrapped with context-menu support. */
+    wrapCustomCellRenderers?: boolean | ((col: ColDef<T>) => boolean);
+    /** Rows that cannot be selected. Ids must match what `getRowId` returns. */
+    disabledRowIds?: Set<string>;
+    /** Controlled selection: ids of the selected rows. */
+    selectedRowIds?: Set<string>;
+    /** Fired when the grid API becomes available. */
+    onGridApiChange?: (api: GridApi<T>) => void;
+    /** Fired when the selection changes, with the selected ids and rows. */
+    onSelectionChange?: (selectedRowIds: Set<string>, selectedRows: T[]) => void;
+    /** Extracts the unique id of a row. Defaults to its `id` field. */
+    getRowId?: (row: T) => string;
+    /** Tints odd rows. Defaults to `false`. */
+    alternateOddRowColors?: boolean;
+    /** Placeholder of the column filter inputs. */
+    filterPlaceholder?: string;
+    /** Illustration of the empty state. */
+    emptyStateIcon?: ReactNode;
+    /** Headline of the empty state. */
+    emptyStateTitle?: string;
+    /** Secondary line of the empty state. */
+    emptyStateDescription?: string;
+    /** Shows the loading overlay. Defaults to `false`. */
+    loading?: boolean;
+    /** Draws a border around the grid. Defaults to `true`. */
+    wrapperBorder?: boolean;
+    /** Hides the vertical borders between header cells. Defaults to `false`. */
+    withoutHeaderBorders?: boolean;
+    /** Renders a selection column of checkboxes or radios. */
+    selectionMode?: GridSelectionMode;
+    /** Keeps the context menu on a row that cannot be selected. */
+    allowDisabledContextMenu?: boolean;
+    /** Accessible name of a row's selection control. Defaults to `'Select row'`. */
+    selectRowLabel?: (row: T) => string;
+    /** Accessible name of the select-all control. Defaults to `'Select all rows'`. */
+    selectAllLabel?: string;
+}
+/**
+ * A data grid built on ag-Grid, wired to the 2.0 tokens and controls.
+ * aliases: DataTable|TableGrid|DataGrid
+ * Design system 2.0
+ *
+ * Comes preconfigured with case-insensitive sorting, floating column filters,
+ * columns sized to the available width, a row context menu, truncation
+ * tooltips, and an empty state.
+ *
+ * The selection column renders the 2.0 `Checkbox` and `Radio` instead of
+ * ag-Grid's own inputs, so selection looks and behaves like every other control
+ * in the kit and the select-all reaches the `mixed` state when the selection is
+ * partial. The column stays faded out until the row is hovered, something is
+ * selected, or the keyboard reaches it.
+ *
+ * Selection works controlled or uncontrolled: pass `selectedRowIds` to own it,
+ * or read `onSelectionChange` and let the grid keep its own. A `sort` declared
+ * on a column is honoured — 1.0 stripped it on startup.
+ *
+ * @example
+ * ```tsx
+ * interface Product { id: string; name: string; price: number }
+ *
+ * const columns: ColDef<Product>[] = [
+ *   { field: 'name', headerName: 'Product', flex: 1 },
+ *   { field: 'price', headerName: 'Price', width: 120 },
+ * ];
+ *
+ * <Grid<Product> columnDefs={columns} rowData={products} />
+ *
+ * // With selection and a context menu
+ * <Grid<Product>
+ *   columnDefs={columns}
+ *   rowData={products}
+ *   selectionMode={GridSelectionMode.MULTIPLE}
+ *   selectedRowIds={selectedIds}
+ *   onSelectionChange={(ids) => setSelectedIds(ids)}
+ *   selectRowLabel={(row) => `Select ${row.name}`}
+ *   getContextMenuItems={(row) => [{ key: 'edit', label: 'Edit' }]}
+ * />
+ * ```
+ *
+ * @param [columnDefs] - Column definitions, in ag-Grid `ColDef` format.
+ * @param [rowData] - Rows to display.
+ * @param [additionalGridOptions] - Extra ag-Grid options, merged over the defaults.
+ * @param [getContextMenuItems] - Items of the row context menu. Omit for no menu.
+ * @param [className] - Additional CSS classes for the grid container.
+ * @param [ariaLabel='Data grid'] - Accessible name of the grid region.
+ * @param [wrapCustomCellRenderers=true] - Whether custom renderers get context-menu support.
+ * @param [disabledRowIds] - Rows that cannot be selected.
+ * @param [selectedRowIds] - Controlled selection: ids of the selected rows.
+ * @param [onGridApiChange] - Fired when the grid API becomes available.
+ * @param [onSelectionChange] - Fired when the selection changes.
+ * @param [getRowId] - Extracts the unique id of a row. Defaults to its `id` field.
+ * @param [alternateOddRowColors=false] - Tints odd rows.
+ * @param [filterPlaceholder='Enter value'] - Placeholder of the column filter inputs.
+ * @param [emptyStateIcon] - Illustration of the empty state.
+ * @param [emptyStateTitle='No results found'] - Headline of the empty state.
+ * @param [emptyStateDescription] - Secondary line of the empty state.
+ * @param [loading=false] - Shows the loading overlay.
+ * @param [wrapperBorder=true] - Draws a border around the grid.
+ * @param [withoutHeaderBorders=false] - Hides the vertical borders between header cells.
+ * @param [selectionMode] - Renders a selection column of checkboxes or radios.
+ * @param [allowDisabledContextMenu=false] - Keeps the context menu on a non-selectable row.
+ * @param [selectRowLabel] - Accessible name of a row's selection control.
+ * @param [selectAllLabel='Select all rows'] - Accessible name of the select-all control.
+ */
+export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, }: GridProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/New/Grid/components/SelectionCell.d.ts

@@ -0,0 +1,21 @@
+import { ICellRendererParams } from 'ag-grid-community';
+import { GridSelectionMode } from '../../../../models/selection-mode';
+export interface SelectionCellProps<T> {
+    params: ICellRendererParams<T>;
+    mode: GridSelectionMode;
+    /** Accessible name of the control; a row-specific name is far more useful. */
+    label: string;
+    /** Shared radio group name, so single mode behaves as one group. */
+    radioName: string;
+    rowId: string;
+    disabled?: boolean;
+}
+/**
+ * The 2.0 {@link Checkbox} or {@link Radio} rendered in the selection column,
+ * in place of ag-Grid's own checkbox.
+ *
+ * The row node is the source of truth: the control subscribes to its
+ * `rowSelected` event, so a selection made anywhere — another cell, the header,
+ * or the `selectedRowIds` prop — is reflected here without refreshing the cell.
+ */
+export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/New/Grid/components/SelectionHeader.d.ts

@@ -0,0 +1,14 @@
+import { IHeaderParams } from 'ag-grid-community';
+export interface SelectionHeaderProps<T> extends IHeaderParams<T> {
+    /** Accessible name of the select-all control. */
+    label: string;
+}
+/**
+ * Select-all {@link Checkbox} for the selection column, in place of ag-Grid's
+ * own header checkbox.
+ *
+ * It derives its state from the grid rather than from a prop: partly selected
+ * rows put it in the `mixed` state, and disabled rows are excluded from the
+ * count so a grid whose selectable rows are all selected still reads as full.
+ */
+export declare const SelectionHeader: <T>({ api, label, }: SelectionHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/New/Grid/constants.d.ts

@@ -0,0 +1,61 @@
+/** Root class of the 2.0 grid; every rule in `styles/grid.scss` sits under it. */
+export declare const GRID_ROOT_CLASS = "dial-kit-grid";
+/** Present only while a selection column is rendered. Drives its reveal. */
+export declare const GRID_WITH_SELECTION_CLASS = "dial-kit-grid-with-selection";
+export declare const GRID_WITHOUT_HEADER_BORDERS_CLASS = "dial-kit-grid-without-header-borders";
+/** Cell of the selection column: faded out until the row is hovered. */
+export declare const GRID_ROW_SELECT_CLASS = "dial-kit-grid-row-select";
+/** Header of the selection column: faded out until the header is hovered. */
+export declare const GRID_HEADER_SELECT_CLASS = "dial-kit-grid-header-select";
+/**
+ * Pins the whole selection column visible — on touch, or once something is
+ * selected. It sits on the container rather than on the column definition:
+ * ag-Grid rebuilds every cell when a column definition changes, which would
+ * pull the DOM out from under the click that caused the selection.
+ */
+export declare const GRID_SELECTION_VISIBLE_CLASS = "dial-kit-grid-selection-visible";
+/** Right-aligns a column. Applied by the consumer through `cellClass`. */
+export declare const GRID_ALIGN_RIGHT_CLASS = "dial-kit-grid-align-right";
+/** Height of both a body row and the header row. */
+export declare const ROW_HEIGHT = 40;
+/**
+ * ag-Grid theme parameters, resolved from the 2.0 colour tokens with the same
+ * literal fallbacks the Tailwind config carries, so a consumer that defines no
+ * CSS variables still gets the intended palette.
+ *
+ * Hover sits one step up the accent-alpha ramp from the selected tint, so a
+ * hovered selected row still reads as hovered — the same relationship the 2.0
+ * dropdown and select rows use.
+ */
+export declare const GRID_THEME_PARAMS: {
+    accentColor: string;
+    backgroundColor: string;
+    oddRowBackgroundColor: string;
+    selectedRowBackgroundColor: string;
+    rowHoverColor: string;
+    borderColor: string;
+    rowBorder: string;
+    headerRowBorder: string;
+    headerColumnBorder: string;
+    chromeBackgroundColor: string;
+    foregroundColor: string;
+    headerTextColor: string;
+    browserColorScheme: string;
+    headerFontSize: number;
+    headerFontWeight: number;
+    fontSize: number;
+    fontFamily: string;
+    spacing: number;
+    borderRadius: number;
+    wrapperBorderRadius: number;
+};
+/**
+ * Sources reported with a selection change. `checkboxSelected` marks the ones
+ * the user made in the selection column, the other two mark selections the
+ * component applied itself while syncing to `selectedRowIds` or new row data.
+ */
+export declare enum SelectionEventSourceType {
+    API = "api",
+    ROW_DATA_CHANGED = "rowDataChanged",
+    CHECKBOX_SELECTED = "checkboxSelected"
+}

package/dist/src/components/New/Grid/renderers/DateCellRenderer.d.ts

@@ -0,0 +1,48 @@
+import { ICellRendererParams } from 'ag-grid-community';
+import { FC } from 'react';
+import { DateValue } from '../../../../utils/grid-date';
+export type { DateValue };
+export interface DateCellRendererProps extends Partial<ICellRendererParams<Record<string, unknown>, DateValue>> {
+    /** The date to render. A pure integer string is read as epoch milliseconds. */
+    value?: DateValue | null;
+    /** Locale used for formatting. Defaults to `'en-US'`. */
+    locale?: string;
+    /** `Intl.DateTimeFormat` options. */
+    options?: Intl.DateTimeFormatOptions;
+    /** Rendered when the value carries no usable date. */
+    emptyPlaceholder?: string;
+    /** Additional CSS classes for the cell. */
+    className?: string;
+    /** Suppresses the truncation tooltip. */
+    hideTooltip?: boolean;
+}
+/**
+ * Date cell for the 2.0 {@link Grid}, usable as an ag-Grid `cellRenderer`.
+ * aliases: DateCell|TimestampCell
+ * Design system 2.0
+ *
+ * Formats the value with `Intl.DateTimeFormat` and wraps it in a
+ * {@link EllipsisTooltip}, so the full string is only offered when the column is
+ * too narrow to show it. A valid date is rendered inside a `<time datetime>`,
+ * which gives assistive tech and crawlers the machine-readable value next to
+ * the localised one.
+ *
+ * @example
+ * ```tsx
+ * // As a column renderer
+ * { field: 'createdAt', cellRenderer: DateCellRenderer,
+ *   cellRendererParams: { options: { timeZone: 'UTC' } } }
+ *
+ * // Directly
+ * <DateCellRenderer value="2025-07-20T00:00:00Z" options={{ timeZone: 'UTC' }} />
+ * <DateCellRenderer value={1752969600000} /> // epoch milliseconds
+ * ```
+ *
+ * @param [value] - The date to render.
+ * @param [locale='en-US'] - Locale used for formatting.
+ * @param [options] - `Intl.DateTimeFormat` options, e.g. `timeZone`.
+ * @param [emptyPlaceholder] - Rendered when the value carries no usable date.
+ * @param [className] - Additional CSS classes for the cell.
+ * @param [hideTooltip=false] - Suppresses the truncation tooltip.
+ */
+export declare const DateCellRenderer: FC<DateCellRendererProps>;

package/dist/src/components/New/Grid/renderers/constants.d.ts

@@ -0,0 +1,5 @@
+import { ColDef } from 'ag-grid-community';
+export declare const DEFAULT_LOCALE = "en-US";
+export declare const DEFAULT_DATE_FORMAT_OPTIONS: Intl.DateTimeFormatOptions;
+/** Fixed, unsortable and unfilterable: the column holds a control, not data. */
+export declare const SELECTION_COL_DEF: ColDef;

package/dist/src/components/New/Highlight/Highlight.d.ts

@@ -7,7 +7,7 @@ export interface HighlightProps {
     query: string;
     /** Optional class name for the highlighted segment. */
     markClassName?: string;
-    /** Optional class name forwarded to the `DialEllipsisTooltip` container. */
+    /** Optional class name forwarded to the `EllipsisTooltip` container. */
     className?: string;
     /** Maximum number of lines to display before truncating. Use `1` for single-line ellipsis truncation (e.g. list rows). Defaults to `2`. */
     maxLines?: number;

package/dist/src/components/New/IconButton/IconButton.d.ts

@@ -1,14 +1,14 @@
 import { ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from 'react';
 import { ButtonAppearance, ButtonVariant } from '../../../types/button';
-import { DialTooltipProps } from '../../Tooltip/Tooltip';
 import { ElementSize } from '../../../types/size';
-type TooltipProps = Omit<DialTooltipProps, 'children'>;
+import { TooltipProps } from '../Tooltip/Tooltip';
+type IconButtonTooltipProps = Omit<TooltipProps, 'children'>;
 export interface IconButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ElementSize;
     appearance?: ButtonAppearance;
     icon: ReactNode;
-    tooltipProps?: TooltipProps;
+    tooltipProps?: IconButtonTooltipProps;
 }
 /**
  * A Icon Button component with flexible icon and text positioning
@@ -41,7 +41,7 @@ export interface IconButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<
  * @param [variant] - Defines the visual style of the button
  * @param [appearance=ButtonAppearance.Solid] - Defines the type of the button
  * @param [size=ElementSize.Standard] - Defines the size of the button
- * @param [tooltip] - The content of the icon button tooltip
+ * @param [tooltipProps] - Props of the 2.0 {@link Tooltip} wrapping the button
  * @param icon - Icon display
  */
 export declare const IconButton: FC<IconButtonProps>;

package/dist/src/components/New/Input/Button/constants.d.ts

@@ -1 +1 @@
-export declare const inputButtonClassName = "bg-control-neutral-active flex items-center justify-center enabled:text-secondary enabled:hover:text-control-blue-hover enabled:active:bg-control-accent-alpha-active enabled:hover:bg-control-accent-alpha-hover enabled:active:text-control-blue-active";
+export declare const inputButtonClassName = "bg-control-neutral-active flex items-center justify-center enabled:text-secondary enabled:hover:text-control-accent-hover enabled:active:bg-control-accent-alpha-active enabled:hover:bg-control-accent-alpha-hover enabled:active:text-control-accent-active";

package/dist/src/components/New/Label/Label.d.ts

@@ -6,6 +6,7 @@ export interface LabelProps extends NativeLabelProps {
     required?: boolean;
     caption?: string;
     size?: ElementSize;
+    containerClassName?: string;
 }
 /**
  * A label component
@@ -28,6 +29,10 @@ export interface LabelProps extends NativeLabelProps {
  * plus visually hidden text so the requirement is announced too.
  * @param [caption] - Explanatory text, exposed through an info button next to the label
  * @param [size] - The size of the label, which can be 'small', 'medium', or 'large'.
+ * @param [containerClassName] - Additional classes for the wrapper holding the
+ * `<label>` and its info button. Needed when the label is a flex item that has
+ * to shrink: a wrapper left at `min-width: auto` cannot, so its text overflows
+ * instead of truncating.
  */
 export declare const Label: FC<LabelProps>;
 export {};

package/dist/src/components/New/NoDataContent/NoDataContent.d.ts

@@ -0,0 +1,48 @@
+import { FC, ReactNode } from 'react';
+export interface NoDataContentProps {
+    /** Headline of the empty state. */
+    title: ReactNode;
+    /** Optional secondary line under the title. */
+    description?: ReactNode;
+    /** Illustration above the title. Defaults to a struck-through clipboard. */
+    icon?: ReactNode;
+    /**
+     * Announces the empty state to assistive tech as it appears. Turn it on where
+     * the content replaces a list the user has just filtered or searched.
+     */
+    live?: boolean;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+}
+/**
+ * Message shown in place of a list, table or grid that has nothing to show.
+ * aliases: EmptyState|NoResults|ZeroState
+ * Design system 2.0
+ *
+ * Fills its container and centres an illustration, a headline and an optional
+ * secondary line. The icon is decorative, so it is hidden from assistive tech
+ * and the text carries the message on its own.
+ *
+ * @example
+ * ```tsx
+ * <NoDataContent
+ *   title="No results found"
+ *   description="Try a different search term."
+ * />
+ *
+ * <NoDataContent title="Nothing here yet" icon={<IconInbox size={60} />} live />
+ * ```
+ *
+ * @param title - Headline of the empty state.
+ * @param [description] - Optional secondary line under the title.
+ * @param [icon] - Illustration above the title. Defaults to a struck-through clipboard.
+ * @param [live=false] - Announce the empty state to assistive tech as it appears.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the title.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ */
+export declare const NoDataContent: FC<NoDataContentProps>;

package/dist/src/components/New/Notification/Notification.d.ts

@@ -50,6 +50,13 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  *   title="Processing"
  *   message="Please wait..."
  * />
+ *
+ * <Notification
+ *   variant={NotificationVariant.General}
+ *   type={NotificationType.SectionMessage}
+ *   title="Title"
+ *   message="Description text example"
+ * />
  * ```
  *
  * @param [variant=NotificationVariant.Info] - Defines the visual style and icon of the alert

package/dist/src/components/New/Notification/NotificationWrapper.d.ts

@@ -7,9 +7,11 @@ export declare const InfoToastNotification: FC<NotificationVariantProps>;
 export declare const SuccessToastNotification: FC<NotificationVariantProps>;
 export declare const WarningToastNotification: FC<NotificationVariantProps>;
 export declare const LoadingToastNotification: FC<NotificationVariantProps>;
+export declare const GeneralToastNotification: FC<NotificationVariantProps>;
 export declare const ErrorMessageNotification: FC<NotificationTypeProps>;
 export declare const InfoMessageNotification: FC<NotificationTypeProps>;
 export declare const SuccessMessageNotification: FC<NotificationTypeProps>;
 export declare const WarningMessageNotification: FC<NotificationTypeProps>;
 export declare const LoadingMessageNotification: FC<NotificationTypeProps>;
+export declare const GeneralMessageNotification: FC<NotificationTypeProps>;
 export {};