@epam/ai-dial-ui-kit 0.13.0-dev.52 → 0.13.0-dev.59

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

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from 'react';
+import { ButtonHTMLAttributes, DetailedHTMLProps, FC, HTMLAttributeAnchorTarget, ReactNode } from 'react';
 import { DialTooltipProps } from '../../Tooltip/Tooltip';
 import { ButtonAppearance, ButtonVariant } from '../../../types/button';
 import { ElementSize } from '../../../types/size';
@@ -12,10 +12,14 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
     iconBefore?: ReactNode;
     iconAfter?: ReactNode;
     tooltipProps?: TooltipProps;
+    href?: string;
+    target?: HTMLAttributeAnchorTarget;
+    rel?: string;
 }
 /**
  * A Button component with flexible icon and text positioning
  * aliases: ActionButton|CallToAction
+ * Design system 2.0
  *
  * @example
  * ```tsx
@@ -50,6 +54,13 @@ export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTML
  * @param [textClassName] - Additional CSS classes to apply specifically to the button text
  * @param [iconAfter] - Icon or element to display after the button text
  * @param [iconBefore] - Icon or element to display before the button text
+ * @param [href] - Destination to navigate to. Renders an `<a>` instead of a
+ * `<button>`, so the control keeps the link role, middle-click, and
+ * "open in new tab". Pair it with `ButtonAppearance.Link` (or `LinkButton`)
+ * unless a button-shaped link is intended.
+ * @param [target] - Anchor target, only meaningful alongside `href`
+ * @param [rel] - Anchor `rel`. Defaults to `noopener noreferrer` when
+ * `target="_blank"`.
  */
 export declare const Button: FC<ButtonProps>;
 export {};

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
@@ -52,6 +53,16 @@ export declare const DangerButton: FC<ButtonVariantProps>;
  * />
  * ```
  *
+ * Pass `href` to navigate: the control then renders a real `<a>`, so it keeps
+ * the link role, middle-click, and "open in new tab". Without `href` it stays a
+ * `<button>` and needs an `onClick`.
+ *
+ * @example
+ * ```tsx
+ * <LinkButton label="Read the docs" href="/docs" />
+ * <LinkButton label="Open dashboard" href="https://example.com" target="_blank" />
+ * ```
+ *
  * Inherits all properties from the `ButtonProps`
  */
 export declare const LinkButton: FC<ButtonAppearanceProps>;

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

@@ -1,12 +1,13 @@
 import { FC } from 'react';
-import { DialButtonProps } from '../../Button/Button';
 import { DropdownItem } from '../../../models/dropdown';
-export interface ButtonDropdownProps extends Omit<DialButtonProps, 'iconAfter'> {
+import { ButtonProps } from '../Button/Button';
+export interface ButtonDropdownProps extends Omit<ButtonProps, 'iconAfter'> {
     items: DropdownItem[];
 }
 /**
- * A Button dropdown component based on DialDropdown component
+ * A Button dropdown component based on the Dropdown component
  * aliases: SplitButton|MenuButton
+ * Design system 2.0
  *
  * @example
  * ```tsx
@@ -17,7 +18,7 @@ export interface ButtonDropdownProps extends Omit<DialButtonProps, 'iconAfter'>
  * />
  * ```
  *
- * Inherits all props from DialButton.
+ * Inherits all props from Button.
  * @param [items] - DropdownItems with actions
  */
 export declare const ButtonDropdown: FC<ButtonDropdownProps>;

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

@@ -20,6 +20,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

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

@@ -1,8 +1,8 @@
 import { CalendarMode } from '../../../types/calendar';
 export declare const DEFAULT_CALENDAR_LOCALE = "en-GB";
 export declare const calendarModeDefaultPlaceholder: Record<CalendarMode, string>;
-export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-0 px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-primary focus-within:border-accent-primary";
-export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-controls-disable text-controls-primary-disable hover:!border-transparent";
+export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-hover-alpha focus-within:border-focus-blue";
+export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-alpha hover:!border-transparent";
 export declare const calendarFieldInvalidClassName = "!border-error";
 export declare const calendarPopoverClassName = "z-[53] flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-3 py-4 shadow-md";
 export declare const calendarDayButtonBaseClassName = "flex size-8 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus-black";

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,72 @@
+import { FC, ReactNode } from 'react';
+export interface FileDropzoneProps {
+    /** 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 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

@@ -37,7 +37,8 @@ export interface InlineSelectProps {
     ariaLabel?: string;
 }
 /**
- * An inline select control combining `InlineSelectTrigger` with `DialDropdown`.
+ * An inline select control combining `InlineSelectTrigger` with `Dropdown`.
+ * Design system 2.0
  *
  * @example
  * ```tsx

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

@@ -1 +1 @@
-export declare const inputButtonClassName = "bg-layer-4 flex items-center justify-center enabled:text-secondary enabled:hover:text-accent-primary enabled:active:bg-controls-accent-primary-alpha-active enabled:hover:bg-accent-primary-alpha enabled:active:text-accent-primary";
+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";

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

@@ -1,9 +1,9 @@
 import { FC, InputHTMLAttributes, ReactNode, Ref } from 'react';
-import { DialLabelProps } from '../../Label/Label';
 import { ElementSize } from '../../../types/size';
+import { LabelProps } from '../Label/Label';
 import { InputButtonProps } from './Button/InputButton';
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
-    labelProps?: DialLabelProps;
+    labelProps?: LabelProps;
     inputButtonProps?: InputButtonProps;
     size?: ElementSize;
     invalid?: boolean;
@@ -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