@epam/ai-dial-ui-kit 0.13.0-dev.9 → 0.14.0-dev.1

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

@@ -0,0 +1,48 @@
+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'>;
+export interface IconButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ElementSize;
+    appearance?: ButtonAppearance;
+    icon: ReactNode;
+    tooltipProps?: TooltipProps;
+}
+/**
+ * A Icon Button component with flexible icon and text positioning
+ * aliases: IconicButton|SymbolButton
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <DialIconButton
+ *   onClick={handleClick}
+ *   icon={<Icon />}
+ *   className="custom-button"
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <IconButton
+ *   aria-label="Custom Label"
+ *   onClick={handleClick}
+ * />
+ * ```
+ *
+ * inherits all properties from the `ButtonHTMLAttributes<HTMLButtonElement>`
+ *
+ * The button is icon-only, so it needs an accessible name: pass `aria-label`,
+ * or a string `tooltipProps.tooltip`, which is used as the label when no
+ * `aria-label` is given.
+ *
+ * @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 icon - Icon display
+ */
+export declare const IconButton: FC<IconButtonProps>;
+export {};

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

@@ -0,0 +1,71 @@
+import { FC } from 'react';
+import { IconButtonProps } from './IconButton';
+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
+ *  icon={<Icon />}
+ *  onClick={handleClick}
+ *  className="custom-button"
+ * />
+ * ```
+ *
+ * Inherits all properties from the `IconButtonProps`
+ */
+export declare const PrimaryIconButton: FC<ButtonVariantProps>;
+/** A Neutral Icon Button component with predefined neutral variant
+ * @example
+ * ```tsx
+ * <NeutralIconButton
+ *  icon={<Icon />}
+ *  onClick={handleClick}
+ *  className="custom-button"
+ * />
+ * ```
+ *
+ * Inherits all properties from the `IconButtonProps`
+ */
+export declare const NeutralIconButton: FC<ButtonVariantProps>;
+/** A Danger Icon Button component with predefined danger variant
+ * @example
+ * ```tsx
+ * <DangerIconButton
+ *  icon={<Icon />}
+ *  onClick={handleClick}
+ *  className="custom-button"
+ * />
+ * ```
+ *
+ * Inherits all properties from the `IconButtonProps`
+ */
+export declare const DangerIconButton: FC<ButtonVariantProps>;
+/** A Ghost Icon Button component with predefined ghost appearance
+ * @example
+ * ```tsx
+ * <GhostIconButton
+ *  icon={<Icon />}
+ *  onClick={handleClick}
+ *  className="custom-button"
+ * />
+ * ```
+ *
+ * Inherits all properties from the `IconButtonProps`
+ */
+export declare const GhostIconButton: FC<ButtonAppearanceProps>;
+/** A Outlined Icon Button component with predefined outlined appearance
+ * @example
+ * ```tsx
+ * <StaticIconButton
+ *  icon={<Icon />}
+ *  onClick={handleClick}
+ * className="custom-button"
+ * />
+ * ```
+ * Inherits all properties from the `IconButtonProps`
+ */
+export declare const StaticIconButton: FC<ButtonAppearanceProps>;
+export {};

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

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+export interface InfoButtonProps {
+    caption?: string;
+    onClick?: () => void;
+    'aria-label'?: string;
+}
+/**
+ * An Info button component with a customizable icon and accessible label.
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <InfoButton
+ *   caption="Info"
+ * />
+ * ```
+ *
+ * The button is icon-only, so it needs an accessible name. `caption` is used as
+ * the name because a tooltip alone never reaches assistive tech — pass a short
+ * `aria-label` when the caption is a long sentence.
+ *
+ * @param [caption] - Text shown in the tooltip, and the fallback accessible name
+ * @param [onClick] - Click handler for the info button
+ * @param [aria-label] - Accessible name; takes precedence over `caption`
+ */
+export declare const InfoButton: FC<InfoButtonProps>;

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

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { InfoButton } from './InfoButton';
+declare const meta: Meta<typeof InfoButton>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

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

@@ -0,0 +1,51 @@
+import { Placement } from '@floating-ui/react';
+import { ButtonHTMLAttributes, FC } from 'react';
+import { DropdownItem } from '../../../models/dropdown';
+import { ElementSize } from '../../../types/size';
+export interface InlineSelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Currently selected option's label, shown before the chevron. */
+    label: string;
+    /** Size of the trigger button. */
+    size?: ElementSize;
+    /** Whether the inline select is open or not. */
+    isOpen?: boolean;
+}
+export declare const InlineSelectTrigger: FC<InlineSelectTriggerProps>;
+export interface InlineSelectProps {
+    /** Options rendered in the dropdown; each item's `label` is shown on the trigger when selected. */
+    items: DropdownItem[];
+    /** Controlled key of the selected item. */
+    selectedKey?: string;
+    /** Initial selected key in uncontrolled mode. Defaults to the first item's key. */
+    defaultSelectedKey?: string;
+    /** Fired when an item is selected. */
+    onSelect?: (item: DropdownItem) => void;
+    /** Size of the trigger button. */
+    size?: ElementSize;
+    /** Disables the trigger and prevents opening the dropdown. */
+    disabled?: boolean;
+    /** Floating UI placement for the dropdown overlay. */
+    placement?: Placement;
+    /** Whether the dropdown overlay should match the trigger's width. */
+    matchReferenceWidth?: boolean;
+    /** Additional CSS classes applied to the dropdown overlay. */
+    listClassName?: string;
+    /**
+     * Accessible name for the trigger. Without it the control announces only its
+     * current value ("Option A"), never what is being selected.
+     */
+    ariaLabel?: string;
+}
+/**
+ * An inline select control combining `InlineSelectTrigger` with `Dropdown`.
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <InlineSelect
+ *   items={[{ key: 'a', label: 'Option A' }, { key: 'b', label: 'Option B' }]}
+ *   onSelect={(item) => console.log(item.key)}
+ * />
+ * ```
+ */
+export declare const InlineSelect: FC<InlineSelectProps>;

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

@@ -0,0 +1,25 @@
+import { FC, ReactNode } from 'react';
+import { ElementSize } from '../../../../types/size';
+export interface InputButtonProps {
+    icon: ReactNode;
+    disabled?: boolean;
+    onClick?: () => void;
+    size?: ElementSize;
+    className?: string;
+}
+/**
+ * An Input button component with a customizable icon and accessible label.
+ *
+ * @example
+ * ```tsx
+ * <InputButton
+ *   icon={<IconInfoCircle size={16} />}
+ * />
+ * ```
+ *
+ * @param [icon] - Icon to display inside the input button
+ * @param [onClick] - Click handler for the info button
+ * @param [disabled] - Whether the button is disabled
+ * @param [size] - Size of the input button, which adjusts the icon size and padding. Uses the {@link ElementSize} enum.
+ */
+export declare const InputButton: FC<InputButtonProps>;

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

@@ -0,0 +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";

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

@@ -0,0 +1,67 @@
+import { FC, InputHTMLAttributes, ReactNode, Ref } from 'react';
+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?: LabelProps;
+    inputButtonProps?: InputButtonProps;
+    size?: ElementSize;
+    invalid?: boolean;
+    error?: string;
+    caption?: string;
+    tooltipText?: string;
+    iconBefore?: ReactNode;
+    iconAfter?: ReactNode;
+    /**
+     * Content rendered inside the field, between `iconBefore` and the input, for
+     * values a plain `<input>` cannot hold — the tags of a multi-select, a value
+     * with its own markup. When the slot stands in for the value, give the input
+     * itself a zero width through `className` so it keeps taking focus without
+     * competing for space.
+     */
+    children?: ReactNode;
+    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;
+}
+/**
+ * A flexible input component with icon support and various styling options
+ * aliases: TextField|FormInput
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Input
+ *   id="search"
+ *   placeholder="Search..."
+ *   iconBefore={<SearchIcon />}
+ *   iconAfter={<ClearIcon />}
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ *
+ * @param [size=ElementSize.Standard] - The size of the input, which can be 'small', 'standard', or 'large'.
+ * @param [invalid] - Whether the input has validation errors (applies error styling)
+ * @param [iconAfter] - Icon or element to display after the input
+ * @param [iconBefore] - Icon or element to display before the input
+ * @param [children] - Content rendered inside the field before the input, for values a plain `<input>` cannot hold (e.g. multi-select tags)
+ * @param [textBeforeInput] - Text to display before the input
+ * @param [suffix] - Text to display inside the input on the right
+ * @param [containerClassName] - Additional CSS classes to apply to the container div
+ * @param [wrapperClassName] - Additional CSS classes to apply to the input wrapper div
+ * @param [className] - Additional CSS classes to apply to the input element
+ * @param [inputRef] - Ref to access the underlying input element
+ * @param [error] - Error message to display below the input (also adds error styling)
+ * @param [caption] - Helper text to display below the input
+ * @param [onChange] - Callback function called when the input value changes
+ */
+export declare const Input: FC<InputProps>;

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

@@ -0,0 +1,2 @@
+import { KeyboardEvent } from 'react';
+export declare const handleKeyDown: (e: KeyboardEvent<HTMLInputElement>, type?: string, min?: number | string, max?: number | string) => void;

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

@@ -0,0 +1,33 @@
+import { FC, LabelHTMLAttributes, ReactNode } from 'react';
+import { ElementSize } from '../../../types/size';
+type NativeLabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'defaultValue' | 'onChange'>;
+export interface LabelProps extends NativeLabelProps {
+    label?: ReactNode;
+    required?: boolean;
+    caption?: string;
+    size?: ElementSize;
+}
+/**
+ * A label component
+ * aliases: FormLabel|RequiredIndicator
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * // Basic  label
+ * <Label htmlFor="email-input" label="Email Address" />
+ * ```
+ *
+ * Pass `htmlFor` with the id of the control this labels — without it the label
+ * names nothing. The `caption` info button renders as a sibling of the `<label>`
+ * rather than inside it: a button nested in a label forwards its clicks to the
+ * labelled control and leaks its own text into that control's accessible name.
+ *
+ * @param [label] - The label text to display for the label
+ * @param [required=false] - Whether the field is required. Renders a visual `*`
+ * 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'.
+ */
+export declare const Label: FC<LabelProps>;
+export {};

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

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { PreviewType } from '@uiw/react-md-editor';
+import { EditorThemes } from '../../../types/editor';
+export interface MarkdownEditorProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    height?: number;
+    theme?: EditorThemes;
+    className?: string;
+    placeholder?: string;
+    /** Initial edit/live/preview mode; the toolbar lets the user switch it afterwards. */
+    defaultPreview?: PreviewType;
+}
+/**
+ * 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`.
+ *
+ * @example
+ * ```tsx
+ * <MarkdownEditor value={value} onChange={setValue} height={400} />
+ * ```
+ *
+ * @param [value] - The current markdown content
+ * @param [onChange] - Callback fired when the editor content changes
+ * @param [height=300] - Height of the editor in pixels
+ * @param [theme='light'] - Theme for the editor ('light' or 'dark')
+ * @param [className] - Additional CSS classes for the container
+ * @param [placeholder] - Placeholder text shown when the editor is empty
+ * @param [defaultPreview='edit'] - Initial edit/live/preview mode
+ */
+export declare const MarkdownEditor: FC<MarkdownEditorProps>;

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

@@ -0,0 +1,20 @@
+import { ICommand } from '@uiw/react-md-editor';
+import { DIAL_ICON_SIZE } from '../../../constants/icon';
+/** 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
+ * textarea) with icons and grouping matching the design.
+ */
+export declare const getMarkdownFormattingCommands: () => ICommand[];
+/**
+ * Right-hand toolbar: the built-in edit/live/preview mode switcher, each
+ * with a distinct icon so the three states stay distinguishable even before
+ * the active one is highlighted, followed by fullscreen.
+ */
+export declare const getMarkdownExtraCommands: () => ICommand[];

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

@@ -14,10 +14,17 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
 /**
  * A contextual feedback component for displaying important messages.
  * aliases: Notification
+ * Design system 2.0
  *
  * Renders a colored container with an icon, message text, and an optional
  * close button.
  *
+ * The container is a live region whose politeness follows the variant: `error`
+ * and `warning` use `role="alert"` (assertive, interrupts the screen reader),
+ * every other variant uses `role="status"` (polite, queues). Pass an explicit
+ * `role` to override — including for a notification that is static page content
+ * rather than an update.
+ *
  * @example
  * ```tsx
  * <Notification

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

@@ -5,4 +5,15 @@ export declare const variantIcons: (props: {
     stroke: number;
 }) => Record<NotificationVariant, ReactNode>;
 export declare const notificationVariantClassNameMap: Record<NotificationVariant, string>;
-export declare const alertBaseClassName = "items-center justify-between rounded-xl relative gap-3 p-3 border border-secondary flex";
+/**
+ * Live-region role per variant.
+ *
+ * `role="alert"` is implicitly `aria-live="assertive"`: it interrupts whatever a
+ * screen reader is currently saying. That is right for a problem the user must
+ * deal with, and wrong for routine feedback — an assertive info or success
+ * message cuts the user off mid-sentence, and a section message rendered with
+ * the page announces itself on mount even though nothing changed.
+ * `role="status"` is polite and queues instead.
+ */
+export declare const notificationVariantRoleMap: Record<NotificationVariant, 'alert' | 'status'>;
+export declare const alertBaseClassName = "items-center justify-between rounded-xl relative gap-3 p-3 border flex border-transparent";

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

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { InputProps } from '../Input/Input';
+export interface NumberInputProps extends Omit<InputProps, 'onChange' | 'type'> {
+    /** When true, restricts input to integer values only — blocks decimal points, minus, plus, and scientific notation (e/E) */
+    integer?: boolean;
+    onChange?: (value?: number | string) => void;
+}
+/**
+ * A number field, built on {@link Input}.
+ * aliases: NumericField|NumberField
+ * Design system 2.0
+ *
+ * `type` is owned by this component; every other {@link Input} prop is passed
+ * through, so it shares the 2.0 field styling, sizes, label, caption and error
+ * states.
+ *
+ * @example
+ * ```tsx
+ * <NumberInput
+ *   id="age"
+ *   placeholder="Enter your age"
+ *   value={25}
+ *   onChange={(value) => setAge(value)}
+ * />
+ * ```
+ *
+ * @param [integer] - When true, restricts input to integer values only — blocks decimal points, minus, plus, and scientific notation (e/E)
+ * @param [min] - Minimum allowed value
+ * @param [max] - Maximum allowed value
+ * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px
+ * @param [onKeyDown] - Called after the numeric key guard has run, unless the key was blocked
+ * @param [onPaste] - Called after pasted text has been sanitized in `integer` mode
+ * @param onChange - Callback function called when the input value changes.
+ *                        Returns either a number (for most values) or a string (for decimal values < 1 with leading zeros)
+ */
+export declare const NumberInput: FC<NumberInputProps>;

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

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import { InputProps } from '../Input/Input';
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter'> {
+    /** Accessible name of the reveal toggle while the value is masked. */
+    showPasswordLabel?: string;
+    /** Accessible name of the reveal toggle while the value is visible. */
+    hidePasswordLabel?: string;
+}
+/**
+ * A password field with a reveal toggle, built on {@link Input}.
+ * aliases: SecureInput|ToggleablePassword
+ * Design system 2.0
+ *
+ * The toggle is a real `<button>`, so it is reachable by keyboard and announces
+ * both its purpose and its state. `type` and `iconAfter` are owned by this
+ * component; every other {@link Input} prop is passed through.
+ *
+ * @example
+ * ```tsx
+ * <PasswordInput
+ *   id="password"
+ *   labelProps={{ label: 'Password', required: true }}
+ *   value={password}
+ *   onChange={setPassword}
+ * />
+ * ```
+ *
+ * @param [showPasswordLabel="Show password"] - Accessible name of the toggle while the value is masked
+ * @param [hidePasswordLabel="Hide password"] - Accessible name of the toggle while the value is visible
+ * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px
+ * @param [disabled=false] - Disables the field and its reveal toggle
+ */
+export declare const PasswordInput: FC<PasswordInputProps>;

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

@@ -0,0 +1,72 @@
+import { FC, MouseEvent, ReactNode } from 'react';
+import { PopupSize } from '../../../types/popup';
+export interface PopupProps {
+    open?: boolean;
+    header?: ReactNode;
+    ariaLabel?: string;
+    portalId?: string;
+    className?: string;
+    overlayClassName?: string;
+    titleClassName?: string;
+    headerClassName?: string;
+    /** Additional CSS classes applied to the scrollable body wrapper around `children`. */
+    bodyClassName?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    onClose?: (e?: MouseEvent<HTMLButtonElement> | null) => void;
+    size?: PopupSize;
+    hideClose?: boolean;
+    closeAriaLabel?: string;
+    closeOnOutsideClick?: boolean;
+    preventKeyboardOnOpen?: boolean;
+}
+/**
+ * An accessible modal dialog using Floating UI.
+ * aliases: Modal|Dialog
+ * Design system 2.0
+ *
+ * Renders in a portal with a scrim overlay, focus management, a header with the
+ * title and close control, a scrollable body and an optional footer. Sections
+ * are separated by spacing rather than rules; add your own through
+ * `headerClassName` or the footer node if a surface needs them.
+ *
+ * A string `header` names the dialog automatically. A `header` node cannot —
+ * pass `ariaLabel` in that case, or the dialog opens unnamed.
+ *
+ * @example
+ * ```tsx
+ * <Popup
+ *   open
+ *   header="Title"
+ *   size={PopupSize.Md}
+ *   footer={
+ *     <div className="flex justify-end gap-2 px-6 py-4">
+ *       <NeutralButton label="Cancel" />
+ *       <PrimaryButton label="Confirm" />
+ *     </div>
+ *   }
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <div className="px-6 py-4">Dialog content goes here…</div>
+ * </Popup>
+ * ```
+ *
+ * @param [open=false] - Controls visibility of the popup
+ * @param [header] - Optional title rendered in the header
+ * @param [ariaLabel] - Accessible name for the dialog; needed when `header` is not a string
+ * @param [portalId] - Optional portal container id
+ * @param [className] - Additional CSS classes applied to the popup container
+ * @param [overlayClassName] - Additional CSS classes applied to the overlay
+ * @param [titleClassName] - Additional CSS classes applied to the title element
+ * @param [headerClassName] - Additional CSS classes applied to the popup header container
+ * @param [bodyClassName] - Additional CSS classes applied to the scrollable body wrapper around `children`
+ * @param [children] - Body content
+ * @param [footer] - Footer area for actions
+ * @param [onClose] - Callback fired when the popup requests to close
+ * @param [size=PopupSize.Md] - Sets the max-width of the popup
+ * @param [hideClose=false] - Whether the close button is hidden in the header
+ * @param [closeAriaLabel="Close dialog"] - Accessible name of the close button
+ * @param [closeOnOutsideClick=true] - Whether the popup closes when clicking outside
+ * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility
+ */
+export declare const Popup: FC<PopupProps>;

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

@@ -0,0 +1,10 @@
+import { PopupSize } from '../../../types/popup';
+export declare const popupOverlayBaseClassName = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
+export declare const popupBaseClassName = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto";
+export declare const popupHeaderClassName = "flex flex-row items-center justify-between px-6 py-4";
+export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary";
+/**
+ * Max widths per size. Full width below the `md` breakpoint, where the popup
+ * fills the screen.
+ */
+export declare const popupSizeClassMap: Record<PopupSize, string>;

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

@@ -0,0 +1,42 @@
+import { FC } from 'react';
+import { InputProps } from '../Input/Input';
+export interface SearchProps extends Omit<InputProps, 'type' | 'iconBefore' | 'iconAfter' | 'inputButtonProps' | 'prefix' | 'postfix' | 'children'> {
+    /**
+     * Drops the field's border and background so the input sits flush in a
+     * toolbar or panel header. The border is kept transparent rather than removed,
+     * so toggling this never shifts the layout by a pixel.
+     */
+    withoutBorder?: boolean;
+    /** Accessible name of the clear button. */
+    clearLabel?: string;
+}
+/**
+ * A search field with a leading magnifier and a clear button, built on {@link Input}.
+ * aliases: SearchField|QueryInput|SearchBox
+ * Design system 2.0
+ *
+ * Fully controlled: it renders exactly the `value` it is given and reports every
+ * edit through `onChange`, which receives `undefined` for an empty field. The
+ * clear button appears only while there is something to clear, and returns focus
+ * to the input once pressed so keyboard users are not dropped to the page body.
+ *
+ * `type` and both icon slots are owned by this component; every other
+ * {@link Input} prop is passed through.
+ *
+ * @example
+ * ```tsx
+ * <Search
+ *   id="search"
+ *   value={query}
+ *   placeholder="Search"
+ *   onChange={setQuery}
+ * />
+ * ```
+ *
+ * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px
+ * @param [placeholder="Search..."] - Placeholder shown while the field is empty
+ * @param [withoutBorder=false] - Renders the field without its border and background
+ * @param [clearLabel="Clear search"] - Accessible name of the clear button
+ * @param [disabled=false] - Disables the field and hides the clear button
+ */
+export declare const Search: FC<SearchProps>;

package/dist/src/components/New/Select/MultiSelectTags.d.ts

@@ -0,0 +1,17 @@
+import { FC, MouseEvent } from 'react';
+import { SelectOption } from '../../../models/select';
+export interface MultiSelectTagsProps {
+    options: SelectOption[];
+    selectedValues: string[];
+    handleRemoveTag?: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void;
+}
+/**
+ * The selected values of a multi-select, rendered as removable tags inside the
+ * Design system 2.0
+ * field.
+ *
+ * @param options - All available options, used to resolve labels and icons
+ * @param selectedValues - Values currently selected
+ * @param [handleRemoveTag] - Called with the value whose tag was removed; when omitted the tags are not removable
+ */
+export declare const MultiSelectTags: FC<MultiSelectTagsProps>;