@epam/ai-dial-ui-kit 0.13.0-dev.39 → 0.13.0-dev.42

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

@@ -0,0 +1,35 @@
+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
+ *
+ * `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,32 @@
+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
+ *
+ * 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,68 @@
+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;
+    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
+ *
+ * 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 [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
+ */
+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-h2-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/Select/MultiSelectTags.d.ts

@@ -0,0 +1,16 @@
+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
+ * 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>;

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

@@ -0,0 +1,109 @@
+import { FC, MouseEvent, ReactNode, Ref } from 'react';
+import { LabelProps } from '../Label/Label';
+import { SelectOption } from '../../../models/select';
+import { ElementSize } from '../../../types/size';
+export interface SelectProps {
+    options: SelectOption[];
+    multiple?: boolean;
+    id?: string;
+    size?: ElementSize;
+    value?: string | string[];
+    customSelectedValue?: string;
+    prefix?: string;
+    defaultValue?: string | string[];
+    placeholder?: string;
+    labelProps?: LabelProps;
+    error?: string;
+    caption?: string;
+    ariaLabel?: string;
+    searchable?: boolean;
+    searchSize?: ElementSize;
+    searchPlaceholder?: string;
+    selectAll?: boolean;
+    selectAllLabel?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    emptyStateIcon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    fieldClassName?: string;
+    listClassName?: string;
+    closable?: boolean;
+    invalid?: boolean;
+    header?: ReactNode | (() => ReactNode);
+    footer?: ReactNode | (() => ReactNode);
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSearchQueryChange?: (query: string) => void;
+    dismissRef?: Ref<unknown>;
+    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+    onChange?: (next: string | string[]) => void;
+    onFooterClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    customMultiSelectTagsRenderer?: (options: SelectOption[], selectedValues: string[], handleRemoveTag: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void) => ReactNode;
+}
+/**
+ * A versatile select supporting single and multiple selections.
+ * aliases: OptionPicker|ChoiceSelector
+ *
+ * The field is an {@link Input}, so it carries the 2.0 field styling, sizes,
+ * label, caption and error states, and it exposes the control as a `combobox`
+ * whose popup is the option list.
+ *
+ * Single mode:
+ * - The field shows the selected option's leading icon + label.
+ * - In the list, the selected option is indicated by a LEFT border, a tinted background
+ *   and a trailing check icon.
+ *
+ * Multiple mode uses checkboxes (including Select All with indeterminate state) and
+ * renders the selection as removable tags inside the field.
+ *
+ * The field itself is never typeable: `searchable` puts a search field in the overlay
+ * header that filters the options.
+ *
+ * @example
+ * ```tsx
+ * <Select options={[{ value: 'option-1', label: 'Option 1' }]} />
+ * <Select searchable options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} />
+ * <Select multiple selectAll options={[{ value: '1', label: 'One' }, { value: '2', label: 'Two' }]} />
+ * <Select labelProps={{ label: 'Operator' }} caption="Pick a comparison" options={options} />
+ * ```
+ *
+ * @param options - Array of options to select from.
+ * @param [id] - The id of the field, linked to the label.
+ * @param [multiple] - Whether multiple selections are allowed.
+ * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px.
+ * @param [value] - Controlled selected value(s).
+ * @param [customSelectedValue] - Custom string to render as the selected value in single mode.
+ * @param [prefix] - Prefix for selected value(s).
+ * @param [defaultValue] - Uncontrolled initial selected value(s).
+ * @param [placeholder="Select..."] - Placeholder text when no selection is made.
+ * @param [labelProps] - Props of the {@link Label} rendered above the field.
+ * @param [error] - Error message rendered below the field (does not by itself apply error styling, pass `invalid` too).
+ * @param [caption] - Helper text rendered below the field when there is no `error`.
+ * @param [ariaLabel] - Accessible name for the field; use it when there is no visible label.
+ * @param [searchable=false] - Show a search field in the overlay header.
+ * @param [searchSize=ElementSize.Standard] - Size of the overlay search input when `searchable` is enabled.
+ * @param [searchPlaceholder] - Placeholder for the overlay search input.
+ * @param [selectAll=false] - Show a "Select All" checkbox in multiple mode.
+ * @param [selectAllLabel="Select all"] - Label for the "Select All" checkbox.
+ * @param [emptyStateTitle="No options available"] - Title text when there are no options.
+ * @param [emptyStateDescription] - Description text when there are no options.
+ * @param [emptyStateIcon] - Icon to display when there are no options.
+ * @param [invalid] - Whether the select is in an invalid state, affecting styling.
+ * @param [disabled=false] - Disable the control.
+ * @param [className] - Additional CSS classes for the outer container.
+ * @param [fieldClassName] - Additional CSS classes for the field itself.
+ * @param [listClassName] - Additional CSS classes for the list dropdown.
+ * @param [closable=false] - Show a close button in the dropdown header.
+ * @param [header] - Custom node/function rendered above the options.
+ * @param [footer] - Custom node/function rendered below the options.
+ * @param [open] - Controlled open state of the dropdown. When provided, makes the dropdown controlled.
+ * @param [onOpenChange] - Called when the dropdown open state changes.
+ * @param [onClose] - Called when the dropdown close button is clicked.
+ * @param [onChange] - Called when the selection changes.
+ * @param [onSearchQueryChange] - Called when the overlay search query changes, including the reset to `''` on close. Use it to fetch options for the query.
+ * @param [onFooterClick] - Called when the footer element is clicked. When provided, automatically closes the dropdown.
+ * @param [dismissRef] - Ref object to expose a `dismiss` method to programmatically close the select.
+ * @param [customMultiSelectTagsRenderer] - Renders the selected tags of a multi-select in place of the default ones.
+ */
+export declare const Select: FC<SelectProps>;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SelectOption } from '../../../models/select';
+export interface SelectSubMenuItemProps {
+    opt: SelectOption;
+    selectedValues: string[];
+    onSelect: (value: string) => void;
+}
+export declare const SelectSubMenuItem: FC<SelectSubMenuItemProps>;

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

@@ -0,0 +1,29 @@
+export declare const selectOverlayBaseClassName: string;
+export declare const selectOptionBaseClassName: string;
+export declare const selectOptionSelectedClassName = "bg-accent-primary-alpha";
+/**
+ * Holds the option list to the width of the field.
+ *
+ * `Dropdown` only pins the overlay's *min* width to the trigger and lets
+ * `max-width` run to the available viewport width — as an inline style, so a
+ * single long label stretches the list across the screen and only `!important`
+ * can rein it back in. `--reference-width` is the trigger width the dropdown
+ * publishes, and it is set whenever `matchReferenceWidth` is left on (the
+ * default this component relies on).
+ */
+export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]";
+export declare const selectOptionDisabledClassName = "opacity-75";
+export declare const dropdownMenuMaxHeight = 352;
+export declare const selectSubMenuGap = 4;
+/** Classes for the chevron rendered as the field's trailing icon. */
+export declare const selectFieldIconClassName = "text-secondary transition-transform";
+/**
+ * Number of options below which the overlay's search row stays hidden: a list
+ * short enough to scan at a glance does not need to be filtered.
+ */
+export declare const selectSearchThreshold = 8;
+export declare const selectSearchIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectCloseIcon: import("react/jsx-runtime").JSX.Element;
+/** Marks the selected option in single mode, alongside its tinted row. */
+export declare const selectOptionCheckIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectEmptyStateIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+/**
+ * Styling shared by the 2.0 floating surfaces — the dropdown menu and the select
+ * option list. They are the same object visually, so they read from one place
+ * rather than each keeping its own copy of the tokens.
+ */
+/** The floating panel itself: rounded raised card with a one-unit inset. */
+export declare const overlaySurfaceClassName = "rounded-xl bg-layer-raised p-1 shadow-md";
+/**
+ * A selectable row inside the panel. Keeps a visible focus ring: these rows are
+ * reached by keyboard, and the 1.0 versions suppressed the ring outright.
+ */
+export declare const overlayItemClassName: string;
+/** Tint marking the row that is currently selected. */
+export declare const overlayItemSelectedClassName = "bg-accent-primary-alpha";
+export declare const overlayItemDisabledClassName = "opacity-75";
+/** Distance between the trigger and its panel, and between nested panels. */
+export declare const overlayGap = 4;

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

@@ -1,28 +1,28 @@
 import { FC, HTMLAttributes, ReactNode } from 'react';
-import { DialSkeletonVariant, DialSkeletonAvatarSize, DialSkeletonAvatarShape } from '../../types/skeleton';
-export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+import { SkeletonVariant, SkeletonAvatarSize, SkeletonAvatarShape } from '../../types/skeleton';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     active?: boolean;
     paragraph?: boolean | {
         rows?: number;
         width?: string | string[];
     };
     avatar?: boolean | {
-        size?: number | DialSkeletonAvatarSize;
-        shape?: DialSkeletonAvatarShape;
+        size?: number | SkeletonAvatarSize;
+        shape?: SkeletonAvatarShape;
     };
     showTitle?: boolean | {
         width?: string;
     };
     loading?: boolean;
     children?: ReactNode;
-    variant?: DialSkeletonVariant;
+    variant?: SkeletonVariant;
     width?: string | number;
     height?: string | number;
     overlay?: ReactNode;
     color?: string;
 }
 /**
- * DialSkeleton
+ * Skeleton
  * aliases: PlaceholderUI|ShimmerLoader
  *
  * A placeholder component to show while content is loading.
@@ -31,16 +31,16 @@ export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * @example
  * ```tsx
  * // Simple skeleton
- * <DialSkeleton />
+ * <Skeleton />
  *
  * // Text skeleton with custom size
- * <DialSkeleton variant={DialSkeletonVariant.Text} width="200px" height="20px" />
+ * <Skeleton variant={SkeletonVariant.Text} width="200px" height="20px" />
  *
  * // Circular avatar skeleton
- * <DialSkeleton variant={DialSkeletonVariant.Circular} width={40} height={40} />
+ * <Skeleton variant={SkeletonVariant.Circular} width={40} height={40} />
  *
  * // Complex skeleton with avatar, showTitle and paragraph
- * <DialSkeleton
+ * <Skeleton
  *   avatar
  *   showTitle
  *   paragraph={{ rows: 3 }}
@@ -48,20 +48,20 @@ export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * />
  *
  * // Conditional loading
- * <DialSkeleton loading={isLoading}>
+ * <Skeleton loading={isLoading}>
  *   <div>Your content here</div>
- * </DialSkeleton>
+ * </Skeleton>
  *
  * // Custom paragraph widths
- * <DialSkeleton
+ * <Skeleton
  *   paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}
  * />
  *
  * // Avatar with size and shape
- * <DialSkeleton
+ * <Skeleton
  *   avatar={{
- *     size: DialSkeletonAvatarSize.Large,
- *     shape: DialSkeletonAvatarShape.Square
+ *     size: SkeletonAvatarSize.Large,
+ *     shape: SkeletonAvatarShape.Square
  *   }}
  * />
  * ```
@@ -72,11 +72,11 @@ export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * @param [showTitle=true] - Show title placeholder or configure its appearance
  * @param [loading=true] - Display the skeleton when true
  * @param [children] - Content to be displayed when loading is false
- * @param [variant=DialSkeletonVariant.Default] - Skeleton variant
+ * @param [variant=SkeletonVariant.Default] - Skeleton variant
  * @param [width] - Width of the skeleton
  * @param [height] - Height of the skeleton
  * @param [className] - Additional CSS classes
  * @param [overlay] - Content to overlay on top of the skeleton (e.g., a spinner)
  * @param [color] - Custom background color for the skeleton elements (overrides the default token)
  */
-export declare const DialSkeleton: FC<DialSkeletonProps>;
+export declare const Skeleton: FC<SkeletonProps>;

package/dist/src/components/Skeleton/utils.d.ts

@@ -1,2 +1,2 @@
-import { DialSkeletonAvatarSize } from '../../types/skeleton';
-export declare const getAvatarSize: (size?: number | DialSkeletonAvatarSize) => number;
+import { SkeletonAvatarSize } from '../../types/skeleton';
+export declare const getAvatarSize: (size?: number | SkeletonAvatarSize) => number;

package/dist/src/index.d.ts

@@ -46,7 +46,7 @@ export { DialFileName } from './components/FileName/FileName';
 export { DialFolderName } from './components/FolderName/FolderName';
 export { DialResizableContainer } from './components/ResizableContainer/ResizableContainer';
 export { DialConditionalResizableContainer } from './components/ResizableContainer/ConditionalResizableContainer';
-export { DialSkeleton } from './components/Skeleton/Skeleton';
+export { Skeleton } from './components/Skeleton/Skeleton';
 export { DialGrid } from './components/Grid/Grid';
 export type { DialGridProps } from './components/Grid/Grid';
 export { DialDateCellRenderer } from './components/Grid/renderers/DateCellRenderer';
@@ -101,6 +101,7 @@ export type { FileManagerGridRow } from './components/FileManager/FileManagerCon
 export type { GridOptions, ToolbarOptions, BulkActionsToolbarOptions, } from './components/FileManager/FileManager';
 export { DialDestinationFolderPopup } from './components/FileManager/components/DestinationFolderPopup/DestinationFolderPopup';
 export { DialFoldersTree } from './components/FileManager/components/FoldersTree/FoldersTree';
+export { EditorThemes } from './types/editor';
 export { ButtonVariant, ButtonAppearance } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';
 export { PopupSize } from './types/popup';
@@ -115,7 +116,7 @@ export { DialFileManagerTabs, DialFileManagerActions, FileManagerColumnKey, } fr
 export { FlexibleActionsDirection } from './types/flexible-actions';
 export { DialItemType } from './types/item';
 export { ResizableContainerSide } from './types/resizable-container';
-export { DialSkeletonVariant, DialSkeletonAvatarSize, DialSkeletonAvatarShape, } from './types/skeleton';
+export { SkeletonVariant, SkeletonAvatarSize, SkeletonAvatarShape, } from './types/skeleton';
 export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
 export { EDITABLE_CONTAINER_ATTRIBUTE, editableContainerProps, useEditableItem, } from './hooks/use-editable-item';
 export type { UseEditableItemOptions } from './hooks/use-editable-item';
@@ -165,8 +166,14 @@ export { FabButton } from './components/FabButton/FabButton';
 export type { FabButtonProps } from './components/FabButton/FabButton';
 export { ButtonDropdown } from './components/New/ButtonDropdown/ButtonDropdown';
 export type { ButtonDropdownProps } from './components/New/ButtonDropdown/ButtonDropdown';
+export type { MarkdownEditorProps } from './components/New/MarkdownEditor/MarkdownEditor';
+export declare const LazyMarkdownEditor: () => Promise<typeof import("./components/New/MarkdownEditor/MarkdownEditor")>;
 export { InlineSelect, InlineSelectTrigger, } from './components/New/InlineSelect/InlineSelect';
 export type { InlineSelectProps, InlineSelectTriggerProps, } from './components/New/InlineSelect/InlineSelect';
+export { Select } from './components/New/Select/Select';
+export type { SelectProps } from './components/New/Select/Select';
+export { MultiSelectTags } from './components/New/Select/MultiSelectTags';
+export type { MultiSelectTagsProps } from './components/New/Select/MultiSelectTags';
 export { InfoButton } from './components/New/InfoButton/InfoButton';
 export type { InfoButtonProps } from './components/New/InfoButton/InfoButton';
 export type { LabelProps } from './components/New/Label/Label';
@@ -174,6 +181,18 @@ export { Label } from './components/New/Label/Label';
 export { Textarea } from './components/New/Textarea/Textarea';
 export { Input } from './components/New/Input/Input';
 export type { InputProps } from './components/New/Input/Input';
+export { PasswordInput } from './components/New/PasswordInput/PasswordInput';
+export type { PasswordInputProps } from './components/New/PasswordInput/PasswordInput';
+export { NumberInput } from './components/New/NumberInput/NumberInput';
+export type { NumberInputProps } from './components/New/NumberInput/NumberInput';
+export { Popup } from './components/New/Popup/Popup';
+export type { PopupProps } from './components/New/Popup/Popup';
+export { CloseButton } from './components/New/CloseButton/CloseButton';
+export type { CloseButtonProps } from './components/New/CloseButton/CloseButton';
+export { ConfirmationPopup } from './components/New/ConfirmationPopup/ConfirmationPopup';
+export type { ConfirmationPopupProps } from './components/New/ConfirmationPopup/ConfirmationPopup';
+export { Dropdown } from './components/New/Dropdown/Dropdown';
+export type { DropdownProps } from './components/New/Dropdown/Dropdown';
 export type { TextareaProps } from './components/New/Textarea/Textarea';
 export type { CaptionTextProps } from './components/New/CaptionText/CaptionText';
 export { CaptionText, ErrorText, } from './components/New/CaptionText/CaptionText';

package/dist/src/types/skeleton.d.ts

@@ -1,15 +1,15 @@
-export declare enum DialSkeletonVariant {
+export declare enum SkeletonVariant {
     Default = "default",
     Text = "text",
     Circular = "circular",
     Rectangular = "rectangular"
 }
-export declare enum DialSkeletonAvatarSize {
+export declare enum SkeletonAvatarSize {
     Small = "small",
     Default = "default",
     Large = "large"
 }
-export declare enum DialSkeletonAvatarShape {
+export declare enum SkeletonAvatarShape {
     Circle = "circle",
     Square = "square"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.13.0-dev.39",
+  "version": "0.13.0-dev.42",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",