@epam/ai-dial-ui-kit 0.13.0-dev.57 → 0.13.0-dev.60

package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -12,4 +12,7 @@ export interface DialBreadcrumbItemProps extends Omit<HTMLAttributes<HTMLLIEleme
     separator?: ReactNode;
     onBeforeNavigate?: NavigationGuard;
 }
+/**
+ * Design system 1.0
+ */
 export declare const DialBreadcrumbItem: FC<DialBreadcrumbItemProps>;

package/dist/src/components/Button/Button.d.ts

@@ -17,6 +17,7 @@ export interface DialButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<
 /**
  * A Button component with flexible icon and text positioning
  * aliases: ActionButton|CallToAction
+ * Design system 1.0
  *
  * @example
  * ```tsx

package/dist/src/components/Button/ButtonWrappers.d.ts

@@ -4,6 +4,7 @@ type ButtonVariantProps = Omit<DialButtonProps, 'variant'>;
 type ButtonAppearanceProps = Omit<DialButtonProps, 'appearance'>;
 /**
  * A Primary Button component with predefined primary variant
+ * Design system 1.0
  * @example
  * ```tsx
  * <DialPrimaryButton

package/dist/src/components/ButtonDropdown/ButtonDropdown.d.ts

@@ -7,6 +7,7 @@ export interface DialButtonDropdownProps extends Omit<DialButtonProps, 'iconAfte
 /**
  * A Button dropdown component based on DialDropdown component
  * aliases: SplitButton|MenuButton
+ * Design system 1.0
  *
  * @example
  * ```tsx

package/dist/src/components/CaptionText/CaptionText.d.ts

@@ -7,6 +7,7 @@ export interface DialCaptionTextProps extends HTMLAttributes<HTMLSpanElement> {
 /**
  * A component for displaying error messages with consistent styling
  * aliases: HelperText|ValidationText
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -11,6 +11,7 @@ export interface DialCheckboxProps extends Omit<LabelHTMLAttributes<HTMLLabelEle
 /**
  * A Checkbox component with styling options
  * aliases: ToggleCheckbox|MultiSelectOption
+ * Design system 1.0
  *
  * @example
  * ```tsx

package/dist/src/components/CloseButton/CloseButton.d.ts

@@ -9,6 +9,7 @@ export interface DialCloseButtonProps {
 /**
  * A Close button component with a customizable icon and accessible label.
  * aliases: DismissButton|ExitButton
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -14,6 +14,7 @@ export interface DialCollapsibleSidebarProps {
 /**
  * A collapsible horizontal bar component that allows toggling between an expanded and collapsed state.
  * aliases: ToggleSidebar|CollapsiblePanel
+ * Design system 1.0
  *
  * It supports customizable width, title, icons, additional buttons, and flexible styling options.
  *

package/dist/src/components/ConfirmationPopup/ConfirmationPopup.d.ts

@@ -17,6 +17,7 @@ export interface DialConfirmationPopupProps extends DialPopupProps {
 /**
  * A confirmation dialog built with DialPopup and DialButton.
  * aliases: ConfirmDialog|WarningDialog
+ * Design system 1.0
  *
  * Provides an accessible modal with a title, optional description or custom content,
  * and a footer with Cancel / Confirm actions.

package/dist/src/components/DraggableItem/DraggableItem.d.ts

@@ -10,6 +10,7 @@ export interface DialDraggableItemProps {
 /**
  * A lightweight wrapper that makes its children sortable via drag-and-drop.
  * aliases: SortableItem|DragHandle
+ * Design system 1.0
  *
  * Renders a row with a grab handle (left) and the provided content (right).
  * Integrates with `react-dnd` using a simple "column" drag type and delegates

package/dist/src/components/DropdownIcon/DropdownIcon.d.ts

@@ -14,6 +14,7 @@ export interface DialDropdownIconProps extends Omit<DialDropdownProps, 'children
 /**
  * A compact icon trigger with a dropdown menu.
  * aliases: ModelPicker|IconMenu|AvatarDropdown
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -11,6 +11,7 @@ export interface DialEllipsisTooltipProps extends DialTooltipContainerOptions {
 /**
  * Single-line text with CSS ellipsis that shows a tooltip **only when actually truncated**.
  * aliases: TruncatedText|TruncationTooltip
+ * Design system 1.0
  *
  * If the text fits, tooltip content is empty and the popup stays hidden.
  *

package/dist/src/components/FabButton/FabButton.d.ts

@@ -8,6 +8,7 @@ export interface FabButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<H
 /**
  * A Floating Action Button (FAB) component — circular icon button for primary actions.
  * aliases: FloatingActionButton|FabButton|CircularButton
+ * Design system 2.0
  *
  * @example
  * ```tsx

package/dist/src/components/FileIcon/FileIcon.d.ts

@@ -11,6 +11,7 @@ export interface DialFileIconProps {
 /**
  * Renders a file-type icon based on a file extension.
  * aliases: ExtensionIcon|TypeIcon
+ * Design system 1.0
  *
  * Uses DialIcon to provide consistent icon wrapper styling.
  *

package/dist/src/components/FileManager/FileManager.d.ts

@@ -207,6 +207,7 @@ export interface DialFileManagerProps {
 /**
  * File Manager layout with a collapsible folders tree, breadcrumb/search header, and a data grid.
  * aliases: FileExplorer|FileBrowser
+ * Design system 1.0
  *
  * @deprecated Import `DialFileManager` from `@epam/ai-dial-react-file-manager` instead.
  *

package/dist/src/components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup.d.ts

@@ -25,6 +25,7 @@ export interface DestinationFolderPopupProps extends DialFileManagerProps {
 /**
  * DestinationFolderPopup
  * aliases: FolderSelector|PathChooser
+ * Design system 1.0
  *
  * @deprecated Import `DialDestinationFolderPopup` from `@epam/ai-dial-react-file-manager` instead.
  *

package/dist/src/components/FileManager/components/FoldersTree/FoldersTree.d.ts

@@ -31,6 +31,7 @@ export interface DialFoldersTreeProps {
 }
 /**
  * DialFoldersTree — A hierarchical folder tree component with nested expand/collapse support, selection highlighting,
+ * Design system 1.0
  * and optional file display.
  *
  * @deprecated Import `DialFoldersTree` from `@epam/ai-dial-react-file-manager` instead.

package/dist/src/components/FileName/FileName.d.ts

@@ -15,6 +15,7 @@ export interface DialFileNameProps {
 /**
  * Component to display a file name with a file icon and shared indicator.
  * aliases: FileDisplay|NameDisplay
+ * Design system 1.0
  *
  * Handles long names with ellipsis and tooltip.
  *

package/dist/src/components/FolderName/FolderName.d.ts

@@ -14,6 +14,7 @@ export interface DialFolderNameProps {
 /**
  * Component to display a folder name with a folder icon and shared indicator.
  * aliases: FolderDisplay|DirectoryName
+ * Design system 1.0
  *
  * Handles long names with ellipsis and tooltip.
  *

package/dist/src/components/FormItem/FormItem.d.ts

@@ -14,6 +14,7 @@ export interface DialFormItemProps extends DialFormItemBaseProps {
 /**
  * A layout wrapper for form controls with label, helper text and error message.
  * aliases: FieldWrapper|FormControl
+ * Design system 1.0
  *
  * Uses `DialLabel` for the label and `DialErrorText` for consistent error styling.
  * Wires accessibility with:

package/dist/src/components/FormPopup/FormPopup.d.ts

@@ -13,6 +13,7 @@ export interface DialFormPopupProps extends DialPopupProps {
 /**
  * A form-oriented popup dialog.
  * aliases: FormDialog|FormModal
+ * Design system 1.0
  *
  * Provides an accessible popup with a title, custom body,
  * and a footer with "Cancel" and "Submit" actions.

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

@@ -29,6 +29,7 @@ export interface DialGridProps<T extends object = Record<string, unknown>> {
 /**
  * DialGrid — A feature-rich data grid wrapper built on ag-Grid with dark theme support.
  * aliases: DataTable|TableGrid
+ * Design system 1.0
  *
  * Provides a pre-configured grid with:
  * - Dark theme styling with CSS variable integration

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

@@ -11,6 +11,7 @@ export interface DialDateCellRendererProps extends Partial<ICellRendererParams<R
 }
 /**
  * Minimal date cell renderer (ag-Grid compatible).
+ * Design system 1.0
  *
  * Renders the value in the **"MMM dd, yyyy"** format (e.g., "Jul 20, 2025"),
  * wrapped in `DialEllipsisTooltip` (tooltip only appears if truncated).

package/dist/src/components/Icon/Icon.d.ts

@@ -6,6 +6,7 @@ export interface DialIconProps {
 /**
  * A wrapper component for rendering icons with consistent styling
  * aliases: IconRenderer|SVGWrapper
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -13,6 +13,7 @@ export interface DialIconButtonProps extends DetailedHTMLProps<ButtonHTMLAttribu
 /**
  * A Icon Button component with flexible icon and text positioning
  * aliases: IconicButton|SymbolButton
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -4,6 +4,7 @@ type ButtonVariantProps = Omit<DialIconButtonProps, 'variant'>;
 type ButtonAppearanceProps = Omit<DialIconButtonProps, 'appearance'>;
 /**
  * A Primary Icon Button component with predefined primary variant
+ * Design system 1.0
  * @example
  * ```tsx
  * <DialPrimaryIconButton

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

@@ -20,6 +20,7 @@ export interface DialInputProps extends Omit<InputHTMLAttributes<HTMLInputElemen
 /**
  * A flexible input component with icon support and various styling options
  * aliases: TextField|FormInput
+ * Design system 1.0
  *
  * @example
  * ```tsx

package/dist/src/components/InputPopup/InputPopup.d.ts

@@ -20,6 +20,7 @@ export interface DialInputPopupProps {
 /**
  * An input field that opens a popup when clicked, displaying a selected value or a list of values.
  * aliases: PopupInput|ReadonlyInput
+ * Design system 1.0
  *
  * It supports read-only mode, error states, and disabled state, with customizable styling.
  * The modal content is rendered using a portal for seamless integration.

package/dist/src/components/JsonEditor/JsonEditor.d.ts

@@ -12,6 +12,7 @@ export interface DialJsonEditorProps {
 }
 /**
  * A JSON editor component built on top of Monaco Editor.
+ * Design system 1.0
  * Provides syntax highlighting, validation, and theme support for JSON editing.
  *
  * @param currentTheme - The theme to apply to the editor

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

@@ -8,6 +8,7 @@ export interface DialLabelProps extends NativeLabelProps {
 /**
  * A label component
  * aliases: FormLabel|RequiredIndicator
+ * Design system 1.0
  *
  * @example
  * ```tsx

package/dist/src/components/LabelledText/LabelledText.d.ts

@@ -10,6 +10,7 @@ export interface DialLabelledTextProps {
 /**
  * A label component for form fields with optional tooltip, content, and custom elements.
  * aliases: LabelValue|DisplayText
+ * Design system 1.0
  *
  * @example
  * ```tsx

package/dist/src/components/LoadFileArea/LoadFileArea.d.ts

@@ -11,6 +11,7 @@ export interface DialLoadFileAreaProps extends DialEmptyFileAreaProps {
 /**
  * A drag-and-drop file upload area component that allows users to upload files
  * aliases: FileDropZone|DragDropUpload
+ * Design system 1.0
  *
  * either by dragging them into the area or by selecting them through the file picker.
  * Displays helpful text, button prompts, and validation errors for file format or count limits.

package/dist/src/components/LoadFileArea/LoadFileAreaField.d.ts

@@ -10,6 +10,7 @@ export interface DialLoadFileAreaFieldProps extends DialLoadFileAreaProps {
 /**
  * A composite file upload field that combines a label, file list management,
  * aliases: UploadField|FileListField
+ * Design system 1.0
  *
  * and a drag-and-drop upload area. Allows users to add, remove, and validate files
  * with customizable restrictions on file types and count.

package/dist/src/components/Loader/Loader.d.ts

@@ -9,6 +9,7 @@ export interface DialLoaderProps {
 /**
  * A simple loading spinner component.
  * aliases: LoadingSpinner|ProgressSpinner
+ * Design system 1.0
  *
  * Renders a spinning SVG with optional full-width container.
  *

package/dist/src/components/MarkdownEditor/MarkdownEditor.d.ts

@@ -12,6 +12,7 @@ export interface DialMarkdownEditorProps {
 }
 /**
  * A Markdown editor component built on top of @uiw/react-md-editor.
+ * Design system 1.0
  * Provides markdown editing with preview capabilities and theme support.
  *
  * @example

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

@@ -34,6 +34,7 @@ export interface AccordionProps {
 /**
  * A collapsible panel that toggles its content when the header is clicked.
  * aliases: Collapse|Disclosure|ExpandablePanel
+ * Design system 2.0
  *
  * Works as a controlled component when `expanded` is provided, otherwise it manages
  * its own state from `defaultExpanded`. The header shows a caret that rotates when

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

@@ -19,6 +19,7 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
 /**
  * A Button component with flexible icon and text positioning
  * aliases: ActionButton|CallToAction
+ * Design system 2.0
  *
  * @example
  * ```tsx

package/dist/src/components/New/Button/ButtonWrappers.d.ts

@@ -4,6 +4,7 @@ type ButtonVariantProps = Omit<ButtonProps, 'variant'>;
 type ButtonAppearanceProps = Omit<ButtonProps, 'appearance'>;
 /**
  * A Primary Button component with predefined primary variant
+ * Design system 2.0
  * @example
  * ```tsx
  * <PrimaryButton

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

@@ -7,6 +7,7 @@ export interface ButtonDropdownProps extends Omit<ButtonProps, 'iconAfter'> {
 /**
  * A Button dropdown component based on the Dropdown component
  * aliases: SplitButton|MenuButton
+ * Design system 2.0
  *
  * @example
  * ```tsx

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

@@ -1,11 +1,12 @@
 import { FC } from 'react';
+import { LabelProps } from '../Label/Label';
 import { CalendarMode } from '../../../types/calendar';
 export type CalendarValue = Date | string | null;
 export interface CalendarProps {
     mode?: CalendarMode;
     value?: CalendarValue;
     onChange?: (value: CalendarValue) => void;
-    label?: string;
+    labelProps?: LabelProps;
     placeholder?: string;
     disabled?: boolean;
     invalid?: boolean;
@@ -20,6 +21,7 @@ export interface CalendarProps {
 /**
  * A date/time picker supporting four selection modes.
  * aliases: DatePicker|DateTimePicker
+ * Design system 2.0
  *
  * Renders a text-field trigger that opens a rounded month-grid popover for
  * the `date`/`datetime` modes, a masked `"HH:mm"` text field for `time`, and
@@ -33,12 +35,13 @@ export interface CalendarProps {
  * <Calendar mode={CalendarMode.Time} value={time} onChange={setTime} />
  * <Calendar mode={CalendarMode.Weekday} value={weekday} onChange={setWeekday} />
  * <Calendar mode={CalendarMode.Date} value={date} onChange={setDate} locale="de-DE" />
+ * <Calendar labelProps={{ label: 'Start date', required: true }} value={date} onChange={setDate} />
  * ```
  *
  * @param [mode=CalendarMode.Date] - Selection mode: date, datetime, time or weekday
  * @param [value] - Controlled value: a `Date` for date/datetime, an `"HH:mm"` string for time, an ISO weekday number (`"1"`=Monday…`"7"`=Sunday) for weekday
  * @param [onChange] - Callback fired with the next value when the selection changes
- * @param [label] - Optional label rendered above the control
+ * @param [labelProps] - Props of the {@link Label} rendered above the control, including `label`, `required` and `caption`
  * @param [placeholder] - Placeholder shown when there is no value; defaults to a mode-appropriate string ("Select date", "Select date and time", "--:--" or "Select day")
  * @param [disabled=false] - Disables the control
  * @param [invalid=false] - Applies error styling

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

@@ -7,6 +7,7 @@ export interface CaptionTextProps extends HTMLAttributes<HTMLSpanElement> {
 /**
  * A component for displaying caption text with consistent styling
  * aliases: HelperText|ValidationText
+ * Design system 2.0
  *
  * @example
  * ```tsx

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

@@ -2,6 +2,7 @@ import { FC, HTMLAttributes } from 'react';
 export type CardShellProps = HTMLAttributes<HTMLElement>;
 /**
  * A shared elevated card shell used as the base wrapper for browse-grid cards.
+ * Design system 2.0
  *
  * Renders an `<article>` with rounded corners, padding, a resting shadow, and
  * a hover lift with a stronger shadow. Respects `prefers-reduced-motion` by

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

@@ -10,6 +10,7 @@ export interface CloseButtonProps {
 /**
  * A close button: a ghost {@link IconButton} carrying an X icon.
  * aliases: DismissButton|ExitButton
+ * Design system 2.0
  *
  * Sized through {@link ElementSize} like every other 2.0 control. It defaults to
  * the small 24px box that headers and toasts want; pass `ElementSize.Standard`

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

@@ -17,6 +17,7 @@ export interface ConfirmationPopupProps extends PopupProps {
 /**
  * A confirmation dialog built from {@link Popup} and the 2.0 {@link Button}.
  * aliases: ConfirmDialog|WarningDialog
+ * Design system 2.0
  *
  * Provides an accessible modal with a title, optional description or custom content,
  * and a footer with Cancel / Confirm actions.

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

@@ -35,6 +35,7 @@ export interface DropdownProps {
  *
  * Renders the given trigger (`children`) and a floating contextual menu overlay.
  * aliases: ContextMenu|PopupMenu
+ * Design system 2.0
  *
  * Supports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional
  * close button inside the overlay. Placement is taken directly from Floating UI; when

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

@@ -0,0 +1,81 @@
+import { FC, ReactNode } from 'react';
+import { LabelProps } from '../Label/Label';
+export interface FileDropzoneProps {
+    /**
+     * Props of the {@link Label} rendered above the area — the name of the field
+     * this dropzone fills, e.g. `{ label: 'Attachments', required: true }`. The
+     * copy inside the area is `label`, which says how to use the control rather
+     * than what it is for.
+     */
+    labelProps?: LabelProps;
+    /** Primary line of copy, e.g. `'Drag and drop it or click here to upload'`. */
+    label: ReactNode;
+    /** Secondary line of copy, e.g. `'File formats .md, .zip and .skill'`. */
+    description?: ReactNode;
+    /** Fired with the accepted files when files are picked or dropped. */
+    onChange: (files: File[]) => void;
+    /**
+     * Fired with files that a drop offered but `accept` excluded. The file picker
+     * filters by `accept` itself, so this only ever comes from a drop.
+     */
+    onReject?: (files: File[]) => void;
+    /** Comma-separated `accept` tokens, e.g. `'.md,.zip,.skill'` or `'image/*'`. */
+    accept?: string;
+    /** Whether more than one file can be selected at a time. */
+    multiple?: boolean;
+    /** Disables picking and dropping. */
+    disabled?: boolean;
+    /** Error message rendered below the area, which also turns its border red. */
+    errorText?: string;
+    /** Icon rendered above the copy. Defaults to an upload arrow. */
+    icon?: ReactNode;
+    /** `id` of the underlying file input. Generated when omitted. */
+    id?: string;
+    /**
+     * Accessible name for the control. Only needed when `label` is a node that
+     * carries no text of its own — a string label already names the input.
+     */
+    ariaLabel?: string;
+    /** Additional CSS classes for the drop area. */
+    className?: string;
+}
+/**
+ * A dashed drop area that takes files by drag-and-drop or through the file picker.
+ * aliases: LoadFileArea|FileUpload|DragDropUpload|UploadArea
+ * Design system 2.0
+ *
+ * The area is a label over a visually hidden file input, so the picker opens on
+ * click and the control stays operable by keyboard and announced as a file input
+ * without any extra wiring. The border highlights while a drag hovers it.
+ *
+ * `accept` is enforced on drops as well as in the picker — the browser only
+ * filters the latter — so `onChange` never receives a file the caller excluded.
+ * Rejected files go to `onReject`; all copy stays with the caller, which keeps
+ * validation messages in the consumer's own wording and language.
+ *
+ * @example
+ * ```tsx
+ * <FileDropzone
+ *   label="Drag and drop it or click here to upload"
+ *   description="File formats .md, .zip and .skill"
+ *   accept=".md,.zip,.skill"
+ *   onChange={(files) => upload(files)}
+ *   onReject={() => setError('Unsupported file format')}
+ * />
+ * ```
+ *
+ * @param [labelProps] - Props of the {@link Label} naming the field, rendered above the area.
+ * @param label - Primary line of copy.
+ * @param [description] - Secondary line of copy.
+ * @param onChange - Fired with the accepted files.
+ * @param [onReject] - Fired with dropped files that `accept` excluded.
+ * @param [accept] - Comma-separated `accept` tokens.
+ * @param [multiple=false] - Whether more than one file can be selected.
+ * @param [disabled=false] - Disables picking and dropping.
+ * @param [errorText] - Error message rendered below the area.
+ * @param [icon] - Icon rendered above the copy.
+ * @param [id] - `id` of the underlying file input.
+ * @param [ariaLabel] - Accessible name; needed when `label` carries no text.
+ * @param [className] - Additional CSS classes for the drop area.
+ */
+export declare const FileDropzone: FC<FileDropzoneProps>;

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

@@ -9,6 +9,7 @@ export interface FolderPathProps {
 /**
  * A read-only, non-clickable folder/location path built on top of `DialBreadcrumb`.
  * aliases: FolderBreadcrumb|LocationPath
+ * Design system 2.0
  *
  * Every segment is disabled (no navigation); the first segment gets a leading
  * folder icon and the last segment is styled as the current/leaf item.

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

@@ -12,5 +12,8 @@ export interface HighlightProps {
     /** Maximum number of lines to display before truncating. Use `1` for single-line ellipsis truncation (e.g. list rows). Defaults to `2`. */
     maxLines?: number;
 }
-/** Renders text with the first occurrence of `query` wrapped in a highlight mark, with ellipsis truncation and a tooltip when overflowing. */
+/**
+ * Renders text with the first occurrence of `query` wrapped in a highlight mark, with ellipsis truncation and a tooltip when overflowing.
+ * Design system 2.0
+ */
 export declare const Highlight: FC<HighlightProps>;

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

@@ -13,6 +13,7 @@ export interface IconButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<
 /**
  * A Icon Button component with flexible icon and text positioning
  * aliases: IconicButton|SymbolButton
+ * Design system 2.0
  *
  * @example
  * ```tsx

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

@@ -4,6 +4,7 @@ type ButtonVariantProps = Omit<IconButtonProps, 'variant'>;
 type ButtonAppearanceProps = Omit<IconButtonProps, 'appearance'>;
 /**
  * A Primary Icon Button component with predefined primary variant
+ * Design system 2.0
  * @example
  * ```tsx
  * <PrimaryIconButton

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

@@ -6,6 +6,7 @@ export interface InfoButtonProps {
 }
 /**
  * An Info button component with a customizable icon and accessible label.
+ * Design system 2.0
  *
  * @example
  * ```tsx

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

@@ -38,6 +38,7 @@ export interface InlineSelectProps {
 }
 /**
  * An inline select control combining `InlineSelectTrigger` with `Dropdown`.
+ * Design system 2.0
  *
  * @example
  * ```tsx

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

@@ -23,6 +23,12 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     prefix?: string;
     postfix?: string;
     inputRef?: Ref<HTMLInputElement>;
+    /**
+     * Ref to the field wrapper — the bordered box holding the icons, the content
+     * slot and the input. Use it to measure the space `children` has to fit into;
+     * the input itself only ever reports its own share of the row.
+     */
+    wrapperRef?: Ref<HTMLDivElement>;
     onChange?: (value?: string) => void;
     containerClassName?: string;
     wrapperClassName?: string;
@@ -30,6 +36,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
 /**
  * A flexible input component with icon support and various styling options
  * aliases: TextField|FormInput
+ * Design system 2.0
  *
  * @example
  * ```tsx

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

@@ -10,6 +10,7 @@ export interface LabelProps extends NativeLabelProps {
 /**
  * A label component
  * aliases: FormLabel|RequiredIndicator
+ * Design system 2.0
  *
  * @example
  * ```tsx

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

@@ -13,6 +13,7 @@ export interface MarkdownEditorProps {
 }
 /**
  * The 2.0 Markdown editor: a formatting toolbar (bold/italic/strikethrough,
+ * Design system 2.0
  * text style, lists, quote/link/code, table) plus an edit/live/preview mode
  * switcher and fullscreen, built on top of `@uiw/react-md-editor`.
  *

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

@@ -1,6 +1,11 @@
 import { ICommand } from '@uiw/react-md-editor';
 import { DIAL_ICON_SIZE } from '../../../constants/icon';
-export declare const MARKDOWN_TOOLBAR_ICON_SIZE = DIAL_ICON_SIZE.MD;
+/** 16px inside the 24px round toolbar buttons, matching the other 2.0
+ *  components that pair `ElementSize.Small` controls with `DIAL_ICON_SIZE.SM`.
+ *  Keep this in sync with the `svg { size-[16px] }` rule in
+ *  `src/styles/markdown-editor.scss`, which wins over these width/height
+ *  attributes. */
+export declare const MARKDOWN_TOOLBAR_ICON_SIZE = DIAL_ICON_SIZE.SM;
 /**
  * Left-hand formatting toolbar, built on top of `@uiw/react-md-editor`'s
  * built-in commands (which insert/toggle markdown syntax in the underlying